]> _ Git - pmi.git/commitdiff
wip #2741 @2
authornael <nael@cubedesigners.com>
Mon, 27 May 2019 16:03:34 +0000 (18:03 +0200)
committernael <nael@cubedesigners.com>
Mon, 27 May 2019 16:03:34 +0000 (18:03 +0200)
public/_modules/contact-module/img/icon-mail.svg [new file with mode: 0644]
public/_modules/contact-module/img/icon-phone.svg [new file with mode: 0644]
public/_modules/contact-module/index.html [new file with mode: 0644]
public/_modules/contact-module/style.styl [new file with mode: 0644]
public/_modules/cookies-banner/style.css [new file with mode: 0644]

diff --git a/public/_modules/contact-module/img/icon-mail.svg b/public/_modules/contact-module/img/icon-mail.svg
new file mode 100644 (file)
index 0000000..eb6aac7
--- /dev/null
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33.5" height="29.086" viewBox="0 0 33.5 29.086">
+  <g id="Groupe_47" data-name="Groupe 47" transform="translate(-4417.889 997.75)">
+    <g id="Groupe_45" data-name="Groupe 45" transform="translate(4435.19 -984.862)">
+      <circle id="Ellipse_13" data-name="Ellipse 13" cx="3.022" cy="3.022" r="3.022" transform="translate(4.702 4.702)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
+      <path id="Tracé_33" data-name="Tracé 33" d="M4460.729-960.9a7.681,7.681,0,0,1-4.365,1.344,7.725,7.725,0,0,1-7.725-7.724,7.725,7.725,0,0,1,7.725-7.724,7.724,7.724,0,0,1,7.724,7.724v.671a2.351,2.351,0,0,1-2.352,2.351,2.351,2.351,0,0,1-2.351-2.351v-.671" transform="translate(-4448.639 975)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
+    </g>
+    <g id="Groupe_46" data-name="Groupe 46" transform="translate(4418.639 -997)">
+      <path id="Tracé_34" data-name="Tracé 34" d="M4430.777-978.241h-10.482a1.655,1.655,0,0,1-1.656-1.655v-14.9a2.213,2.213,0,0,1,2.207-2.207h24.276a2.213,2.213,0,0,1,2.207,2.207v6.069" transform="translate(-4418.639 997)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Tracé_35" data-name="Tracé 35" d="M4447.239-996l-13.6,11.034L4419.515-996" transform="translate(-4419.032 996.552)" fill="none" stroke="#fff" stroke-linejoin="round" stroke-width="1.5"/>
+    </g>
+  </g>
+</svg>
diff --git a/public/_modules/contact-module/img/icon-phone.svg b/public/_modules/contact-module/img/icon-phone.svg
new file mode 100644 (file)
index 0000000..add3173
--- /dev/null
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="33.5" height="29.109" viewBox="0 0 33.5 29.109">
+  <g id="Groupe_48" data-name="Groupe 48" transform="translate(-4644.654 1067.424)">
+    <path id="Tracé_36" data-name="Tracé 36" d="M4697.908-1041.295a2.3,2.3,0,0,1-2.207,2.207l-9.931.024a2.319,2.319,0,0,1-2.207-2.231v-23.172a2.3,2.3,0,0,1,2.207-2.207h9.931a2.276,2.276,0,0,1,2.207,2.183Z" transform="translate(-29.355)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5"/>
+    <line id="Ligne_92" data-name="Ligne 92" x2="14.345" transform="translate(4654.208 -1062.26)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
+    <line id="Ligne_93" data-name="Ligne 93" x2="14.345" transform="translate(4654.208 -1043.502)" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="1.5"/>
+    <line id="Ligne_94" data-name="Ligne 94" y2="16.696" transform="translate(4649.794 -1059.358)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <line id="Ligne_95" data-name="Ligne 95" y2="13.913" transform="translate(4645.405 -1057.966)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <line id="Ligne_96" data-name="Ligne 96" y2="16.696" transform="translate(4672.967 -1062.14)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+    <line id="Ligne_97" data-name="Ligne 97" y2="13.913" transform="translate(4677.405 -1060.749)" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+  </g>
+</svg>
diff --git a/public/_modules/contact-module/index.html b/public/_modules/contact-module/index.html
new file mode 100644 (file)
index 0000000..9cabc27
--- /dev/null
@@ -0,0 +1,33 @@
+<!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 id="contact-module">
+
+<div class="module flex items-center justify-between">
+    <img class="icon-size" src="img/icon-phone.svg" alt="">
+    <p class="text-white"><a class="text-white" href="tel:+330146919332">01 46 91 93 32</a></p>
+</div>
+
+<div class="wrapper-module flex flex-col">
+    <div class="module-mail flex items-center justify-between">
+        <img class="icon-size" src="img/icon-mail.svg" alt="">
+        <p class="text-white"><a class="text-white" href="mailto:contact@pm-instrumentation.com">contact@pm-instrumentation.com</a></p>
+    </div>
+    <div class="module-mail module-reveal flex  flex-col items-center justify-center">
+        <p class="text-white">Utilisez notre <a class="text-white underline" href="">formulaire de contact</a></p>
+    </div>
+</div>
+
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/_modules/contact-module/style.styl b/public/_modules/contact-module/style.styl
new file mode 100644 (file)
index 0000000..2f1ea2d
--- /dev/null
@@ -0,0 +1,63 @@
+$h3 = 24px
+$barlow = 'Barlow', sans-serif
+$muli = 'Muli', sans-serif
+$dark = #6B7287
+$lightblue = #0EAADA
+*
+  padding: 0
+  box-sizing: border-box
+  margin: 0
+  font-family: $muli
+
+#contact-module
+  .module
+    width: 175px
+    padding: 0 12px
+    height: 48px
+    position: fixed
+    right: 0
+    background: $lightblue
+    top: 11.2vw
+    transform: translateX(127px)
+    transition: 500ms all ease
+    cursor: pointer
+    &:hover
+      transform: translateX(0px)
+    .icon-size
+      width: 26px;
+      height: 22px;
+  .wrapper-module
+    top: 13.75vw
+    width: 313px
+    height: 96px
+    position: fixed
+    right: 0
+    //background red
+    margin-top: 10px
+    transition: 500ms all ease
+    //transform: translateX(0px)
+    transform: translateX(265px)
+    &:hover
+      transform: translateX(0px)
+      .module-reveal
+        transform: translateX(0px)
+    .module-mail
+      background : $lightblue
+      height: 48px
+      width: 100%
+      padding: 0 12px
+    .module-reveal
+      transform: translateX(48px)
+      transition: 300ms all ease
+      position relative
+      &::after
+        content: ''
+        display block
+        height 1px
+        width 90%
+        background #079ECC
+        position absolute
+        top: 0
+
+
+
diff --git a/public/_modules/cookies-banner/style.css b/public/_modules/cookies-banner/style.css
new file mode 100644 (file)
index 0000000..d23358a
--- /dev/null
@@ -0,0 +1,25 @@
+* {
+  padding: 0;
+  box-sizing: border-box;
+  margin: 0;
+  font-family: 'Muli', sans-serif;
+}
+#cookie-banner {
+  height: 72px;
+  width: 100vw;
+  font-size: 14px;
+  background-color: rgba(21,47,78,0.8);
+  position: fixed;
+  bottom: 0;
+}
+#cookie-banner p:not(:last-child) {
+  margin-bottom: 0;
+}
+#cookie-banner p {
+  margin-right: 3.5vw;
+}
+#cookie-banner .cookie-btn {
+  background-color: #0eaada;
+  padding: 9px 13px;
+  border-radius: 3px;
+}