Page d'accueil | Colorée & Coins très arrondis

Admin Messages : 131 Date d'inscription : 12/07/2010 Age : 29

Code CSS

Code:: /* ***************** CSS DE LA PAGE D'ACCUEIL ********************
by mimizZ | www.graph-forum.com
Droit à la modification des couleurs et du fond uniquement
****************************************************************** */

#EnTete {
position:relative;
/* largeur et hauteur de l'image */
width:800px;
height:500px;
}

#EnTete #Bande {
position:absolute;
/* positionnement de la bande par rapport à la page d'accueil */
left:119px;
top:100px;
/* largeur et hauteur de la bande */
width:531px;
height:72px;
background-image: url('http://img15.hostingpics.net/pics/776869Bandeau.png');
}

.titre2 { /* TITRE "PRÉSENTATION */
position:absolute;
/* positionnement de la banche par rapport à l'image */
left:175px;
top:16px;
font-family:Helvetica Neue;
text-transform:uppercase;
color:#535353;
font-weight:bold;
font-size:24px;
letter-spacing:-1px;
text-shadow:1px 1px 1px #fff;
}

.titre2:hover {color:#00abea;}

a:link{ cursor: pointer;}
a, a:hover {text-decoration:none;}

.titre { /* TITRE " BIENVENUE SUR LE FORUM " */
font-family:Helvetica Neue;
text-transform:uppercase;
letter-spacing:-1px;
font-weight:bold;
font-size:38px;
color:#eeeeee;
text-shadow: 1px 2px 1px #c3c3c3;
text-align:center;
-webkit-border-radius: 10px;
-webkit-border-bottom-right-radius: 40px;
-webkit-border-bottom-left-radius: 40px;
-moz-border-radius: 10px;
-moz-border-radius-bottomright: 40px;
-moz-border-radius-bottomleft: 40px;
border-radius: 10px;
border-bottom-right-radius: 40px;
border-bottom-left-radius: 40px;
background-color:#909090;
border-bottom: 3px solid #cccccc;
padding:5px;
}

.titre:hover {letter-spacing:0px;}

.presentation { /* CADRE TURQUOISE " PRÉSENTATION " */
margin-right:-4px;
margin-left:-10px;
background-color:#00b9e9;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
box-shadow: 0px 0px 5px #000;
width:430px;
height:auto;
padding-bottom:8px;
padding-left:16px;
padding-right:16px;
padding-top:50px;
}

.presentation p { /* ZONE DE TEXTE PRÉSENTATION */
background-color:#FFF;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
border-bottom: 3px solid #84d0f0;
border-left: 3px solid #84d0f0;
border-right: 3px solid #84d0f0;
color:#666;
font-family:calibri;
font-size:13px;
text-align:justify;
padding:20px;
}

.navigation { /* LIENS */
font-family:"Courier New", Courier, monospace;
text-transform:uppercase;
-webkit-border-top-left-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-topleft: 30px;
-moz-border-radius-bottomleft: 30px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
width:125px;
background-color:#a6d013;
font-size:12px;
text-align:center;
text-shadow:0px 0px 3px #666;
margin-left:15px;
margin-top:12px;
padding: 3px;
border-bottom:2px solid #e9ff9a;
}

.navigation:hover {
background-color:#fff15f;
text-shadow:0px 0px 3px #fff;
letter-spacing:1px;
border-bottom:2px solid #ffd05f;
}

.navigation a {color:#FFF} /* COULEUR DES LIENS */
.navigation a:hover {color:#F60} /* COULEUR DES LIENS AU SURVOL */

.annonces { /* ANNONCES QUI DÉFILENT */
width:170px;
max-height:185px;
-webkit-border-top-right-radius: 30px;
-webkit-border-bottom-right-radius: 30px;
-moz-border-radius-topright: 30px;
-moz-border-radius-bottomright: 30px;
border-top-right-radius: 30px;
border-bottom-right-radius: 30px;
background-color:#61569d;
padding-top:8px;
padding-bottom:8px;
padding-right:10px;
box-shadow: 1px 0px 4px #000;
border-left:thin solid #000;
text-align:center;
}

.titre3 { /* TITRE " ANNONCE " */
color:#ab8cbc;
font-size:19px;
font-family:helvetica neue;
text-transform:uppercase;
letter-spacing:-1px;
font-weight:bold;
text-align:center;
text-shadow: 2px 2px 1px #4a4179;
}

.titre3:hover {
color:#d6c8f5;
letter-spacing:0px;
}

.annonces p { /* ZONE DE TEXTE " ANNONCES */
color:#666;
font-family:calibri;
font-size:13px;
background-color:#FFF;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
text-align:justify;
padding:8px;
border-right:3px solid #d6c8f5;
border-bottom:3px solid #d6c8f5;
}

.html-marquee {height:125px;} /* PERMET DE LE DÉFILEMENT DES ANNONCES, NE PAS TOUCHER ! */
.html-marquee2 {height:31px;} /* PERMET DE LE DÉFILEMENT DES PARTENAIRES, NE PAS TOUCHER ! */

.partenaires { /* CADRE DES PARTENAIRES + TITRE */
width:500px;
background-color:#f39400;
box-shadow: 0px 0px 5px #000;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
padding-left:250px;
padding-right:10px;
padding-top:1px;
padding-bottom:1px;
background-image: url('http://img15.hostingpics.net/pics/874614Partenaires.png');
background-repeat:no-repeat;
background-position: left center;
}

.partenaires p { /* ZONE OÙ LES LOGOS SONT MIS */
background-color:#FFF;
height:31px;
padding:6px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border-bottom: 3px solid #f3c200;
border-right: 3px solid #f3c200;
border-left: 3px solid #f3c200;
}

.partenaires img { /* OMBRE PORTÉE SUR LES LOGOS DE PARTENARIAT */
box-shadow: 0px 0px 4px #999; }

.credits { /* NE PAS ENLEVER ! */
font-family:calibri;
font-size:12px;
color:#b5b5b5;
padding:10px;
text-shadow: 0px 0px 4px #000;
text-align:center; }
.credits a {color:#e2007a;}
.credits a:hover {color:#ea69a0;}

/* ********************* FIN DU CODE DE LA PA ********************* */

Admin Messages : 131 Date d'inscription : 12/07/2010 Age : 29

A coller dans la PA

Code:: <div id="EnTete"><div style="background-image:url('http://img15.hostingpics.net/pics/210661Motif.png'); border: 8px solid #fff ; border-right:5px #fff solid; width: 800px; height: auto; box-shadow: 0px 0px 6px #666; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;"><div class="titre">Bienvenue sur le forum</div><br><br>

<table style="width:780px;"><tr><td style="width:150px;">

<div class="navigation"><a href="http://graph-forum.forumactif.com">Lien 1</a></div>
<div class="navigation"><a href="http://graph-forum.forumactif.com">Lien 2</a></div>
<div class="navigation"><a href="http://graph-forum.forumactif.com">Lien 3</a></div>
<div class="navigation"><a href="http://graph-forum.forumactif.com">Lien 4</a></div>
<div class="navigation"><a href="http://graph-forum.forumactif.com">Lien 5</a></div>
<div class="navigation"><a href="http://graph-forum.forumactif.com">Lien 6</a></div></td>

<div id="Bande"><span class="titre2">Présentation</span></div>

<td style="width:440px;"><div class="presentation"><p>

Quisque a suscipit metus. Curabitur egestas volutpat bibendum. Ut blandit viverra nisi, pretium volutpat neque congue nec. Proin a sapien eget neque pharetra malesuada a eu nibh. Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit, a vehicula felis tellus ut ante. Quisque sodales sollicitudin nunc at porta. Integer convallis mollis arcu, id cursus risus venenatis ac. Sed gravida, magna et molestie tempor, ante eros dignissim enim, sit amet volutpat elit nulla sit amet magna.<br /> Fusce varius, tellus eget tincidunt semper, quam magna tincidunt nisl, imperdiet condimentum lectus orci et neque. Nullam et erat quam, ac condimentum magna. Donec lobortis dapibus eros, vitae blandit felis faucibus eu. Nulla ipsum velit, posuere vel malesuada eu, rutrum et odio. Maecenas arcu augue, blandit a porta sit amet, vulputate non purus. Nullam quis elit quis sem blandit varius sit amet vitae lacus. Suspendisse potenti. Suspendisse fringilla lacinia sagittis.

</p></div></td>

<td style="width:190px"><p> </p><div class="annonces"><span class="titre3">Annonces</span><p><marquee class="html-marquee" direction="up" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>

➜ Quisque a suscipit metus. Curabitur egestas volutpat bibendum.</br></br>
➜ Ut blandit viverra nisi, pretium volutpat neque congue nec.</br></br>
➜ Proin a sapien eget neque pharetra malesuada a eu nibh.</br></br>
➜ Ut posuere, odio nec laoreet scelerisque, odio libero tincidunt elit.

</marquee></p></div></td></tr></table><br>

<center><div class="partenaires"><p><marquee class="html-marquee2" direction="left" scrollamount="3" onmouseover=this.stop(); onmouseout=this.start();>

<a href="http://graph-forum.forumactif.com" target="_blank"><img src="http://img15.hostingpics.net/pics/8685298831.png"></a>

</marquee></p></div></center>

<div class="credits">Codage by <a href="http://graph-forum.forumactif.com" target="_blank"><b>mimizZ</b></a> | Tous droits réservés</div></div></div><br><br><br><br><br><br>