Voici une petite page d'accueil Zen. En espérant qu'elle vous plaise.
- Code:
/*Onglets*/
.ongls{
margin: -300px 5px 70px 0px;
}
.ongl1, .ongl2, .ongl3, .ongl4
{
display: inline-block;
width: 80px;
height: 18px;
margin-left: 7px;
background-color: #b4c385;
border: 1px solid #808489;
border-radius: 10px;
text-align: center;
}
.ongl1:hover, .ongl2:hover, .ongl3:hover, .ongl4:hover
{
background-color: #c8e75f;
}
.ongl1 a, .ongl2 a, .ongl3 a, .ongl4 a
{
display: block;
padding-top: 2px;
font-weight: bold;
text-decoration: none !important;
color: #e5fae4 !important;
font-size: 12px;
}
.ongl1 a:hover, .ongl2 a:hover, .ongl3 a:hover, .ongl4 a:hover
{
color: #446291 !important;;
}
/*Clics*/
#content1
{
display: block;
height: 200px;
width: 360px;
overflow: hidden;
background: #b5e61d;
font-size: 11px;
color: #3c506f;
margin-right: 10px;
margin-top: -35px;
}
#content2, #content3, #content4
{
display: none;
}
#accueil1:target #content1
{
display: block;
height: 200px;
width: 360px;
overflow: hidden;
font-size: 11px;
color: #b5e61d;
opacity: 1;
}
#accueil2:target #content2
{
display: block;
height: 200px;
width: 360px;
overflow: hidden;
background: #b5e61d;
font-size: 11px;
color: #3c506f;
opacity: 1;
}
#accueil3:target #content3
{
display: block;
height: 200px;
width: 360px;
overflow: hidden;
background: #b5e61d;
font-size: 11px;
color: #3c506f;
}
#accueil4:target #content4
{
display: block;
height: 200px;
width: 360px;
overflow: hidden;
background: #b5e61d;
font-size: 11px;
color: #3c506f;
}
.info_accueil
{
padding: 10px;
text-align: justify;
}
.credit
{
display: block;
text-align: right;
margin-right: 20px;
}
.credit a
{
font-size: 10px;
text-decoration: none !important;
}
/*All*/
.corps{
width: 600px;
height: 344px;
border: 3px black solid;
margin: 40px 10px 10px 40px;
}
.table{
margin: -20px 0 0 -20px;
}
.img1{
width: 100px;
height: 100px;
border-radius: 100px;
background-image: url(http://2img.net/i/fa/pbucket.gif);
border: 1px solid black;
margin-right: 50px;
text-indent:-9999px;
}
.img2{
width: 100px;
height: 100px;
border-radius: 100px;
background-image: url(http://2img.net/i/fa/pbucket.gif);
border: 1px solid black;
margin-left: -50px;
text-indent:-9999px;
}
.img1:hover{
width: 100px;
height: 100px;
border-radius: 10px;
background-color: gray;
background-image: none;
border: 1px solid black;
margin-right: 50px;
z-index: 3;
font-size: 10px;
position: relative;
text-indent:4px;
}
.img2:hover{
width: 100px;
height: 100px;
border-radius: 10px;
background-color: gray;
background-image: none;
border: 1px solid black;
margin-left: -50px;
z-index: 3;
font-size: 10px;
position: relative;
text-indent:4px;
}
.noms1{
margin: -15px 0 0 0;
font-size: 20px;
width: 100px;
text-align: center;
text-shadow: 0px 0px 5px #000;
color: #FFF;
}
.noms2{
margin: -15px 0 0 -50px;
font-size: 20px;
width: 100px;
text-align: center;
text-shadow: 0px 0px 5px #000;
color: #FFF;
}
.news{
margin: 0px 10px 10px 10px;
width: 130px;
height: 170px;
border: 2px solid black;
text-align: justify;
padding: 0px 2px 2px 2px;
font-size: 11px;
overflow: hidden;
}
.newstitle{
text-align: center;
font-weight: bold;
font-size: 22px;
}
.partmsg{
background-color: #98d9ea;
margin: -15px 10px 5px 10px;
height: 40px;
padding: 10px 5px 2 5px;
}
.partitle{
margin-top: 38px;
text-align: center;
font-weight: bold;
font-size: 22px;
}
.partenaire{
width: 75px;
height: 25px;
border: 1px dotted black;
margin: 10px 5px 0 5px;}
- Code:
<div class="corps">
<table class="table">
<tbody>
<tr>
<td>
<div class="img1">
Blabla1
</div>
</td>
<td>
<div class="img2">
Blabla2
</div>
</td>
</tr>
<tr>
<td>
<div class="noms1">
NOM
</div>
</td>
<td>
<div class="noms2">
NOM
</div>
</td>
</tr>
</tbody>
</table>
<div class="news">
<center>
<span class="newstitle">NEWS</span>
</center>
<marquee direction="up" scrollamount="2">icez ifezj ifoe zanjckraioe iazjic znjcrenauiecnz jc zenjcenz j cnjk ez njkc eznjiceu i fnjkf enzjk nez jk cnzjkc enzkjc nejzkndejkejaiov ekoa vnfio rnejkvfnjkv frnz vnfrjk vfrnzk vrfznkv frizog riolv,fklzv fioz nklv fdnjk v</marquee>
</div>
<div align="right">
<div id="accueil1">
<div id="accueil2">
<div id="accueil3">
<div id="accueil4">
<div class="ongls">
<span class="ongl1"><a href="#accueil1">Accueil</a></span> <span class="ongl2"><a href="#accueil2">Contexte</a></span> <span class="ongl3"><a href="#accueil3">Prédéfinie</a></span> <span class="ongl4"><a href="#accueil4">Events</a></span>
</div>
<div id="content1">
<div id="content2">
<div class="info_accueil">
Ici se trouve le contenu de votre second onglet.
</div>
</div>
<div id="content3">
<div class="info_accueil">
Ici se trouve le contenu de votre troisième onglet.
</div>
</div>
<div id="content4">
<div class="info_accueil">
Ici se trouve le contenu de votre quatrième onglet.
</div>
</div>
<div class="info_accueil">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div align="center">
<div class="partitle">
Partenaires
</div>
<div class="partmsg">
<marquee scrollamount="2"><img src="" class="partenaire" /><a src=""><img src="" class="partenaire" /></a><a src=""><img src="" class="partenaire" /></a><a src=""><img src="" class="partenaire" /></a><a src=""></a></marquee>
</div>
</div>
</div>
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.
