RELEASE 1.0

Finished the menu, mobile versions and animations.

css/style.css

@@ -62,6 +62,7 @@ p {
 b {
   font-weight: 600;
 }
+/* Superscript */
 sup {
   vertical-align: super;
   font-size: 70%;
@@ -95,15 +96,15 @@ sup {
   margin-left: 2.5rem;
 }
 /* Phone Number */
-.landing nav .phone {
+.landing .phone {
   display: flex;
   align-items: center;
 }
-.landing nav .phone address {
+.landing .phone address {
   font-size: 0.95em;
   font-weight: 600;
 }
-.landing nav .phone .free-tooltip {
+.landing .phone .free-tooltip {
   margin-left: 10px;
   padding: 2px 5px;
   font-size: 0.75em;
@@ -135,6 +136,8 @@ sup {
 /* Log in button */
 .landing nav .login-btn {
   padding: 10px 25px;
+  font-size: 0.75em;
+  font-weight: 600;
   color: #111;
   background: #FFF;
   border-radius: 25px;
@@ -147,19 +150,70 @@ sup {
     background: #111;
     transition: color 0.2s cubic-bezier(0.77, 0, 0.175, 1), background 0.2s cubic-bezier(0.77, 0, 0.175, 1);
   }
+
+/* == MENU FORMATTING == */
 /* Menu button */
+.landing nav .menu {
+  position: relative;
+  color: #FFF;
+  border-radius: 50%;
+}
 .landing nav .menu-btn {
-  width: 40px;
+  width: 50px;
-  height: 40px;
+  height: 50px;
   font-size: 0.65em;
   font-weight: 600;
-  color: #FFF;
+  color: #000;
-  background: #000;
+  background: #FFF;
   border: none;
-  border-radius: 25px;
+  border-radius: 50%;
   cursor: pointer;
 }
+.landing nav .menu.active .menu-btn,
+.landing nav .menu .menu-btn:hover {
+  color: #FFF;
+  background: #000;
+}
 
+/* Transformation effects */
+.landing nav .menu:not(.active) .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{
+  transform: scale(100%);
+  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}
+.landing nav .menu.active .menu-item:nth-child(3) a {transition-delay: 0.1s}
+
+.landing nav .menu .menu-body {
+  position: absolute;
+  right: 0;
+  margin-top: 10px;
+  display: flex;
+  text-align: center;
+}
+.landing nav .menu .menu-body .menu-item a {
+  width: 40px;
+  height: 40px;
+  position: relative;
+  margin-right: 15px;
+  display: block;
+  line-height: 40px;
+  background: #000;
+  border-radius: 50%;
+}
+
+
+/* Colour formatting */
+.landing nav .menu.active .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.active .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}
 
 /* MAIN SECTION (NEWS + FORM) */
 .landing .news-container {
@@ -226,10 +280,35 @@ sup {
   min-width: 300px;
   margin: 0.5rem 0;
   padding: 10px 14px;
-  color: #a7a7a7;
+  color: #555;
+  background: #FFF;
   border: solid 1px rgba(0, 0, 0, 0.1);
   border-radius: 16px;
 }
+.landing .news-container form .select-wrapper {
+  position: relative;
+}
+.landing .news-container form select {
+  position: relative;
+  -webkit-appearance: none; 
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
+}
+.landing .news-container form .select-wrapper svg {
+  position: absolute;
+  top: 50%;
+  right: 10px;
+  transform: translateY(-50%);
+  color: #555;
+  z-index: 100;
+}
+.landing .news-container form select[disabled] {
+  color: red !important;
+}
+.landing .news-container form select svg {
+  position: absolute;
+}
 .landing .news-container form button {
   width: 100%;
   margin-top: 0.5rem;
@@ -448,7 +527,7 @@ sup {
   cursor: pointer;
 }
 .newsletter form button:hover {
-  background: #46cfd1;
+  background: #32a44d;
 }
 
 /* =========== FOOTER SECTION =========== */
@@ -614,6 +693,11 @@ footer .sitemap a:hover {
   padding: 10px 20px;
   border-radius: 20px;
 }
+.ourproducts > footer a:hover,
+.freetrials > footer a:hover {
+  color: #FFF;
+  background: #111;
+}
 
 /* =========== MEDIA QUERIES =========== */
 
@@ -682,7 +766,7 @@ and (max-width : 1060px) {
 
 /* PHONES */
 @media only screen
-and (max-width : 700px) {
+and (max-width : 750px) {
   /* Fixes the main padding */
   body > *:not(footer),
   .contact-info,
@@ -692,20 +776,20 @@ and (max-width : 700px) {
   }
   /* LANDING */
   /* Hiding irrelevant things */
-  .landing nav .phone,
+  .landing .phone,
   .landing nav .login-btn,
   .landing .news-container form {
     display: none;
   }
   .landing {
     min-height: 100vh;
-    padding: 2.5rem 1rem;
+    padding: 2.5rem;
   }
   .landing .news-container {
     margin-top: 4rem;
   }
   .landing .news-container article {
-    padding: 1.5rem 3rem 2.5rem 2rem;
+    padding: 3rem 4rem;
   }
   .landing .news-container article:after {
     top: 0;
@@ -730,7 +814,7 @@ and (max-width : 700px) {
 
   /* FREE TRIALS */
   .freetrials {
-    padding: 2rem 1rem;
+    padding: 2rem;
     background: #00a0a3;
   }
   .freetrials > header {
@@ -755,9 +839,13 @@ and (max-width : 700px) {
   }
   .product-card {
     margin-bottom: 1.5rem;
-    padding: 1rem 5vw 1.5rem;
+    padding: 1.5rem 12vw;
     border: none;
-    border-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+  .freetrials .product-card {
+    border-top-right-radius: 50px;
+    border-bottom-left-radius: 50px;
   }
   .ourproducts > footer a,
   .freetrials > footer a {
@@ -796,6 +884,29 @@ and (max-width : 700px) {
   }
 }
 
+/* SM PHONES */
+@media only screen
+and (max-width : 420px) {
+  .my-cart {
+    display: none;
+  }
+  .landing .news-container article {
+    padding: 2rem 2.5rem;
+  }
+  .ourproducts > footer a, .freetrials > footer a {
+    width: 90%;
+  }
+  .newsletter,
+  footer .sitemap {
+    padding: 2rem 0.5rem;
+  }
+  .newsletter form input,
+  .newsletter form button {
+    padding: 15px;
+  }
+}
+
+
 @media only screen
 and (max-width : 1069px)
 and (min-width : 700px) {

index.html

@@ -17,6 +17,9 @@
   <!-- 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>
 
@@ -25,11 +28,11 @@
     <div>
       <a href="#"><img src="img/EL-logo.png" class="logo" alt="éditions législatives logo"></a>
     </div>
+    <div class="phone">
+      <address><a href="tel:0189786312">01 89 78 63 12</a></address>
+      <b class="free-tooltip">Gratuit</b>
+    </div>
     <nav>
-      <div class="phone">
-        <address><a href="tel:0189786312">01 89 78 63 12</a></address>
-        <b class="free-tooltip">Gratuit</b>
-      </div>
       <div class="my-cart">
         <a href="#">
           <i class="fas fa-shopping-cart fa-2x"></i>
@@ -37,7 +40,31 @@
         </a>
       </div>
       <button type="button" class="login-btn">Connexion</button>
-      <button type="button" class="menu-btn">Menu</button>
+      <div class="menu">
+        <button type="button" class="menu-btn">Menu</button>
+        <ul class="menu-body">
+          <li class="menu-item">
+            <a href="#" title="Accueil">
+              <i class="fas fa-home"></i>
+            </a>
+        </li>
+          <li class="menu-item">
+            <a href="#" title="Boutique">
+              <i class="fas fa-shopping-bag"></i>
+            </a>
+        </li>
+          <li class="menu-item">
+            <a href="#" title="Mon profil">
+              <i class="fas fa-user"></i>
+            </a>
+        </li>
+          <li class="menu-item">
+            <a href="#" title="Nous contacter">
+              <i class="fas fa-paper-plane"></i>
+            </a>
+        </li>
+        </ul>
+      </div>
     </nav>
   </header>
   <div class="news-container">
@@ -48,16 +75,19 @@
     <form action="#">
       <label for="q">Une recherche ?</label>
       <input name="q" type="text" placeholder="Ex: Fiche de paie, loi Macron...">
-      <select name="domain">
+      <div class="select-wrapper">
-        <option value="" disabled selected>Votre domaine</option>
+        <i class="fas fa-sort-down"></i>
-        <option value="">Ressources humaines</option>
+        <select name="domain" aria-placeholder="Votre Domaine">
-        <option value="">Représentant du personnel</option>
+          <option value="void" disabled selected>Votre domaine</option>
-        <option value="">Expert comptable</option>
+          <option value="rh">Ressources humaines</option>
-        <option value="">Avocat et direction juridique</option>
+          <option value="staffrep">Représentant du personnel</option>
-        <option value="">Ressources humaines</option>
+          <option value="accountant">Expert comptable</option>
-        <option value="">Ressources humaines</option>
+          <option value="lawyers">Avocat et direction juridique</option>
-        <option value="">Ressources humaines</option>
+          <option value="HSE">HSE</option>
-      </select>
+          <option value="regions">Collectivités territoriales</option>
+          <option value="housing">Immobilier</option>
+        </select>
+      </div>
       <div>
         <button type="submit">Rechercher</button>
       </div>

js/app.js

@@ -0,0 +1,6 @@
+$(document).ready(() => {
+  // Toggles the menu
+  $('.menu-btn').click(() => {
+    $('.menu').toggleClass('active');
+  })
+})