Bonjour,
Voici une nouvelle page d'accueil. J'espère qu'elle vous plaira.
La largeur est prédéfinie à 800px de largeur. Les srcolls externes de l'aperçu n'apparaissent pas dans l'original c'est parce que j'utilise un Iframe à cause du code.
Voici une nouvelle page d'accueil. J'espère qu'elle vous plaira.
La largeur est prédéfinie à 800px de largeur. Les srcolls externes de l'aperçu n'apparaissent pas dans l'original c'est parce que j'utilise un Iframe à cause du code.
- Aperçu:
- Code:
/*titres*/
.titres{
display: inline-block;
font-size: 25px;
color: purple;
margin-top: -15px;
font-style: italic;
max-width: 500px;
}
.titre_staff{
font-size: 25px;
color: purple;
font-style: italic;
}
/*staff*/
.staff{
background-color: #000;
width: 130px;
height: 130px;
border-radius: 200px;
margin-top: 20px;
color: #FFF;
position: relative;
z-index: 10;
transition-duration: 10s;
}
.staff:hover{
background-color: #000;
width: 130px;
height: 130px;
border-radius: 200px;
margin: 20px 130px 0 -130px;
color: #FFF;
position: relative;
z-index: 10;
transition-duration: 1s;
}
/*contenus globaux*/
.contenu_ligne1{
background-color: #000;
border-radius: 50px;
width: 180px;
height: 180px;
margin: 15px 5px 0 5px;
color: #FFF;
}
.contenu_ligne2{
background-color: #000;
border-radius: 50px;
height: 200px;
margin: 15px 5px 0 5px;
color: #FFF;
}
.contenu_ligne3{
background-color: #000;
border-radius: 20px;
height: 50px;
margin: 15px 5px 0 5px;
color: #FFF;
}
/*images*/
.predef_td{
width: 82px;
height: 82px;
background-color: #FFF;
border: 1px solid #FFF;
}
/*Textes*/
.text{
margin: 5px 15px 0 0;
padding: 0 5px 0 10px;
overflow: auto;
height: 165px;
text-align: justify;
}
.staff_text{
position: relative;
text-align: center;
margin: 30px 0-75px 0;
z-index: 30;
color: #000;
}
/*partenaires*/
.partenaire{
background-color: #000;
border-radius: 20px;
width: 100%;
height: 35px;
color: #FFF;
vertical-align: middle;
padding: 10px 0 10px 0;
}
- Code:
<table border="0" width="800" height="50%" align="center">
<tr>
<td rowspan="3" width="20%" align="center">
<span class="titre_staff">staff</span>
<table cellspacing="10">
<tr>
<td align="center">
<div class="staff_text"><center>NOM<br>Administrateur</center></div>
<div class="staff"></div>
</td>
</tr>
<tr>
<td align="center">
<div class="staff_text"><center>NOM<br>Administrateur</center></div>
<div class="staff"></div>
</td>
</tr>
<tr>
<td align="center">
<div class="staff_text"><center>NOM<br>Administrateurs</center></div>
<div class="staff"></div>
</td>
</tr>
</table>
</td>
<td width="26.6%" class="" align="center">
<div class="contenu_ligne1">
<span class="titres">infos</span>
<div class="text">blablabla</div>
</div>
</td>
<td width="26.6%" class="" align="center">
<div class="contenu_ligne1">
<span class="titres">liens</span>
<div class="text">blablabla</div>
</div>
</td>
<td width="26.6%" align="center">
<div class="contenu_ligne1">
<span class="titres">coups de coeurs</span>
<table>
<tr>
<td><a href="" width="100" height="38.75"><img src="" width="100" height="38.75" border="1"></a></td>
</tr>
<tr>
<td><a href="" width="100" height="38.75"><img src="" width="100" height="38.75" border="1"></a></td>
</tr>
<tr>
<td><a href="" width="100" height="38.75"><img src="" width="100" height="38.75" border="1"></a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" width="100%">
<tr>
<td width="50%" align="center">
<div class="contenu_ligne2">
<span class="titres">Contexte</span>
<div class="text">blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla </div>
</div>
</td>
<td width="50%" align="center">
<div class="contenu_ligne2">
<span class="titres">Prédéfini</span>
<table>
<tr>
<td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
<td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
<td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
</tr>
<tr>
<td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
<td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
<td class="predef_td"><a href="" width="82" height="82"><img src="" width="82" height="82"></a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3">
<table border="0" width="100%">
<tr>
<td width="50%" align="center">
<div class="contenu_ligne3">
<span class="titres">Topsites</span>
<table>
<tr>
<td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
<td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
<td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
<td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
<td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
<td><a href="" width="30" height="30"><img src="http://th09.deviantart.net/fs71/PRE/f/2013/123/1/f/igniswind_logo_render_by_dbzartcostom-d63xkwz.png" width="30" height="30"></a></td>
</tr>
</table>
</div>
</td>
<td width="50%" align="center">
<div class="contenu_ligne3">
<span class="titres">Crédits</span>
<div class="text">©Code PA by Aelita</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4">
<div class="partenaire">
<marquee direction="left" scrolldelay="1" scrollamount="2" height="45">
<a href="" width="100" height="35"><img src="" width="100" height="35" /></a>
<a href="" width="100" height="35"><img src="" width="100" height="35" /></a>
<a href="" width="100" height="35"><img src="" width="100" height="35" /></a>
<a href="" width="100" height="35"><img src="" width="100" height="35" /></a>
</marquee>
</div>
</td>
</tr>
</table>
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.
!
