TEC : Animations menu

2025-05-19 16:55:24 +02:00
parent 4790a20238
commit bb2f00a9a8
3 changed files with 156 additions and 135 deletions
--- a/class.css
+++ b/class.css
@@ -6,12 +6,11 @@
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
-  column-gap: 2em;
+  column-gap: 0.7rem;
  justify-content: center; 
  align-items: center;
  background-color: #CC4331;
-  margin: auto;
-  padding: 0.7rem 1rem;
+  padding: 1rem 1rem;
  color: #F9E7DB;
  z-index: 100;
  font-size: 11px;
--- a/index.html
+++ b/index.html
@@ -25,6 +25,8 @@
 </head>

 <body>
+
+    <header class="header">
        <div class="contact">
            <div>Tel : 06.......... </div>
            <div>
@@ -36,7 +38,6 @@
                Email : c.pasteuravocate@gmail.com
            </div>
        </div>
-        <header class="header">
        <a href="index.html" class="logo">
            <img src="assets/img/logo.png" alt="Logo - Charline Pasteur Avocate">
            Charline Pasteur, Avocate
--- a/navigation.css
+++ b/navigation.css
@@ -1,9 +1,7 @@
-/* Style pour le header et la navigation */
+/* Style pour le header */
 .header {
    background-color: #F9E7DB;
-    box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
    position: fixed;
-    top:40px;
    width: 100%;
    z-index: 3;
    align-items: center;
@@ -22,6 +20,29 @@
    padding: 0.5rem;
    border-right: 1px solid #F9E7DB;
    text-decoration: none;
+    
+}
+
+.header li a {
+  position: relative;
+  text-decoration: none;
+  color: inherit;
+  padding-bottom: 4px; /* pour éviter que la ligne touche le texte */
+}
+
+.header li a::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 0%;
+  height: 2px;
+  background-color: #CC4331;
+  transition: width 0.3s ease;
+}
+
+.header li a:hover::after {
+  width: 100%;
 }

 .header li a:hover,
@@ -118,7 +139,7 @@
    top: 0;
 }

-/* Styles pour les écrans plus petits (téléphones) */
+/* Styles pour les écrans plus grand (hors téléphones) */
@media (min-width: 48em) {

  .header {