Rappel du premier message :

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
Version Dark

/!\ 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 !

Merciii

Merci

Hello ! Un petit message pour signaler que les images de démo ne sont plus visibles, sur aucun des trois tutos proposés D=

merci

Merci.

thanks !! :o

I like it !

Merci

merci

merci

merci

Merci pour les codes :)

Merci :)

Merci :)

merci o/

merci

merci