html, body
{
width: 100%;
height: 100%;
}
*
{
margin: 0;
padding: 0;
}
@font-face {
font-family: 'fontawesome';
src: url('fonts/fontawesome-webfont.eot');
src: url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fontawesome-webfont.woff') format('woff'),
url('fonts/fontawesome-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Bold';
src: url('fonts/Roboto-Bold.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Roboto-Regular';
src: url('fonts/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/*------------------------------
---------Styles general---------
------------------------------*/
body
{
background: #fff;
color: #000;
margin: 0;
padding: 0;
font-family: fontawesome, Arial, serif;
}
.wrap
{
width: 100%;
max-width: 1600px;
margin: auto;
}
a
{
text-decoration: none;
color: #000;
}
ul
{
list-style-type: none;
}
h1, h2, h3
{
font-family: Roboto-Bold, serif;
}
h1
{
font-size: 2em;
}
h2
{
font-size: 1.3em;
}
h3
{
font-size: 1.05em;
}
hr {
width: 100%;
border: none;
border-top: 2px double rgba(0,0,0,0.3);
color: #333;
overflow: visible;
text-align: center;
height: 5px;
}
hr:after {
font-size: 1.2em;
background: #fff;
content: '\f111';
padding: 0 4px;
position: relative;
top: -11px;
color: rgb(92,173,211);
}
header, footer
{
display: flex;
}
p, span
{
font-family: Roboto-Regular, fontawesome, Arial, serif;
font-size: 1em;
}
/* menu fixe */
header
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 6em;
background-color: white;
justify-content: space-around;
align-items: center;
z-index: 1000;
}
nav
{
height: 100%;
width: 30%;
}
#menu
{
width: 75%;
display: flex;
margin:auto;
justify-content: space-around;
}
#menu li
{
padding-top: 9%;
}
#menu li:hover
{
padding-top: 8%;
border-top: 4px solid rgb(92,173,211);
color:rgb(92,173,211);
}
/* page d'Acceuil */
/*vide pour centrer le lien*/
#Acceuil
{
position: relative;
}
.haut
{
height: 6em;
}
.head
{
height: 6em;
}
#photof
{
width: 100%;
}
/* styles des légendes */
.containers figcaption
{
position: absolute;
left:15%;
bottom: 30%;
width: 35%;
text-align: left;
color: #fff;
}
/* styles figcaption */
figcaption h2
{
font-size: 2.2em;
margin-bottom: 0.8em;
}
figcaption h2 span
{
color: rgb(92,173,211);
}
.dad
{
margin-bottom: 1.8em;
}
a.info
{
font-size: 1.2em;
padding: 10px 30px;
background: rgb(92,173,211);
color: #fff;
border-radius: 3px;
-webkit-border-radius: 3px;
}
a.info:hover
{
background: #0088b5;
}
/*---slide---*/
.containers
{
overflow: hidden;
position: relative;
width: 100%;
height: 0;
background: #4c4c4c;
padding-bottom: 40%;
}
.slide_img
{
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
}
.slide_img img
{
width: 100%;
height: 100%;
}
#i1, #i2, #i3
{
display: none;
}
.pre, .nxt
{
width: 2%;
display: block;
position: absolute;
border-bottom:0;
font-size: 1.2em;
color: #fff;
text-decoration:none;
background-color: rgba(0,0,0,0.3);
border-radius: 50%;
padding: 20px 12px 20px 20px;
z-index: 99;
cursor: pointer;
}
.pre:hover, .nxt:hover
{
background: #0088b5;
}
.pre
{
top: 45%;
left: -1.6%;
}
.nxt
{
top: 45%;
right: -1.8%;
}
#i1:checked ~ #one
{
z-index: 9;
}
#i2:checked ~ #two
{
z-index: 9;
}
/*---barre dynamique---*/
#timeline
{
position: absolute;
bottom: 0%;
height: 5px;
background: rgb(92,173,211);
width: 0;
animation: timeliner 32s infinite;
z-index: 15;
}
@keyframes timeliner
{
0%, 50%, 100% { width: 0; }
45%, 90% { width: 100%; }
}
.foot
{
height: 4em;
}
/*---Section Services--- */
#services
{
padding-top: 6em;
display: flex;
flex-wrap: wrap;
}
/*-mise en page de l entete*/
.entete_section
{
margin-bottom: 4%;
width: 100%;
text-align: center;
}
.entete_section h1
{
font-size: 3em;
}
.entete_section p
{
margin: auto;
width: 50%;
}
/*sparation avec point*/
.point
{
display: flex;
align-items: center;
width: 12em;
margin: 2em auto;
}
.trait
{
border-bottom: 2px solid rgba(0,0,0,0.1);
width: 100%;
}
.pastille
{
border: 8px solid rgb(92,173,211);
border-radius: 50%;
margin: 1.5px;
}
/*---phot de mac---*/
#bloc_gauche
{
width: 50%;
margin:auto;
}
#taille
{
width: 100%;
}
/*---service proposé---*/
#bloc_droite
{
margin:auto;
width: 50%;
flex-wrap: wrap;
}
#bloc_droite article
{
margin: 15px;
display: flex;
}
#bloc_droite .icone
{
color: rgb(92,173,211);
font-size: 1.7em;
}
.icone
{
display: flex;
align-items: center;
}
.cercle
{
display: flex;
border-radius: 50%;
width: 2.5em;
height: 2.5em;
border: 1px solid rgba(0,0,0,0.2);
}
.line-chart:before
{
margin: auto;
content: "\f201";
}
.point_bleu
{
background-color: rgb(92,173,211);
margin-left: -8px;
width: 12px;
height: 12px;
border: 2px solid white;
border-radius: 50%;
}
.cube:before
{
margin: auto;
content: "\f1b3";
}
.pie-chart:before
{
margin: auto;
content: "\f200";
}
.contenu_article
{
margin-left: 5px;
width: 80%;
}
/*---portofolio---*/
#menup
{
width: 100%;
margin: auto;
}
#menul
{
justify-content: center;
width: 100%;
display: flex;
}
.boutonp
{
position: relative;
padding: 10px 10px;
font-size: 1.3em;
background-color: rgb(209,211,210);
}
.boutonp1
{
position: relative;
padding: 10px 10px;
font-size: 1.3em;
background-color: rgb(209,211,210);
border-radius: 3px 0 0 3px;
}
.boutonp4
{
position: relative;
padding: 10px 10px;
font-size: 1.3em;
background-color: rgb(209,211,210);
border-radius: 0 3px 3px 0;
}
a.boutonp:hover, .boutonp1:hover, a.boutonp4:hover
{
color: white;
background: rgb(92,173,211);
box-shadow: 0 3px 0px rgb(13,124,129);
}
a.hov:before
{
opacity: 0;
position: absolute;
bottom: -40%;
left: 45%;
content: "\f0d7";
font-size: 20px;
color: rgb(92,173,211);
}
a.hov:hover:before
{
opacity: 1;
}
/*--photo-portofolio--*/
#portfolio
{
padding-top: 6em;
}
#boxp
{
margin-top: 5%;
display: flex;
flex-wrap: wrap;
}
.photop
{
margin: auto;
width: 21%;
}
a.imgp
{
width: 100%;
}
.imgp
{
width: 100%;
}
a.imgp:hover
{
width: 30px;
background: black;
}
.photop figcaption
{
padding-left: 2%;
visibility: hidden;
position: relative;
top: -72px;
background-color: rgba(0,0,0,0.6);
height: 70px;
}
.photop:hover figcaption
{
visibility: visible;
}
.pad
{
padding-left: 2%;
color: white;
}
.blanc
{
padding-top: 4%;
padding-left: 2%;
color: white;
}
.cercleo
{
position: absolute;
top: -15px;
right: 10px;
display: flex;
height: 35px;
width:35px;
border: 2px solid white;
border-radius: 50%;
background-color: rgb(92,173,211);
}
.oeil:before
{
font-family: 'fontawesome';
color: white;
margin: auto;
content: "\f06e";
}
/*---formulaire--*/
#formu
{
font-size: 80%;
width: 25%;
height: 77%;
position: absolute;
margin-top: 5%;
margin-left: 65%;
background-color: rgba(255,255,255,0.7);
}
iframe
{
opacity: 0.5;
width: 100%;
height: 600px;;
margin: auto;
}
#bloc-bas
{
margin: auto;
background-color: rgba(92,173,211,0.7);
position: relative;
height: 100%;
width: 96%;
display: flex;
flex-direction: column;
}
input
{
padding-left: 5px;
background-color: white;
width: 89%;
height: 7%;
margin: 0 4% 4% 4%;
border: 1px solid grey;
border-radius: 5px;
}
textarea
{
padding-left: 5px;
height: 32%;
background-color: white;
width: 89%;
margin-left: 4%;
margin-bottom: 4%;
border: 1px solid grey;
border-radius: 5px;
}
form
{
height: 100%;
display: flex;
flex-direction: column;
margin: auto;
}
.deca
{
padding-bottom: 4%;
padding-left: 5%;
}
.deca h2
{
padding-top: 3%;
font-size: 2em;
}
.deca h3
{
padding-top: 2%;
}
#bouton-envoi
{
color: white;
width: 35%;
height: 7%;
margin: 0 4%;
background-color: rgb(92,173,211);
}
/*---ecran smartphone---*/
@media all and (max-width: 500px)
{
/*---menu nav---*/
header
{
flex-direction: column;
}
#menu li
{
padding-top: 0%;
}
nav
{
width: 90%;
}
#none
{
display: none;
}
#Acceuil
{
display: none;
}
#menu
{
width: 100%;
justify-content: space-between;
padding: 10px 0 0 0;
}
#menu li a
{
padding-top: 5px;
}
#menu li:hover
{
padding-top: 0%;
border-top: 2px solid rgb(92,173,211);
color:rgb(92,173,211);
}
#logo
{
margin-top: 5px;
}
/*---marge service---*/
.entete_section p
{
width: 85%;
}
#bloc_gauche
{
display: none;
}
.icone
{
display: none;
}
#bloc_droite
{
width: 100%;
}
.contenu_article
{
width: 100%;
padding-bottom: 2%;
}
#menul
{
display: none;
}
#boxp
{
width: 100%;
flex-direction: column;
}
.photop
{
margin: 3% 0 3% 5%;
position: relative;
width: 90%;
}
.blanc
{
padding: 0;
font-size: 1.5em;
}
.pad
{
padding: 0;
font-size: 1.1em;
}
.oeil:before
{
font-size: 1.2em;
}
.cercleo
{
top: -23px;
height: 45%;
width: 12%;
}
.photop figcaption
{
position: absolute;
padding: 5%;
visibility: visible;
background-color: rgba(0,0,0,0.6);
height: 25%;
top: 59%;
width: 90%;
}
/*---footer---*/
#bloc-bas
{
background-color: white;
}
iframe
{
display: none;
}
#formu
{
border: 1px solid rgb(92,173,211);
position: relative;
margin: auto;
top: 0;
left: 0;
width: 80%;
background: white;
}
#bouton-envoi
{
padding: 2%;
margin-bottom: 4%;
background-color: rgb(92,173,211);
}
}
@media all and (min-width: 501px) and (max-width: 850px)
{
p
{
font-size: 1.1em;
}
/*---menu nav---*/
header
{
flex-direction: column;
}
#menu li
{
padding-top: 0%;
}
nav
{
width: 45%;
}
#none
{
display: none;
}
#Acceuil
{
display: none;
}
#menu
{
width: 100%;
justify-content: space-between;
padding: 10px 0 0 0;
}
#menu li a
{
padding-top: 5px;
}
#menu li:hover
{
padding-top: 0%;
border-top: 2px solid rgb(92,173,211);
color:rgb(92,173,211);
}
#logo
{
margin-top: 5px;
}
/*---marge service---*/
.entete_section p
{
width: 68%;
}
.contenu_article
{
margin-left: 5%;
}
#bloc_gauche
{
display: none;
}
.icone
{
display: none;
}
#bloc_droite
{
width: 100%;
}
#menul
{
display: none;
}
#boxp
{
width: 100%;
}
.photop
{
margin: 4%;
position: relative;
width: 42%;
}
.blanc
{
font-size: 1.2em;
padding: 0;
}
.pad
{
font-size: 1.1em;
padding: 0;
}
.oeil:before
{
font-size: 1em;
}
.cercleo
{
top: -25%;
height: 45%;
width: 11%;
}
.photop figcaption
{
position: absolute;
width: 90%;
padding: 5%;
visibility: visible;
background-color: rgba(0,0,0,0.6);
height: 25%;
top: 60%;
}
/*---footer---*/
#bloc-bas
{
background-color: white;
}
iframe
{
display: none;
}
#formu
{
border: 1px solid rgb(92,173,211);
position: relative;
margin: auto;
top: 0;
left: 0;
width: 50%;
background: white;
}
.deca h3
{
font-size: 1.3em;
}
#bouton-envoi
{
padding: 2%;
margin-bottom: 4%;
background-color: rgb(92,173,211);
}
input
{
height: 25px;
}
textarea
{
height: 90px;
}
}
@media all and (min-width: 851px) and (max-width: 1024px)
{
header
{
flex-direction: column;
}
nav
{
width: 55%;
}
#menu
{
width: 100%;
justify-content: space-between;
padding: 10px 0 0 0;
}
.nxt
{
right: -1.8%;
}
.pre
{
left: -2.8%;
}
#logo
{
height: 0%;
}
#menu li a
{
padding-top: 5%;
}
#menu li
{
padding-top: 0%;
margin-top: 10%
}
#menu li:hover
{
padding-top: 0%;
border-top: 2px solid rgb(92,173,211);
color:rgb(92,173,211);
}
#Acceuil figcaption
{
bottom: 10%;
left: 10%;
}
.blanc
{
padding-top: 6%;
}
.photop
{
width: 30%;
}
.photop figcaption
{
visibility: visible;
}
iframe
{
bottom: -89%;
width: 100%;
}
#bloc-bas
{
flex-direction: row;
justify-content: center;
}
#formu
{
height: 410px;
margin-top: 10%;
margin-left: 20%;
width: 27em;
}
form
{
height: 85%;
}
}
@media screen and (min-width: 1025px) and (max-width: 1280px)
{
nav
{
width: 50%;
}
#Acceuil figcaption
{
width: 39%;
}
.nxt
{
right: -1.5%;
}
.pre
{
left: -2%;
}
#formu
{
margin-left: 60%;
margin-top: 7%;
width: 28%;
}
}