bannière en img, sans css

assistance-educative

@@ -41,7 +41,8 @@
             <div class="nav-phone">
                 <div class="logo">
                     <a href="/">
-                       <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261" alt="Logo - Charline Pasteur Avocate">
+                        <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261"
+                            alt="Logo - Charline Pasteur Avocate">
                         <span>Charline Pasteur, Avocate</span>
                     </a>
                 </div>
@@ -64,7 +65,7 @@
                 <!-- Tablette -->
                 <ul class="menu" id="menuM">
                     <li><a href="/">Accueil</a></li>
-                    <li><a href="assistance-educative"  class="active">Assistance éducative</a></li>
+                    <li><a href="assistance-educative" class="active">Assistance éducative</a></li>
                     <li><a href="droit-penal-mineur">Droit pénal des mineurs</a></li>
                     <li><a href="droit-education">Droit de l'éducation</a></li>
                     <li><a href="droit-etrangers">Droit des étrangers</a></li>
@@ -79,8 +80,13 @@
             </nav>
         </div>
     </header>
-    <div class="banner banner-assistance-educative">
+    <section class="banner">
-    </div>
+        <picture>
+            <!-- Image pour desktop -->
+            <img src="assets/img/avocat-assistance-educative-charline-pasteur.webp"
+                alt="Avocate spécialisée en droit des enfants à Nantes" class="banner-img" width="1920" height="1425">
+        </picture>
+    </section>
     <main>
         <section id="assistance">
             <h1>Assistance éducative</h1>

class.css

@@ -66,9 +66,6 @@
   .banner {
     min-height: 50vh;
   }
-
-  .banner-accueil {
-  background-image: url('assets/img/charline-pasteur-banniere.webp');
 }
 
   .presentation {

contact

@@ -40,7 +40,8 @@
             <div class="nav-phone">
                 <div class="logo">
                     <a href="/">
-                       <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261" alt="Logo - Charline Pasteur Avocate">
+                        <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261"
+                            alt="Logo - Charline Pasteur Avocate">
                         <span>Charline Pasteur, Avocate</span>
                     </a>
                 </div>
@@ -78,8 +79,15 @@
             </nav>
         </div>
     </header>
-    <div class="banner banner-accueil">
+    <section class="banner">
-    </div>
+        <picture>
+            <!-- Image pour mobile -->
+            <source srcset="assets/img/avocat-droit-enfants-charline-pasteur-mobile.webp" media="(max-width: 849px)">
+            <!-- Image pour desktop -->
+            <img src="assets/img/avocat-droit-enfants-charline-pasteur.webp"
+                alt="Avocate spécialisée en droit des enfants à Nantes" class="banner-img" width="1920" height="803">
+        </picture>
+    </section>
     <main>
         <div>
             <h1>Contact</h1>
@@ -97,7 +105,7 @@
                 width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"
                 referrerpolicy="no-referrer-when-downgrade"></iframe>
         </section>
-         <section class="section-contact">
+        <section class="section-contact">
             <div class="btn-container">
                 <a href="contact" class="btn-contact">Contact</a>
                 <a href="tel:0685985645" class="btn-phone">0685985645</a>

droit-education

@@ -40,7 +40,8 @@
             <div class="nav-phone">
                 <div class="logo">
                     <a href="/">
-                       <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261" alt="Logo - Charline Pasteur Avocate">
+                        <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261"
+                            alt="Logo - Charline Pasteur Avocate">
                         <span>Charline Pasteur, Avocate</span>
                     </a>
                 </div>
@@ -55,7 +56,7 @@
                     <li><a href="/">Accueil</a></li>
                     <li><a href="assistance-educative">Assistance éducative</a></li>
                     <li><a href="droit-penal-mineur">Droit pénal des mineurs</a></li>
-                    <li><a href="droit-education"  class="active">Droit de l'éducation</a></li>
+                    <li><a href="droit-education" class="active">Droit de l'éducation</a></li>
                     <li><a href="droit-etrangers">Droit des étrangers</a></li>
                     <li><a href="honoraires">Honoraires</a></li>
                     <li><a href="contact">Contact</a></li>
@@ -65,7 +66,7 @@
                     <li><a href="/">Accueil</a></li>
                     <li><a href="assistance-educative">Assistance éducative</a></li>
                     <li><a href="droit-penal-mineur">Droit pénal des mineurs</a></li>
-                    <li><a href="droit-education"  class="active">Droit de l'éducation</a></li>
+                    <li><a href="droit-education" class="active">Droit de l'éducation</a></li>
                     <li><a href="droit-etrangers">Droit des étrangers</a></li>
                     <li class="dropdown">
                         <span class="dropdown-label">Autre ⏷</span>
@@ -78,8 +79,15 @@
             </nav>
         </div>
     </header>
-    <div class="banner banner-droit-education">
+    <section class="banner">
-    </div>
+        <picture>
+            <!-- Image pour mobile -->
+            <source srcset="assets/img/avocat-droit-education-charline-pasteur.webp" media="(max-width: 849px)">
+            <!-- Image pour desktop -->
+            <img src="assets/img/avocat-droit-education-charline-pasteur.webp"
+                alt="Avocate spécialisée en droit des enfants à Nantes" class="banner-img" width="1920" height="1425">
+        </picture>
+    </section>
     <main>
         <section id="droit-education">
             <h1>Droit de l'éducation</h1>

droit-etrangers

@@ -78,8 +78,15 @@
             </nav>
         </div>
     </header>
-    <div class="banner banner-droit-etrangers">
+    <section class="banner">
-    </div>
+        <picture>
+            <!-- Image pour mobile -->
+            <source srcset="assets/img/avocat-droit-etrangers-charline-pasteur.webp" media="(max-width: 849px)">
+            <!-- Image pour desktop -->
+            <img src="assets/img/avocat-droit-etrangers-charline-pasteur.webp" alt="Avocate spécialisée en droit des enfants à Nantes"
+                class="banner-img" width="1920" height="1425">
+        </picture>
+    </section>
     <main>
         <section id="droit-etrangers">
             <h1>Droit des étrangers</h1>

droit-penal-mineur

@@ -40,7 +40,8 @@
             <div class="nav-phone">
                 <div class="logo">
                     <a href="/">
-                       <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261" alt="Logo - Charline Pasteur Avocate">
+                        <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261"
+                            alt="Logo - Charline Pasteur Avocate">
                         <span>Charline Pasteur, Avocate</span>
                     </a>
                 </div>
@@ -78,8 +79,15 @@
             </nav>
         </div>
     </header>
-    <div class="banner banner-droit-penal-mineur">
+    <section class="banner">
-    </div>
+        <picture>
+            <!-- Image pour mobile -->
+            <source srcset="assets/img/avocat-droit-penal-mineur-charline-pasteur.webp" media="(max-width: 849px)">
+            <!-- Image pour desktop -->
+            <img src="assets/img/avocat-droit-penal-mineur-charline-pasteur.webp"
+                alt="Avocate spécialisée en droit des enfants à Nantes" class="banner-img" width="1920" height="1425">
+        </picture>
+    </section>
     <main>
         <section id="droit-penal-mineur">
             <h1>Droit pénal des mineurs</h1>

honoraires

@@ -38,7 +38,8 @@
             <div class="nav-phone">
                 <div class="logo">
                     <a href="/">
-                       <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261" alt="Logo - Charline Pasteur Avocate">
+                        <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261"
+                            alt="Logo - Charline Pasteur Avocate">
                         <span>Charline Pasteur, Avocate</span>
                     </a>
                 </div>
@@ -76,8 +77,15 @@
             </nav>
         </div>
     </header>
-    <div class="banner banner-accueil">
+    <section class="banner">
-    </div>
+        <picture>
+            <!-- Image pour mobile -->
+            <source srcset="assets/img/avocat-droit-enfants-charline-pasteur-mobile.webp" media="(max-width: 849px)">
+            <!-- Image pour desktop -->
+            <img src="assets/img/avocat-droit-enfants-charline-pasteur.webp"
+                alt="Avocate spécialisée en droit des enfants à Nantes" class="banner-img" width="1920" height="803">
+        </picture>
+    </section>
     <main>
         <section id="honoraires">
             <h1>Honoraires</h1>

index.html

@@ -94,8 +94,15 @@
             </nav>
         </div>
     </header>
-    <div class="banner banner-accueil">
+    <section class="banner">
-    </div>
+        <picture>
+            <!-- Image pour mobile -->
+            <source srcset="assets/img/avocat-droit-enfants-charline-pasteur-mobile.webp" media="(max-width: 849px)">
+            <!-- Image pour desktop -->
+            <img src="assets/img/avocat-droit-enfants-charline-pasteur.webp"
+                alt="Avocate spécialisée en droit des enfants à Nantes" class="banner-img" width="1920" height="803">
+        </picture>
+    </section>
     <main>
         <section id="accueil">
             <div class="">
@@ -129,15 +136,20 @@
                     </p>
                     <p>La justice des mineurs étant une justice spécialisée, j'ai souhaité me former davantage à
                         travers une année de formation en 2022/2023 auprès de l'Université de Bordeaux m'ayant permis
-                        d'obtenir le Diplôme Universitaire « Protection de l'Enfance ».
+                        d'obtenir le <a href="https://cerfaps.u-bordeaux.fr/Formations/DU-Protection-de-l-enfance2"
+                            target="_blank" rel="noopener noreferrer"></a>>Diplôme Universitaire « Protection de
+                        l'Enfance ».</a>
                     </p>
-                    <p>J'ai également obtenu le certificat de spécialisation « Droit des enfants » en décembre
+                    <p>J'ai également obtenu le certificat de <a
+                            href="https://www.lexbase.fr/revues-juridiques/73266644-breves-droit-des-enfants-la-nouvelle-mention-de-specialisation-pour-les-avocats#:~:text=Selon%20elle%2C%20l%27obtention%20d,inscrirait%20pleinement%20dans%20cette%20%C3%A9volution."
+                            target="_blank" rel="noopener noreferrer"></a>>spécialisation « Droit des enfants »</a> en
+                        décembre
                         2024 me permettant aujourd'hui d'exercer comme avocate spécialiste.
                     </p>
-                    <p>Je pratique ainsi les contentieux de l’<a href="assistance-educative">assistance éducative</a>,
+                    <p>Je pratique ainsi les contentieux de l'<a href="assistance-educative">assistance éducative</a>,
                         du
                         <a href="droit-penal-mineur">droit pénal des mineurs</a>, du
-                        <a href="droit-education">droit de la famille et de l’éducation</a>.
+                        <a href="droit-education">droit de la famille et de l'éducation</a>.
                         J'interviens également en <a href="droit-etrangers">droit des étrangers</a>.
                     </p>
                     <p>Je suis membre de l'Association de Défense du droit des mineurs à Nantes et j'anime la commission
@@ -154,32 +166,40 @@
                 </div>
             </div>
         </section>
-
         <section id="domaines">
             <h2>Domaines d'intervention</h2>
             <ul class="cards-list">
                 <li>
-                    <a href="assistance-educative" class="card-assistance">
+                    <a href="assistance-educative" class="card">
+                        <img src="assets/img/avocat-assistance-educative-charline-pasteur.webp" alt="Assistance éducative - Avocat à Nantes"
+                            class="card-img" width="250" height="250" loading="lazy">
                         <h3>Assistance éducative</h3>
                     </a>
                 </li>
                 <li>
-                    <a href="droit-penal-mineur" class="card-penal">
+                    <a href="droit-penal-mineur" class="card">
+                        <img src="assets/img/avocat-droit-penal-mineur-charline-pasteur.webp" alt="Droit pénal des mineurs - Avocat à Nantes"
+                            class="card-img" width="250" height="250" loading="lazy">
                         <h3>Droit pénal des mineurs</h3>
                     </a>
                 </li>
                 <li>
-                    <a href="droit-education" class="card-education">
+                    <a href="droit-education" class="card">
+                        <img src="assets/img/avocat-droit-education-charline-pasteur.webp" alt="Droit de l'éducation - Avocat à Nantes"
+                            class="card-img" width="250" height="250" loading="lazy">
                         <h3>Droit de l'éducation</h3>
                     </a>
                 </li>
                 <li>
-                    <a href="droit-etrangers" class="card-etrangers">
+                    <a href="droit-etrangers" class="card">
+                        <img src="assets/img/avocat-droit-etrangers-charline-pasteur.webp" alt="Droit des étrangers - Avocat à Nantes"
+                            class="card-img" width="250" height="250" loading="lazy">
                         <h3>Droit des étrangers</h3>
                     </a>
                 </li>
             </ul>
         </section>
+      
         <section class="section-contact">
             <div class="btn-container">
                 <a href="contact" class="btn-contact">Contact</a>

mentions

@@ -38,7 +38,8 @@
             <div class="nav-phone">
                 <div class="logo">
                     <a href="/">
-                       <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261" alt="Logo - Charline Pasteur Avocate">
+                        <img src="assets/img/logo-charline-pasteur-avocate.webp" width="363" height="261"
+                            alt="Logo - Charline Pasteur Avocate">
                         <span>Charline Pasteur, Avocate</span>
                     </a>
                 </div>
@@ -60,7 +61,7 @@
                 </ul>
                 <!-- Tablette -->
                 <ul class="menu" id="menuM">
-                    <li><a href="/" >Accueil</a></li>
+                    <li><a href="/">Accueil</a></li>
                     <li><a href="assistance-educative">Assistance éducative</a></li>
                     <li><a href="droit-penal-mineur">Droit pénal des mineurs</a></li>
                     <li><a href="droit-education">Droit de l'éducation</a></li>
@@ -76,8 +77,15 @@
             </nav>
         </div>
     </header>
-    <div class="banner banner-accueil">
+    <section class="banner">
-    </div>
+        <picture>
+            <!-- Image pour mobile -->
+            <source srcset="assets/img/avocat-droit-enfants-charline-pasteur-mobile.webp" media="(max-width: 849px)">
+            <!-- Image pour desktop -->
+            <img src="assets/img/avocat-droit-enfants-charline-pasteur.webp"
+                alt="Avocate spécialisée en droit des enfants à Nantes" class="banner-img" width="1920" height="803">
+        </picture>
+    </section>
     <main>
         <section id="mentions">
             <h1>Mentions légales</h1>