Oyé oyé ! Déjà je tiens à m'excuser pour cette attente interminable, voici enfin les votes du défi "Y'a de l'ambiance" numéro 5. Il vous fallait user de votre plus beau css et de votre plus fort html afin de créer un codage de fiche de présentation OU de fiche de relation qui évoque : LE SECRET, l'art de dissimuler ou de révéler, de dire à demi mot, de ne jamais avouer ...
A vos votes, partez !
Vous avez 15 jours.
Participation secrète numéro un:
Caractère
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.
Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.
Histoire
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.
Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.
©XXX. Images By ©Magnificient.
Participation secrète numero deux:
A vos votes, partez !
Vous avez 15 jours.
Participation secrète numéro un:
Prénom P. Nom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.
Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.
Nom : Ecrire ici Prénom : Ecrire ici Âge : Ecrire ici Date de Naissance : Ecrire ici Orientation sexuelle : Ecrire ici Groupe : Ecrire ici Nationalité & Ascendance : Ecrire ici Particularités : Ecrire ici Baguette : Ecrire ici Patronus : Ecrire ici Epouvantard : Ecrire ici Maison : Ecrire ici Situation Familiale : Ecrire ici Célébrité : Ecrire ici Crédit : Ecrire ici |  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.
Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.
©XXX. Images By ©Magnificient.
Prénom : Ecrire Ici
Pseudo : Ecrire Ici
Âge : Ecrire Ici
Comment avez-vous connu le forum ?: Ecrire Ici
Commentaire : Ecrire Ici
Code du règlement :
Pseudo : Ecrire Ici
Âge : Ecrire Ici
Comment avez-vous connu le forum ?: Ecrire Ici
Commentaire : Ecrire Ici
Code du règlement :
©XXX. Images By ©Magnificient.
- Code:
<style type="text/css">.titre{font-family:Damion;font-size:40px;color:#561616;text-shadow:#333333 1px 1px;}.globale{color:#000;width:510px;height:725px;overflow:hidden;background-color:#696969;box-shadow:1px 1px 1px #333333;}.caractere{width:509px;height:200px;overflow:hidden;}.imgcaractere{position:relative;z-index:2;width:520px;height:200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.caracterecontent{position:relative;z-index:1;width:450px;height:170px;padding:25px;font-family:Times New Roman;font-size:14px;overflow:auto;}.titre2{font-family:Damion;font-size:25px;color:#8B0000;}.table{width:500px;height:320px;z-index:2;}.qr{width:300px;height:320px;overflow:auto;color:#C0C0C0;}.physique{width:200px;height:320px;overflow:hidden;}.imgphysique{position:relative;left:0px;z-index:2;width:200px;height:320px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.physiquecontent{position:relative;z-index:1;width:150px;height:250px;padding:25px;font-family:Times New Roman;font-size:14px;overflow:auto;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;top:-320px;left:-200px;}.histoire{width:509px;height:200px;overflow:hidden;}.imghistoire{position:relative;z-index:2;width:520px;height:200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.histoirecontent{position:relative;z-index:1;width:450px;height:170px;padding:25px;font-family:Times New Roman;font-size:14px;overflow:auto;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;top:-600px;}.gras{font-weight:bold;}.reponse{visibility:hidden;}.qr:hover .reponse{visibility:visible;}.caractere:hover .imgcaractere{margin-top:-200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.physique:hover .imgphysique{opacity:0;left:200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.physique:hover .physiquecontent{transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;left:0px;}.histoire:hover .imghistoire{margin-top:200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.histoire:hover .histoirecontent{transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;top:-400px;}</style><center><link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet"><div class="titre">Prénom P. Nom</div><div align="justify" class="globale"><div class="caractere"><div class="imgcaractere"><img src="http://img15.hostingpics.net/pics/385155mindblanche.png"></div><div class="caracterecontent"><div class="titre2"><center>Caractère</center></div><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.
Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.</div></div><table class="table"><tr><td><div class="qr"><span class="gras">Nom :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Prénom :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Âge :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Date de Naissance :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Orientation sexuelle :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Groupe :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Nationalité & Ascendance :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Particularités :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Baguette :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Patronus :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Epouvantard :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Maison :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Situation Familiale :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Célébrité :</span> <span class="reponse">Ecrire ici</span>
<span class="gras">Crédit :</span> <span class="reponse">Ecrire ici</span></div></td><td><div class="physique"><div class="imgphysique"><img src="http://img15.hostingpics.net/pics/539266bodyblanche.png"></div><div class="physiquecontent"><div class="titre2"><center>Physique</center></div><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.</div></div></td></tr></table><div class="histoire"><div class="imghistoire"><img src="http://img15.hostingpics.net/pics/522610soulblanche.png"></div><div class="histoirecontent"><div class="titre2"><center>Histoire</center></div><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.
Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.</div></div></div><div align="center" style="font-family:Times New Roman;Font-size:10px;color:#333333;">©XXX. Images By ©Magnificient.</div></center>
<style type="text/css">.imgirl{float:left;z-index:2;border:solid 2px #561616;}.irl{position:relative;top:-104px;left:54px;box-shadow:1px 1px 1px #333333;width:400px;height:104px;color:#C0C0C0;overflow:auto;background-color:#696969;opacity:0;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.irlglobale{width:500px;height:110px;overflow:hidden;}.irlglobale:hover .irl{opacity:1;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}</style><center><div class="irlglobale"><img src="http://img15.hostingpics.net/pics/888841inter.png" class="imgirl"><div class="irl" align="justify"><span class="gras">Prénom :</span> Ecrire Ici
<span class="gras">Pseudo :</span> Ecrire Ici
<span class="gras">Âge :</span> Ecrire Ici
<span class="gras">Comment avez-vous connu le forum ?:</span> Ecrire Ici
<span class="gras">Commentaire :</span> Ecrire Ici
<span class="gras">Code du règlement :</span> [hide]Ecrire Ici[/hide]
</div></div>
<span style="font-family:Times New Roman;font-size:10px;">©XXX. Images By ©Magnificient.</span></center>
Participation secrète numero deux:
- Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="Auteur" />
<base target="_blank" />
<title>Présentation d'un secret</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<style type="text/css">
/*Corps*/
body {
margin: 0px;
font-family: 'Verdana';
font-size: 13px;
color: #454545;
}
.prez {
background: #101010;
padding-bottom: 5px;
width: 600px;
margin: auto;
border: 3px solid #000000;
text-align: center;
}
.prez a {
color: #a3a3a3;
text-decoration: none;
}
.prez a:hover {
color: #ffffff;
text-decoration: none;
}
.prez_image {
border-bottom: 3px solid #000000;
}
.prez_title {
color: #757575;
font-family: 'Homemade Apple', cursive;
font-size: 36px;
text-align: center;
margin-top: -36px;
}
.prez_subtitle {
color: #454545;
text-shadow: 1px 1px 1px #000000;
margin-top: -10px;
margin-bottom: 10px;
font-family: 'Homemade Apple', cursive;
font-size: 18px;
text-align: center;
-webkit-transition: 1s;
transition: 1s;
line-height: 1.4em;
}
.prez_bloc_title {
color: #757575;
font-family: 'Homemade Apple', cursive;
font-size: 36px;
text-align: center;
margin-bottom: -30px;
position: relative;
z-index: 2;
}
.prez_bloc_subtitle {
position: relative;
color: transparent;
font-family: 'Homemade Apple', cursive;
font-size: 18px;
text-align: center;
-webkit-transition: 1s;
transition: 1s;
line-height: 1.4em;
z-index: 3;
}
.prez_bloc_subtitle2 {
display: none;
position: relative;
color: #555555;
text-shadow: 1px 1px 1px #050505;
font-family: 'Homemade Apple', cursive;
font-size: 18px;
text-align: center;
line-height: 1.4em;
z-index: 3;
}
.prez_bloc {
margin: 0px 15px 15px 15px;
padding: 15px 5px 5px 5px;
background: #202020;
box-shadow: 2px 2px 5px #000000;
position: relative;
overflow: hidden;
text-align: center;
}
.prez_bloc:hover .prez_bloc_subtitle {
color: #555555;
text-shadow: 1px 1px 1px #050505;
}
.prez_blocs {
height: 180px;
margin-top: 10px;
color: #656565;
padding-right: 5px;
margin-right: -5px;
overflow: auto;
position: relative;
z-index: 2;
visibility: hidden;
opacity: 0;
-webkit-transition: 1s;
transition: 1s;
text-align: justify;
}
.animals {
position: absolute;
-webkit-transition: 0.5s;
transition: 0.5s;
cursor: pointer;
}
#rat {
left: 0px;
bottom: 0px;
background: url('http://img4.hostingpics.net/pics/483356rat.png') right top;
width: 310px;
height: 180px;
}
#rat:hover {
background: url('http://img4.hostingpics.net/pics/194994rat2.png') right top;
}
#serp {
right: 0px;
top: 0px;
background: url('http://img4.hostingpics.net/pics/969908serp.png') left bottom;
width: 280px;
height: 120px;
}
#serp:hover {
background: url('http://img4.hostingpics.net/pics/506132serp2.png') left bottom;
}
#frog {
right: 0px;
bottom: 0px;
background: url('http://img4.hostingpics.net/pics/145236frog.png') left top;
width: 250px;
height: 140px;
}
#frog:hover {
background: url('http://img4.hostingpics.net/pics/895545frog2.png') left top;
}
.enigme {
position: absolute;
top: 80px;
left: 0px;
text-align: center;
width: 100%;
color: #555555;
}
#inputenter {
width: 35px;
}
input, select {
border: none;
background: #353535;
color: #a3a3a3;
padding: 3px 8px 3px 8px;
border-radius: 5px;
}
input[type="button"]:hover {
box-shadow: 2px 2px 5px #101010;
cursor: pointer;
background: #404040;
color: #b5b5b5;
}
input:focus, select:focus, option:focus {
outline: none;
}
.prez_ava {
width: 150px;
height: 150px;
float: left;
margin-left: 10px;
margin-right: 15px;
border: 1px dotted #000000;
}
#prez_bloc4 {
height: 425px;
}
#enigme5 {
position: static;
}
#enigme5 img {
display: inline-block;
position: absolute;
opacity: 0.3;
-webkit-transition: 0.5s;
transition: 0.5s;
z-index: 3;
}
#shuri {
top: 20px;
left: 0px;
}
#sen {
top: 100px;
left: 180px;
}
#ken {
top: 30px;
right: -20px;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Coming+Soon|Homemade+Apple|Over+the+Rainbow|Permanent+Marker" rel="stylesheet" />
<script type="text/javascript">
//<!--
$(function() {
$('#frog').click(function() {
$(this).closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
$(this).closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
$('.animals').css('display', 'none');
$('#prez_bloc1').css('opacity', '1').css('visibility', 'visible');
});
$('#buttonenter').click(function() {
if ($('#inputenter').val() == '8') {
$(this).closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
$(this).closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
$('#enigme2').css('display', 'none');
$('#prez_bloc2').css('opacity', '1').css('visibility', 'visible');
}
});
$('#buttonvert').click(function() {
if ($('#option1').val() == 'verre') {
if ($('#option2').val() == 'vers') {
if ($('#option3').val() == 'vers') {
if ($('#option4').val() == 'vert') {
$(this).closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
$(this).closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
$('#enigme3').css('display', 'none');
$('#prez_bloc3').css('opacity', '1').css('visibility', 'visible');
}
}
}
}
});
$('#buttonlab').click(function() {
if ($('#bonasso').attr('checked')) {
$(this).closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
$(this).closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
$('#enigme4').css('display', 'none');
$('#prez_bloc4').css('opacity', '1').css('visibility', 'visible').css('height', '180px');
}
});
});
//-->
</script>
<script type="text/javascript">
//<!--
function myover() {
$('#enigme5').closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
$('#enigme5').closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
$('#enigme5').css('display', 'none');
$('#prez_bloc5').css('opacity', '1').css('visibility', 'visible');
}
//-->
</script>
</head>
<body>
<div class="prez">
<img class="prez_image" alt="image" src="http://img4.hostingpics.net/pics/660176Sanstitre.jpg" />
<div class="prez_title">Prénom et nom</div>
<div class="prez_subtitle">« Pour chaque énigme résolue,<br />un de mes secrets sera révélé »</div>
<div class="prez_bloc_title">Qui suis-je ?</div>
<div class="prez_bloc">
<span class="prez_bloc_subtitle">« Pour dévoiler mon identité,<br />cliques sur la créature du puit »</span>
<span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà mon identité dévoilée »</span>
<div class="animals" id="frog"></div>
<div class="animals" id="rat"></div>
<div class="animals" id="serp"></div>
<div class="prez_blocs" id="prez_bloc1">
<img class="prez_ava" src="http://img4.hostingpics.net/pics/268316madara.png" alt="vava" />
<b>Nom : </b>Réponse<br />
<b>Surnom : </b>Réponse<br />
<b>Âge : </b>Réponse<br />
<b>Rang : </b>Réponse<br />
<b>Groupe : </b>Réponse<br />
<b>Capacités : </b>Réponse<br />
<b>Armes : </b>Réponse
<span style="clear: both;"></span>
</div>
</div>
<div class="prez_bloc_title">Description physique</div>
<div class="prez_bloc">
<span class="prez_bloc_subtitle">« Pour rendre visible mon apparence,<br />réponds à la question suivante »</span>
<span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà mon apparence visible »</span>
<div class="enigme" id="enigme2">
<label for="inputenter" id="labelenter">Un bucheron a sept filles et<br />chacune de ces filles a un frère.<br />Combien a-t-il d'enfants ?</label><br /><br />
<input id="inputenter" type="number" value="0" min="0" max="20" />
<input id="buttonenter" type="button" value="J'ai trouvé la bonne réponse !" />
</div>
<div class="prez_blocs" id="prez_bloc2">
Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.<br />
<br />
Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.<br />
<br />
Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
</div>
</div>
<div class="prez_bloc_title">Description psychologique</div>
<div class="prez_bloc">
<span class="prez_bloc_subtitle">« Pour accéder à mon esprit,<br />complètes les phrases suivantes »</span>
<span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà mon esprit sans barrières »</span>
<div class="enigme" id="enigme3">
Le
<select id="option1">
<option></option>
<option>verre</option>
<option>ver</option>
<option>vert</option>
<option>vers</option>
</select>
de
<select id="option2">
<option></option>
<option>verres</option>
<option>vers</option>
<option>verts</option>
<option>vairs</option>
</select>
que j'avais apporté<br />
pour pêcher
<select id="option3">
<option></option>
<option>verre</option>
<option>ver</option>
<option>vert</option>
<option>vers</option>
</select>
6h ce matin m'a permis de<br />
récolter 5 poissons !
Mon frère en est
<select id="option4">
<option></option>
<option>verre</option>
<option>ver</option>
<option>vert</option>
<option>vers</option>
</select>
de jalousie !<br /><br />
<input id="buttonvert" type="button" value="J'ai complété les phrases !" />
</div>
<div class="prez_blocs" id="prez_bloc3">
Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.<br />
<br />
Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.<br />
<br />
Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
</div>
</div>
<div class="prez_bloc_title">Histoire</div>
<div class="prez_bloc">
<span class="prez_bloc_subtitle">« Pour apprendre la vie que j'ai menée,<br />choisis la bonne option »</span>
<span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà mon histoire racontée »</span>
<div class="enigme" id="enigme4">
<img src="http://img4.hostingpics.net/pics/984580Sanstitre.jpg" alt="labirynthe" />
<label>A = 1; B = 2; C = 4 et D = 3</label><input type="radio" name="radiolab" />
<label style="padding-left: 20px;">A = 4; B = 3; C = 2 et D = 1</label><input type="radio" id="bonasso" name="radiolab" /><br />
<label>A = 3; B = 4; C = 1 et D = 2</label><input type="radio" name="radiolab" />
<label style="padding-left: 20px;">A = 2; B = 1; C = 3 et D = 4</label><input type="radio" name="radiolab" /><br /><br />
<input id="buttonlab" type="button" value="J'ai choisi cette option !" />
</div>
<div class="prez_blocs" id="prez_bloc4">
Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.<br />
<br />
Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.<br />
<br />
Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
</div>
</div>
<div class="prez_bloc_title">Derrière le masque</div>
<div class="prez_bloc">
<span class="prez_bloc_subtitle">« Pour révéler qui je suis réellement,<br />survoles mon arme »</span>
<span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà ma réelle identité révélée »</span>
<div class="enigme" id="enigme5">
<img id="shuri" src="http://www.renders-graphiques.fr/image/upload/mini/shuriken.png" alt="shuriken" onmouseover="myover()" />
<img id="sen" src="http://i463.photobucket.com/albums/qq352/KittyCatKilala/RP%20Characters/Senbon.png" alt="senbon" />
<img id="ken" src="http://static.tumblr.com/bddc5227b1ebae1633081763860e1d76/mjvcmrg/gENo6s7t3/tumblr_static_hhifxdrzchs08w8okw00c4w8.png" alt="kunai" />
</div>
<div class="prez_blocs" id="prez_bloc5">
<img class="prez_ava" src="http://img4.hostingpics.net/pics/268316madara.png" alt="vava" />
<b>Nom : </b>Réponse<br />
<b>Âge : </b>Réponse<br />
<b>D'où je viens : </b>Réponse<br />
<b>Comment j'ai connu le forum : </b>Réponse<br />
<b>Ce que je pense du forum : </b>Réponse<br />
<b>Le code du règlement : </b>Réponse
<span style="clear: both;"></span>
</div>
</div>
<span>Fiche par XXX de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></span>
</div>
</body>
</html>
![[VOTE][CODE] Y'a de l'ambiance ! #5 - le secret - Onyx gagnante ! 262632clip20160315at092522](https://2img.net/r/hpimg15/pics/262632clip20160315at092522.jpg)
![[VOTE][CODE] Y'a de l'ambiance ! #5 - le secret - Onyx gagnante ! 15796010](https://i.servimg.com/u/f97/18/95/57/71/15796010.png)
![[VOTE][CODE] Y'a de l'ambiance ! #5 - le secret - Onyx gagnante ! 14749110](https://i.servimg.com/u/f97/18/95/57/71/14749110.png)
La Une, visuellement moins sombre. Le petit "hic", dommage que nom et prénom soient coupés avant d'ouvrir l'image. 
) Le gagnant est Onyx et ses petites énigmes. 
