<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>
+<body>
+<div 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="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 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>
</div>
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
</body>
</html>
\ No newline at end of file
font-family: $muli
#contact-module
+ height 150px
+ position fixed
+ right 0
+ max-width 320px
+ width 320px
+ top: 215px
.module
- width: 175px
+ max-width: 175px
padding: 0 12px
height: 48px
- position: fixed
- right: 0
background: $lightblue
- top: 11.2vw
- transform: translateX(127px)
+ transform:translateX(calc(100% - -97px))
transition: 500ms all ease
cursor: pointer
&:hover
- transform: translateX(0px)
- .icon-size
- width: 26px;
- height: 22px;
+ transform: translateX(85%)
+ .icon-size
+ width: 26px;
+ height: 22px;
.wrapper-module
- top: 13.75vw
- width: 313px
height: 96px
- position: fixed
- right: 0
- //background red
- margin-top: 10px
+ margin-top: 5px
transition: 500ms all ease
- //transform: translateX(0px)
- transform: translateX(265px)
+ transform: translateX(calc(100% - 48px))
&:hover
transform: translateX(0px)
.module-reveal
width 90%
background #079ECC
position absolute
- top: 0
-
-
-
+ top: 0
\ No newline at end of file
projects / pmi.git / commitdiff