58 lines
3.2 KiB
HTML
58 lines
3.2 KiB
HTML
<section class="section">
|
|
<h1>Contactez-moi</h1>
|
|
<p>Vous avez un projet en tête ou une question? N'hésitez pas à me contacter en utilisant le formulaire ci-dessous.</p>
|
|
</section>
|
|
|
|
<section class="section contact-page">
|
|
<form style="margin-top: 1rem;">
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<label for="name" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Nom</label>
|
|
<input type="text" id="name" name="name" placeholder="Votre nom" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<label for="email" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Email</label>
|
|
<input type="email" id="email" name="email" placeholder="Votre adresse email" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<label for="subject" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Sujet</label>
|
|
<input type="text" id="subject" name="subject" placeholder="Sujet de votre message" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem;">
|
|
</div>
|
|
|
|
<div style="margin-bottom: 1.5rem;">
|
|
<label for="message" style="display: block; margin-bottom: 0.5rem; font-weight: 500;">Message</label>
|
|
<textarea id="message" name="message" rows="5" placeholder="Votre message" style="width: 100%; padding: 0.75rem; border: 1px solid #e0e0e0; border-radius: var(--border-radius); font-family: inherit; font-size: 1rem; resize: vertical;"></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn" style="border: none; cursor: pointer;">Envoyer le message</button>
|
|
</form>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Autres moyens de contact</h2>
|
|
<div style="display: flex; flex-wrap: wrap; gap: 2rem; margin-top: 1.5rem;">
|
|
<div style="flex: 1 1 250px;">
|
|
<h3>Email</h3>
|
|
<p><a href="" data-page="externe" data-id="email"></a></p>
|
|
</div>
|
|
<div style="flex: 1 1 250px;">
|
|
<h3>Téléphone</h3>
|
|
<p data-id="phone">+33 6 XX XX XX XX</p>
|
|
</div>
|
|
<div style="flex: 1 1 250px;">
|
|
<h3>Réseaux sociaux</h3>
|
|
<div style="display: flex; gap: 1rem; margin-top: 0.5rem;">
|
|
<a href="#" style="text-decoration: none;" data-page="externe" data-id="linkedin">LinkedIn</a>
|
|
<a href="#" style="text-decoration: none;" data-page="externe" data-id="twitter">Twitter</a>
|
|
<a href="#" style="text-decoration: none;" data-page="externe" data-id="github">GitHub</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<h2>Disponibilité</h2>
|
|
<p>Je suis actuellement disponible pour des projets freelance à temps partiel.</p>
|
|
<p>N'hésitez pas à me contacter pour discuter de votre projet et obtenir un devis personnalisé.</p>
|
|
</section>
|