]> _ Git - pmi.git/commitdiff
wip #2747 @0.30
authornael <nael@cubedesigners.com>
Mon, 17 Jun 2019 16:13:23 +0000 (18:13 +0200)
committernael <nael@cubedesigners.com>
Mon, 17 Jun 2019 16:13:23 +0000 (18:13 +0200)
public/_modules/home-slider/img/home-arrow-left.svg [new file with mode: 0644]
public/_modules/home-slider/img/home-arrow-right.svg [new file with mode: 0644]
public/_modules/home-slider/index.html [new file with mode: 0644]
public/_modules/home-slider/slider.js [new file with mode: 0644]
public/_modules/home-slider/style.styl [new file with mode: 0644]

diff --git a/public/_modules/home-slider/img/home-arrow-left.svg b/public/_modules/home-slider/img/home-arrow-left.svg
new file mode 100644 (file)
index 0000000..1e20da7
--- /dev/null
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+  <g id="Groupe_8" data-name="Groupe 8" transform="translate(886.414 602) rotate(180)">
+    <g id="Groupe_6" data-name="Groupe 6" transform="translate(849 577)">
+      <path id="Tracé_16" data-name="Tracé 16" d="M3275.773-724.775l12,12-12,12" transform="translate(-3251.773 724.775)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+      <line id="Ligne_2" data-name="Ligne 2" x1="36.001" transform="translate(0 12)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+    </g>
+  </g>
+</svg>
diff --git a/public/_modules/home-slider/img/home-arrow-right.svg b/public/_modules/home-slider/img/home-arrow-right.svg
new file mode 100644 (file)
index 0000000..5a2722b
--- /dev/null
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="38.414" height="26" viewBox="0 0 38.414 26">
+  <g id="Groupe_7" data-name="Groupe 7" transform="translate(-848 -576)">
+    <g id="Groupe_6" data-name="Groupe 6" transform="translate(849 577)">
+      <path id="Tracé_16" data-name="Tracé 16" d="M3275.773-724.775l12,12-12,12" transform="translate(-3251.773 724.775)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+      <line id="Ligne_2" data-name="Ligne 2" x1="36.001" transform="translate(0 12)" fill="none" stroke="#fff" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
+    </g>
+  </g>
+</svg>
diff --git a/public/_modules/home-slider/index.html b/public/_modules/home-slider/index.html
new file mode 100644 (file)
index 0000000..939f053
--- /dev/null
@@ -0,0 +1,95 @@
+<!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:500,600|Muli&display=swap" rel="stylesheet">
+    <title>pmi</title>
+</head>
+<body>
+<header class="site-header"><div class="container flex items-center py-8 relative z-20"><div class="mobile-menu-icon hidden"><img src="https://staging.pm-instrumentation.com/images/icon-burger-menu.svg" alt="Menu"></div> <div class="logo"><a href="/"><img src="https://staging.pm-instrumentation.com/images/pmi-logo.svg" alt="PM Instrumentation logo"></a></div> <div class="nav mx-auto flex items-center"><ul class="nav-primary"><li><a href="https://staging.pm-instrumentation.com/products">Products</a><ul><li class="nav-submenu-wrapper"><ul><li class="nav-submenu-title">Capteurs</li><li><a href="https://staging.pm-instrumentation.com/products/force">Force</a></li><li><a href="https://staging.pm-instrumentation.com/products/couple">Couple</a></li><li><a href="https://staging.pm-instrumentation.com/products/deplacement">Déplacement</a></li><li><a href="https://staging.pm-instrumentation.com/products/acceleration">Accélération</a></li><li><a href="https://staging.pm-instrumentation.com/products/inclinaison">Inclinaison</a></li><li><a href="https://staging.pm-instrumentation.com/products/pression">Pression</a></li></ul></li><li class="nav-submenu-wrapper"><ul><li class="nav-submenu-title">Systèmes de mesure</li><li><a href="https://staging.pm-instrumentation.com/products/roue">Roue dynamométrique</a></li><li><a href="https://staging.pm-instrumentation.com/products/cdfdo">Contrôle de fermeture d’ouvrants</a></li><li><a href="https://staging.pm-instrumentation.com/products/cdt">Contrôle de taraudage</a></li><li><a href="https://staging.pm-instrumentation.com/products/ct">Collecteurs tournant</a></li><li><a href="https://staging.pm-instrumentation.com/products/telemetrie">Télémétrie</a></li><li><a href="https://staging.pm-instrumentation.com/products/add">Acquisition de données</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/solutions">Solutions</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/solutions/energie">Énergie</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/aero">Aéronautique</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/ferroviaire">Ferroviaire</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/auto">Automobile</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/civil">Génie civil</a></li><li><a href="https://staging.pm-instrumentation.com/solutions/industrie">Industrie</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/services">Services</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/services/location">Location</a></li><li><a href="https://staging.pm-instrumentation.com/services/calibration">Calibration</a></li><li><a href="https://staging.pm-instrumentation.com/services/developpement-oem">Développement OEM</a></li><li><a href="https://staging.pm-instrumentation.com/services/custom-design">Custom Design</a></li><li><a href="https://staging.pm-instrumentation.com/services/formation">Formation</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/support">Support</a></li><li><a href="https://staging.pm-instrumentation.com/societe">Société</a><ul><li class="nav-submenu-wrapper"><ul><li><a href="https://staging.pm-instrumentation.com/societe/a-propos">Qui sommes nous ?</a></li><li><a href="https://staging.pm-instrumentation.com/societe/actualites">Actualités</a></li></ul></li></ul></li><li><a href="https://staging.pm-instrumentation.com/contact">Contact</a></li></ul> <a href="#" class="text-white hover:text-blue"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" xml:space="preserve" width="16" height="16" class="svg fill-current"><path d="M16,14.6l-5-5c0.7-1,1.1-2.2,1.1-3.5C12.1,2.7,9.4,0,6.1,0S0,2.7,0,6.1s2.7,6.1,6.1,6.1c1.3,0,2.5-0.4,3.5-1.1
+       l5,5L16,14.6z M1.9,6.1c0-2.3,1.8-4.1,4.1-4.1s4.1,1.8,4.1,4.1s-1.8,4.1-4.1,4.1S1.9,8.3,1.9,6.1z"></path></svg></a></div> <div class="cart-header text-right flex items-center cursor-pointer hover:text-blue"><span class="cart-header-title">My Selection</span> <span class="cart-header-icon">0</span></div> <div class="cart-header-popout"><div class="cart-header-popout-title flex justify-between items-center px-1v py-1v"><span>
+                    My Selection
+                </span> <a href="#" class="close-cart-popout text-white hover:text-blue"><svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" class="svg fill-current"><path d="M26 1.4L24.6 0 13 11.6 1.4 0 0 1.4 11.6 13 0 24.6 1.4 26 13 14.4 24.6 26l1.4-1.4L14.4 13z"></path></svg></a></div> <div class="cart-header-popout-content text-navy font-body p-1v pb-0"><div class="cart-header-popout-item flex mb-1v"><div class="border-gray-100 border-2 bg-center bg-contain bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/products/3.png&quot;); width: 144px; height: 144px;"></div> <div class="pl-6 leading-relaxed flex-grow"><div class="font-bold">Capteur de force<br>Modèle 1220</div> <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between"><span>Quantité</span> <div><span class="px-3">-</span> <span class="text-sm">3</span> <span class="px-3">+</span></div></div> <a href="#" class="cart-delete-item text-red">
+    Supprimer
+</a></div></div> <div class="cart-header-popout-item flex mb-1v"><div class="border-gray-100 border-2 bg-center bg-contain bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/products/5.png&quot;); width: 144px; height: 144px;"></div> <div class="pl-6 leading-relaxed flex-grow"><div class="font-bold">Capteur de force<br>Modèle 1220</div> <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between"><span>Quantité</span> <div><span class="px-3">-</span> <span class="text-sm">3</span> <span class="px-3">+</span></div></div> <a href="#" class="cart-delete-item text-red">
+    Supprimer
+</a></div></div> <div class="cart-header-popout-item flex mb-1v"><div class="border-gray-100 border-2 bg-center bg-contain bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/products/3.png&quot;); width: 144px; height: 144px;"></div> <div class="pl-6 leading-relaxed flex-grow"><div class="font-bold">Capteur de force<br>Modèle 1220</div> <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between"><span>Quantité</span> <div><span class="px-3">-</span> <span class="text-sm">3</span> <span class="px-3">+</span></div></div> <a href="#" class="cart-delete-item text-red">
+    Supprimer
+</a></div></div> <div class="cart-header-popout-item flex mb-1v"><div class="border-gray-100 border-2 bg-center bg-contain bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/products/1.png&quot;); width: 144px; height: 144px;"></div> <div class="pl-6 leading-relaxed flex-grow"><div class="font-bold">Capteur de force<br>Modèle 1220</div> <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between"><span>Quantité</span> <div><span class="px-3">-</span> <span class="text-sm">3</span> <span class="px-3">+</span></div></div> <a href="#" class="cart-delete-item text-red">
+    Supprimer
+</a></div></div> <div class="cart-header-popout-item flex mb-1v"><div class="border-gray-100 border-2 bg-center bg-contain bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/products/3.png&quot;); width: 144px; height: 144px;"></div> <div class="pl-6 leading-relaxed flex-grow"><div class="font-bold">Capteur de force<br>Modèle 1220</div> <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between"><span>Quantité</span> <div><span class="px-3">-</span> <span class="text-sm">3</span> <span class="px-3">+</span></div></div> <a href="#" class="cart-delete-item text-red">
+    Supprimer
+</a></div></div> <div class="cart-header-popout-item flex mb-1v"><div class="border-gray-100 border-2 bg-center bg-contain bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/products/5.png&quot;); width: 144px; height: 144px;"></div> <div class="pl-6 leading-relaxed flex-grow"><div class="font-bold">Capteur de force<br>Modèle 1220</div> <div class="bg-grey-100 py-1 pl-3 my-2 flex items-center justify-between"><span>Quantité</span> <div><span class="px-3">-</span> <span class="text-sm">3</span> <span class="px-3">+</span></div></div> <a href="#" class="cart-delete-item text-red">
+    Supprimer
+</a></div></div></div> <div class="cart-header-popout-footer bg-grey-100 p-1v"><a href="#" class="btn block text-center"><span class="btn-text">Obtenir un devis</span></a></div></div></div>
+</header>
+
+<section class="pt-1v bg-navy text-white antialiased">
+    <div class="container ">
+        <img class="arrow home-arrow-left" src="img/home-arrow-left.svg" alt="">
+        <img class="arrow home-arrow-right" src="img/home-arrow-right.svg" alt="">
+        <div class="column-wrapper ">
+            <div class="column pt-2v pr-1v pb-2v">
+                <div class="text-block  text-block-default-padding pl-2v">
+                    <h2 class="h1 text-inherit">Wheel Force Transducer</h2>
+                    <div class="text-block-body">
+                        <p>
+                            Wheel Force Transducers (WFT) are used for measuring all wheel forces
+                            and moments. Field and laboratory test of passenger cars, light duty
+                            trucks, heavy duty trucks, vans, SUVs, class 8 trucks, heavy duty
+                            construction and farm equipment.
+                        </p>
+                        <p>
+                            <a href="#test123" class="btn ">
+                                <span class="btn-text">Découvrir</span>
+                            </a>
+                        </p>
+                        <div class="pb-2v"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="column overlap-bottom">
+                <div class="bg-image h-full bg-cover bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg&quot;); background-position: center center;"><div class="bg-image-sizer" style="padding-bottom: 110.417%;">
+                </div>
+                </div>
+            </div>
+        </div>
+        <!-- content mask -->
+        <div class="column-wrapper hidden">
+            <div class="column pt-2v pr-1v pb-2v">
+                <div class="text-block  text-block-default-padding pl-2v">
+                    <h2 class="h1 text-inherit">Wheel Force Transducer</h2>
+                    <div class="text-block-body">
+                        <p>
+                            Wheel Force Transducers (WFT) are used for measuring all wheel forces
+                            and moments. Field and laboratory test of passenger cars, light duty
+                            trucks, heavy duty trucks, vans, SUVs, class 8 trucks, heavy duty
+                            construction and farm equipment.
+                        </p>
+                        <p>
+                            <a href="#test123" class="btn ">
+                                <span class="btn-text">Découvrir</span>
+                            </a>
+                        </p>
+                        <div class="pb-2v"></div>
+                    </div>
+                </div>
+            </div>
+            <div class="column overlap-bottom">
+                <div class="bg-image h-full bg-cover bg-no-repeat" style="background-image: url(&quot;https://staging.pm-instrumentation.com/storage/uploads/images/home-car.jpg&quot;); background-position: center center;"><div class="bg-image-sizer" style="padding-bottom: 110.417%;">
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+<script src="slider.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/public/_modules/home-slider/slider.js b/public/_modules/home-slider/slider.js
new file mode 100644 (file)
index 0000000..d7325f0
--- /dev/null
@@ -0,0 +1,5 @@
+// jshint ignore: start
+
+$('.arrow').on('click',function () {
+   alert('test');
+});
\ No newline at end of file
diff --git a/public/_modules/home-slider/style.styl b/public/_modules/home-slider/style.styl
new file mode 100644 (file)
index 0000000..e40e44e
--- /dev/null
@@ -0,0 +1,25 @@
+$h3 = 24px
+$h2 = 36px
+$barlow = 'Barlow', sans-serif
+$muli = 'Muli', sans-serif
+$dark = #6B7287
+$lightgrey = #F7F8FC
+$darkblue = #152F4E
+$lightblue = #0EAADA
+$verylightgrey =#E7E9F3
+
+*
+  padding: 0
+  box-sizing: border-box !important
+  margin: 0
+  font-family: $muli
+.arrow
+  cursor: pointer
+.home-arrow-left
+  position: absolute;
+  top: 50%;
+  left: 2%;
+.home-arrow-right
+  position: absolute;
+  top: 50%;
+  right: 2%;
\ No newline at end of file