include js

This commit is contained in:
2019-02-04 14:35:14 +01:00
parent 13e2b28ef0
commit a9ece64292
53 changed files with 14632 additions and 201 deletions
@@ -7,6 +7,7 @@
@import 'theme/animation';
@import 'theme/header';
@import 'theme/start';
@import 'theme/footer';
@import 'theme/carousel';
// @import 'theme/mobile';
//
@@ -10,17 +10,17 @@
@keyframes translateOpen{
0%{margin-top: 0px;}
100%{margin-top: -150px;}
100%{margin-top: -155px;}
}
@keyframes translateClose{
0%{margin-top: -150px;}
0%{margin-top: -155px;}
100%{margin-top: 0px;}
}
@keyframes translateOpensvg{
0%{margin-top: 50px;}
100%{margin-top: 180px;}
100%{margin-top: 180px;}
}
@keyframes translateClosesvg{
@@ -1,6 +1,6 @@
.owl-carousel{
display: flex!important;
margin: 50px 50px;
margin: 100px 50px 0 50px;
width: auto!important;
.owl-stage-outer{
height: 500px;
@@ -31,7 +31,7 @@
width: 35px;
height: 35px;
border-radius: 35px;
background: #8d2815ff!important;
background: rgb(141, 40, 21)!important;
span{
margin-top: -9.5px;
color: white;
@@ -47,3 +47,40 @@
}
}
}
.owl-nav.disabled{
display: block!important;
}
#recommandations{
.owl-carousel{
.owl-stage-outer{
height: 300px!important;
}
.galerie{
width: 300px;
}
.content{
width: 300px!important;
background: white;
p{
text-align: left!important;
padding: 0 20px;
margin: 0;
&:last-child{
padding-bottom: 20px;
}
strong{
width: 230px;
display: block;
}
}
img{
position: absolute;
top: 15px;
right: 20px;
width: 25px;
height: auto;
}
}
}
}
@@ -1,17 +1,15 @@
// Sticky Footer solution
body.sticky-footer {
height: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
#page-wrapper {
flex: 1 0 auto;
footer{
ul{
display: inline-flex;
justify-content: flex-end;
width: 100%;
li{
margin-left: 20px;
}
}
section{
width: 50%;
margin:auto;
}
}
#footer {
color: #acb3c2;
padding: 1rem $horiz-padding 0;
text-align: center;
}
@@ -1,3 +1,70 @@
.background{
position: absolute;
top: 0;
width: 100%;
left: 0;
display: inline-flex;
& > div {
width: 55%;
display: inline-block;
position: relative;
padding-bottom: 100%;
vertical-align: middle;
}
.fond-g{
svg{
width: 110%;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
}
.fond-d{
svg{
width: 110%;
display: inline-block;
position: absolute;
top: 0;
right: 0;
}
}
}
.background-footer{
z-index: -1;
position: absolute;
bottom: 0;
width: 100%;
left: 0;
display: inline-flex;
& > div {
width: 55%;
display: inline-block;
position: relative;
padding-bottom: 100%;
vertical-align: middle;
}
.fond-g{
svg{
width: 110%;
display: inline-block;
position: absolute;
bottom: 0;
left: 0;
}
}
.fond-d{
svg{
width: 110%;
display: inline-block;
position: absolute;
bottom: 0;
right: 0;
}
}
}
header{
z-index: 999;
position: relative;
@@ -16,13 +83,14 @@ header{
}
}
.title{
transition: background 1s;
background: none;
z-index: 998;
background: white;
position: fixed;
width: auto;
left: 50px;
right: 50px;
padding-top: 20px;
left: 0px;
right: 0px;
padding: 20px 50px 0 50px;
.filet{
z-index: -1;
width: auto;
@@ -35,11 +103,33 @@ header{
}
text-align: center;
h1{
height: 90px;
a{
padding: 0 50px;
background-color: white ;
}
margin-top: 0px;
white-space:nowrap;
z-index: 1;
display: inline-flex;
width: 100%;
align-items: center;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid black;
margin-left: 20px;
}
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid black;
margin-right: 20px;
}
}
&.Hc{
background: white;
transition: background 1s;
}
}
.logo{
@@ -77,7 +167,7 @@ header{
flex-direction: column;
position: relative;
h3{
z-index: 999;
z-index: 1;
position: absolute;
cursor: pointer;
margin: 0;
@@ -85,7 +175,6 @@ header{
}
section{
position: absolute;
background: white;
padding: 0 10px;
opacity: 0;
top: -130px;
@@ -1,4 +1,33 @@
.arrow{
width: 0!important;
height: 0;
top: 40px;
left: 50%;
right: 50%;
border: 50px solid white;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
position: absolute;
transform: translateX(-50%);
}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
background-color: #964587!important;
}
.mCSB_scrollTools .mCSB_draggerRail{
background-color: $bkg-d!important;
}
body{
position:relative;
padding-bottom: 20px;
}
#start{
&>section:last-child{
margin-bottom: 0!important;
}
section{
position: relative;
margin-top: -10px;
@@ -12,38 +41,51 @@
}
}
h2{
text-align: center;
width: 350px;
background: white;
z-index: 1;
margin: auto;
margin-top: -35px;
}
.filet{
position: absolute;
top: 0;
z-index: -1;
display: inline-flex;
width: 100%;
height: 2px;
background: black!important;
align-items: center;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid $blue;
margin-left: 20px;
}
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: 1px solid $blue;
margin-right: 20px;
}
}
#home{
width: 50%;
width: 40%;
min-width: 700px;
margin: 0 auto 100px auto;
}
#métier{
#m-tier{
& > div{
background: #ffffd5ff;
background:$section;
display: inline-flex;
flex-wrap: wrap;
justify-content: space-evenly;
justify-content: center;
h3{
text-align: center;
}
& > section:nth-of-type(odd){
margin-right: 50px;
}
& > section:nth-of-type(even){
margin-left: 50px;
}
section{
width: 35%;
min-width: 250px;
min-width: 350px;
&:nth-of-type(n+3){
position: relative;
.title{
@@ -54,7 +96,7 @@
height: 0;
top: -65px;
left: -70px;
border: 70px solid #0f265cff;
border: 70px solid #0f265c;
border-top-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
@@ -78,10 +120,12 @@
display: none;
height: 100%;
width: 100%;
background: #0f265cff;
opacity: 0.9;
background: #0f265c;
p,ul,li{
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-55%) translateX(-50%);
color: white;
}
}
@@ -103,23 +147,39 @@
}
}
}
#références{
#r-f-rences{
h3{
display: inline-flex;
width: 100%;
align-items: center;
white-space:nowrap;
&::after{
right: 0;
content: " ";
width: 50%;
height: 0px;
border: 2px dashed #8d2815;
margin-left: 20px;
}
&::before{
left: 0;
content: " ";
width: 50%;
height: 0px;
border: 2px dashed #8d2815;
margin-right: 20px;
}
}
& > div{
background: #ffffd5ff;
background: $section;
& > p{
width: 50%;
text-align: center;
min-width: 600px;
margin: 0px auto 0px auto;
padding: 50px 0 65px 0;
}
.title{
margin-bottom: 50px;
.filet{
top: 13px!important;
border: 2px dashed #8d2815;
background: #fff59b8c;
height: 0;
}
}
section{
&:last-child{
@@ -138,33 +198,56 @@
}
}
#recommandations{
.content{
background: white;
}
}
#clients{
.images{
margin: 0 50px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 50px;
flex-wrap: wrap;
img{
width: 10%;
min-width: 200px;
margin-bottom: 20px;
&:not(:first-child){
margin-left: 20px;
}
}
}
}
}
}
#contact{
& > div{
& > div {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
width: 100%;
& > div:nth-of-type(1){
margin-top: 50px;
}
p{
width: 40%;
&:nth-of-type(1){
width: 60%;
text-align: right;
margin-right: 50px;
}
&:nth-of-type(2){
width: 40%;
// &:nth-of-type(2){
// text-align: left;
// margin-left: 20px;
// }
img{
margin-bottom: 20px;
border-radius: 150px;
width: 10%;
min-width: 180px;
height: auto;
}
}
section{
width: 50%
}
}
}
}
@@ -15,6 +15,7 @@ h1,h2{
h3{
letter-spacing: 0.2rem;
white-space: nowrap;
}
ul,li,a,p,del{
@@ -46,6 +47,9 @@ h1{
h2{
font-size: $fonth2;
line-height: $lineH40;
margin-bottom: -10px;
color: $blue!important;
}
h3{
@@ -61,6 +65,7 @@ header{
font-size: $fontnav;
line-height: $lineH40;
letter-spacing: $letterI1;
color: $blue!important;
}
}
}
@@ -87,6 +92,14 @@ header{
}
#start{
&> section > div > h3{
margin-top: 120px;
}
&> section > div > p{
padding-top: 120px!important;
padding-bottom: 100px;
}
section{
.block{
h3{
@@ -109,7 +122,7 @@ header{
line-height: $lineH24;
}
}
#métier{
#m-tier{
section{
&:nth-of-type(n+3){
h3{
@@ -121,29 +134,40 @@ header{
h3{
text-transform: capitalize;
text-align: center;
color: #8d2815ff;
color:$h3-color;
text-transform: inherit;
font-family: $Roboto-B;
letter-spacing: 0;
font-size: $h3;
font-size: 1.5rem;
}
}
}
}
#références{
#r-f-rences{
& > p{
text-align: center;
font-size: 1.2rem;
line-height: 1.7rem;
}
.title{
margin: 0 50px;
}
h3{
font-family: $Regular-L;
font-size: $font40;
text-align: center;
color: #8d2815ff;
color: $h3-color;
width: 350px;
margin: auto;
background-color: #ffffd5ff;
background-color: $section;
}
#travaux_r-alis-s{
.galerie{
p{
font-size: 0.8rem;
line-height: 1.2rem;
}
}
}
#recommandations{
.owl-carousel{
@@ -156,3 +180,30 @@ header{
}
}
}
#contact{
p{
strong{
font-family: $Regular-L;
font-weight: normal;
font-size: $h3;
letter-spacing: $letterI1;
color: $blue;
}
}
}
footer{
ul{
li{
text-transform: uppercase;
letter-spacing: $letterI1;
a{
font-family: $Regular-L;
font-size: $fontnav;
color: $blue;
}
}
}
}
@@ -28,3 +28,13 @@ $lineH96:6rem;
//interlettre
$letterI1: 0.1rem;
// color
$section: rgb(255, 250, 229);
$h3-color: #8d2815ff;
$bkg-g: rgb(255, 250, 229);
$bkg-d: rgb(243,150,85);
$blue: #0f265c;