responsive 100% font, colors etc added footer and header integrated

MelissaOlas · Oct 7, 2021 · 271f888 · 271f888
1 parent 895551b
commit 271f888
Show file tree

Hide file tree

Showing 16 changed files with 282 additions and 249 deletions.
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@ Liste des fichiers :
 * Page d'accueil : "index.html"
 * Pages établissements : "place.html", "pouce.html", "soif.html", 
 * Simulateur : "surprise.html"
-* A propos : "a-propos.html"
+* A propos : "propos.html"
 * Favoris : "favoris.html"
 
 Breaking points : 

diff --git a/assets/placeholder.jpeg b/assets/placeholder.jpeg
diff --git a/assets/placeholder1.jpg b/assets/placeholder1.jpg
diff --git a/assets/placeholder2.jpeg b/assets/placeholder2.jpeg
diff --git a/assets/placeholder3.jpeg b/assets/placeholder3.jpeg
diff --git a/media/team.jpg → assets/team.jpg b/media/team.jpg → assets/team.jpg
diff --git a/media/team1.jpg → assets/team1.jpg b/media/team1.jpg → assets/team1.jpg
diff --git a/media/team2.jpg → assets/team2.jpg b/media/team2.jpg → assets/team2.jpg
diff --git a/media/team3.jpeg → assets/team3.jpeg b/media/team3.jpeg → assets/team3.jpeg
diff --git a/media/team4.jpg → assets/team4.jpg b/media/team4.jpg → assets/team4.jpg
diff --git a/media/team5.jpg → assets/team5.jpg b/media/team5.jpg → assets/team5.jpg
diff --git a/media/team6.png → assets/team6.png b/media/team6.png → assets/team6.png
diff --git a/media/placeholder.jpeg b/media/placeholder.jpeg
diff --git a/propos.html b/propos.html
@@ -1,21 +1,32 @@
 <!doctype html>
 <html lang=en>
 <head>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&family=Stick+No+Bills&display=swap" rel="stylesheet">
 <meta charset=utf-8>
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title id="title">A Propos</title>
 <link rel="stylesheet" href="proposstyle.css">
 </head>
 <body>
-    <header>
-        <ul>
-            <li><a href="#surprendsmoi">SURPRENDS-MOI</a></li>
-            <li><a href="#jaisoif">J’AI SOIF</a></li>
-            <li><a href="#surlepouce">SUR LE POUCE</a></li>
-            <li><a href="#surplace">SUR PLACE</a></li>
-          </ul>
+
+  <header>
+
+    <div class="topnav" id="myTopnav">
+                <a href="index.html"><img class="wild-logo" src="./assets/Wild-advisor-logo.png" alt="Wild advisor"></a>
+                <a href="index.html">Accueil</a>
+                <a href="place.html">Sur place</a>
+                <a href="pouce.html">Sur le pouce</a>
+                <a href="soif.html">J'ai soif</a>
+                <a href="surprise.html">Surprends-moi</a>
+                <a href="favoris.html">Favoris</a>
+                <a href="javascript:void(0);" class="icon" onclick="myFunction()"><img class="burger" src="./assets/Hamburger_icon.png" alt="Hamburger icon"></a>
+            </div>
     </header>
+
+
     <h1>A Propos</h1>
     <h2>Le Project </h2>
     <p class="leproject">Nombreux sont les Wilders à ne pas savoir quoi ni où aller 
@@ -29,45 +40,48 @@ <h2>Le Project </h2>
        notre simulateur vous proposera aussi une excuse bidon pour convaincre votre 
        formateur de votre bonne foi (ou pas…)
       </p>
+
     <h3>L’équipe</h3>
-    <div class="name-block">
-<p>Melissa Olas
-   </p>
-    </div>
-    <div id="margenuno" class="name-block">
-      <p>
-        Etienne Fromentin
-      </p>
-          </div>
-          <div class="name-block">
-            <p>Maria Elisa Cruz </p>
-                </div>
-    <div id="teamfont" class="teamone">
-    <img class="photouno" src="/media/team1.jpg" alt="teammember 1">
+
+    <div id="block1" class="block1">
+
+      <div class="bloqueuno" id="bloque">
+    <img class="photouno" src="/assets/team1.jpg" alt="teammember 1" style="width:80%">
     <div class="teamuno">Melissa Olas</div>
-    <img class="photodos" src="/media/team2.jpg" alt="teammember 2">
+    </div>
+
+    <div class="bloqueuno" id="bloque">
+    <img class="photo" src="/assets/team2.jpg" alt="teammember 2" style="width:80%">
+    <div class="nombre">Etienne Fromentin</div>
+  </div>
+
+  <div class="bloqueuno" id="bloque">
+    <img class="photo"src="/assets/team3.jpeg" alt="teammember 3" style="width: 80%">
+    <div class="nombre">Maria Elisa Cruz</div>
+    </div>
+    </div>
+
+   <div id="block2" class="block2">
+
+    <div class="bloquedos" id="bloque2">
+    <img class="photocuatro" src="/assets/team4.jpg" alt="teammember 4" style="width:80%">
     <div class="teamcuatro">Matthieu Lemarchand</div>
-    <img class="phototres"src="/media/team3.jpeg" alt="teammember 3">
-    <div class="teamdos">Etienne Fromentin</div>
     </div>
-    <div class="name-block">
-      <p>Matthieu Lemarchand</p>
-          </div>
-          <div class="name-block" id="margendos">
-            <p>Vincent Lejeune</p>
-                </div>
-                <div class="name-block">
-                  <p>Juan Carlos Cobas </p>
-                      </div>
-   <div id="teamfontdos" class="teamtwo">
-    <img class="photocuatro" src="/media/team4.jpg" alt="teammember 4">
-    <div class="teamtres">Maria Elisa Cruz</div>
-    <img class="photocinco"src="/media/team5.jpg" alt="teammember 5">
-    <div class="teamcinco">Vincent Lejeune</div>
-    <img class="photoseis"src="/media/team6.png" alt="teammember 6">
-    <div class="teamseis">Juan Carlos Cobas</div>
+
+    <div class="bloquedos" id="bloque2">
+    <img class="photo"src="/assets/team5.jpg" alt="teammember 5" style="width:80%">
+    <div class="nombre">Vincent Lejeune</div>
+    </div>
+
+    <div class="bloquedos" id="bloque2">
+    <img class="photo"src="/assets/team6.png" alt="teammember 6" style="width:80%">
+    <div class="nombre">Juan Carlos Cobas</div>
+    </div>
   </div>
+</div>
+
   <h4>Nous Contacter</h4>
+
   <div id="contact" class="contact">
     <div class="contact-inner content center">
         <form action="" method="POST">
@@ -88,10 +102,9 @@ <h4>Nous Contacter</h4>
             </div>
           </form>
   </div>
-</div>
-<footer> 
-  <p class="textfooter">A propos</p>
-</footer>
+
 <script src="propos.js"></script>
+
+<footer class="footer"><a href='./a-propos.html'>À propos</a></footer>
 </body>
 </html>
diff --git a/propos.js b/propos.js
@@ -1,20 +1,32 @@
-const textO = document.getElementsByClassName('teamuno');
-const profileP = document.getElementsByClassName('photouno');
 
-const textOdos = document.getElementsByClassName('teamdos');
-const profilePdos = document.getElementsByClassName('photodos');
+// JS SPECIFIQUE AU HEADER
+function myFunction() {
+  var x = document.getElementById("myTopnav");
+  if (x.className === "topnav") {
+    x.className += " responsive";
+  } else {
+    x.className = "topnav";
+  }
+} 
 
-const textOtres = document.getElementsByClassName('teamtres');
-const profilePtres = document.getElementsByClassName('phototres');
 
-const textOcuatro = document.getElementsByClassName('teamcuatro');
-const profilePcuatro = document.getElementsByClassName('photocuatro');
+// const textO = document.getElementsByClassName('teamuno');
+// const profileP = document.getElementsByClassName('photouno');
 
-const textOcinco = document.getElementsByClassName('teamcinco');
-const profilePcinco = document.getElementsByClassName('photocinco');
+// const textOdos = document.getElementsByClassName('teamdos');
+// const profilePdos = document.getElementsByClassName('photodos');
 
-const textOseis = document.getElementsByClassName('teamseis');
-const profilePseis = document.getElementsByClassName('photoseis');
+// const textOtres = document.getElementsByClassName('teamtres');
+// const profilePtres = document.getElementsByClassName('phototres');
+
+// const textOcuatro = document.getElementsByClassName('teamcuatro');
+// const profilePcuatro = document.getElementsByClassName('photocuatro');
+
+// const textOcinco = document.getElementsByClassName('teamcinco');
+// const profilePcinco = document.getElementsByClassName('photocinco');
+
+// const textOseis = document.getElementsByClassName('teamseis');
+// const profilePseis = document.getElementsByClassName('photoseis');
 
 profileP[0].addEventListener('click', () => {
     if(textO[0].style.display !== "inline") {
@@ -25,21 +37,21 @@ profileP[0].addEventListener('click', () => {
   });
 
 
-profilePdos[0].addEventListener('click', () => {
-    if(textOdos[0].style.display !== "inline") {
-        textOdos[0].style.display = "inline"
-    } else {
-    textOdos[0].style.display = "none"
-    }
-  });
+// profilePdos[0].addEventListener('click', () => {
+//     if(textOdos[0].style.display !== "inline") {
+//         textOdos[0].style.display = "inline"
+//     } else {
+//     textOdos[0].style.display = "none"
+//     }
+//   });
 
-  profilePtres[0].addEventListener('click', () => {
-    if(textOtres[0].style.display !== "inline") {
-        textOtres[0].style.display = "inline"
-    } else {
-    textOtres[0].style.display = "none"
-    }
-  });
+//   profilePtres[0].addEventListener('click', () => {
+//     if(textOtres[0].style.display !== "inline") {
+//         textOtres[0].style.display = "inline"
+//     } else {
+//     textOtres[0].style.display = "none"
+//     }
+//   });
 
   profilePcuatro[0].addEventListener('click', () => {
     if(textOcuatro[0].style.display !== "inline") {
@@ -49,18 +61,18 @@ profilePdos[0].addEventListener('click', () => {
     }
   });
 
-  profilePcinco[0].addEventListener('click', () => {
-    if(textOcinco[0].style.display !== "inline") {
-        textOcinco[0].style.display = "inline"
-    } else {
-    textOcinco[0].style.display = "none"
-    }
-  });
+//   profilePcinco[0].addEventListener('click', () => {
+//     if(textOcinco[0].style.display !== "inline") {
+//         textOcinco[0].style.display = "inline"
+//     } else {
+//     textOcinco[0].style.display = "none"
+//     }
+//   });
 
-  profilePseis[0].addEventListener('click', () => {
-    if(textOseis[0].style.display !== "inline") {
-        textOseis[0].style.display = "inline"
-    } else {
-    textOseis[0].style.display = "none"
-    }
-  });
+//   profilePseis[0].addEventListener('click', () => {
+//     if(textOseis[0].style.display !== "inline") {
+//         textOseis[0].style.display = "inline"
+//     } else {
+//     textOseis[0].style.display = "none"
+//     }
+//   });