|
|
|
@ -17,60 +17,60 @@
|
|
|
|
|
})();
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
<body class="bg-gray-50 text-gray-800">
|
|
|
|
|
<header>
|
|
|
|
|
<!-- Navigation -->
|
|
|
|
|
<nav class="navbar">
|
|
|
|
|
<ul class="navbar-list">
|
|
|
|
|
<li><a href="index.html">Accueil</a></li>
|
|
|
|
|
<li><a href="cursus.html">Cursus</a></li>
|
|
|
|
|
<li class="dropdown">
|
|
|
|
|
<a href="#">Technique</a>
|
|
|
|
|
<ul class="dropdown-content">
|
|
|
|
|
<li><a href="projets.html">Projets</a></li>
|
|
|
|
|
<li><a href="competences.html">Compétences</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li><a href="form.html">Contact</a></li>
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="theme-switch">
|
|
|
|
|
<span class="slider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
<!-- Contact Form -->
|
|
|
|
|
|
|
|
|
|
<form id="contact-form" class="container mx-auto mt-10 px-4">
|
|
|
|
|
<div class="max-w-md mx-auto px-8 py-6 bg-gray-800 rounded-lg shadow-lg">
|
|
|
|
|
<h2 class="text-2xl font-semibold text-white mb-4">Contact Us</h2>
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<label class="block text-white mb-1" for="name">Your Name</label>
|
|
|
|
|
<input class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
|
|
|
|
|
type="text" name="name" id="name" required>
|
|
|
|
|
<body class="bg-gray-50 text-gray-800">
|
|
|
|
|
<header>
|
|
|
|
|
<!-- Navigation -->
|
|
|
|
|
<nav class="navbar">
|
|
|
|
|
<ul class="navbar-list">
|
|
|
|
|
<li><a href="index.html">Accueil</a></li>
|
|
|
|
|
<li><a href="cursus.html">Cursus</a></li>
|
|
|
|
|
<li class="dropdown">
|
|
|
|
|
<a href="#">Technique</a>
|
|
|
|
|
<ul class="dropdown-content">
|
|
|
|
|
<li><a href="projets.html">Projets</a></li>
|
|
|
|
|
<li><a href="competences.html">Compétences</a></li>
|
|
|
|
|
</ul>
|
|
|
|
|
</li>
|
|
|
|
|
<li><a href="form.html">Contact</a></li>
|
|
|
|
|
<label class="switch">
|
|
|
|
|
<input type="checkbox" id="theme-switch">
|
|
|
|
|
<span class="slider"></span>
|
|
|
|
|
</label>
|
|
|
|
|
</ul>
|
|
|
|
|
</nav>
|
|
|
|
|
</header>
|
|
|
|
|
<!-- Contact Form -->
|
|
|
|
|
|
|
|
|
|
<form id="contact-form" class="container mx-auto mt-10 px-4">
|
|
|
|
|
<div class="max-w-md mx-auto px-8 py-6 bg-gray-800 rounded-lg shadow-lg">
|
|
|
|
|
<h2 class="text-2xl font-semibold text-white mb-4">Contact Us</h2>
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<label class="block text-white mb-1" for="name">Your Name</label>
|
|
|
|
|
<input class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
|
|
|
|
|
type="text" name="name" id="name" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<label class="block text-white mb-1" for="email">Your Email</label>
|
|
|
|
|
<input class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
|
|
|
|
|
type="email" name="email" id="email" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<label class="block text-white mb-1" for="message">Your Message</label>
|
|
|
|
|
<textarea class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
|
|
|
|
|
name="message" id="message" rows="4" required></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="w-full bg-yellow-300 text-gray-800 py-2 rounded-lg hover:bg-yellow-400 transition"
|
|
|
|
|
type="submit">Send Message</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<label class="block text-white mb-1" for="email">Your Email</label>
|
|
|
|
|
<input class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
|
|
|
|
|
type="email" name="email" id="email" required>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<label class="block text-white mb-1" for="message">Your Message</label>
|
|
|
|
|
<textarea class="w-full px-4 py-2 bg-gray-700 rounded-lg focus:ring-2 focus:ring-yellow-300 transition"
|
|
|
|
|
name="message" id="message" rows="4" required></textarea>
|
|
|
|
|
</div>
|
|
|
|
|
<button class="w-full bg-yellow-300 text-gray-800 py-2 rounded-lg hover:bg-yellow-400 transition"
|
|
|
|
|
type="submit">Send Message</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
<p id="response-message" class="hidden text-center mt-4 text-white"></p>
|
|
|
|
|
</form>
|
|
|
|
|
<p id="response-message" class="hidden text-center mt-4 text-white"></p>
|
|
|
|
|
|
|
|
|
|
<!-- External JS -->
|
|
|
|
|
<script src="form-handler.js"></script>
|
|
|
|
|
<footer>
|
|
|
|
|
<p>© 2025 Corentin Caillot. Tous droits réservés.</p>
|
|
|
|
|
<p>📧 Contactez-moi : <a href="mailto:contact@corentincaillot.com">contact@corentincaillot.com</a></p>
|
|
|
|
|
<p><a href="https://github.com/">GitHub</a> | <a href="https://linkedin.com/">LinkedIn</a></p>
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
<!-- External JS -->
|
|
|
|
|
<script src="form-handler.js"></script>
|
|
|
|
|
<footer>
|
|
|
|
|
<p>© 2025 Corentin Caillot. Tous droits réservés.</p>
|
|
|
|
|
<p>📧 Contactez-moi : <a href="mailto:contact@corentincaillot.com">contact@corentincaillot.com</a></p>
|
|
|
|
|
<!--<p><a href="https://github.com/">GitHub</a> | <a href="https://linkedin.com/">LinkedIn</a></p>-->
|
|
|
|
|
</footer>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|