Merge pull request #1 from AlexisNP/BETA-1.0

BETA 1.0

css/style.css

@@ -1,4 +1,4 @@
-/* CSS RESET */
+/* CSS RESETS */
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
   margin: 0;
   padding: 0;
@@ -6,12 +6,493 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+select, input, textarea {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+}
+ul {
+  list-style-type: none;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button:focus,
+input:focus {
+  outline: none;
 }
 
-body{
+/* === GENERAL RULES === */
+body {
+  font-family: 'Open Sans', serif;
+  color: #111;
+}
+body > *:not(footer),
+.contact-info,
+.sitemap {
+  padding-right: 17%;
+  padding-left: 17%;
+}
+h1 {
+  font-size: 1.3em;
+  font-weight: 600;
+}
+p {
+  font-size: 0.92em;
+  font-weight: 400;
+}
+b {
+  font-weight: 600;
+}
+sup {
+  vertical-align: super;
+  font-size: 70%;
+}
+input, textarea {
   font-family: 'Open Sans', serif;
 }
 
-img{
-  width: 20px;
+
+/* =========== LANDING SECTION =========== */
+.landing {
+  min-height: 90vh;
+  padding-top: 2.5rem;
+  padding-bottom: 5rem;
+  background: url("../img/landing-background.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+
+/* HEADER */
+.landing header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.logo {
+  max-width: 150px;
+}
+.landing nav {
+  display: flex;
+  align-items: center;
+}
+.landing nav > * {
+  margin-left: 2.5rem;
+}
+/* Phone Number */
+.landing nav .phone {
+  display: flex;
+  align-items: center;
+}
+.landing nav .phone address {
+  font-size: 0.95em;
+  font-weight: 600;
+}
+.landing nav .phone .free-tooltip {
+  margin-left: 10px;
+  padding: 2px 5px;
+  font-size: 0.75em;
+  color: #FFF;
+  background: #00a0a3;
+  border-radius: 10px;
+}
+/* My Cart */
+.landing nav .my-cart a{
+  position: relative;
+}
+.landing nav .my-cart svg{
+  width: 25px;
+  vertical-align: middle;
+}
+  .landing nav .my-cart .cart-itemcounter {
+    position: absolute;
+    top: -5px;
+    right: -5px;
+    width: 15px;
+    height: 15px;
+    font-size: 0.7em;
+    font-weight: 600;
+    text-align: center;
+    color: #FFF;
+    background: #ed0959;
+    border-radius: 50%;
+  }
+/* Log in button */
+.landing nav .login-btn {
+  padding: 10px 25px;
+  color: #111;
+  background: #FFF;
+  border-radius: 25px;
+  border: none;
+  cursor: pointer;
+  transition: color 0.2s cubic-bezier(0.77, 0, 0.175, 1), background 0.2s cubic-bezier(0.77, 0, 0.175, 1);
+}
+  .landing nav .login-btn:hover {
+    color: #FFF;
+    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 button */
+.landing nav .menu-btn {
+  width: 40px;
+  height: 40px;
+  font-size: 0.65em;
+  font-weight: 600;
+  color: #FFF;
+  background: #000;
+  border: none;
+  border-radius: 25px;
+  cursor: pointer;
+}
+
+
+/* MAIN SECTION (NEWS + FORM) */
+.landing .news-container {
+  margin-top: 5rem;
+  display: flex;
+  background: rgba(255, 255, 255, 0.95);
+  border-bottom-left-radius: 25px;
+  box-shadow: -3px 3px 6px rgba(0, 0, 0, 0.2)
+}
+/* NEWS */
+.landing .news-container article {
+  width: 65%;
+  padding: 5rem 9rem 5rem 4rem;
+}
+.landing .news-container article h1:after {
+  content: "";
+  display: block;
+  width: 40px;
+  height: 5px;
+  margin: 15px 0 20px;
+  background: rgba(0, 0, 0, 0.14);
+  transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+.landing .news-container article h1:hover {
+  color: #0073be;
+  transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+.landing .news-container article h1:hover:after {
+  width: 100px;
+  background: #0073be;
+  transition: all 0.2s cubic-bezier(0.39, 0.575, 0.565, 1);
+}
+/* FORM */
+.landing .news-container form {
+  width: 35%;
+  padding: 4.5rem 2rem 0 2rem;
+  background: url("../img/form-filter.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.landing .news-container form label {
+  margin-bottom: 0.5rem;
+  font-size: 1.5em;
+  font-weight: 600;
+}
+.landing .news-container form input,
+.landing .news-container form select {
+  display: block;
+  width: 100%;
+  margin: 0.5rem 0;
+  padding: 10px 14px;
+  color: #a7a7a7;
+  border: solid 1px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+}
+.landing .news-container form button {
+  width: 100%;
+  margin-top: 0.5rem;
+  padding: 10px 14px;
+  font-weight: 600;
+  color: #FFF;
+  background: #111;
+  border: none;
+  border-radius: 16px;
+  cursor: pointer;
+}
+
+/* =========== OUR PRODUCTS SECTION =========== */
+.ourproducts {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+/* TAG HEADER */
+.ourproducts > header {
+  display: flex;
+  align-items: center;
+}
+.ourproducts > header label {
+  font-size: 0.9em;
+  font-weight: 600;
+}
+.ourproducts > header .btn-group {
+  margin: 0 1rem;
+}
+.ourproducts > header .btn-group button {
+  margin: 0 3px;
+  padding: 10px 14px;
+  font-size: 0.7em;
+  font-weight: 600;
+  background: #f3f4f8;
+  border: none;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: color 0.2s cubic-bezier(0.77, 0, 0.175, 1), background 0.2s cubic-bezier(0.77, 0, 0.175, 1);
+}
+.ourproducts > header .btn-group button.active {
+  color: #FFF;
+  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);
+}
+
+/* PRODUCT LIST */
+.product-list {
+  padding: 3rem 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+/* SINGLE ITEMS */
+.product-item {
+  width: 30%;
+  min-width: 250px;
+}
+.product-item .title {
+  margin-bottom: 0.75rem;
+  font-size: 0.75em;
+  font-weight: 600;
+  color: #AAA;
+}
+.product-card {
+  padding: 1.5rem;
+  background: #fbfbfb;
+  border: solid 1px #dfdfdf;
+  border-bottom-left-radius: 25px;
+}
+.product-card header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+.product-card header img {
+  max-height: 130px;
+  max-width: 130px;
+  margin-right: 1rem;
+}
+.product-card header .price {
+  padding-bottom: 2rem;
+  font-size: 0.9em;
+  font-weight: 600;
+}
+.product-card h3 {
+  font-weight: 600;
+}
+.product-card h3:after {
+  content: "";
+  display: block;
+  width: 30px;
+  height: 5px;
+  margin: 10px 0;
+}
+.product-card p {
+  margin-bottom: 1.5rem;
+  font-size: 0.9em;
+}
+.product-card footer a {
+  display: inline-block;
+  padding: 10px 14px;
+  font-size: 0.75em;
+  font-weight: 600;
+  color: #FFF;
+  border-radius: 20px;
+}
+/* FOOTER SECTION */
+.ourproducts > footer,
+.freetrials > footer {
+  display: flex;
+  justify-content: center;
+}
+.ourproducts > footer a,
+.freetrials > footer a {
+  font-size: 0.9em;
+  padding: 10px 20px;
+  border-radius: 20px;
+}
+.ourproducts > footer a {
+  background: #f1f2f6;
+}
+.freetrials > footer a {
+  background: #FFF;
+}
+
+/* Colour formatting */
+.ourproducts .product-item:nth-child(1) h3:after,
+.ourproducts .product-item:nth-child(1) footer a {
+  background: #9b1f82;
+}
+.ourproducts .product-item:nth-child(2) h3:after,
+.ourproducts .product-item:nth-child(2) footer a {
+  background: #0073bf;
+}
+.ourproducts .product-item:nth-child(3) h3:after,
+.ourproducts .product-item:nth-child(3) footer a {
+  background: #00a0a3;
+}
+
+/* =========== EXTRA INFOS SECTION =========== */
+.extra-infos {
+  background: #fbfbfb;
+}
+.extra-infos h2 {
+  padding-top: 4rem;
+  font-size: 1.2em;
+  font-weight: 600;
+  text-align: center;
+}
+.extra-infos ul {
+  padding: 4rem 0;
+  display: flex;
+  text-align: center;
+}
+.extra-infos li {
+  padding: 1.5rem 1rem;
+  font-size: 0.9em;
+}
+.extra-infos li:not(:last-child) {
+  border-right: solid 1px #E0E0E0;
+}
+.extra-infos li img {
+  max-width: 50px;
+  max-height: 50px;
+  margin-bottom: .5rem;
+}
+
+/* =========== FREE TRIALS SECTION =========== */
+.freetrials {
+  padding-top: 5rem;
+  padding-bottom: 5rem;
+  background-image: linear-gradient(to bottom, #00a0a3 40%, #f1f2f6 40%);
+}
+.freetrials > header {
+  font-size: 1.5em;
+  color: #FFF;
+  text-align: center;
+}
+.freetrials > header b {
+  color: #77eef0;
+}
+
+/* Colour formatting */
+.freetrials .product-item .title {
+  color: #FFF;
+}
+.freetrials .product-item h3:after,
+.freetrials .product-item footer a {
+  background: #00a0a3;
+}
+
+/* =========== NEWSLETTER SECTION =========== */
+.newsletter {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.newsletter p {
+  margin-bottom: 1.5rem;
+  font-size: 1.2em;
+  font-weight: 600;
+  text-align: center;
+}
+.newsletter form {
+  display: flex;
+  min-width: 50%;
+}
+.newsletter form input {
+  padding: 15px 25px;
+  flex: 5;
+  font-size: 0.9em;
+  background: #f2f3f7;
+  border: none;
+  border-top-left-radius: 20px;
+  border-bottom-left-radius: 20px;
+}
+.newsletter form button {
+  padding: 15px 25px;
+  font-size: 0.75em;
+  font-weight: 600;
+  color: #FFF;
+  background: #00a0a3;
+  border: none;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  cursor: pointer;
+}
+
+/* =========== FOOTER SECTION =========== */
+/* CONTACT LINKS */
+footer .contact-info {
+  width: 100%;
+  padding-top: 2rem;
+  padding-bottom: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  background: #000;
+}
+
+footer .contact-info .phone p {
+  font-size: 0.8em;
+  font-weight: 600;
+  color: #AAA;
+}
+footer .contact-info .phone address {
+  font-size: 1.2em;
+  font-weight: 600;
+  color: #FFF;
+}
+
+footer .contact-info .social-links {
+  display: flex;
+  color: #FFF;
+}
+footer .contact-info .social-links li {
+  margin: 0 10px;
+}
+
+/* SITEMAP */
+footer .sitemap {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+  display: flex;
+  justify-content: space-between;
+  background: #1a171b;
+}
+footer .sitemap h4 {
+  color: #FFF;
+  font-size: 0.9em;
+  font-weight: 600;
+}
+  footer .sitemap h4:after {
+    content: "";
+    display: block;
+    width: 20px;
+    height: 3px;
+    margin: 10px 0;
+    background: #FFF;
+  }
+footer .sitemap a {
+  font-size: 0.75em;
+  font-weight: 600;
+  color: #808080;
+  text-transform: uppercase;
 }

img/icons/cart.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 382 467.5" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd">
     <g>
-    <path class="fil0" d="M11 0l59 14c4,0 6,3 7,6l9 44 289 27c5,1 9,6 7,11l-45 138c-1,4 -4,6 -8,6l-205 0 4 21 198 0c11,0 11,20 0,20l-207 0c-4,0 -8,-2 -9,-7l-51 -248 -52 -12c-12,-3 -7,-22 4,-20zm79 84l29 142 202 0 38 -116 -269 -26z"/>
-    <path class="fil0" d="M163 296c21,0 39,18 39,39 0,22 -18,39 -39,39 -21,0 -39,-17 -39,-39 0,-21 18,-39 39,-39zm0 20c-10,0 -19,9 -19,19 0,11 8,19 19,19 10,0 19,-8 19,-19 0,-10 -9,-19 -19,-19z"/>
-    <path class="fil0" d="M284 296c21,0 39,18 39,39 0,22 -18,39 -39,39 -21,0 -39,-17 -39,-39 0,-21 18,-39 39,-39zm0 20c-10,0 -19,9 -19,19 0,11 9,19 19,19 10,0 19,-8 19,-19 0,-10 -9,-19 -19,-19z"/>
+      <path class="fil0" d="M11 0l59 14c4,0 6,3 7,6l9 44 289 27c5,1 9,6 7,11l-45 138c-1,4 -4,6 -8,6l-205 0 4 21 198 0c11,0 11,20 0,20l-207 0c-4,0 -8,-2 -9,-7l-51 -248 -52 -12c-12,-3 -7,-22 4,-20zm79 84l29 142 202 0 38 -116 -269 -26z"/>
+      <path class="fil0" d="M163 296c21,0 39,18 39,39 0,22 -18,39 -39,39 -21,0 -39,-17 -39,-39 0,-21 18,-39 39,-39zm0 20c-10,0 -19,9 -19,19 0,11 8,19 19,19 10,0 19,-8 19,-19 0,-10 -9,-19 -19,-19z"/>
+      <path class="fil0" d="M284 296c21,0 39,18 39,39 0,22 -18,39 -39,39 -21,0 -39,-17 -39,-39 0,-21 18,-39 39,-39zm0 20c-10,0 -19,9 -19,19 0,11 9,19 19,19 10,0 19,-8 19,-19 0,-10 -9,-19 -19,-19z"/>
     </g>
 </svg>

img/icons/doublearrow.svg

@@ -1,10 +1,13 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 97 99.625" x="0px" y="0px">
-    <g data-name="Layer 2">
-        <g>
-            <line class="cls-1" x1="24.3" y1="22.15" x2="95.49" y2="22.15"/>
-            <polyline class="cls-1" points="74.87 1.5 95.5 22.15 74.87 42.8"/>
-            <line class="cls-1" x1="72.7" y1="57.55" x2="1.51" y2="57.55"/>
-            <polyline class="cls-1" points="22.13 78.2 1.5 57.55 22.13 36.9"/>
-        </g>
+  <defs>
+    <style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px;}</style>
+  </defs>
+  <g data-name="Layer 2">
+    <g>
+      <line class="cls-1" x1="24.3" y1="22.15" x2="95.49" y2="22.15"/>
+      <polyline class="cls-1" points="74.87 1.5 95.5 22.15 74.87 42.8"/>
+      <line class="cls-1" x1="72.7" y1="57.55" x2="1.51" y2="57.55"/>
+      <polyline class="cls-1" points="22.13 78.2 1.5 57.55 22.13 36.9"/>
     </g>
+  </g>
 </svg>

index.html

@@ -21,30 +21,37 @@
 
 <div class="landing">
   <header>
+    <div>
+      <a href="#"><img src="img/EL-logo.png" class="logo" alt="éditions législatives logo"></a>
+    </div>
     <nav>
-      <div class="logo">
-        <img src="#" alt="éditions législatives logo">
-      </div>
       <div class="phone">
         <address><a href="tel:0189786312">01 89 78 63 12</a></address>
-        <div class="free-tooltip">Gratuit</div>
+        <b class="free-tooltip">Gratuit</b>
       </div>
       <div class="my-cart">
-        <img src="img\icons\cart.svg" alt="icône panier">
-        <span class="cart-itemscounter">2</span>
+        <a href="#">
+          <svg style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 382 467.5" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd">
+            <g>
+              <path class="fil0" d="M11 0l59 14c4,0 6,3 7,6l9 44 289 27c5,1 9,6 7,11l-45 138c-1,4 -4,6 -8,6l-205 0 4 21 198 0c11,0 11,20 0,20l-207 0c-4,0 -8,-2 -9,-7l-51 -248 -52 -12c-12,-3 -7,-22 4,-20zm79 84l29 142 202 0 38 -116 -269 -26z"/>
+              <path class="fil0" d="M163 296c21,0 39,18 39,39 0,22 -18,39 -39,39 -21,0 -39,-17 -39,-39 0,-21 18,-39 39,-39zm0 20c-10,0 -19,9 -19,19 0,11 8,19 19,19 10,0 19,-8 19,-19 0,-10 -9,-19 -19,-19z"/>
+              <path class="fil0" d="M284 296c21,0 39,18 39,39 0,22 -18,39 -39,39 -21,0 -39,-17 -39,-39 0,-21 18,-39 39,-39zm0 20c-10,0 -19,9 -19,19 0,11 9,19 19,19 10,0 19,-8 19,-19 0,-10 -9,-19 -19,-19z"/>
+            </g>
+          </svg>
+          <div class="cart-itemcounter">2</div>
+        </a>
       </div>
-      <button type="button">Connexion</button>
-      <button type="button">Menu</button>
+      <button type="button" class="login-btn">Connexion</button>
+      <button type="button" class="menu-btn">Menu</button>
     </nav>
   </header>
-  <div>
+  <div class="news-container">
     <article>
-      <a href="#">
-        <h1>L'actualité juridique, convention collective à l'unité, droit social...</h1>
-        <p>Nous avons des produits et services analysés mis à jour en permanence. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis et orci sit amet consequat.</p>
-      </a>
+      <a href="#"><h1>L'actualité juridique, convention collective à l'unité, droit social...</h1></a>
+      <p>Nous avons des produits et services analysés mis à jour en permanence. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mollis et orci sit amet consequat.</p>
     </article>
     <form action="#">
+      <label for="q">Une recherche ?</label>
       <input name="q" type="text" placeholder="Ex: Fiche de paie, loi Macron...">
       <select name="domain">
         <option value="" disabled selected>Votre domaine</option>
@@ -56,31 +63,34 @@
         <option value="">Ressources humaines</option>
         <option value="">Ressources humaines</option>
       </select>
-      <button type="submit">Rechercher</button>
-      <button type="reset">Effacer</button>
+      <div>
+        <button type="submit">Rechercher</button>
+      </div>
     </form>
   </div>
 </div>
 
 <div class="ourproducts">
   <header>
-    <div>Nos produits pour :</div>
-    <button type="button" class="product-tag rh">Ressources humaines</button>
-    <button type="button" class="product-tag compta">Comptabilité</button>
-    <button type="button" class="product-tag droit">Droit</button>
-    <button type="button" class="product-tag hse">HSE</button>
-    <button type="button" class="product-tag irp">IRP</button>
-    <button type="button" class="product-tag acl">Administrations & collectivités locales</button>
-    <button type="button" class="product-tag autres">Autres...</button>
+    <label>Nos produits pour :</label>
+    <div class="btn-group">
+      <button type="button" class="product-tag rh active">Ressources humaines</button>
+      <button type="button" class="product-tag compta">Comptabilité</button>
+      <button type="button" class="product-tag droit">Droit</button>
+      <button type="button" class="product-tag hse">HSE</button>
+      <button type="button" class="product-tag irp">IRP</button>
+      <button type="button" class="product-tag acl">Administrations & collectivités locales</button>
+      <button type="button" class="product-tag autres">Autres...</button>
+    </div>
   </header>
   <ul class="product-list">
 
     <li class="product-item">
-      <div>Solution métier</div>
-      <div>
+      <div class="title">Solution métier</div>
+      <div class="product-card">
         <header>
-          <img src="#" alt="#">
-          <b>802,00 € <sup>HT</sup></b>
+          <img src="./img/products/solution_rh_paie.png" alt="#">
+          <b class="price">802,00 € <sup>HT</sup></b>
         </header>
         <h3>SOLUTIONS RH PAIE</h3>
         <p>Le dispositif infaillible pour gérer la paie.</p>
@@ -90,25 +100,27 @@
       </div>
     </li>
     <li class="product-item">
-      <div>Ouvrage pratique</div>
-      <div>
+      <div class="title">Ouvrage pratique</div>
+      <div class="product-card">
         <header>
-          <img src="#" alt="#">
-          <b>60,00 € <sup>TTC</sup></b>
+          <img src="./img/products/ordonnances-manu.png" alt="#">
+          <b class="price">60,00 € <sup>TTC</sup></b>
         </header>
         <h3>ORDONNANCE MACRON</h3>
         <p>La réforme du code du travail : Ce qui change !</p>
         <footer>
-          <a href="#"><img src="img\icons\cart.svg" alt="icône panier"> Ajouter au panier</a>
+          <a href="#">
+            <span>Ajouter au panier</span>
+          </a>
         </footer>
       </div>
     </li>
     <li class="product-item">
-      <div>Ressource gratuite</div>
-      <div>
+      <div class="title">Ressource gratuite</div>
+      <div class="product-card">
         <header>
-          <img src="#" alt="#">
-          <b>GRATUIT</b>
+          <img src="./img/products/brp-gerer-la-mobilite-en-entreprise.png" alt="#">
+          <b class="price">GRATUIT</b>
         </header>
         <h3>SOLUTIONS RH PAIE</h3>
         <p>Une nouvelle articulation accords de branche/accords d’entreprise</p>
@@ -124,7 +136,7 @@
 </div>
 
 <div class="extra-infos">
-  <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
+  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
   <ul>
     <li>
       <img src="img\icons\doublearrow.svg" alt="">
@@ -150,14 +162,14 @@
     <p>Découvrez gratuitement tous nos produits</p>
     <p><b>SANS ENGAGEMENTS ET EN ACCES ILLIMITÉ PENDANT 15 JOURS.</b></p>
   </header>
-  <ul class="freetrials-list">
+  <ul class="product-list">
 
-      <li class="freetrial-item">
-        <div>Dossier spécial</div>
-        <div>
+      <li class="product-item">
+        <div class="title">Dossier spécial</div>
+        <div class="product-card">
           <header>
-            <img src="#" alt="#">
-            <b>GRATUIT</b>
+            <img src="./img/products/brp-gerer-la-mobilite-en-entreprise.png" alt="#">
+            <b class="price">GRATUIT</b>
           </header>
           <h3>ORDONNANCE MACRON</h3>
           <p>Une nouvelle articulation accords de branche/accords d’entreprise</p>
@@ -166,12 +178,12 @@
           </footer>
         </div>
       </li>
-      <li class="freetrial-item">
-        <div>Top téléchargement</div>
-        <div>
+      <li class="product-item">
+        <div class="title">Top téléchargement</div>
+        <div class="product-card">
           <header>
-            <img src="#" alt="#">
-            <b>GRATUIT</b>
+              <img src="./img/products/baux_commerciaux.png" alt="#">
+            <b class="price">GRATUIT</b>
           </header>
           <h3>BAIL COMMERCIAL</h3>
           <p>Une nouvelle articulation accords de branche/accords d’entreprise</p>
@@ -180,9 +192,9 @@
           </footer>
         </div>
       </li>
-      <li class="freetrial-item">
-        <div>Article à la une</div>
-        <div>
+      <li class="product-item">
+        <div class="title">Article à la une</div>
+        <div class="product-card">
           <h3>"L'ACCORD SUR LA FORMATION PROFESSIONNELLE MANQUE D’AMBITION"</h3>
           <p>Marc Dennery, co-fondateur et co-dirigeant de C-Campus, regrette que le projet d'accord soumis à signature ne modifie pas en profondeur le système de la formation professionnelle. Loin des annonces de l'été 2017. Interview...</p>
           <footer>
@@ -192,7 +204,7 @@
       </li>
     </ul>
     <footer>
-      <a href="#">Tous nos produits pour <b>gratuitement</b></a>
+      <a href="#">Toutes nos ressources à consulter <b>gratuitement</b></a>
     </footer>
   </div>  
 </div>
@@ -200,15 +212,15 @@
 <div class="newsletter">
   <p>Suivez toute notre actualité en vous inscrivant à notre newsletter</p>
   <form action="#">
-    <input type="text" placeholder="Votre adresse mail">
+    <input type="email" placeholder="Votre adresse mail">
     <button type="submit">S'inscrire</button>
   </form>
 </div>
 
 <footer>
   <div class="contact-info">
-    <div class="logo">
-      <img src="#" alt="éditions législatives logo">
+    <div>
+      <a href="#"><img src="img/EL-logo-dark.png" class="logo" alt="éditions législatives logo"></a>
     </div>
     <div class="phone">
       <p>Appelez-nous !</p>