bonjour je suis une page d'accueil

Code:

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>

<table cellspacing="10"><tr><td colspan="3"><div class="nomfow">Nom du Forum</div><div class="lienutil"><a href="LIEN">Lien</a> - <a href="LIEN">Lien</a> - <a href="LIEN">Lien</a> - <a href="LIEN">Lien</a> - <a href="LIEN">Lien</a></div>

</td></tr><tr><td><div class="bloc1"><div class="titrep">Crédits</div>

Page d'Accueil (c) Sunhae de <a href="http://forum-theme.forumperso.com/">Libre Graph'</a>

</div>
</td><td><div class="bloc2"><div class="titrep">Contexte</div><div class="bloc2texte">

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>
<img src="http://image.noelshack.com/fichiers/2013/32/1375970727-img.png" />

</div>
</td><td><div class="bloc3"><div class="titrep">Nouveautés</div>

XX.XX.XX - Nouveauté Ici.<br />
XX.XX.XX - Nouveauté Ici.<br />
XX.XX.XX - Nouveauté Ici.<br />
XX.XX.XX - Nouveauté Ici.<br />
XX.XX.XX - Nouveauté Ici.

</div>
</td>
</tr></table>



<table cellspacing="10"><tr><td><div class="bloc3"><div class="titrep">Staff</div><br />

<table><tr><td><div class="staff">NOM
<img src="http://image.noelshack.com/fichiers/2013/32/1375972361-staff.png" /></div>
</td><td><div class="staff">NOM
<img src="http://image.noelshack.com/fichiers/2013/32/1375972361-staff.png" /></div>
</td><td><div class="staff">NOM
<img src="http://image.noelshack.com/fichiers/2013/32/1375972361-staff.png" /></div>
</td></tr></table>

</div>
</td><td><div class="bloc1"><div class="titrep">Concours</div><div style="text-align: center; margin-top: 5px;"><img src="http://image.noelshack.com/fichiers/2013/32/1375974881-sotw.png" /></div>

</div>
</td><td><div class="bloc4"><div class="titrep">Partenaires</div>
<br />
<img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" />    <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" />    <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" />
<br /><img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" />    <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" />    <img src="http://image.noelshack.com/fichiers/2013/32/1375974089-partenaire.png" />

</div>
</td></tr></table>

Code:

/* PA (C) SUNHAE */
.nomfow{
  font-size: 16px;
  text-align: center;
  color: #B0D3E9;
  text-shadow: 1px 1px 0px #E9E4D1;
  text-transform:uppercase;
  letter-spacing: -2px;
}

.lienutil{
  text-align: center;
  color: #EBD7D8!important;
  text-shadow: 1px 1px 0px #E9E4D1;
  text-transform:uppercase;
}

.titrep{
  display: block;
  text-align: center;
  width: auto;
  height: 15px;
  background-color: #EBD7D8;
  color: #F4F2E8;
  text-transform:uppercase;
  text-shadow: 1px 1px 0px #E2C5C6;
}

.bloc1{
  border: 1px solid #EBD7D8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 150px;
  height: 120px;
  background-color: #F4F2E8;
  overflow: auto;
}

.bloc2{
  border: 1px solid #EBD7D8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 300px;
  height: 120px;
  background-color: #F4F2E8;
  overflow: hidden;
}

.bloc2texte{
  width: 295px;
  height: 105px;
  overflow: auto;
  padding: 3px;
}

.bloc2 img{
  margin-top: -111px;
  transition: transform 2s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  -webkit-transition: -webkit-transform 3s;
}

.bloc2:hover img{
  transform: translateX(+338px);
  -moz-transform: translateX(+338px);
  -o-transform: translateX(+338px);
  -webkit-transform: translateX(+338px);
}

.bloc3{
  border: 1px solid #EBD7D8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 220px;
  height: 120px;
  background-color: #F4F2E8;
  overflow: auto;
}

.bloc4{
  border: 1px solid #EBD7D8;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  width: 300px;
  height: 120px;
  background-color: #F4F2E8;
  overflow: auto;
}

.bloc4 img{
  margin: 3px;
}

.staff{
  margin: 3px;
  border: 1px solid #EBD7D8;
  -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
  width: 60px;
  height: 60px;
  text-align: center;
  background-color: #F4F2E8;
  overflow: hidden;
}

.staff img{
  -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
  margin-top: -12px;
  transition: transform 1s;
  -moz-transition: -moz-transform 2s;
  -o-transition: -o-transform 2s;
  -webkit-transition: -webkit-transform 2s;
}

.staff:hover img{
  -webkit-border-radius: 125px;
  -moz-border-radius: 125px;
  border-radius: 125px;
  transform: translateX(+98px);
  -moz-transform: translateX(+98px);
  -o-transform: translateX(+98px);
  -webkit-transform: translateX(+98px);
}
/* FIN */

Pa orange et verte

Code:

    <div id="fond">
   
    <div id="nom">
    Nom du forum
    </div>
   
    <div id="nom2">
    Petite phrase pour le présenter.
    </div>
   
    <div id="menu1">
   
    <div id="menu">
   
    <ul>
   
    <li id="li1">
    <a href="#">Staff</a>
    <ul class="li3">
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    </ul>
   
    </li>
   
    <li>
    <a href="#">Prédéfinis</a>
    <ul class="li3">
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    </ul>
   
    </li>
   
    <li id="li2">
    <a href="#">RP libres</a>
    <ul class="li3">
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    <li>
    <a href="#">XXX</a>
    </li>
   
    </ul>
   
    </li>
   
    </ul>
   
    </div>
   
    </div>
   
    <div id="slider">
   
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis.
    </p><span><img src="http://img15.hostingpics.net/pics/570035ilikeorangebylicchan.jpg" /></span>
    </div>
   
    <div id="liens">
   
    <div class="lien-pa">
    <a href="LIEN" alt="Règlement" target="_blank">Règlement</a>
    </div>
   
    <div class="lien-pa">
    <a href="LIEN" target="_blank">Avatars pris</a>
    </div>
   
    <div class="lien-pa">
    <a href="LIEN" target="_blank">Prédéfinis</a>
    </div>
   
    <div class="lien-pa">
    <a href="LIEN" target="_blank">Un RP ?</a>
    </div>
   
    <div class="lien-pa">
    <a href="LIEN" target="_blank">Un lieu ?</a>
    </div>
   
    <div class="lien-pa">
    <a href="LIEN" target="_blank">Qui est qui ?</a>
    </div>
   
    <div class="lien-pa">
    <a href="LIEN" target="_blank">Gazette</a>
    </div>
   
    </div>
   
    <div id="long">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis.
    </div>
   
    <div id="b1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vehicula tincidunt eros, non eleifend nunc bibendum sed. Curabitur malesuada metus ac aliquet molestie. Curabitur ipsum nibh, lacinia vitae ornare vel, fermentum quis odio. In nec lorem vel odio tristique pulvinar. Proin aliquam ullamcorper arcu ac mollis. Mauris aliquet scelerisque malesuada. Vivamus aliquet ipsum velit, sed consectetur mauris luctus sed. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nisi neque, dapibus et dignissim at, mattis quis arcu. Phasellus eleifend condimentum porttitor. Quisque sed mauris eget risus fermentum lobortis a quis turpis. Vestibulum hendrerit orci et odio viverra, a tincidunt tellus pulvinar. Aenean nec ligula nisi. Etiam egestas quis purus nec pellentesque.
    </div>
   
    <div id="b2">
   
    </div>
    Codage réalisé par <a href="http://forum-theme.forumperso.com/u3187">Mello</a>.
    </div>

Code:

    #fond{
    text-align:center;
    border-radius:35px;
    background-color:#99CC32;
    border-left:4px double #E47833;
    border-right:4px double #E47833;
    border-top:2px dotted #E47833;
    border-bottom:2px dotted #E47833;
    padding:10px;
    margin-top:60px;
    width:650px;
    height:475px;
    font-size:13px;}

    #nom{
    color:#E47833;
    text-shadow:0px 0px 5px #D98719;
    letter-spacing:4px;
    font-variant:small-caps;
    margin-top:-65px;
    font-weight:bold;
    font-family: 'Bigelow Rules', cursive;
    font-size:80px;}

    #nom2{
    color:white;
    text-shadow:0px 0px 5px #D98719;
    letter-spacing:0px;
    margin-top:-27px;
    font-family: 'Bigelow Rules', cursive;
    font-size:22px;}

    #menu1{
    width:500px;
    height:20px;
    margin:auto;
    margin-bottom:40px;}

    #slider{
    float:left;
    width:280px;
    height:180px;
    border-radius:0px 50px 10px 10px;
    border:4px solid #E47833;}

    #slider p{
    width:240px;
    text-align:justify;
    padding:8px;}

    #slider img{
    border:4px solid #E47833;
    border-radius:0px 50px 10px 10px;
    width:280px;
    height:180px;}
   
    #slider span{
    width:280px;
    height:180px;
    position:absolute;
    margin-top:-173px;
    margin-left:-144px;
    transition : margin-left 0.7s linear, width 3s ease;}

    #slider:hover span{
    width:0px;
    margin-left:-500px;}

    #liens{
    margin-left:14px;
    float:left;
    width:120px;
    height:180px;}

    #long{
    overflow:auto;
    text-align:justify;
    padding:10px;
    border:4px double black;
    float:right;
    width:180px;
    height:344px;
    border-radius:50px 0px 10px 0px;
    border:4px solid #E47833;
    border-left:4px dotted #E47833;
    border-top:4px dotted #E47833;
    }

    #b1{
    padding:10px;
    float:left;
    margin-top:20px;
    border:4px double black;
    width:220px;
    height:140px;
    overflow:auto;
    text-align:justify;
    border:4px solid #E47833;
    border-top:4px dotted #E47833;
    border-radius:30px 10px 10px 8px;}

    #b2{
    background-image:url('http://img15.hostingpics.net/pics/537485orangebyisthatwhatyoumintd5tyv5b.jpg'); /*pour modifier l'image dans la ligne du bas, la fille sur un fond orange, c'est ici*/
    text-align:justify;
    float:right;
    margin-top:20px;
    margin-right:10px;
    border:2px solid white;
    border-left:4px dotted white;
    border-right:4px dotted white;
    border-radius:30px;
    width:160px;
    height:140px;}

    #gif{
    width:120px;
    height:120px;}

    .lien-pa{
    border-radius:8px;
    font-family: 'Molle', cursive;
    margin-top:7px;
    font-size:15px;
      width:120px;
      height:18px;
    background-color:#E47833;
    border-left:3px solid white;
    border-right:3px solid white;
    transition :background-color 1s linear, font-size 1s linear;}
     
    .lien-pa:hover{
    background-color:white;
    border-left:3px solid #E47833;
    border-right:3px solid #E47833;
    font-variant:small-caps;}

    .lien-pa a{
    color:white;
    text-decoration:none;}

    .lien-pa a:hover{
    color:#E47833;}

    #menu ul {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;}

    #menu li {
    float:left; }

    #menu li a {
    color:white;
    font-size:18px;
    font-family:'Molle';
    display:block;
    width:150px;
    text-decoration:none;
    padding:5px; }

    #menu li a:hover {
    color:#FFD700; }

    #menu ul li ul {
    display:none; }

    #menu ul li:hover ul {
    display:block;
    font-size:14px;
    background-color:#99CC32; }

    #menu li:hover ul li {
    float:none; }

    #menu li ul {
    position:absolute; }

    #li1{
    border-radius:15px 0px 0px 15px;
    border-left:4px solid #E47833;
    border-right:2px dotted #D98719;}

    #li2{
    border-radius:0px 15px 15px 0px;
    border-right:4px solid #E47833;
    border-left:2px dotted #D98719;}

    .li3{
    border:1px solid #E47833;
    border-top:none;
    border-radius:0px 0px 20px 20px;}

    #b1:first-letter, #long:first-letter{
    margin-left:10px;
    font-size:17px;
    color:#E47833;
    font-weight:bold;}