Street Dance is an Art

Suite à ma participation au deuxième "Y a de l'ambiance" voici la version avec transition.

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;
border-radius: 100px;
background: #f1f1f1;
margin: auto;
border: 2px dotted white;
transition: all 0.5s;
}

.fiche:hover {
border-radius: 0px;
background: black;
border-top: solid 2px #4833b5;
border-bottom: solid 2px #bb1846;
border-left: none;
border-right: none;
transition: all 0.5s;
}

.titre {
text-align: center;
font-size: 25px;
height: 30px;
padding: 10px;
transition: all 0.5s;
color: white;
font-family: 'Expletus Sans', cursive;
text-shadow: 0px 0px 5px white;
}

.fiche:hover .titre {
transition: all 0.5s;
font-family: 'Keania One', cursive;
font-size: 25px;
letter-spacing: 2px;
}

.banniere {
width: 700px;
height: 200px;
border-radius: 100px;
margin: auto;
border: 2px dotted white;
transition: all 0.5s;
overflow: hidden;
background-image: url(http://nsa33.casimages.com/img/2015/03/01/150301022241788998.png);
}

.fiche:hover .banniere {
border-radius: 0px;
transition: all 0.5s;
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: 350px;
height: 165px;
border-radius: 80px;
border: 2px dotted white;
margin-right: 7px;
margin-left: 7px;
background: #f8ceda;
font-size: 13px;
text-align: justify;
transition: all 0.5s;
}

.fiche:hover .bloc {
border-radius: 0px;
border-top: solid 2px #4833b5;
border-bottom: solid 2px #bb1846;
transition: all 0.5s;
background: #94908f;
border-left: none;
border-right: none;
width: 354px;
opacity: 0.5;
}

.partoch { 
width: 50px;
height: 50px;
display: inline-block;
border-radius: 30px;
margin-left: 7px;
transition: all 0.5s;
}

.fiche:hover .partoch {
border-radius: 0px;
transition: all 0.5s;
}

a.credit {
text-decoration: none;
color: #f8ceda;
transition: all 0.5s;
text-align: center;
display: inline-block;
font-size: 11px;
text-shadow: 0px 0px 5px pink;
font-family: 'Expletus Sans', cursive;
}

.fiche:hover a.credit {
transition: all 0.5s;
color: white;
text-shadow: 0px 0px 5px white;
font-family: 'Warnes', cursive;
}

.soustitre {
text-align: center;
font-size: 22px;
height: 25px;
transition: all 0.5s;
color: white;
padding: 5px;
margin-bottom: -10px;
font-family: 'Expletus Sans', cursive;
}

.fiche:hover .soustitre {
transition: all 0.5s;
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

Merci à Dakota qui a été ma muse pour cette page d'accueil puisque la seconde image vient de lui !

Merci!

Merci beaucoup

thnaks

Je prend j'aime beaucoup :)

Merci

Merci

Merci Ｏ(≧∇≦)Ｏ

Mici ♥

merci

Merci

Merci !

Merci, c'est très sympa !

Merci

merci

merciiiiii

Merci

merci !

merci o/

Merci beaucoup