<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fiche de pub pour TSP de Rumas</title>
<style type="text/css">
#en_tete{
width:550px;
height:705px;
background:#222216;
color:black;
border: 0px solid #318CE7;
font-family: 'Dosis', sans-serif;
border-radius: 38px;
font-size: 11px;
margin:auto;
}
.onglet{
float:left;
}
.onglet img:hover{
cursor:pointer;
}
.navigation{
width: 183px;
height: 20px;
background-color: #E9ED00;
text-align: center;
font-size: 12px;
font-weight: bold;
}
.bloc_texte{
position:absolute;
margin-top:0;
width:500px;
margin-left:50%;
left:-237px;
}
#onglet1{
background:#222216;
height: 400px;
width: 480px;
padding: 0px;
text-align:left;
font-size:12px;
}
#onglet2{
background:#222216;
height: 400px;
width: 460px;
padding: 10px;
text-align:center;
font-size:12px;
}
#onglet3{
background:#222216;
border: #FF4DD2 0px solid;
height:400px;
width: 460px;
padding: 10px;
text-align:center;
font-size:12px;
}
a {
text-decoration: none;
font-weight: bold;
font-variant: small-caps;
color: #EAFF75;
font-size: 15px;
-webkit-transition: all 1s ease; /* pour navigateur webkit */
-moz-transition: all 1s ease; /* pour navigateur mozilla */
-o-transition: all 1s ease; /* pour navigateur opera */
transition: all 1s ease; /* pour les navigateurs récents */
}
a:hover {
text-decoration: none;
color: #C8B8FF;
}
/* Le CSS pour la transition du staff*/
li
{
width: 100px;
height: 100px;
text-align: center;
font-weight: bold;
display: inline-block;
border: 1px solid #000;
margin: 10px;
padding: 0px;
border-radius: 10px;
background-position: center;
position: relative;
overflow: hidden;
}
/* avatars du staff */
#item1{background-image: url('http://r15.imgfast.net/users/1511/80/09/30/avatars/1-79.png')}
#item2{background-image: url('http://r15.imgfast.net/users/1511/80/09/30/avatars/248-19.png')}
#item3{background-image: url('http://r15.imgfast.net/users/1511/80/09/30/avatars/446-76.jpg')}
#item4{background-image: url('http://r15.imgfast.net/users/1511/80/09/30/avatars/114-68.png')}
#item5{background-image: url('http://r15.imgfast.net/users/1511/80/09/30/avatars/202-74.jpg')}
#item6{background-image: url('http://r15.imgfast.net/users/1511/80/09/30/avatars/265-56.png')}
#item7{background-image: url('http://www.phpbb-network.com/forums/images/avatars/gallery/Schtroumpfs/papa-smurf-icon.png')}
#item8{background-image: url('http://www.imabox.fr/a4/1409101813D3755U23.bmp')}
#item11{background-image: url('http://icons.iconarchive.com/icons/mirella-gabriele/steampunk/96/Steampunk-Robot-icon.png')}
#item12{background-image: url('http://r15.imgfast.net/users/1511/80/09/30/avatars/419-46.jpg')}
li a
{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
li span
{
display: block;
height: 50px;
width: 100%;
color: #fff;
margin: 0px;
line-height: 50px;
background-color: rgba(0,0,0,0.3);
position: absolute;
left: 0px;
top: 100px;
transition-property: top;
transition-duration: 1s;
}
li:hover span
{
top: 50px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.pvereecken.fr/Tuto_SoP/tuto_entete_onglet/js_onglet.js"></script>
</head>
<body>
<div id="en_tete"><br/>
<center>
<a href="http://www.the-simpsons-pub.com/" target="_blank"><img src="http://www.heberger-image.fr/data/images/43467_hearde10.png" width="500px"></a>
</center><br/>
<span class="onglet">
<div class="navigation">GÉNÉRAL</div>
<div class="bloc_texte" id="onglet1"><br>
<div style=" height: 180px;overflow: auto;border-style:dotted;background-color:#EAFF75;-moz-border-radius: 38px;-webkit-border-radius: 38px;border-radius: 38px;">
<center>
<div style="width:460px"><br>
Un forum de pub comme beaucoup d'autres.<br>
<br>
Il offre de nombreux services, tels que:<br>
Email de masse, dépot de logo, partenariat entre membre, booster votre booster, etc...<br>
<br>
(Mettre ici les news, infos...)
</div></center></div>
<br>
<div style=" height:100px; overflow: auto;border-style:dotted;background-color:#EAFF75;-moz-border-
radius: 38px;-webkit-border-radius: 38px;border-radius: 38px;">
<center>
<div style="width:460px">
<div style="font-family: 'Happy Monkey';">
<br>
<u>Statistiques</u><br>
<br>
</div>
Ce forum est ouvert depuis le <i>Mardi 13 Janvier</i><br />
Nos <b><span class="FORUMCOUNTUSER"></span> membres</b> ont postés <b><span
class="FORUMCOUNTPOST"></span> messages</b>, et le dernier arrivé est <b><span
class="FORUMLASTUSER"></span></b>.
</div></center></div>
<br>
<center>
<a href="http://www.the-simpsons-pub.com/" target="_blank"><img src="http://image.noelshack.com/fichiers/2013/36/1378466525-logo-the-simpsons-pub-250.jpg" border="0" /></a>
<br><a href="www.the-simpsons-pub.com" target="_blank">http://www.the-simpsons-pub.com/</a>
</center>
</div>
</span>
<span class="onglet">
<div class="navigation">STAFF & RECRUTEMENT</div>
<div class="bloc_texte" id="onglet2">
<span style="color:#EAFF75">
<div style="overflow:auto;height:350px;">
Fondateurs<br>
<li id="item1">
<a href="http://www.the-simpsons-pub.com/u1">
<span>
<font size="+1">Homer-Simpson</font>
</span>
</a>
</li>
<li id="item2">
<a href="http://www.the-simpsons-pub.com/u248">
<span>
<font size="+1">Babelle</font>
</span>
</a>
</li>
<br>
Administrateurs<br>
<li id="item3">
<a href="http://www.the-simpsons-pub.com/u446">
<span>
<font size="+1">Darth Revan</font>
</span>
</a>
</li>
<li id="item4">
<a href="http://www.the-simpsons-pub.com/u114">
<span>
<font size="+1">PtitePerle</font>
</span>
</a>
</li>
<li id="item5">
<a href="http://www.the-simpsons-pub.com/u202">
<span>
<font size="+1">Brigitte univers</font>
</span>
</a>
</li><br>
Chef-modérateur et modérateur<br>
<li id="item6">
<a href="http://www.the-simpsons-pub.com/u265">
<span>
<font size="+1">Florence</font>
</span>
</a>
</li>
<li id="item7">
<a href="http://www.the-simpsons-pub.com/u879">
<span>
<font size="+1">Teck</font>
</span>
</a>
</li><br>
Polyvalent<br>
<li id="item8">
<a href="http://www.the-simpsons-pub.com/u617">
<span>
<font size="+1">Epouvantine</font>
</span>
</a>
</li><br>
Graphiste<br>
<li id="item4">
<a href="http://www.the-simpsons-pub.com/u114">
<span>
<font size="+1">PtitePerle</font>
</span>
</a>
</li><br>
Créateur de fiche de publicité<br>
<li id="item11">
<a href="http://www.the-simpsons-pub.com/u803">
<span>
<font size="+1">Insanitary</font>
</span>
</a>
</li><br>
Analyste correcteur<br>
<li id="item12">
<a href="http://www.the-simpsons-pub.com/u419">
<span>
<font size="+1">Dionysos</font>
</span>
</a>
</li>
</div>
<br>
<font size="+0.5"><u>Les recutements</u><br>
Nous recrutons des modérateurs, une aide polyvalente et un correcteur.</font>
</span></div>
</span>
<span class="onglet">
<div class="navigation">ET PLUS</div>
<div class="bloc_texte" id="onglet3"><br>
<div style=" height: 40%;overflow: auto;border-style:dotted;background-color:#EAFF75;-moz-border-radius: 38px;-webkit-border-radius: 38px;border-radius: 38px;">
<center>
<div style="width:450px"><br>
(Je ne sais pas quoi mettre ici, peut être un affichage spécial grace aux simpsons dollars ?)
</div></center></div>
<br>
<br>
<div style=" height: 40%;overflow: auto;border-style:dotted;background-color:#EAFF75;-moz-border-radius: 38px;-webkit-border-radius: 38px;border-radius: 38px;">
<center>
<div style="width:450px"><br>
(Et ici les partenaires ?)
</div></center></div><br>
</div>
</span>
</div>
</body>
<link href='http://fonts.googleapis.com/css?family=Happy+Monkey' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
</html>
Accueil 
