wip #2740 @4.40

diff --git a/public/_modules/footer/index.html b/public/_modules/footer/index.html
index 2ec3299a3a03b54bee6b23f574ec7ba840ae8ffd..1a5c45736db6f9e24f4d12f4fd1f95181d12ac08 100644 (file)
--- a/public/_modules/footer/index.html
+++ b/public/_modules/footer/index.html
@@ -14,56 +14,54 @@
 
 <footer id="footer" class="bg-navy text-white">
 
-    <div class="container py-20 flex justify-between flex-wrap">
+    <div class="container py-20 flex">
 
         <div class="justify-start content flex flex-col mr-10 max-w-footer-item">
-            <img class="self-start" src="img/pmi-logo.svg" alt="logo-pmi">
+            <a href=""><img class="self-start" src="img/pmi-logo.svg" alt="logo-pmi"></a>
             <p class="mt-txt mb-txt">PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité.</p>
 
-                <p class="mb-6">Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de
+                <p>Issue de la société Schaevitz, PM Instrumentation a su développer une gamme de
                 capteurs et systèmes
                 d’excellente qualité provenant principalement des Etats-Unis.</p>
 
-            <div class="flex flex-row">
+            <div class="flex flex-row mt-6">
                 <div class="flex circle border-solid border-2 rounded-full mr-6 justify-center">
                     <a class="flex" href="https://twitter.com/"><img src="img/twitter.svg" alt=""></a>
                 </div>
                 <div class="circle border-solid border-2 rounded-full flex justify-center">
-                    <a class="flex" href=""><img src="img/linkedin.svg" alt=""></a>
+                    <a class="flex" href="https://fr.linkedin.com/"><img src="img/linkedin.svg" alt=""></a>
                 </div>
             </div>
         </div>
 
-
         <div class="justify-start mr-footer-middle content flex flex-col max-w-footer-info">
-            <h3 class="h3 mt-10">Nous contacter</h3>
+            <h3 class="h3 mt-10 h3-mb">Nous contacter</h3>
             <div class="flex mt-txt">
                 <img class="self-start img-localization" src="img/icon-localization.svg" alt="">
                 <div class="flex-col ml-8 footer-info">
                     <p class="bold">Adresse</p>
-                    <p>59, rue Émile Deschanel</p>
-                    <p>92400 - COURBEVOIE - France</p>
+                    <a class="no-style-link" href="https://goo.gl/maps/cibS6uhDjcc2SSn96"> <p>59, rue Émile Deschanel</p>
+                        <p>92400 - COURBEVOIE - France</p></a>
                 </div>
             </div>
             <div class="flex mt-8">
                 <img class="self-start" src="img/icon-mail.svg" alt="">
                 <div class="ml-8 footer-info">
                     <p class="bold">Email</p>
-                    <a class="no-underline email-link"  href="mailto:contact@pm-instrumentation.com">contact@pm-instrumentation.com</a>
+                    <a class="no-underline no-style-link"  href="mailto:contact@pm-instrumentation.com">contact@pm-instrumentation.com</a>
                 </div>
             </div>
             <div class="flex mt-8">
                 <img class="self-start" src="img/icon-phone.svg" alt="">
                 <div class="ml-8 footer-info">
                     <p class="bold">Téléphone</p>
-                    <p>01 46 91 93 32</p>
+                    <a class="no-style-link" href="tel:+330146919332">01 46 91 93 32</a>
                 </div>
             </div>
         </div>
 
         <div class="justify-start content flex flex-col max-w-footer-info">
-            <h3 class="h3 mt-10">PMI à votre service</h3>
-
+            <h3 class="h3 h3-mb mt-10">PMI à votre service</h3>
             <div class="flex mt-txt">
                 <div class="self-start circle border-solid border-2 rounded-full"></div>
                 <div class="flex-col ml-8 footer-info">
@@ -87,12 +85,10 @@
                     <p>30 ans d'expérience</p>
                 </div>
             </div>
-
         </div>
     </div>
 
     <div class="bg-navy-dark">
-
         <div class="footer-list-top container py-10 footer-top-item flex-no-wrap items-center flex justify-around">
             <p class="footer-links">
                 <a href="">Mentions légales</a>
@@ -116,7 +112,7 @@
 
         <div class="flex flex-wrap container py-4 flex items-center justify-between footer-bottom" >
             <select class=" language py-2"  name="language" id="language">
-                <option value="" style="background-image: url('img/fr-flag.svg')">Français</option>
+                <option value="">Français</option>
             </select>
 
             <div class="footer-bottom-item flex-no-wrap items-center flex justify-around footer-list">
@@ -139,7 +135,7 @@
                     <a href="">Crédits</a>
                 </p>
             </div>
-            <p>Copyright</p>
+            <p class=" copyright">Copyright</p>
         </div>
     </div>
 

diff --git a/public/_modules/footer/style.styl b/public/_modules/footer/style.styl
index 0ad5c48e393d3e07608505f5472e6c263b861bb9..967de6f6b7897452cae6c3640a4fb1574ce69f47 100644 (file)
--- a/public/_modules/footer/style.styl
+++ b/public/_modules/footer/style.styl
@@ -8,6 +8,14 @@ $dark = #6B7287
   margin: 0
   font-family: $muli
 #footer
+  @media (max-width 960px)
+    font-size: 12px
+  p:not(:last-child) {
+    margin-bottom: 0;
+  }
+  h1,h2,h3,h4
+    color: white
+    margin-bottom: 0
   select::-ms-expand
     display: none
   .footer-list-top
@@ -15,25 +23,33 @@ $dark = #6B7287
     width: 100%
     @media (max-width : 1280px)
       display: flex
-    @media (max-width : 610px)
+    @media (max-width : 767px)
+      padding-bottom: 3vw!important
       flex-direction : column
       align-items flex-start
   .footer-bottom
-    @media (max-width : 630px)
+    @media (max-width : 767px)
       flex-direction: column
       align-items flex-start
   .footer-bottom-item
     width: 37.5vw
+    @media (min-width : 1880px)
+      width: 36.5vw
+  .footer-links
+    @media (max-width : 767px)
+      margin-bottom: 1.7vw !important
+      &:last-child
+        margin-bottom: 0 !important
   .footer-links a
     text-decoration : none
     color: white
   .footer-bar
     position: relative
     content: ''
-    width: 2px
+    width: 1px
     height: 12px
     background: white
-    @media (max-width : 610px)
+    @media (max-width : 767px)
       display : none
   .footer-list
     @media (max-width : 1280px)
@@ -47,42 +63,61 @@ $dark = #6B7287
     @media (max-width : 960px)
       padding-left: 7.5vw;
       padding-right: 7.5vw;
+      padding-bottom: 7.5vw;
+      flex-wrap : wrap
     .language
       color: $dark
       padding-left: 2.6rem
       padding-right: 5.3rem
       -webkit-appearance: none
-      @media (max-width : 630px)
+      border-radius: 3px
+      background: white
+      @media (max-width : 767px)
         width: 100%
     .content-link
-      @media (max-width : 630px)
+      @media (max-width : 767px)
         flex-direction column
     .mr-footer-middle
       margin-right: 2.5rem
       @media (max-width : 960px)
+        margin-right: 2.5rem
+      @media (max-width : 767px)
         margin-right: 0
     .max-w-footer-item
-      width: 17vw
+      width: 25vw
+      p
+        width: 17vw
+        @media (max-width : 1100px)
+          width: inherit
       @media (max-width : 960px)
         margin-right: 4.5rem
         width: 38.8vw
-      @media (max-width : 600px)
+        p
+          width: inherit
+      @media (max-width : 767px)
         margin-right: 0
         width: 100%
+    .copyright
+      @media (max-width : 767px)
+        margin-top: 3vw
     .max-w-footer-info
       width: 25vw
       @media (max-width : 960px)
         width: 38.8vw
-      @media (max-width : 600px)
+      @media (max-width : 767px)
         flex-direction: column
         width: 100%
-
+    .h3-mt
+      @media (max-width : 960px)
+        margin-top: 7.5vw
     .content
       .img-localization
         width: 32px
         height: 35px
       .mt-txt
         margin-top: 2.96rem
+        @media (max-width : 960px)
+          margin-top: 5vw
       .mb-txt
         margin-bottom: 2.3rem
       .circle
@@ -94,7 +129,9 @@ $dark = #6B7287
       .h3
         font-size: $h3
         font-family: $barlow
-      .email-link
+        @media (max-width 960px)
+          font-size: 15px
+      .no-style-link
         color: white
         &:hover
           text-decoration: none
\ No newline at end of file