Bonjour,
Oui bien entendu, le site n'est pas encore en ligne donc je vous le code :
*HTML*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Elisa Pecenko</title>
<style type="text/css" media="all">
@import "style.css";
</style>
<link rel="icon" type="image/png" href="favicon.png" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//To switch directions up/down and left/right just place a "-" in front of the top/left attribute
//Vertical Sliding
$('.boxgrid.slidedown').hover(function(){
$(".cover", this).stop().animate({top:'-260px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:300});
});
//Horizontal Sliding
$('.boxgrid.slideright').hover(function(){
$(".cover", this).stop().animate({left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({left:'0px'},{queue:false,duration:300});
});
//Diagnal Sliding
$('.boxgrid.thecombo').hover(function(){
$(".cover", this).stop().animate({top:'260px', left:'325px'},{queue:false,duration:300});
}, function() {
$(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
});
//Partial Sliding (Only show some of background)
$('.boxgrid.peek').hover(function(){
$(".cover", this).stop().animate({top:'90px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'0px'},{queue:false,duration:160});
});
//Full Caption Sliding (Hidden to Visible)
$('.boxgrid.captionfull').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'260px'},{queue:false,duration:160});
});
//Caption Sliding (Partially Hidden to Visible)
$('.boxgrid.caption').hover(function(){
$(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
}, function() {
$(".cover", this).stop().animate({top:'220px'},{queue:false,duration:160});
});
});
</script>
</head>
<body>
<div class="haut">
<ul>
<li><a href="#.html"><img src="empreinte-1.png" alt="" /> Nouveautés</a></li>
<li><a href="#.html"><img src="empreinte-1.png" alt="" /> Travaux</a></li>
<li><a href="contact.html"><img src="empreinte-1.png" alt="" /> Contact</a></li>
</ul>
</div>
<div class="gauche">
<img src="images/fleur-page-principale.png" alt="gauche"/>
</div>
<div class="travaux">
<img src="empreinte-1.png" alt="" /> Travaux récents
</div>
<div class="presentation"> <p><br> Diplômée de l'Académie des Beaux-Arts de Tournai en 2010, je vous invite à rentrer dans l'univers de mes derniers projets.
En tant qu'architecte d'intérieur, décoratrice, designer, je vous propose mes services et conseils.
Si vous désirez changer ou améliorer votre espace intérieur, de la couleur de vos murs à un changement global,
si vous êtes aussi architecte et que vous cherchez quelqu'un pour agrandir votre équipe, ou simplement une aide ou une collaborateur,
je suis à votre entière disposition.
N'hésitez pas à me contacter pour de plus amples informations.</p> </div>
<div class="boxgrid captionfull">
<img src="cuisine-1.jpg"/>
<div class="cover boxcaption">
<h3>Cuisine</h3>
<p><br/><a href="#.html">Nouveautés</a></p>
</div>
</div>
<div class="boxgrid captionfull">
<img src="centre.jpg"/>
<div class="cover boxcaption">
<h3>Centre SPA</h3>
<p><br/><a href="#.html">Nouveautés</a></p>
</div>
</div>
<div class="footer">
<ul>
<li><a href="http://www.facebook.com/profile.php?id=694912619"> Contactez moi via Facebook</a></li>
<li><a href="#.html">Contactez moi par mail</a></li>
</ul>
</div>
</body>
</html>
*CSS*
@charset "UTF-8";
/* CSS Document */
body {
background-color:#DEDEDE;
font-family: "Arial", Helvetica, sans-serif;
color:#000;
}
.haut {
border-bottom: 2px #A7A9AC solid;
width:485px;
height:62px;
float:right;
}
.haut a {
text-decoration:none;
color:#59363C;
font-size: 20px;
}
.haut ul li {
list-style-type:none;
display:inline-block;
padding: 0 10px;
}
.haut a:hover
{
text-decoration: underline;
}
.gauche {
width:492px;
height:386px;
/*background-image:url(images/fleur-page-principale.png);*/
margin-left:-8px;
margin-top:-9px;
}
.travaux{
border-bottom: 2px #A7A9AC solid;
width:150px;
height:35px;
float:left;
margin-top:50px;
}
.presentation
{
color:#000;
background-color:#CCC;
opacity:0.6;
text-size:16px;
width:433px;
height:318px;
margin-left:800px;
margin-top:-290px;
padding: 5px 10px 0px 30px;
position:absolute;
}
.boxgrid{
width: 355px;
height: 259px;
margin:100px;
margin-top:115px;
float:left;
background:#CCC;
border:thick 2px #59363C;
overflow: hidden;
position: relative;
}
.boxgrid img{
position: absolute;
top: 0;
left: 12px;
border: 0;
}
.boxcaption{
float: left;
position: absolute;
background:#999;
height: 100px;
width: 100%;
opacity: .8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
color:#FFF;
}
.boxcaption a {
text-decoration:none;
color:#FFF;
font-size: 15px;
}
.captionfull .boxcaption {
top: 260;
left: 0;
}
.caption .boxcaption {
top: 220;
left: 0;
}
.footer {
border-bottom: 2px #A7A9AC solid;
width:500px;
height:60px;
margin-left:445px;
margin-top:450px;
}
.footer a {
text-decoration:none;
color:#59363C;
font-size:15px;
}
.footer ul {
text-align:center;
}
.footer ul li {
list-style-type:none;
display:inline-block;
padding:10px;
}
.footer a:hover
{
text-decoration: underline;
}
Cela vous aide-t-il?
