body, html{
margin:0;
height: 100%;
}
@font-face {
font-family: 'montserratregular';
src: url('monserrat/montserrat-regular-webfont.eot');
src: url('monserrat/montserrat-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('monserrat/montserrat-regular-webfont.woff2') format('woff2'),
url('monserrat/montserrat-regular-webfont.woff') format('woff'),
url('monserrat/montserrat-regular-webfont.ttf') format('truetype'),
url('monserrat/montserrat-regular-webfont.svg#montserratregular') format('svg');
font-weight: normal;
font-style: normal;
}
h1 { font-family: "Kimberley", sans-serif }
/* tableau de bord */
header{
margin: auto;
background-color: white;
padding-bottom:12px;
width:925px;
display:block;
}
#firstline{
}
.logo{
float:left;
padding-top:20px;
width:190px;
}
#info{
float:left;
width:550px;
height: 3em;
padding-top:35px;
}
#categorie{
text-align: center;
font-family: 'montserratregular', sans-serif;
font-weight: 700;
}
#article{
text-align: center;
font-family: 'montserratregular', sans-serif;
}
#boiteheadpicto{
float: left;
width:40px;
height:40px;
margin: 35px 5px 0px 5px;
}
#headpicto{
width: 30px;
display: block;
margin: auto;
transition: width 0.2s, margin-top 0.2s;
margin-top:5px;
}
#headpictoselected{
width: 40px;
}
#boiteheadpicto:hover #headpicto {
width: 40px;
margin-top:0px;
}
#menu{
clear: both;
padding-top: 12px;
display: table;
margin: auto;
}
/* système de pictos */
#tableau{
width:900px;
margin : auto;
padding-top: 150px;
}
#boitepicto{
width:40px;
height:40px;
float:left;
}
#picto{
width:10px;
display: block;
margin: auto;
transition: width 3s, margin-top 3s;
margin-top: 15px;
}
#pictoselected{
width:40px;
}
#boitepicto:hover #picto {
width: 40px;
margin-top:0px;
transition: width 0.25s, margin-top 0.25s;
}
/* mise en page contenus */
#contenu{
padding-top: 30px;
width:900px;
margin:auto;
}
/*typo */
p{
font-family: 'Montserrat', sans-serif;
font-size: 15px;
line-height:22px;
padding-top: 50px;
padding-bottom: 20px;
}
#pcentre{
width:650px;
margin: auto;
margin-top: 25px;
}
#gras{
font-weight:700;
}
#contenu a{
color:black;
font-weight:700;
}
/*images */
#imageintro{
width: 900px;
}
#imagevid{
width: 400px;
padding: 30px 50px 50px 30px;
float:left;
display: inline;
}
#imagevidcentre{
width: 400px;
padding: 30px 30px 50px 30px;
display: table;
margin: auto;
}
/*picto */
#pictocontenu{
width: 80px;
display: block;
margin: auto;
transition: width 0.2s, margin-top 0.2s;
margin-top:8px;
}
#boitepictocontenu{
float: left;
width: 96px;
height:96px;
margin: 50px;
}
#boitepictocontenu:hover #pictocontenu {
width: 96px;
margin-top:0px;
transition: width 0.25s, margin-top 0.25s;
}
.centragepicto{
display: table;
margin: auto;
}
/* footer */
#bas{
padding-top:30px;
clear: both;
}
#credits{
float: right;
color:#BBBBBB;
font-family: 'Montserrat', sans-serif;
padding-bottom: 30px;
}
2015Éducationsensuelle
#web #sexualité #projet de diplômeAujourd'hui, les productions pornographiques et médicales proposent soit une approche idéalisée et artificielle de la sexualité, soit une approche anxiogène. Le site Éducation sensuelle.com, à travers cette proposition graphique, va tenter de proposer une approche différente de la sexualité, basée sur la confiance, la complicité, la sensualité, et sur le soutien sans limites au plaisir.
