include js
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user