|
*/
- 'class' => 'svg',
+ 'class' => 'svg fill-current',
];
+++ /dev/null
-<!doctype html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport"
- content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
- <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">
-
- <div class="justify-start content flex flex-col mr-10 max-w-footer-item">
- <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>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 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="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 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>
- <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 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>
- <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 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">
- <p class="bold">Support individuel</p>
- <p>30 ans d'expérience</p>
- </div>
- </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 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 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>
- </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="">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 class=" copyright">Copyright</p>
- </div>
- </div>
-
-</footer>
-</body>
-</html>
\ No newline at end of file
+++ /dev/null
-$h3 = 24px
-$barlow = 'Barlow', sans-serif
-$muli = 'Muli', sans-serif
-$dark = #6B7287
-*
- padding: 0
- box-sizing: border-box
- 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
- display: none
- width: 100%
- @media (max-width : 1280px)
- display: flex
- @media (max-width : 767px)
- padding-bottom: 3vw!important
- flex-direction : column
- align-items flex-start
- .footer-bottom
- @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: 1px
- height: 12px
- background: white
- @media (max-width : 767px)
- display : none
- .footer-list
- @media (max-width : 1280px)
- display: none
- .container
- max-width: 1728px;
- margin: 0 auto;
- padding-left: 10vw;
- padding-right: 10vw;
- width: 100%;
- @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
- border-radius: 3px
- background: white
- @media (max-width : 767px)
- width: 100%
- .content-link
- @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: 25vw
- p
- width: 17vw
- @media (max-width : 1100px)
- width: inherit
- @media (max-width : 960px)
- margin-right: 4.5rem
- width: 38.8vw
- 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 : 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
- width: 47.5px
- height: 47.5px
- color: white
- .bold
- font-family: $barlow
- .h3
- font-size: $h3
- font-family: $barlow
- @media (max-width 960px)
- font-size: 15px
- .no-style-link
- color: white
- &:hover
- text-decoration: none
\ No newline at end of file
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="16.16" height="9.588" viewBox="0 0 16.16 9.588"><path d="M15.455.707L7.996 8.166.718.707" fill="none" stroke="#6b7287" stroke-miterlimit="10" stroke-width="2"/></svg>
+++ /dev/null
-<svg xmlns="http://www.w3.org/2000/svg" width="30" height="25.5" viewBox="0 0 30 25.5">
- <g id="Groupe_108" data-name="Groupe 108" transform="translate(-38.4 -38.25)">
- <line id="Ligne_135" data-name="Ligne 135" x2="15" transform="translate(38.401 63)" fill="none" stroke="#fff" stroke-width="1.5"/>
- <line id="Ligne_136" data-name="Ligne 136" x2="30" transform="translate(38.401 51)" fill="none" stroke="#fff" stroke-width="1.5"/>
- <line id="Ligne_137" data-name="Ligne 137" x2="30" transform="translate(38.401 39)" fill="none" stroke="#fff" stroke-width="1.5"/>
- </g>
-</svg>
+++ /dev/null
-<svg xmlns="http://www.w3.org/2000/svg" width="34.797" height="37.5" viewBox="0 0 34.797 37.5">
- <g id="Groupe_54" data-name="Groupe 54" transform="translate(-1701.748 -39.25)">
- <path id="Tracé_40" data-name="Tracé 40" d="M5340.723-877.773v-24.138L5337-904" transform="translate(-3632.018 944)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
- <path id="Tracé_41" data-name="Tracé 41" d="M5346.927-850h22.294l1.736,2.483" transform="translate(-3635.163 923.517)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
- <g id="Rectangle_378" data-name="Rectangle 378" transform="translate(1711.999 49)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
- <rect width="21.552" height="22.055" stroke="none"/>
- <rect x="0.75" y="0.75" width="20.052" height="20.555" fill="none"/>
- </g>
- <circle id="Ellipse_16" data-name="Ellipse 16" cx="4.966" cy="4.966" r="4.966" transform="translate(1702.498 66.069)" stroke-width="1.5" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
- </g>
-</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="#fff"><path d="M23.1 29.5c-.4-.1-.8.2-.8.6-.1.4.2.8.6.8 3.1.5 4.1 1.4 4.1 1.6 0 .6-3.2 2-9 2s-9-1.4-9-2c0-.1.7-1 4.1-1.6.4-.1.7-.4.6-.8-.1-.4-.5-.7-.8-.6-2.4.4-5.3 1.3-5.3 3C7.5 34.9 13 36 18 36s10.5-1.1 10.5-3.4c0-1.8-2.9-2.7-5.4-3.1z"/><path d="M18 0C11.6 0 6.5 5.2 6.5 11.5c0 6.1 10.5 20.4 11 21 .1.2.4.3.6.3s.5-.1.6-.3c.4-.6 11-14.8 11-21C29.5 5.2 24.4 0 18 0zm0 30.8C15.8 27.7 7.9 16.4 7.9 11.5c0-5.5 4.5-10 10.1-10S28.1 6 28.1 11.6c0 4.8-7.9 16.1-10.1 19.2z"/><path d="M18 6.5c-2.8 0-5.1 2.3-5.1 5.1s2.3 5.1 5.1 5.1 5.1-2.3 5.1-5.1-2.3-5.1-5.1-5.1zm0 8.6c-2 0-3.6-1.6-3.6-3.6S16 8 18 8s3.6 1.6 3.6 3.6-1.6 3.5-3.6 3.5z"/></svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="30" height="25.5" viewBox="0 0 30 25.5">
+ <g id="Groupe_108" data-name="Groupe 108" transform="translate(-38.4 -38.25)">
+ <line id="Ligne_135" data-name="Ligne 135" x2="15" transform="translate(38.401 63)" fill="none" stroke="#fff" stroke-width="1.5"/>
+ <line id="Ligne_136" data-name="Ligne 136" x2="30" transform="translate(38.401 51)" fill="none" stroke="#fff" stroke-width="1.5"/>
+ <line id="Ligne_137" data-name="Ligne 137" x2="30" transform="translate(38.401 39)" fill="none" stroke="#fff" stroke-width="1.5"/>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="34.797" height="37.5" viewBox="0 0 34.797 37.5">
+ <g id="Groupe_54" data-name="Groupe 54" transform="translate(-1701.748 -39.25)">
+ <path id="Tracé_40" data-name="Tracé 40" d="M5340.723-877.773v-24.138L5337-904" transform="translate(-3632.018 944)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <path id="Tracé_41" data-name="Tracé 41" d="M5346.927-850h22.294l1.736,2.483" transform="translate(-3635.163 923.517)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+ <g id="Rectangle_378" data-name="Rectangle 378" transform="translate(1711.999 49)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+ <rect width="21.552" height="22.055" stroke="none"/>
+ <rect x="0.75" y="0.75" width="20.052" height="20.555" fill="none"/>
+ </g>
+ <circle id="Ellipse_16" data-name="Ellipse 16" cx="4.966" cy="4.966" r="4.966" transform="translate(1702.498 66.069)" stroke-width="1.5" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+ </g>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="31.3" fill="#fff"><path d="M26.9 13c-5 0-9.1 4.1-9.1 9.1s4.1 9.1 9.1 9.1c1.8 0 3.6-.5 5.1-1.6.4-.3.5-.8.2-1.1-.3-.4-.8-.5-1.1-.2-1.3.9-2.7 1.3-4.2 1.3-4.1 0-7.5-3.4-7.5-7.5s3.4-7.5 7.5-7.5 7.5 3.4 7.5 7.5v.7c0 .9-.8 1.7-1.7 1.7-.9 0-1.7-.8-1.7-1.7v-.7c0-2.2-1.8-4-4.1-4-2.2 0-4.1 1.8-4.1 4.1s1.8 4.1 4.1 4.1c1.2 0 2.3-.6 3.1-1.4.6.9 1.6 1.4 2.7 1.4 1.8 0 3.3-1.5 3.3-3.3v-.7c0-5.2-4.1-9.3-9.1-9.3zm0 11.6c-1.3 0-2.4-1.1-2.4-2.4s1.1-2.4 2.4-2.4c1.3 0 2.4 1.1 2.4 2.4s-1.1 2.4-2.4 2.4z"/><path d="M30.8 3.2v6.5c0 .4.4.8.8.8s.8-.4.8-.8V3.2C32.4 1.4 31 0 29.3 0H3.2C1.4 0 0 1.4 0 3.2v16c0 .7.3 1.3.8 1.8s1.1.8 1.8.8h11.3c.4 0 .8-.4.8-.8s-.4-.8-.8-.8H2.6c-.3 0-.5-.1-.7-.3-.2-.2-.3-.4-.3-.7v-16c0-.2 0-.3.1-.5L16 13.9c.1.1.3.2.5.2s.4-.1.5-.2L30.8 2.7v.5zm-14.3 9L2.9 1.6h26.6l-13 10.6z"/></svg>
--- /dev/null
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="50px" height="50px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<path d="M13.5,36.8h5.4V21.4h-5.4V36.8z"/>
+<path d="M16.2,19c1.5,0,2.7-1.2,2.7-2.7c0-1.5-1.2-2.7-2.7-2.7c-1.5,0-2.7,1.2-2.7,2.7c0,0,0,0,0,0
+ C13.5,17.8,14.7,19,16.2,19C16.2,19,16.2,19,16.2,19"/>
+<path d="M36.5,28.3c0-4.2-0.9-6.9-5.7-6.9c-2.3,0-3.9,0.9-4.5,2.1h-0.1v-2.1h-4.3v15.4h4.5v-7.6c0-2,0.4-4,2.9-4
+ c2.5,0,2.6,2.3,2.6,4.1v7.5h4.6V28.3z"/>
+<path d="M25,50C11.2,50,0,38.8,0,25C0,11.2,11.2,0,25,0c13.8,0,25,11.2,25,25C50,38.8,38.8,50,25,50z M25,1.5
+ C12.1,1.5,1.5,12.1,1.5,25c0,12.9,10.5,23.5,23.5,23.5c12.9,0,23.5-10.5,23.5-23.5C48.5,12.1,37.9,1.5,25,1.5z"/>
+</svg>
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="36" height="31.3" fill="#fff"><path d="M23.3 0H12.6c-1.7.1-3.1 1.4-3.1 3.2v24.9c.1 1.7 1.4 3.1 3.2 3.2h10.7c1.7-.1 3.1-1.4 3.1-3.1v-25C26.4 1.4 25 .1 23.3 0zm1.6 24.9H11.1V6.4h13.8v18.5zM12.6 1.6h10.6c.9 0 1.6.7 1.6 1.5v1.6H11.1V3.2c0-.9.7-1.6 1.5-1.6zm10.7 28H12.7c-.9 0-1.6-.7-1.6-1.6v-1.6h13.8v1.5c-.1 1-.8 1.7-1.6 1.7zM5.5 7.9c-.4 0-.8.4-.8.8v17.9c0 .4.4.8.8.8s.8-.4.8-.8V8.7c0-.5-.3-.8-.8-.8zM.8 9.4c-.4 0-.8.3-.8.8v15c0 .4.4.8.8.8s.8-.4.8-.8v-15c0-.5-.3-.8-.8-.8zM30.4 4.9c-.4 0-.8.4-.8.8v17.9c0 .4.4.8.8.8s.8-.4.8-.8V5.7c0-.5-.3-.8-.8-.8zM35.2 6.4c-.4 0-.8.4-.8.8v15c0 .4.4.8.8.8s.8-.4.8-.8v-15c0-.5-.4-.8-.8-.8z"/></svg>
--- /dev/null
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="50px" height="50px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
+<path d="M38.6,14c-1.2,0.7-2.4,1.2-3.8,1.4c-1.1-1.2-2.7-1.8-4.3-1.8c-3.2,0-5.9,2.6-5.9,5.8c0,0,0,0,0,0
+ c0,0.4,0.1,0.9,0.2,1.3c-4.7-0.2-9.2-2.4-12.2-6.1c-0.5,0.9-0.8,1.9-0.8,2.9c0,2,1,3.8,2.6,4.8c-0.9,0-1.9-0.3-2.7-0.7v0.1
+ c0,2.8,2,5.2,4.8,5.7c-0.5,0.1-1,0.2-1.6,0.2c-0.4,0-0.7,0-1.1-0.1c0.8,2.4,3,4,5.5,4c-2.1,1.6-4.7,2.5-7.4,2.5
+ c-0.5,0-0.9,0-1.4-0.1c2.7,1.7,5.9,2.6,9.1,2.6c9.2,0.1,16.7-7.2,16.8-16.3c0-0.1,0-0.2,0-0.2c0-0.3,0-0.5,0-0.8
+ c1.2-0.8,2.2-1.8,3-3c-1.1,0.5-2.2,0.8-3.4,0.9C37.3,16.6,38.2,15.4,38.6,14"/>
+<path d="M25,50C11.2,50,0,38.8,0,25C0,11.2,11.2,0,25,0c13.8,0,25,11.2,25,25C50,38.8,38.8,50,25,50z M25,1.5
+ C12.1,1.5,1.5,12.1,1.5,25c0,12.9,10.5,23.5,23.5,23.5c12.9,0,23.5-10.5,23.5-23.5C48.5,12.1,37.9,1.5,25,1.5z"/>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
+<svg version="1.1" id="flag-icon-css-de" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+ y="0px" width="18px" height="13px" viewBox="0 0 18 13" enable-background="new 0 0 18 13" xml:space="preserve">
+<path fill="#FFCE00" d="M0,8.7h18V13H0V8.7z"/>
+<path d="M0,0h18v4.3H0V0z"/>
+<path fill="#DD0000" d="M0,4.3h18v4.3H0V4.3z"/>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+ width="18px" height="13px" viewBox="0 0 18 13" enable-background="new 0 0 18 13" xml:space="preserve">
+<path fill="#00247D" d="M-4.2-0.1v13.2h26.5V-0.1H-4.2z"/>
+<path fill="#FFFFFF" d="M-4.2-0.2v1.5L6.1,6.4l-10.3,5.1V13h3L9.1,7.9l10.2,5.2h3v-1.5L12,6.4l10.3-5.1v-1.5h-2.9L9.1,5L-1.2-0.2
+ C-1.2-0.2-4.2-0.2-4.2-0.2z"/>
+<path fill="#CF142B" d="M8.9,6.5h2l11.3,5.7v1L8.9,6.5L8.9,6.5z M20.2-0.2h1.9L8.9,6.4v-1L20.2-0.2L20.2-0.2z M1.3,3.6l-5.6-2.8v-1
+ L8.9,6.4h-2L1.3,3.6z M8.9,6.5v1l-11.3,5.6h-2L8.9,6.5L8.9,6.5z"/>
+<g>
+ <path fill="#FFFFFF" d="M6.8-0.1v4.4H-4.3v4.4H6.8v4.4h4.4V8.7h11V4.3h-11v-4.4L6.8-0.1L6.8-0.1z"/>
+ <path fill="#CF142B" d="M7.6-0.1v5.3H-4.3v2.7H7.6v5.3h2.7V7.8h11.9V5.1H10.3v-5.3C10.3-0.1,7.6-0.1,7.6-0.1z"/>
+</g>
+</svg>
--- /dev/null
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="18px" height="13px" viewBox="0 0 18 13">
+ <rect fill="#2180C8" width="6" height="13"/>
+ <rect x="6" fill="#FFFFFF" width="6" height="13"/>
+ <rect x="12" fill="#F65858" width="6" height="13"/>
+</svg>
&-title
@apply mr-4
- +below(1150px)
+ +below(1200px)
display: none
&-icon
display: inline-block
width: 34px
height: 36px
- background: url(/images/cart.svg) no-repeat center
+ background: url(/images/icon-cart.svg) no-repeat center
background-size: contain
text-align: center
line-height: 40px
--- /dev/null
+$breakpoint-footer = 1024px
+$footer-logo-height = 70px // Used so we can align headings in other columns with the bottom of the header
+
+.footer
+ +below(1150px)
+ @apply text-sm
+
+ // Container for main footer columns
+ &-wrapper
+ @apply flex
+ vertical-spacing(4.5vw)
+
+ +below($breakpoint-footer)
+ @apply flex-wrap
+
+ .footer-col
+ padding-right: 0
+
+ &:nth-child(1)
+ flex-basis: 100%
+ &:nth-child(2), &:nth-child(3)
+ flex-basis: 50%
+ min-width: 300px // Min width so e-mail address fits. Columns will wrap when there's not enough room
+
+ // Need to reset the min-width before the screen gets too small, otherwise there will be an overflow
+ +below(500px)
+ .footer-col
+ min-width: 100% !important
+
+ &-col
+ constrain(padding-right, 2.5vw)
+ flex: 1 1 33.333%
+
+ // Column headings
+ &-heading
+ @apply text-inherit text-2xl font-display mb-10
+ height: $footer-logo-height
+ display: flex
+ align-items: flex-end
+
+ // Text under the logo
+ &-company-info
+ max-width: 22em
+
+ +below(1350px)
+ // A bit of extra buffer so this text doesn't get too close to the next column
+ padding-right: 2.5vw
+
+ +below($breakpoint-footer)
+ @apply text-base
+ padding-right: 0
+ max-width: 42em
+
+
+ // Contact details
+ &-contact
+ // The link
+ &-block
+ @apply flex text-white mb-6
+
+ &:hover
+ @apply text-blue
+
+ .footer-contact-icon
+ transform: scale(1.1)
+
+ &-icon
+ @apply mr-4
+ transform: scale(1)
+ transition: transform 0.1s ease-out
+
+ &-title
+ @apply font-display
+
+
+
+ // Sub-footer
+ &-end
+ @apply py-6 flex items-center
+
+ +below($breakpoint-footer)
+ @apply flex-wrap
+
+ > *
+ margin: 0 auto
+
+ &:not(:first-child)
+ flex-basis: 100%
+ margin-top: 1.5em
+ text-align: center
+
+ +below(640px)
+ > *
+ margin: 0
+ text-align: left !important
+
+
+ // Language switcher
+ &-locales
+ @apply relative
+
+ &:hover
+ .footer-locales-list
+ opacity: 1
+ transform: translateY(0)
+ .footer-locales-current
+ @apply text-navy
+
+ &-current
+ @apply relative rounded text-grey-dark px-3 py-1 z-10 flex items-center cursor-pointer
+ background: #fff url(/images/arrow-down.svg) 92% 50% no-repeat
+
+ &-flag
+ @apply inline-block mr-2
+
+ &-list
+ @apply absolute w-full -mb-1
+ left: 0
+ bottom: 100%
+ opacity: 0
+ transform: translateY(1.5em)
+ transition: all 0.1s ease-out
+
+
+ li:first-child a
+ @apply rounded-t
+ li:last-child a
+ @apply border-b-4 border-white // To cover rounded top of language selector
+
+ a
+ @apply block bg-white text-grey-dark px-3 py-1
+ transition: none
+
+ &:hover
+ @apply bg-grey-200 text-navy
+
+
+ // Bottom horizontal nav
+ &-nav
+ @apply flex justify-center flex-grow flex-wrap
+
+ +below(640px)
+ @apply block
+ li
+ @apply py-1 text-left
+
+ &:not(:last-child)
+ margin-right: 0
+ &:after
+ display: none
+
+ li:not(:last-child)
+ @apply mr-4
+
+ // Dividers between links
+ &:after
+ @apply pl-4
+ content: '|'
+ a
+ @apply text-white
+
+ &:hover
+ @apply text-blue
-<footer class="bg-navy text-white font-display font-medium antialiased">
- <div class="container py-20 flex justify-between">
- @include('partials.logo')
- <span>This is the footer</span>
- </div>
- <div class="bg-navy-dark">
- <div class="container py-2">
- Copyright etc
+<footer class="footer bg-navy text-white antialiased">
+ <content class="footer-wrapper">
+
+ <div class="footer-col">
+ <div class="footer-logo mb-10">
+ @include('partials.logo')
+ </div>
+ <div class="footer-company-info leading-relaxed mb-6">
+ <p>PM instrumentation distribue depuis 1986 des Capteurs et Systèmes de haute technicité.</p>
+ <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>
+ <div class="footer-social flex">
+ <a class="text-white hover:text-blue mr-6" href="https://www.twitter.com/" target="_blank" rel="noopener">
+ @svg('icon-twitter')
+ </a>
+ <a class="text-white hover:text-blue" href="https://www.linkedin.com/" target="_blank" rel="noopener">
+ @svg('icon-linkedin')
+ </a>
+ </div>
+ </div>
+
+ <div class="footer-col">
+ <h3 class="footer-col-heading">Nous contacter</h3>
+
+ <a class="footer-contact-block" href="#">
+ @svg('icon-address', 'footer-contact-icon')
+ <div class="footer-contact-text">
+ <div class="footer-contact-title">{{ __('Address') }}</div>
+
+ 59, rue Émile Deschanel<br>
+ 92400 - COURBEVOIE - France
+ </div>
+ </a>
+
+ <a class="footer-contact-block" href="#">
+ @svg('icon-email', 'footer-contact-icon')
+ <div class="footer-contact-text">
+ <div class="footer-contact-title">{{ __('Email') }}</div>
+
+ contact@pm-instrumentation.com
+ </div>
+ </a>
+
+ <a class="footer-contact-block" href="#">
+ @svg('icon-phone', 'footer-contact-icon')
+ <div class="footer-contact-text">
+ <div class="footer-contact-title">{{ __('Telephone') }}</div>
+
+ 01 46 91 93 32
+ </div>
+ </a>
+
</div>
+
+ <div class="footer-col">
+ <h3 class="footer-col-heading">PMI à votre service</h3>
+
+ <ul>
+ @for ($i = 1; $i <= 3; $i++)
+ <li class="flex items-center mb-6">
+ <div class="border-2 w-12 h-12 mr-6 rounded-full"></div>
+ <div>
+ Support Individuel<br>
+ 30 ans d'expérience
+ </div>
+ </li>
+ @endfor
+ </ul>
+ </div>
+
+ </content>
+
+ {{-- Sub-footer --}}
+ <div class="bg-navy-dark">
+ <content class="footer-end">
+ {{-- Language Switcher --}}
+ <div class="footer-locales">
+ <span class="footer-locales-current pr-12">
+ <img src="{{ asset('images/locale-fr.svg') }}" alt="Français" class="footer-locales-flag">Français
+ </span>
+ <ul class="footer-locales-list">
+ <li><a href="/de"><img src="{{ asset('images/locale-de.svg') }}" alt="Deutsch" class="footer-locales-flag">Deutsche</a></li>
+ <li><a href="/en"><img src="{{ asset('images/locale-en.svg') }}" alt="English" class="footer-locales-flag">English</a></li>
+ </ul>
+ </div>
+
+ {{-- Footer Nav Links --}}
+ <ul class="footer-nav">
+ <li><a href="#">Mentions légales</a></li>
+ <li><a href="#">Conditions générales de vente</a></li>
+ <li><a href="#">Vie privée</a></li>
+ <li><a href="#">Crédits</a></li>
+ </ul>
+
+ {{-- Copyright --}}
+ <div class="footer-copyright">
+ © {{ date('Y') }}
+ </div>
+
+ </content>
</div>
</footer>
<div class="container flex items-center py-8 relative z-20">
<div class="mobile-menu-icon hidden">
- <img src="{{ asset('images/burger-menu.svg') }}" alt="Menu">
+ <img src="{{ asset('images/icon-burger-menu.svg') }}" alt="Menu">
</div>
<div class="logo">
</header>
<div class="bg-white">
- <content class="header-search-box py-3">
+ <content class="header-search-box hidden py-3">
<form class="flex justify-between items-center">
<input class="pl-2 -ml-2 py-2 font-display text-2xl flex-grow appearance-none focus:outline-none focus:bg-grey-100"
type="text"
// Temporary catch all for testing nav and breadcrumbs
Route::get('/{name}', function ($name) {
- return view('pages.test', compact('section','name'));
+ return view('pages.test', compact('name'));
})->where(['name' => '.*']);
/** CATCH-ALL ROUTE for Backpack/PageManager - needs to be at the end of your routes.php file **/
projects / pmi.git / commitdiff
