HTML CSSResult
EDIT ON
/*Reset CSS*/


h1 { margin:0px auto 0px auto; text-align:center; color:#ccc;}

nav {
  max-width: 710px;
    min-width: 250px;
  font-family: 'Roboto Condensed', sans-serif;

}

*{
	padding:0px;
	margin:0px;
	}


body{
	padding:auto;
	margin:auto;	
	height:auto;	
	color:#fff;
	font: normal 90% "Trebuchet MS",Verdana,"Lucida Grande",Tahoma,Arial,Helvetica,Sans-Serif;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
	background: #000;
 
	max-width: 850px;
    min-width: 300px;
}











.contenu5{
	float:left;
	margin-left:60px;
	padding-top:40px;
	
}
.contenu6{
	float:left;
	margin-left:60px;
	padding-top:40px;
	
}
.contenu7{
	float:left;
	margin-left:60px;
	padding-top:40px;
	
}
.contenu8{
	float:left;
	margin-left:60px;
	padding-top:40px;
	
}




h2 {
	
	font-size:18px;
	color: #fff;
	text-decoration:none;
}

a {
	
	color:#000;
	text-decoration:none;
}



#wrap {
	/* position du conteneur pour le prŽparer ˆ bouger */
	position: relative;
	top: 0;
	-webkit-transition: top 1.4s cubic-bezier(.49,.22,.52,1);
	-moz-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
	-ms-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
	-o-transition: top 1.4s cubic-bezier(.49,.22,.52,1.35);
	/* on prŽpare la transition ˆ venir */
	transition: top 2.2s cubic-bezier(.49,.22,.52,1.35);
	max-width: 850px;
    min-width: 300px;
}
 
#nav {
	/* on fixe le menu en haut */
	position: fixed;
	top: 0; left: 0; right: 0;
	padding: 0,5em 0;
	margin: 0;
	/* on centre les liens */
	text-align: center;
	background: #transparent;
	font-size: 1em;
	z-index:5px;
  
}
#nav li {
	/* on aligne les ŽlŽments de liste */
	display: inline;
	margin:0;
   	
}
#nav a {
	display: inline-block;
	margin:10px;
	color: #fff;
	text-transform: uppercase;
	text-decoration: none;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-ms-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
    font-size:30px;
   
}






#slide1,#slide2, #slide3, #slide4 , #slide5, #slide6, #slide7{
	height: 1210px;
	padding-top:100px;
	max-width: 850px;
    min-width: 300px;
	
}
	 
	 
/* attribution des images de fond */
#slide1 { background:rgba(0, 0, 0, 7)url(couleurs/CAFE.jpg) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; }
#slide2 { background:rgba(0, 0, 0, 7)url(couleurs/) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; }
#slide3 { background:rgba(0, 0, 0, 7)url(visages/) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; }
#slide4 { background:rgba(0, 0, 0, 7)url(visages/) center 0 no-repeat fixed; max-width: 850px;
    min-width: 300px;}
#slide5 { background:rgba(0, 0, 0, 7)url(visages/) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; }
#slide6 { background:rgba(0, 0, 0, 7)url(visages/) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; } 
#slide7{ background:rgba(0, 0, 0, 7)url(visages/) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; } 
#slide8{ background:rgba(0, 0, 0, 7)url(visages/) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; } 
#slide9{ background:rgba(0, 0, 0, 7)url(visages/) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; } 
#slide10{ background:rgba(0, 0, 0, 7)url(visages/) center 0 no-repeat fixed;max-width: 850px;
    min-width: 300px; }


#slide1 .slide_inside img {
	margin-top: 280px;
    margin-left: 209px;
   -webkit-transform: scale(1.97);
	transform: scale(1.97);
	-webkit-transition: .9s ease-in-out;
	transition: .9s ease-in-out;
	max-width: 850px;
    min-width: 300px;
}



#slide1 .slide_inside:hover img {
	margin-top: 280px;
    margin-left: 209px;
	-webkit-transform: scale(0.10);
	transform: scale(0.10);
	max-width: 850px;
    min-width: 300px;
	
}



#slide2 .slide_inside  {
	margin-top:-40px;
	max-width: 850px;
    min-width: 300px;

}
#slide2 p {
	color:#fff;

}
#slide3 .slide_inside {
	margin-top: -50px;
	max-width: 850px;
    min-width: 300px;
}
#slide4 .slide_inside  {
	margin-top:-30px;
    max-width: 850px;
    min-width: 300px;
}

#slide5 .slide_inside {
	margin-top:0px;
    max-width: 850px;
    min-width: 300px;
}
#slide6 .slide_inside {
	margin-top:100px;
    max-width: 850px;
    min-width: 300px;
}


		 
/* dŽcalage du conteneur vers le haut */
#s2:target ~ #wrap {top:-1320px;max-width: 850px;
    min-width: 300px;
	}
	
/* vers Slide 3 */
#s3:target ~ #wrap {top:-2620px;max-width: 850px;
    min-width: 300px;}
  
/* vers Slide 4 */
#s4:target ~ #wrap {top:-3935px;max-width: 850px;
    min-width: 300px;}

/* vers Slide 5 */
#s5:target ~ #wrap {top:-5300px;max-width: 850px;
    min-width: 300px;}

#s6:target ~ #wrap {top:-6550px;max-width: 850px;
    min-width: 300px;}


	 
	 
	 .slide_inside3 a{
	margin-top:-216px;
	margin-left:290px;
	font-family:"arial";
	font-size:20px;
	color: #fff;
	text-decoration:none;
	position: absolute;
    max-width: 850px;
    min-width: 300px;
} 
	 
	 
	 

#bookmarker_38026{
   
	max-width: 850px;
    min-width: 300px;
	margin-top:0px;
	margin-left:200px;
	
    }
	
	#container {
    max-width: 710px;
    min-width: 250px;
    height:1500px;	
    margin: 0 auto;
    padding-top: 50px;
    background-color:#000;
}

	
	.titre5 a{
    font-family:helvetica;
	color:#B5B5B5;
	font-size:23px;	
	
	padding-left:0px;
	margin-top:70px;
	text-decoration:none;
    text-align:center;
}




.images{
    max-width: 710px;
    min-width: 250px;
	margin-top:250px;
    font-family:Helvetica;
    text-align: center;
 
	display: inline-block;
}

.images img:hover{
	 box-shadow: 0px 0px 150px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 500ms ease-in;
    transform: scale(2.5);
	;
}
 	.texte3 a{
    font-family:helvetica;
	color:#ccc;
	font-size:10px;	
	padding-left:0px;
	margin-top:150px;
	text-decoration:none;
    text-align:center;
}