TEC : CSS padding

TEC : Animations menu
2025-05-19 21:18:47 +02:00 · 2025-05-19 16:55:24 +02:00
4 changed files with 177 additions and 152 deletions
--- a/class.css
+++ b/class.css
@@ -1,22 +1,4 @@
 /* Style de la bannière */
-.contact {
-  top: 0;
-  position: fixed;
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  row-gap: 10px;
-  column-gap: 2em;
-  justify-content: center; 
-  align-items: center;
-  background-color: #CC4331;
-  margin: auto;
-  padding: 0.7rem 1rem;
-  color: #F9E7DB;
-  z-index: 100;
-  font-size: 11px;
-}
-
 .banner {
  margin-top: 3rem;
  background-size: contain;
@@ -73,8 +55,12 @@
  align-self: flex-end;
  font-style: italic;
 }
+
 /* Style pour téléphone portable*/
@media (max-width: 48em) {
+  .banner {
+    min-height: 40vh;
+  }

  .presentation {
    flex-direction: column;
--- 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,24 @@
-/* Style pour le header et la navigation */
+/* Style pour le header */
+.contact {
+  top: 0;
+  position: fixed;
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 10px;
+  column-gap: 0.7rem;
+  justify-content: center;
+  align-items: center;
+  background-color: #CC4331;
+  padding: 1rem 1rem;
+  color: #F9E7DB;
+  z-index: 100;
+  font-size: 11px;
+}
+
 .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 +37,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 +156,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 {
--- a/style.css
+++ b/style.css
@@ -9,7 +9,7 @@ body {
 }

 main {
-  padding: 2rem;
+  padding: 0 1rem;
  margin: 0 auto;
 }
Author	SHA1	Message	Date
Anthony Mahe	23f9b448b4	TEC : CSS padding	2025-05-19 21:18:47 +02:00
Anthony Mahe	bb2f00a9a8	TEC : Animations menu	2025-05-19 16:55:24 +02:00