Street Dance is an Art
Suite à ma participation au deuxième "Y a de l'ambiance" voici la version Dark.
Je précise que l'arrière plan blanc correspond à mon forum.
Et le code :
HTML :
- Code:
<link href="http://fonts.googleapis.com/css?family=Keania+One|Expletus+Sans:400italic|Warnes" rel="stylesheet" type="text/css" />
<div class="fiche">
<div class="titre">
Le titre du forum
</div><br />
<div class="banniere">
</div><br />
<div class="bloc">
<div class="soustitre">
Contexte
</div><br />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non varius lectus, et euismod enim. Fusce dui sem, congue nec quam vel, aliquet rhoncus nulla. Phasellus efficitur justo sit amet eros fringilla, nec porta dolor ultricies. Donec at felis tincidunt, sodales neque at, tincidunt ipsum. Maecenas imperdiet dui magna, in dignissim elit eleifend a. Aliquam et magna a enim elementum pulvinar ut vel magna. Nulla est justo, luctus vitae diam eu, commodo venenatis orci. Pellentesque non semper ipsum, aliquam dignissim risus. Pellentesque sodales nunc eget dui hendrerit imperdiet.
</p>
</div>
<div class="bloc">
<div class="soustitre">
News
</div><br />
<p>
00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />
</p>
</div><br /><br /><a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <br /><br /><a href="http://www.never-utopia.com" class="credit">A-Lice | Never-Utopia</a><br /><br />
</div>
CSS :
- Code:
.fiche {
width: 750px;
padding: 10px;
margin: auto;
background: black;
border-top: solid 2px #4833b5;
border-bottom: solid 2px #bb1846;
}
.titre {
text-align: center;
font-size: 25px;
letter-spacing: 2px;
height: 30px;
padding: 10px;
color: white;
font-family: 'Keania One', cursive;
text-shadow: 0px 0px 5px white;
}
.banniere {
width: 700px;
height: 200px;
margin: auto;
overflow: hidden;
border-top: solid 2px #4833b5;
border-bottom: solid 2px #bb1846;
background-image: url(http://nsa33.casimages.com/img/2015/03/01/150301022244568300.png);
}
.bloc {
display: inline-block;
width: 354px;
height: 165px;
border-top: solid 2px #4833b5;
border-bottom: solid 2px #bb1846;
margin-right: 7px;
margin-left: 7px;
background: #94908f;
font-size: 13px;
text-align: justify;
opacity: 0.5;
}
.partoch {
width: 50px;
height: 50px;
display: inline-block;
margin-left: 7px;
}
a.credit {
text-decoration: none;
color: white;
transition: all 0.5s;
text-align: center;
display: inline-block;
font-size: 11px;
text-shadow: 0px 0px 5px white;
font-family: 'Warnes', cursive;
}
.soustitre {
text-align: center;
height: 25px;
color: white;
padding: 5px;
margin-bottom: -10px;
font-family: 'Keania One', cursive;
font-size: 20px;
letter-spacing: 2px;
}
p {
height: 100px;
width: 300px;
margin: auto;
overflow: auto;
}
Les autres versions :
Version avec transition
Version Light
/!\ En cas de problème, c'est ici ou là que ça ce passe.
Merci à Dakota qui a été ma muse pour cette page d'accueil puisque l'image vient de lui !
Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
