]> _ Git - pmi.git/commitdiff
wip #2740 @7.00
authornael <nael@cubedesigners.com>
Wed, 22 May 2019 16:17:32 +0000 (18:17 +0200)
committernael <nael@cubedesigners.com>
Wed, 22 May 2019 16:17:32 +0000 (18:17 +0200)
public/_modules/footer/index.html
public/_modules/footer/style.styl

index 02e375e2a9c2061371f62a6d9615bedeb03c7ada..2ec3299a3a03b54bee6b23f574ec7ba840ae8ffd 100644 (file)
@@ -7,15 +7,16 @@
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="../../css/app.css">
+    <link href="https://fonts.googleapis.com/css?family=Barlow:600|Muli&display=swap" rel="stylesheet">
     <title>pmi</title>
 </head>
 <body>
 
 <footer id="footer" class="bg-navy text-white">
 
-    <div class="container py-20 flex justify-between">
+    <div class="container py-20 flex justify-between flex-wrap">
 
-        <div class="justify-start content flex flex-col mr-space">
+        <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">
             <p class="mt-txt mb-txt">PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité.</p>
 
@@ -25,7 +26,7 @@
 
             <div class="flex flex-row">
                 <div class="flex circle border-solid border-2 rounded-full mr-6 justify-center">
-                    <a class="flex" href=""><img src="img/twitter.svg" alt=""></a>
+                    <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>
             </div>
         </div>
 
-        <div class="justify-start content flex flex-col ">
-            <h3 class="h3 mt-10">Nous contacter</h3>
-            <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
-                capteurs et systèmes
-                d’excellente qualité provenant principalement des Etats-Unis.</p>
 
-            <div class="flex flex-row">
-                <div class="flex justify-center circle border-solid border-2 rounded-full mr-6">
-                    <a class="flex" href=""><img src="img/twitter.svg" alt=""></a>
+        <div class="justify-start mr-footer-middle content flex flex-col max-w-footer-info">
+            <h3 class="h3 mt-10">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>
                 </div>
-                <div class="circle border-solid border-2 rounded-full flex justify-center">
-                    <img src="img/linkedin.svg" alt="">
+            </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>
+                </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>
                 </div>
             </div>
         </div>
 
-        <div class="justify-start content flex flex-col ">
-            <img class="self-start" src="img/pmi-logo.svg" alt="logo-pmi">
-            <p class="mt-txt mb-txt">PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité.</p>
+        <div class="justify-start content flex flex-col max-w-footer-info">
+            <h3 class="h3 mt-10">PMI à votre service</h3>
 
-            <p class="mb-6">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 mt-txt">
+                <div class="self-start circle border-solid border-2 rounded-full"></div>
+                <div class="flex-col ml-8 footer-info">
+                    <p class="bold">Support individuel</p>
+                    <p>30 ans d'expérience</p>
+                </div>
+            </div>
 
-            <div class="flex flex-row">
-                <div class="flex circle border-solid border-2 rounded-full mr-6 justify-center">
-                    <img src="img/twitter.svg" alt="">
+            <div class="flex mt-6">
+                <div class="self-start circle border-solid border-2 rounded-full"></div>
+                <div class="flex-col ml-8 footer-info">
+                    <p class="bold">Support individuel</p>
+                    <p>30 ans d'expérience</p>
                 </div>
-                <div class="circle border-solid border-2 rounded-full flex justify-center">
-                    <img src="img/linkedin.svg" alt="">
+            </div>
+
+            <div class="flex mt-6">
+                <div class="self-start circle border-solid border-2 rounded-full"></div>
+                <div class="flex-col ml-8 footer-info">
+                    <p class="bold">Support individuel</p>
+                    <p>30 ans d'expérience</p>
                 </div>
             </div>
-        </div>
 
+        </div>
     </div>
 
     <div class="bg-navy-dark">
-        <div class="container py-2" >
-            Copyright
+
+        <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>
+            </p>
+            <div class="footer-bar"></div>
+
+            <p class="footer-links">
+                <a href="">Condition Général de vente</a>
+            </p>
+            <div class="footer-bar"></div>
+
+            <p class="footer-links">
+                <a href="">Vie privée</a>
+            </p>
+            <div class="footer-bar"></div>
+
+            <p class="footer-links">
+                <a href="">Crédits</a>
+            </p>
+        </div>
+
+        <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>
+            </select>
+
+            <div class="footer-bottom-item flex-no-wrap items-center flex justify-around footer-list">
+                <p class="footer-links">
+                    <a href="">Mentions légales</a>
+                </p>
+                <div class="footer-bar"></div>
+
+                <p class="footer-links">
+                    <a href="">Condition Général de vente</a>
+                </p>
+                <div class="footer-bar"></div>
+
+                <p class="footer-links">
+                    <a href="">Vie privée</a>
+                </p>
+                <div class="footer-bar"></div>
+
+                <p class="footer-links">
+                    <a href="">Crédits</a>
+                </p>
+            </div>
+            <p>Copyright</p>
         </div>
     </div>
 
index 86eb8886c8bdbdf3163b81ec4d499a4e09e40688..0ad5c48e393d3e07608505f5472e6c263b861bb9 100644 (file)
@@ -1,18 +1,86 @@
 $h3 = 24px
+$barlow = 'Barlow', sans-serif
+$muli = 'Muli', sans-serif
+$dark = #6B7287
 *
   padding: 0
   box-sizing: border-box
   margin: 0
+  font-family: $muli
 #footer
+  select::-ms-expand
+    display: none
+  .footer-list-top
+    display: none
+    width: 100%
+    @media (max-width : 1280px)
+      display: flex
+    @media (max-width : 610px)
+      flex-direction : column
+      align-items flex-start
+  .footer-bottom
+    @media (max-width : 630px)
+      flex-direction: column
+      align-items flex-start
+  .footer-bottom-item
+    width: 37.5vw
+  .footer-links a
+    text-decoration : none
+    color: white
+  .footer-bar
+    position: relative
+    content: ''
+    width: 2px
+    height: 12px
+    background: white
+    @media (max-width : 610px)
+      display : none
+  .footer-list
+    @media (max-width : 1280px)
+      display: none
   .container
     max-width: 1728px;
     margin: 0 auto;
-    padding-left: 5vw;
-    padding-right: 5vw;
+    padding-left: 10vw;
+    padding-right: 10vw;
     width: 100%;
-    .mr-space
-      margin-right: 7.5rem
+    @media (max-width : 960px)
+      padding-left: 7.5vw;
+      padding-right: 7.5vw;
+    .language
+      color: $dark
+      padding-left: 2.6rem
+      padding-right: 5.3rem
+      -webkit-appearance: none
+      @media (max-width : 630px)
+        width: 100%
+    .content-link
+      @media (max-width : 630px)
+        flex-direction column
+    .mr-footer-middle
+      margin-right: 2.5rem
+      @media (max-width : 960px)
+        margin-right: 0
+    .max-w-footer-item
+      width: 17vw
+      @media (max-width : 960px)
+        margin-right: 4.5rem
+        width: 38.8vw
+      @media (max-width : 600px)
+        margin-right: 0
+        width: 100%
+    .max-w-footer-info
+      width: 25vw
+      @media (max-width : 960px)
+        width: 38.8vw
+      @media (max-width : 600px)
+        flex-direction: column
+        width: 100%
+
     .content
+      .img-localization
+        width: 32px
+        height: 35px
       .mt-txt
         margin-top: 2.96rem
       .mb-txt
@@ -21,5 +89,12 @@ $h3 = 24px
         width: 47.5px
         height: 47.5px
         color: white
+      .bold
+        font-family: $barlow
       .h3
-        font-size: $h3
\ No newline at end of file
+        font-size: $h3
+        font-family: $barlow
+      .email-link
+        color: white
+        &:hover
+          text-decoration: none
\ No newline at end of file