From 8503827e8281be10ae30a325f653f26762be6171 Mon Sep 17 00:00:00 2001 From: Freitas_Enzo Date: Thu, 11 Dec 2025 15:58:02 +0000 Subject: [PATCH] =?UTF-8?q?T=C3=A9l=C3=A9verser=20les=20fichiers=20vers=20?= =?UTF-8?q?"/"?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- script.js | 7 +++ style.css | 175 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 182 insertions(+) create mode 100644 script.js create mode 100644 style.css diff --git a/script.js b/script.js new file mode 100644 index 0000000..961cdfa --- /dev/null +++ b/script.js @@ -0,0 +1,7 @@ +const form = document.querySelector('.contact-form'); + +form.addEventListener('submit', function(e) { + e.preventDefault(); + alert('Merci pour votre message !'); + form.reset(); +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..cdcc371 --- /dev/null +++ b/style.css @@ -0,0 +1,175 @@ +body { + margin: 0; + font-family: Arial, sans-serif; + background: #0d0d0d; + color: #f0f0f0; +} + +header { + background: #1a1a1a; + box-shadow: 0 2px 8px rgba(255,255,255,0.1); + padding: 20px 40px; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + font-size: 22px; + font-weight: bold; + color: white; +} + +.nav-links { + list-style: none; + display: flex; + gap: 25px; + margin: 0; + padding: 0; +} + +.nav-links a { + color: #fff; + text-decoration: none; + font-weight: bold; +} + + +.hero { + height: 60vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: linear-gradient(135deg, #4b0082, #000); + text-align: center; +} + +.section { + text-align: center; + margin-top: 80px; + margin-bottom: 80px; +} + +.projects { + display: flex; + flex-direction: column; + align-items: center; + gap: 30px; + margin-top: 30px; +} + +.card { + background: #1a1a1a; + padding: 20px; + width: 250px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.card:hover { + transform: translateY(-5px); + box-shadow: 0 6px 18px rgba(255, 255, 255, 0.15); +} + +.card h3 { + margin-top: 0; + color: #9d4edd; +} + +.project-link { + all: unset; + display: inline-block; + cursor: pointer; +} + +.project-link:hover .card { + transform: translateY(-5px); + box-shadow: 0 6px 18px rgba(255, 255, 255, 0.2); +} +.skills { + display: flex; + flex-direction: column; + gap: 30px; + margin-top: 30px; + align-items: center; +} + +.skill-category { + background: #1a1a1a; + padding: 20px; + width: 260px; + min-height: 230px; + border-radius: 12px; + box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1); + text-align: center; + + display: flex; + flex-direction: column; + justify-content: flex-start; +} + +.skill-category h3 { + color: #9d4edd; + margin-top: 0; +} + +.skill-category ul { + list-style: none; + padding: 0; + margin: 12px 0 0 0; +} + +.skill-category li { + margin: 8px 0; +} + +@media (min-width: 800px) { + .skills { + flex-direction: row; + justify-content: center; + align-items: flex-start; + } +} + +.contact-form { + display: flex; + flex-direction: column; + gap: 15px; + max-width: 450px; + margin: 40px auto 0 auto; +} + +.contact-form input, +.contact-form textarea { + padding: 12px; + border-radius: 8px; + border: none; + background: #1a1a1a; + color: #f0f0f0; + font-size: 16px; +} + +.contact-form textarea { + height: 120px; + resize: none; +} + +.contact-form button { + background-color: #9d4edd; + color: #fff; + padding: 12px; + border: none; + border-radius: 8px; + cursor: pointer; + font-weight: bold; + transition: background 0.2s ease; +} + +.contact-form button:hover { + background-color: #7a2bc1; +} \ No newline at end of file