diff --git a/css/contacts_css.css b/css/contacts_css.css index ca67f6c..dc5a607 100644 --- a/css/contacts_css.css +++ b/css/contacts_css.css @@ -1,8 +1,7 @@ - .contact { text-align: center; - padding: 100px 20px; - max-width: 600px; + padding: 40px 20px; + width: 95%; margin: 0 auto; } @@ -22,6 +21,7 @@ form { display: flex; flex-direction: column; gap: 20px; + width: 100%; } .form-group { @@ -60,30 +60,114 @@ input:focus, textarea:focus, select:focus { } textarea { - resize: vertical; + resize: none; min-height: 120px; + max-height: 400px; + overflow-y: hidden; + transition: height 0.2s ease; } .character-count { position: absolute; - bottom: 5px; + bottom: 10px; right: 10px; font-size: 12px; color: #888; + background-color: rgba(51, 51, 51, 0.8); + padding: 2px 8px; + border-radius: 10px; + transition: bottom 0.2s ease; } -/* Style pour la checkbox */ +/* Style personnalisé pour la checkbox */ .checkbox-container { display: flex; align-items: center; + gap: 10px; cursor: pointer; font-size: 14px; color: #e0e0e0; - gap: 10px; + position: relative; + padding-left: 35px; +} + +/* Cacher la checkbox par défaut */ +.checkbox-container input[type="checkbox"] { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +/* Style pour la checkbox personnalisée */ +.checkmark { + position: absolute; + left: 0; + height: 25px; + width: 25px; + background-color: #333; + border: 2px solid #444; + border-radius: 5px; + transition: all 0.3s ease; +} + +/* Style au survol */ +.checkbox-container:hover .checkmark { + border-color: var(--accent-color); + box-shadow: 0 0 5px rgba(26, 188, 156, 0.3); } -.checkbox-container input { - width: auto; +/* Style quand la checkbox est cochée */ +.checkbox-container input:checked ~ .checkmark { + background-color: var(--accent-color); + border-color: var(--accent-color); +} + +/* Création de l'icône de validation */ +.checkmark:after { + content: ''; + position: absolute; + display: none; + left: 9px; + top: 5px; + width: 5px; + height: 10px; + border: solid white; + border-width: 0 2px 2px 0; + transform: rotate(45deg); + transition: all 0.2s ease; +} + +/* Afficher l'icône quand la checkbox est cochée */ +.checkbox-container input:checked ~ .checkmark:after { + display: block; + animation: checkmark 0.2s ease-in-out; +} + +/* Animation de l'icône de validation */ +@keyframes checkmark { + 0% { + opacity: 0; + transform: rotate(45deg) scale(0); + } + 100% { + opacity: 1; + transform: rotate(45deg) scale(1); + } +} + +/* Style pour la checkbox invalide */ +.checkbox-container input:invalid ~ .checkmark { + border-color: #e74c3c; + animation: shake 0.5s ease-in-out; +} + +/* Animation de secousse pour l'erreur */ +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 25% { transform: translateX(-5px); } + 75% { transform: translateX(5px); } } button[type="submit"] { @@ -132,6 +216,21 @@ button[type="submit"] .btn-icon { transform: translateY(-2px); } +@media (min-width: 576px) { + .contact { + width: 90%; + max-width: 500px; + padding: 60px 20px; + } +} + +@media (min-width: 768px) { + .contact { + max-width: 600px; + padding: 80px 20px; + } +} + @media (max-width: 768px) { .contact { padding: 80px 15px; @@ -182,4 +281,110 @@ button[type="submit"] .btn-icon { .contact-info { font-size: 12px; } + + .g-recaptcha { + transform: scale(0.85); + transform-origin: center; + margin: 10px 0; + } +} + +/* Style pour le reCAPTCHA */ +.g-recaptcha { + display: flex; + justify-content: center; + margin: 20px 0; +} + +/* Style pour les placeholders */ +::placeholder { + color: #666; + opacity: 0.7; + font-style: italic; +} + +/* Style pour Firefox */ +::-moz-placeholder { + color: #666; + opacity: 0.7; + font-style: italic; +} + +/* Style pour Edge */ +:-ms-input-placeholder { + color: #666; + opacity: 0.7; + font-style: italic; +} + +/* Animation au focus */ +input:focus::placeholder, +textarea:focus::placeholder { + opacity: 0.4; + transition: opacity 0.3s ease; +} + +/* Style pour le select et ses options */ +select { + appearance: none; + background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e"); + background-repeat: no-repeat; + background-position: right 1rem center; + background-size: 1em; + padding-right: 2.5rem; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +/* Style pour les options */ +select option { + background-color: #333; + color: #e0e0e0; + padding: 10px; + -webkit-appearance: none; + -moz-appearance: none; +} + +/* Suppression complète de l'effet de surlignage */ +select option:hover, +select option:focus, +select option:active, +select option:checked { + background: #333 !important; + background-color: #333 !important; + color: var(--accent-color) !important; + -webkit-appearance: none; + -moz-appearance: none; + -webkit-tap-highlight-color: transparent; +} + +/* Style spécifique pour Firefox */ +@-moz-document url-prefix() { + select option:hover, + select option:focus, + select option:active, + select option:checked { + background-color: #333 !important; + color: var(--accent-color) !important; + box-shadow: none !important; + } +} + +/* Style pour l'option disabled/placeholder */ +select option[disabled] { + color: #666; + font-style: italic; +} + +/* Style au focus du select */ +select:focus { + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 5px rgba(26, 188, 156, 0.3); +} + +/* Animation au hover du select */ +select:hover { + border-color: var(--accent-color); + transition: border-color 0.3s ease; } diff --git a/css/global.css b/css/global.css index 9875955..5bc7bca 100644 --- a/css/global.css +++ b/css/global.css @@ -1,4 +1,3 @@ -/* Réinitialisation et styles de base */ :root { --accent-color: #1abc9c; } @@ -434,4 +433,58 @@ h3 { .language-selector-container:hover::after { transform: translateY(-50%) rotate(180deg); +} + +/* Breakpoints standards */ +@media (min-width: 1400px) { + /* Grand écran */ + nav { + max-width: 1320px; + } +} + +@media (max-width: 1200px) { + /* Laptop */ + nav { + width: 90%; + } +} + +@media (max-width: 992px) { + /* Tablette large */ + nav ul { + gap: 1.5rem; + } + + nav h1 { + font-size: 20px; + } +} + +@media (max-width: 768px) { + /* Tablette */ + nav { + flex-direction: column; + gap: 1rem; + } + + nav ul { + flex-direction: column; + width: 100%; + text-align: center; + gap: 1rem; + } + + .nav-controls { + width: 100%; + justify-content: center; + } +} + +@media (max-width: 576px) { + /* Mobile */ + section { + width: 95%; + margin: 50px auto; + } } \ No newline at end of file diff --git a/css/projet_css.css b/css/projet_css.css index 59acf61..79ed359 100644 --- a/css/projet_css.css +++ b/css/projet_css.css @@ -4,22 +4,21 @@ } .project-list { - display: flex; - flex-wrap: wrap; + display: grid; + grid-template-columns: 1fr; gap: 20px; - justify-content: center; - margin-top: 20px; /* Réduction de la marge supérieure de 40px à 20px */ + padding: 20px; } .project-card { background-color: #1f1f1f; padding: 20px; border-radius: 10px; - width: 300px; + width: 100%; color: #e0e0e0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); text-align: left; - margin: 15px; + margin: 0; transition: all 0.3s ease; position: relative; } @@ -113,4 +112,16 @@ padding: 6px 10px; font-size: 12px; } +} + +@media (min-width: 576px) { + .project-list { + grid-template-columns: repeat(2, 1fr); + } +} + +@media (min-width: 992px) { + .project-list { + grid-template-columns: repeat(3, 1fr); + } } \ No newline at end of file diff --git a/documents/Cv_fr.pdf b/documents/Cv_fr.pdf index 460314f..e04ba0a 100644 Binary files a/documents/Cv_fr.pdf and b/documents/Cv_fr.pdf differ diff --git a/html/about.html b/html/about.html index d4a0a20..4e56340 100644 --- a/html/about.html +++ b/html/about.html @@ -14,7 +14,7 @@