RELEASE 1.12

- Fixed some errors and typos (for label without an id assigned, leftover div tag, "\" instead of "/").
- Removed fontawesome dependency in favour of icomoon, a lightweight icon font-based library.
- Thanks to Juan, made it so the menu uses only CSS, without the need to call for jquery and app.js.
- Removed some useless CSS.

css/style.css

@@ -116,8 +116,8 @@ sup {
 .landing nav .my-cart a{
   position: relative;
 }
-.landing nav .my-cart svg{
+.landing nav .my-cart span{
-  width: 25px;
+  font-size: 1.35em;
   vertical-align: middle;
 }
 .landing nav .my-cart .cart-itemcounter {
@@ -151,6 +151,7 @@ sup {
 
 /* == MENU FORMATTING == */
 /* Menu button */
+/* update by Juan */
 .landing nav .menu {
   position: relative;
   color: #FFF;
@@ -167,25 +168,32 @@ sup {
   border-radius: 50%;
   cursor: pointer;
 }
-.landing nav .menu.active .menu-btn,
+#show-menu:checked ~ .menu-btn,
 .landing nav .menu .menu-btn:hover {
   color: #FFF;
   background: #000;
 }
 /* Transformation effects */
-.landing nav .menu:not(.active) .menu-item a{
+/* style depends on show menu being checked rather than active, this replaces js */
+#show-menu ~ .menu-body .menu-item a
+{
   transform: scale(0);
   transform-origin: 20px 20px;
-  transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
 }
-.landing nav .menu.active .menu-item a{
+#show-menu:checked ~ .menu-body
-  transform: scale(100%);
+{
+  display: flex;
+}
+#show-menu:checked ~ .menu-body .menu-item a
+{
+  transform: scale(1);
   transform-origin: 20px 20px;
   transition: transform 0.5s cubic-bezier(0.23, 1, 0.320, 1);
 }
-.landing nav .menu.active .menu-item:nth-child(1) a {transition-delay: 0.3s}
+
-.landing nav .menu.active .menu-item:nth-child(2) a {transition-delay: 0.2s}
+#show-menu:checked ~ .menu-body .menu-item:nth-child(1) a {transition-delay: 0.3s}
-.landing nav .menu.active .menu-item:nth-child(3) a {transition-delay: 0.1s}
+#show-menu:checked ~ .menu-body .menu-item:nth-child(2) a {transition-delay: 0.2s}
+#show-menu:checked ~ .menu-body .menu-item:nth-child(3) a {transition-delay: 0.1s}
 
 .landing nav .menu .menu-body {
   position: absolute;
@@ -204,11 +212,21 @@ sup {
   background: #000;
   border-radius: 50%;
 }
-/* Colour formatting */
+/* Colour formatting no need to depend on active */
-.landing nav .menu.active .menu-body .menu-item:nth-child(1) a:hover {background: #00a0a3}
+.landing nav .menu .menu-body .menu-item:nth-child(1) a:hover {background: #00a0a3}
-.landing nav .menu.active .menu-body .menu-item:nth-child(2) a:hover {background: #9b1f82}
+.landing nav .menu .menu-body .menu-item:nth-child(2) a:hover {background: #9b1f82}
-.landing nav .menu.active .menu-body .menu-item:nth-child(3) a:hover {background: #ed0959}
+.landing nav .menu .menu-body .menu-item:nth-child(3) a:hover {background: #ed0959}
-.landing nav .menu.active .menu-body .menu-item:nth-child(4) a:hover {background: #0073be}
+.landing nav .menu .menu-body .menu-item:nth-child(4) a:hover {background: #0073be}
+
+/* extra css so label behaves like a button */
+label.menu-btn
+{
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 50px;
+  text-align: center;
+}
+
 
 /* MAIN SECTION (NEWS + FORM) */
 .landing .news-container {
@@ -299,16 +317,14 @@ sup {
   appearance: none;
   cursor: pointer;
 }
-.landing .news-container form .select-wrapper svg {
+.landing .news-container form .select-wrapper span {
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
-  color: #555;
+  color: rgba(0, 0, 0, 0.3);
-  z-index: 100;
+  z-index: 1;
-}
+  pointer-events: none;
-.landing .news-container form select svg {
-  position: absolute;
 }
 .landing .news-container form button {
   width: 100%;
@@ -443,10 +459,11 @@ sup {
 .extra-infos li:not(:last-child) {
   border-right: solid 1px #E0E0E0;
 }
-.extra-infos li img {
+.extra-infos li span {
-  max-width: 50px;
+  font-size: 3.5em;
-  max-height: 50px;
+}
-  margin-bottom: .5rem;
+.extra-infos li p {
+  margin-top: 1.5rem;
 }
 
 /* =========== FREE TRIALS SECTION =========== */
@@ -716,6 +733,80 @@ footer .sitemap a:hover {
   background: #111;
 }
 
+/* =========== FONTS =========== */
+/* icomoon icons */
+@font-face {
+  font-family: 'icomoon';
+  src:  url('fonts/icomoon.eot?nab70s');
+  src:  url('fonts/icomoon.eot?nab70s#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?nab70s') format('truetype'),
+    url('fonts/icomoon.woff?nab70s') format('woff'),
+    url('fonts/icomoon.svg?nab70s#icomoon') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'icomoon' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-home:before {
+  content: "\e900";
+}
+.icon-cart:before {
+  content: "\e93a";
+}
+.icon-credit-card:before {
+  content: "\e93f";
+}
+.icon-envelop:before {
+  content: "\e945";
+}
+.icon-bubbles:before {
+  content: "\e96c";
+}
+.icon-user:before {
+  content: "\e971";
+}
+.icon-lock:before {
+  content: "\e98f";
+}
+.icon-trophy:before {
+  content: "\e99e";
+}
+.icon-loop2:before {
+  content: "\ea2e";
+}
+.icon-circle-down:before {
+  content: "\ea43";
+}
+.icon-facebook:before {
+  content: "\ea90";
+}
+.icon-twitter:before {
+  content: "\ea96";
+}
+.icon-youtube:before {
+  content: "\ea9d";
+}
+.icon-linkedin2:before {
+  content: "\eaca";
+}
+
+
+
+
 /* =========== MEDIA QUERIES =========== */
 
 /* LAPTOPS */
@@ -779,6 +870,9 @@ and (max-width : 1060px) {
   .product-list {
     justify-content: space-around;
   }
+  .extra-infos li {
+    padding: 0.5rem;
+  }
 }
 
 /* PHONES */

index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="fr">
 <head>
   <!-- Meta -->
     <title>Éditions Législatives</title>
@@ -16,10 +16,6 @@
     <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
   <!-- Stylesheets -->
     <link rel="stylesheet" type="text/css" href="./css/style.css">
-    <script src="https://kit.fontawesome.com/fc86bb0b54.js"></script>
-  <!-- jQuery -->
-    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
-    <script src="./js/app.js"></script>
 </head>
 <body>
 
@@ -35,32 +31,33 @@
     <nav>
       <div class="my-cart">
         <a href="#">
-          <i class="fas fa-shopping-cart fa-2x"></i>
+          <span class="icon-cart"></span>
           <div class="cart-itemcounter">2</div>
         </a>
       </div>
       <button type="button" class="login-btn">Connexion</button>
       <div class="menu">
-        <button type="button" class="menu-btn">Menu</button>
+        <input type="checkbox" hidden id="show-menu" />
+        <label class="menu-btn" for="show-menu">Menu</label>
         <ul class="menu-body">
           <li class="menu-item">
             <a href="#" title="Accueil">
-              <i class="fas fa-home"></i>
+              <span class="icon-home"></span>
             </a>
         </li>
           <li class="menu-item">
             <a href="#" title="Boutique">
-              <i class="fas fa-shopping-bag"></i>
+              <span class="icon-credit-card"></span>
             </a>
         </li>
           <li class="menu-item">
             <a href="#" title="Mon profil">
-              <i class="fas fa-user"></i>
+              <span class="icon-user"></span>
             </a>
         </li>
           <li class="menu-item">
             <a href="#" title="Nous contacter">
-              <i class="fas fa-paper-plane"></i>
+              <span class="icon-envelop"></span>
             </a>
         </li>
         </ul>
@@ -74,10 +71,10 @@
     </article>
     <form action="#">
       <label for="q">Une recherche ?</label>
-      <input name="q" type="text" placeholder="Ex: Fiche de paie, loi Macron...">
+      <input id="q" name="q" type="text" placeholder="Ex: Fiche de paie, loi Macron...">
       <div class="select-wrapper">
-        <i class="fas fa-sort-down"></i>
+        <span class="icon-circle-down"></span>
-        <select name="domain" aria-placeholder="Votre Domaine">
+        <select name="domain">
           <option value="void" disabled selected>Votre domaine</option>
           <option value="rh">Ressources humaines</option>
           <option value="staffrep">Représentant du personnel</option>
@@ -135,7 +132,7 @@
         <p>La réforme du code du travail : Ce qui change !</p>
         <footer>
           <a href="#">
-            <span><i class="fas fa-shopping-cart"></i> Ajouter au panier</span>
+            <span><span class="icon-cart"></span> Ajouter au panier</span>
           </a>
         </footer>
       </div>
@@ -164,19 +161,19 @@
   <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
   <ul>
     <li>
-      <img src="img\icons\doublearrow.svg" alt="satisfait ou remboursé icone">
+      <span class="icon-loop2"></span>
       <p>Satisfait ou remboursé pendant 2 semaines</p>
     </li>
     <li>
-      <img src="img\icons\medal.svg" alt="qualité et mise à jour icone">
+      <span class="icon-trophy"></span>
       <p>Qualité et mise à jour assurées par nos experts</p>
     </li>
     <li>
-      <img src="img\icons\speechbubble.svg" alt="réponse gratuite icone">
+      <span class="icon-bubbles"></span>
       <p>Réponse gratuite à toutes vos questions sur l’utilisation de nos produits</p>
     </li>
     <li>
-      <img src="img\icons\lock.svg" alt="sécurité de paiement icone">
+      <span class="icon-lock"></span>
       <p>Règlement par chèque, virement, ou CB sécurisé en ligne</p>
     </li>
   </ul>
@@ -230,7 +227,6 @@
   <footer>
     <a href="#">Toutes nos ressources à consulter <b>gratuitement</b></a>
   </footer>
-  </div>
 </div>
 
 <div class="newsletter">
@@ -251,10 +247,10 @@
       <address><a href="tel:0189786312">01 89 78 63 12</a></address>
     </div>
     <ul class="social-links">
-      <li><a href="facebook.com"><i class="fab fa-facebook-f"></i></a></li>
+      <li><a href="facebook.com"><span class="icon-facebook"></span></a></li>
-      <li><a href="twitter.com"><i class="fab fa-twitter"></i></a></li>
+      <li><a href="twitter.com"><span class="icon-twitter"></span></a></li>
-      <li><a href="linkedin.com"><i class="fab fa-linkedin-in"></i></a></li>
+      <li><a href="linkedin.com"><span class="icon-linkedin2"></span></a></li>
-      <li><a href="youtube.com"><i class="fab fa-youtube"></i></a></li>
+      <li><a href="youtube.com"><span class="icon-youtube"></span></a></li>
     </ul>
   </div>
   <div class="sitemap">