|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<link type="text/css" rel="stylesheet" href="style.css?v=1.0">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<script src="effect.js" defer></script>
|
|
|
<script src="toggle.js"></script>
|
|
|
<title>Contact Form</title>
|
|
|
<!-- Tailwind CSS -->
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<!-- EmailJS SDK -->
|
|
|
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
|
|
|
<script>
|
|
|
(function() {
|
|
|
emailjs.init("BC9iUxDzXQ4MMHpAT"); // Replace with your EmailJS public key
|
|
|
})();
|
|
|
</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>
|
|
|
</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>
|
|
|
|
|
|
<!-- External JS -->
|
|
|
<script src="form-handler.js"></script>
|
|
|
<footer class="footer_index">
|
|
|
<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> |
