Version 2. Ajout du JavaScript

Kamalags24 · Jul 3, 2024 · 7e9643b · 7e9643b
1 parent 3dd26f7
commit 7e9643b
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 18 deletions.
diff --git a/Assets/CSS/style.css b/Assets/CSS/style.css
@@ -10,6 +10,16 @@ body {
     font-family: Arial, Helvetica, sans-serif;
 }
 
+a {
+    text-decoration: none;
+    color: white;
+}
+
+a:hover {
+    background-color: #6b9482;
+    color: #35414f;
+}
+
 /* Style de l'entête */
 
 header {
@@ -29,28 +39,31 @@ header {
     display: flex;
     justify-content: space-around;
     align-items: center;
+    text-align: center;
+    margin: 0 auto;
     height: 100px;
-    width: 100%;
+    width: 50%;
     color: white;
     border: 1px solid white;
+    border-radius: 10px;
 }
 
 .navbar ul li {
     list-style: none;
 
 }
 
-.navbar ul li a {
-    text-decoration: none;
-    color: white;
-}
-
 header p {
     display: flex;
     justify-content: center;
     margin-top: 50px;
 }
 
+header .second-p {
+    text-align: center;
+    padding-bottom: 50px;
+}
+
 header h1 {
     text-align: center;
 }
@@ -93,7 +106,8 @@ main {
     height: 70px;
 }
 
-.third-section img {
+.third-section img,
+ .fourth-section img {
     width: 50%;
     height: 50%;
 }
@@ -104,13 +118,18 @@ main {
     background-color: #548975;
 }
 
-.third-section {
+.third-section,
+.fourth-section {
     display: flex;
     justify-content: space-around;
     gap: 10px;
     padding: 20px;
 }
 
+#fourth-section {
+    display: none;
+}
+
 main button {
     width: 15%;
     height: 30px;

diff --git a/Assets/JS/script.js b/Assets/JS/script.js
@@ -0,0 +1,19 @@
+// Recupération du boutton more et de son contenu pour l'afficher et le faire disparaitre avec toogle
+    let more = document.getElementById('more');
+    let less = document.getElementById('less');
+    let moreContent = document.getElementById('fourth-section');
+
+    more.addEventListener('click', () => {
+        moreContent.style.display = 'block';
+        more.style.display = 'none';
+        less.style.display = 'inline';
+    });
+
+    less.addEventListener('click', () => {
+        moreContent.style.display = 'none';
+        more.style.display = 'inline';
+        less.style.display = 'none';
+    });
+    // more.addEventListener('click', function(){
+    //     moreContent.style.display = 'block';
+    // });
diff --git a/index.html b/index.html
@@ -18,7 +18,7 @@
         </nav>
         <p><img src="../site_web_espace/Assets/Images/logoipsum-291.svg" alt="Logo de l'entreprise"></p>
         <h1>Welcome to our website</h1>
-        <p>Our website is awesome</p>
+        <p class="second-p">Our website is awesome</p>
     </header>
 
     <main>
@@ -66,7 +66,26 @@ <h2>LOREM IPSUM</h2>
                 <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, perferendis!</p>
             </article>
         </div>
-        <button>More</button>
+
+        <!-- Quatrième section lié au bouton More -->
+         <div style="display: none;" id="fourth-section">
+             <div class="fourth-section">
+                <article>
+                    <p><img src="./Assets/Images/Repeat.jpg" alt="Images pour chaque section"></p>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, perferendis!</p>
+                </article>
+                <article>
+                    <p><img src="./Assets/Images/Repeat.jpg" alt="Images pour chaque section"></p>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, perferendis!</p>
+                </article>
+                <article>
+                    <p><img src="./Assets/Images/Repeat.jpg" alt="Images pour chaque section"></p>
+                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium, perferendis!</p>
+                </article>
+             </div>
+         </div>
+        <button id="more">More</button>
+        <button id="less" style="display: none;">Less</button>
     </main>
 
     <footer>
@@ -76,22 +95,22 @@ <h3>Contact</h3>
                 <div class="footer-contact">
                     <div class="lot1">
                         <div>
-                            <p class="Icone-footer"><img src="./Assets/Images/home_24dp_FILL0_wght400_GRAD0_opsz24.png" alt="Icone de l'adresse"></p>
-                            <figcaption>Adresse</figcaption>
+                            <p class="Icone-footer"><a href=""><img src="./Assets/Images/home_24dp_FILL0_wght400_GRAD0_opsz24.png" alt="Icone de l'adresse"></a></p>
+                            <figcaption><a href="">Adresse</a></figcaption>
                         </div>
                         <div>
-                            <p class="Icone-footer"><img src="./Assets/Images/mode_comment_24dp_FILL0_wght400_GRAD0_opsz24.png" alt="Icone de message"></p>
-                            <figcaption>Social</figcaption>
+                            <p class="Icone-footer"><a href=""><img src="./Assets/Images/mode_comment_24dp_FILL0_wght400_GRAD0_opsz24.png" alt="Icone de message"></a></p>
+                            <figcaption><a href="">Social</a></figcaption>
                         </div>
                     </div>
                     <div class="lot2">
                         <div>
-                            <p class="Icone-footer"><img src="./Assets/Images/mail_24dp_FILL0_wght400_GRAD0_opsz24.png" alt="Icone de mail"></p>
-                            <figcaption>Email</figcaption>
+                            <p class="Icone-footer"><a href=""><img src="./Assets/Images/mail_24dp_FILL0_wght400_GRAD0_opsz24.png" alt="Icone de mail"></a></p>
+                            <figcaption><a href="">Email</a></figcaption>
                         </div>
                         <div>
-                            <p class="Icone-footer"><img src="./Assets/Images/phone_iphone_24dp_FILL0_wght400_GRAD0_opsz24.png" alt="Icone de telephone"></p>
-                            <figcaption>Phone</figcaption>
+                            <p class="Icone-footer"><a href=""><img src="./Assets/Images/phone_iphone_24dp_FILL0_wght400_GRAD0_opsz24.png" alt="Icone de telephone"></a></p>
+                            <figcaption><a href="">Phone</a></figcaption>
                         </div>
                     </div>
                 </div>
@@ -110,5 +129,7 @@ <h3>GET IN TOUCH</h3>
         <p>Copyright. All Rights Reserved</p>
 
     </footer>
+
+    <script src="./Assets/JS/script.js"></script>
 </body>
 </html>