Tests de codage et design
 
-28%
Le deal à ne pas rater :
Précommande : Smartphone Google Pixel 8a 5G Double Sim 128Go ...
389 € 539 €
Voir le deal

Partagez

Private Blossom

Voir le sujet précédent Voir le sujet suivant Aller en bas
Admin
MessageSujet: Private Blossom Private Blossom EmptyDim 19 Jan - 14:47
Nom & Prénom
ft. célébrité

Private Blossom Tumblr_mzaonnowee1smwqdvo1_250
Carte

d'identité
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.


© Magda Sully sur Never-Utopia









Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.



Behind your computer
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla
Papuche : blabla



Mik Robe
Mik Robe


Messages : 4
Date d'inscription : 14/03/2013


https://mikrobe.kanak.fr
Private Blossom Empty
Admin
MessageSujet: Re: Private Blossom Private Blossom EmptySam 11 Oct - 15:21
Second message
Mik Robe
Mik Robe


Messages : 4
Date d'inscription : 14/03/2013


https://mikrobe.kanak.fr
Private Blossom Empty
Admin
MessageSujet: Re: Private Blossom Private Blossom EmptySam 24 Jan - 22:42
Code:
<div id="target1">
      
   <div id="target2">
         
      <div id="target3">
            
         <div id="target4">
               
            <div id="espace_top">
                  
            </div>
               
            <div id="espace_carousel">
                  
               <!--        ZONE 1 - DEFAUT        --> 
               <div id="carousel_1">
                    <a href="#target1" class="lien1"> </a> 
                  <div class="carousel_1_content">
                       <span class="carousel_titre">Bienvenue sur "Nom du forum"</span> 
                     <div class="carousel_bloc1">
                           
                        <!--        DEBUT IMAGE        --><img src="http://b2.img.v4.skyrock.net/5010/85785010/pics/3135312500_1_2_fK6gM0jg.gif" class="carousel_img" /> 
                        <!--        FIN IMAGE        --> 
                        <!--        DEBUT TEXTE        -->Ipsam vero urbem Byzantiorum fuisse refertissimam atque ornatissimam signis quis ignorat? Quae illi, exhausti sumptibus bellisque maximis, cum omnis Mithridaticos impetus totumque Pontum armatum affervescentem in Asiam atque erumpentem, ore repulsum et cervicibus interclusum suis sustinerent, tum, inquam, Byzantii et postea signa illa et reliqua urbis ornanemta sanctissime custodita tenuerunt. 
                        <!--        FIN TEXTE        --> 
                     </div>
                        
                     <div class="carousel_bloc2">
                           
                        <!--        DEBUT LIENS        --> 
                        <center>
                             <a class="info"><img style="width: 50px;" src="http://images1.wikia.nocookie.net/__cb20130818150751/harrypotter/fr/images/8/81/Blason_de_Gryffondor.png" /><span>X pt</span></a> <a class="info"><img style="width: 50px;" src="http://images2.wikia.nocookie.net/__cb20121029223719/pottermore-blabla/fr/images/4/4a/Blason_Poufsouffle.png" /><span>X pt</span></a><br /><a class="info"><img style="width: 50px;" src="http://images3.wikia.nocookie.net/__cb20121030215203/pottermore-blabla/fr/images/a/a3/Blason_Serpentard.png" /><span>X pt</span></a> <a class="info"><img style="width: 50px;" src="http://images4.wikia.nocookie.net/__cb20121029223816/pottermore-blabla/fr/images/0/04/Blason_Serdaigle.png" /><span>X pt</span></a> 
                        </center>
                           
                        <!--        FIN LIENS        --> 
                     </div>
                        
                     <div class="carousel_bloc3">
                           
                        <!--        DEBUT CREDITS        -->(c) Le contexte de ce forum est inspiré de... arrangé et rédigé par... Merci de respecter notre travail. 
                        <!--        FIN CREDITS        --> 
                     </div>
                        
                  </div>
                     
               </div>
                  
               <!--        ZONE 2        --> 
               <div id="carousel_2">
                    <a href="#target2" class="lien2"> </a> 
                  <div class="carousel_2_content">
                       <span class="carousel_titre">Staff</span> 
                     <div class="carousel_bloc4">
                           
                        <!--        DEBUT STAFF        --> 
                        <!--        staff 1        --><span class="carousel_mini"><img src="http://images6.fanpop.com/image/photos/35200000/-JD-in-Sleepy-Hollow-johnny-depp-35224306-200-200.jpg" class="carousel_illu" /><span class="carousel_description"><strong>Prénom Nom</strong><br />Description rapide staff 1...<br /><a href="#">Profil</a> - <a href="#">MP</a></span></span> 
                        <!--        fin staff 1        --> 
                        <!--        staff 2        --><span class="carousel_mini"><img src="http://images6.fanpop.com/image/photos/35200000/-JD-in-Sleepy-Hollow-johnny-depp-35224306-200-200.jpg" class="carousel_illu" /><span class="carousel_description"><strong>Prénom Nom</strong><br />Description rapide staff 2...<br /><a href="#">Profil</a> - <a href="#">MP</a></span></span> 
                        <!--        fin staff 2        --> 
                        <!--        staff 3        --><span class="carousel_mini"><img src="http://images6.fanpop.com/image/photos/35200000/-JD-in-Sleepy-Hollow-johnny-depp-35224306-200-200.jpg" class="carousel_illu" /><span class="carousel_description"><strong>Prénom Nom</strong><br />Description rapide staff 3...<br /><a href="#">Profil</a> - <a href="#">MP</a></span></span> 
                        <!--        fin staff 3        --> 
                        <!--        staff 4        --><span class="carousel_mini"><img src="http://images6.fanpop.com/image/photos/35200000/-JD-in-Sleepy-Hollow-johnny-depp-35224306-200-200.jpg" class="carousel_illu" /><span class="carousel_description"><strong>Prénom Nom</strong><br />Description rapide staff 4...<br /><a href="#">Profil</a> - <a href="#">MP</a></span></span> 
                        <!--        fin staff 4        --> 
                        <!--        staff 5        --><span class="carousel_mini"><img src="http://images6.fanpop.com/image/photos/35200000/-JD-in-Sleepy-Hollow-johnny-depp-35224306-200-200.jpg" class="carousel_illu" /><span class="carousel_description"><strong>Prénom Nom</strong><br />Description rapide staff 5...<br /><a href="#">Profil</a> - <a href="#">MP</a></span></span> 
                        <!--        fin staff 5        --> 
                     </div>
                        
                     <!--        FIN STAFF        --><span class="carousel_titre">Personnages recherchés</span> 
                     <div class="carousel_bloc4">
                           
                        <!--        DEBUT STAFF        --> 
                        <!--        wanted 1        --><span class="carousel_mini"><img src="http://i40.photobucket.com/albums/e212/GuitarPickQueen/RupertWe.jpg" class="carousel_illu" /><span class="carousel_description2"><strong>Prénom Nom</strong><br />Description rapide wanted 1...<br /><a href="#">En savoir plus...</a></span></span> 
                        <!--        fin wanted 1        --> 
                        <!--        wanted 2        --><span class="carousel_mini"><img src="http://i40.photobucket.com/albums/e212/GuitarPickQueen/RupertWe.jpg" class="carousel_illu" /><span class="carousel_description2"><strong>Prénom Nom</strong><br />Description rapide wanted 2...<br /><a href="#">En savoir plus...</a></span></span> 
                        <!--        fin wanted 2        --> 
                        <!--        wanted 3        --><span class="carousel_mini"><img src="http://i40.photobucket.com/albums/e212/GuitarPickQueen/RupertWe.jpg" class="carousel_illu" /><span class="carousel_description2"><strong>Prénom Nom</strong><br />Description rapide wanted 3...<br /><a href="#">En savoir plus...</a></span></span> 
                        <!--        fin wanted 3        --> 
                        <!--        wanted 4        --><span class="carousel_mini"><img src="http://i40.photobucket.com/albums/e212/GuitarPickQueen/RupertWe.jpg" class="carousel_illu" /><span class="carousel_description2"><strong>Prénom Nom</strong><br />Description rapide wanted 4...<br /><a href="#">En savoir plus...</a></span></span> 
                        <!--        fin wanted 4        --> 
                        <!--        wanted 5        --><span class="carousel_mini"><img src="http://i40.photobucket.com/albums/e212/GuitarPickQueen/RupertWe.jpg" class="carousel_illu" /><span class="carousel_description2"><strong>Prénom Nom</strong><br />Description rapide wanted 5...<br /><a href="#">En savoir plus...</a></span></span> 
                        <!--        fin wanted 5        --> 
                     </div>
                        
                     <!--        FIN WANTED        --> 
                  </div>
                     
               </div>
                  
               <!--        ZONE 3        --> 
               <div id="carousel_3">
                    <a href="#target3" class="lien3"> </a> 
                  <div class="carousel_3_content">
                        
                     <table>
                           
                        <tbody>
                              
                           <tr>
                                 
                              <td>
                                   <span class="carousel_titre">Nouveautés</span> 
                                 <div class="carousel_bloc6">
                                       
                                    <!--        PREMIERE NEWS        --><span class="ligne1"><span class="date">--/--/--</span> | Contenu de la dernière nouveauté...</span> 
                                    <!--        DEUXIEME NEWS        --><span class="ligne2"><span class="date">--/--/--</span> | Contenu de l'avant-dernière nouveauté...</span> 
                                    <!--        TROISIEME NEWS        --><span class="ligne1"><span class="date">--/--/--</span> | Ancienne info...</span> 
                                    <!--        QUATRIEME NEWS        --><span class="ligne2"><span class="date">--/--/--</span> | Info encore plus ancienne...</span> 
                                 </div>
                                    
                              </td>
                                 
                              <td>
                                   <span class="carousel_titre">Derniers messages</span> 
                                 <div class="carousel_bloc6">
                                       
                                    <!--        DEBUT DERNIERS SUJETS        -->
                                    <marquee behavior="scroll" direction="up" scrollamount="1" style="overflow: hidden; height: 230px;">
                                        
                                    </marquee>
                                       
                                    <div style="overflow: hidden;" id="recent-topics">
                                          
                                    </div>
                                    
                                    <marquee behavior="scroll" direction="up" scrollamount="1" style="overflow: hidden; height: 230px;">
                                        <script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script>
                                    </marquee>
                                       
                                    <!--        FIN DERNIERS SUJETS        --> 
                                 </div>
                                    
                              </td>
                                 
                           </tr>
                              
                        </tbody>
                           
                     </table>
                        
                  </div>
                     
               </div>
                  
               <!--        ZONE 4        --> 
               <div id="carousel_4">
                    <a href="#target4" class="lien4"> </a> 
                  <div class="carousel_4_content">
                       <span class="carousel_titre">Partenaires</span> 
                     <div class="carousel_bloc4">
                           
                        <!--        DEBUT LISTE PARTENAIRES        --><a href="#"><img src="http://i.imgur.com/VeC85.png" /></a> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> <img src="http://i.imgur.com/VeC85.png" /> 
                        <!--        FIN LISTE PARTENAIRES        --> 
                     </div>
                        
                     <div class="carousel_bloc5">
                           
                        <!--        NE PAS RETIRER SVP        -->(c) Merci à <a href="http://www.never-utopia.com">Never-Utopia</a> pour cette page d'accueil. 
                        <!--        NE PAS RETIRER SVP        --> 
                     </div><span class="carousel_titre">Top Sites</span> 
                     <!--        DEBUT TOP SITES        --> 
                     <center>
                          <a href="#"><img src="http://icdn.pro/images/fr/c/o/coups-coeur-etoile-icone-9451-96.png" style="width: 50px;" /></a><a href="#"><img src="http://icdn.pro/images/fr/c/o/coups-coeur-etoile-icone-9451-96.png" style="width: 50px;" /></a><a href="#"><img src="http://icdn.pro/images/fr/c/o/coups-coeur-etoile-icone-9451-96.png" style="width: 50px;" /></a> 
                     </center>
                        
                     <!--        FIN TOP SITES        --> 
                  </div>
                     
               </div>
                  
            </div>
               
         </div>
            
      </div>
         
   </div>
</div>
myo*
myo*


Messages : 12
Date d'inscription : 21/09/2014


Private Blossom Empty
Admin
MessageSujet: Re: Private Blossom Private Blossom EmptyVen 13 Fév - 18:25
CSS P.A

Code:
/* PA CAROUSEL - NEVERUTOPIA */
#espace_top
{
  height: 50px;
}
#espace_carousel
{
  position: relative;
  width: 790px;
  margin: auto;
  height: 300px;
  padding: 10px 0px;
  /* pour modifier la couleur du texte dans la PA pensez a modifier ou enlever la ligne ci dessus */
}
.lien1 /* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
{
  position: absolute;
  z-index: 999;
  display: none;
}
.lien2, .lien3, .lien4, #target2:target .lien1, #target3:target .lien1, #target4:target .lien1
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
{
  position: absolute;
  z-index: 999;
  display: block;
  width: 100%;
  height: 100%;
}

#carousel_1 /* design du bloc 1 - bloc devant par defaut */
{
  position: absolute;
  z-index: 3;
  width: 600px;
  height: 300px;
  left: 50%;
  margin-left: -300px;
  margin-top: 0px;
  background-image:linear-gradient(#325118);
  background-image:-moz-linear-gradient(#325118);
  background-image:-o-linear-gradient(#325118);
  background-image:-htm-linear-gradient(#325118);
  background-image:-webkit-linear-gradient(#325118);
  background-color: #325118;
  border: 1px solid #ccf1ff;
  box-shadow: 0px 0px 5px #ccf1ff;
  -moz-box-shadow: 0px 0px 5px #ccf1ff;
  -o-box-shadow: 0px 0px 5px #ccf1ff;
  -htm-box-shadow: 0px 0px 5px #ccf1ff;
  -webkit-box-shadow: 0px 0px 5px #ccf1ff;
  overflow: hidden;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
#carousel_2 /* design du bloc 2 - bloc a droite par defaut */
{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: 100px;
  margin-top: 75px;
  background-image:linear-gradient(#ccf1ff, white);
  background-image:-moz-linear-gradient(#ccf1ff, white);
  background-image:-o-linear-gradient(#ccf1ff, white);
  background-image:-htm-linear-gradient(#ccf1ff, white);
  background-image:-webkit-linear-gradient(#ccf1ff, white);
  background-color: #ccf1ff;
  border: 1px solid #ccf1ff;
  box-shadow: 0px 0px 5px #ccf1ff;
  -moz-box-shadow: 0px 0px 5px #ccf1ff;
  -o-box-shadow: 0px 0px 5px #ccf1ff;
  -htm-box-shadow: 0px 0px 5px #ccf1ff;
  -webkit-box-shadow: 0px 0px 5px #ccf1ff;
  overflow: hidden;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
#carousel_3 /* design du bloc 3 - bloc a gauche par defaut */
{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: -400px;
  margin-top: 75px;
  background-image:linear-gradient(#ccf1ff, white);
  background-image:-moz-linear-gradient(#ccf1ff, white);
  background-image:-o-linear-gradient(#ccf1ff, white);
  background-image:-htm-linear-gradient(#ccf1ff, white);
  background-image:-webkit-linear-gradient(#ccf1ff, white);
  background-color: #ccf1ff;
  border: 1px solid #ccf1ff;
  box-shadow: 0px 0px 5px #ccf1ff;
  -moz-box-shadow: 0px 0px 5px #ccf1ff;
  -o-box-shadow: 0px 0px 5px #ccf1ff;
  -htm-box-shadow: 0px 0px 5px #ccf1ff;
  -webkit-box-shadow: 0px 0px 5px #ccf1ff;
  overflow: hidden;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
#carousel_4 /* design du bloc 4 - bloc derriere et donc invisible par defaut */
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: -150px;
  margin-top: 0px;
  background-image:linear-gradient(#ccf1ff, white);
  background-image:-moz-linear-gradient(#ccf1ff, white);
  background-image:-o-linear-gradient(#ccf1ff, white);
  background-image:-htm-linear-gradient(#ccf1ff, white);
  background-image:-webkit-linear-gradient(#ccf1ff, white);
  background-color: #ccf1ff;
  border: 1px solid #ccf1ff;
  box-shadow: 0px 0px 5px #ccf1ff;
  -moz-box-shadow: 0px 0px 5px #ccf1ff;
  -o-box-shadow: 0px 0px 5px #ccf1ff;
  -htm-box-shadow: 0px 0px 5px #ccf1ff;
  -webkit-box-shadow: 0px 0px 5px #ccf1ff;
  overflow: hidden;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}

/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#target1:target #carousel_1, #target2:target #carousel_2, #target3:target #carousel_3,
#target4:target #carousel_4
{
  position: absolute;
  z-index: 3;
  width: 600px;
  height: 300px;
  left: 50%;
  margin-left: -300px;
  margin-top: 0px;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#target1:target .lien1, #target2:target .lien2, #target3:target .lien3, #target4:target .lien4
{
  display: none;
}
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#target1:target #carousel_2, #target2:target #carousel_4, #target3:target #carousel_1,
#target4:target #carousel_3
{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: 100px;
  margin-top: 75px;
  overflow: hidden;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#target1:target #carousel_3, #target2:target #carousel_1, #target3:target #carousel_4,
#target4:target #carousel_2
{
  position: absolute;
  z-index: 2;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: -400px;
  margin-top: 75px;
  overflow: hidden;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
/* FONCTIONNEMENT CAROUSEL - NE PAS MODIFIER */
#target1:target #carousel_4, #target2:target #carousel_3, #target3:target #carousel_2,
#target4:target #carousel_1
{
  position: absolute;
  z-index: 1;
  width: 300px;
  height: 150px;
  left: 50%;
  margin-left: -150px;
  margin-top: 0px;
  overflow: hidden;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}

.carousel_1_content /* apparition progressive du contenu - ne pas modifier */
{
  opacity: 1;
  -moz-opacity: 1;
  -kthm-opacity: 1;
  filter: alpha(opacity=100);
  transition: 500ms 500ms;
  -moz-transition: 500ms 500ms;
  -htm-transition: 500ms 500ms;
  -o-transition: 500ms 500ms;
  -webkit-transition: 500ms 500ms;
}
/* apparition progressive du contenu - ne pas modifier */
.carousel_2_content, .carousel_3_content, .carousel_4_content, #target2:target .carousel_1_content,
#target3:target .carousel_1_content, #target4:target .carousel_4_content
{
  position: relative;
  z-index: 1;
  width: 600px;
  height: 300px;
  overflow: hidden;
  opacity: 0;
  -moz-opacity: 0;
  -kthm-opacity: 0;
  filter: alpha(opacity=0);
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
/* apparition progressive du contenu - ne pas modifier */
#target1:target .carousel_1_content, #target2:target .carousel_2_content, #target3:target .carousel_3_content,
#target4:target .carousel_4_content
{
  opacity: 1;
  -moz-opacity: 1;
  -kthm-opacity: 1;
  filter: alpha(opacity=100);
  transition: 500ms 500ms;
  -moz-transition: 500ms 500ms;
  -htm-transition: 500ms 500ms;
  -o-transition: 500ms 500ms;
  -webkit-transition: 500ms 500ms;
}


.carousel_titre /* modifiez ici le grand titre du contenu */
{
  display: block;
  text-align: center;
  font-size: 30px;
  font-family: Bigelow Rules;
  font-weight: bold;
}
/* design de base des blocs */
.carousel_bloc1, .carousel_bloc2, .carousel_bloc3, .carousel_bloc4, .carousel_bloc5, .carousel_bloc6
{
  position: absolute;
  width: 280px;
  height: 200px;
  background-image:linear-gradient(#ccf1ff, white);
  padding: 5px;
  margin-left: 20px;
  margin-top: 5px;
  border: 1px solid #ccf1ff;
  box-shadow: 2px 2px 0px #ccf1ff;
  -moz-box-shadow: 2px 2px 0px #ccf1ff;
  -o-box-shadow: 2px 2px 0px #ccf1ff;
  -htm-box-shadow: 2px 2px 0px #ccf1ff;
  -webkit-box-shadow: 2px 2px 0px #ccf1ff;
  text-align: justify;
  overflow: auto;
}
/* modification spécifique pour le design de chaque bloc */
.carousel_bloc2
{
  width: 180px;
  height: 150px;
  margin-left: 350px;
  margin-top: 20px;
}
.carousel_bloc3
{
  width: 500px;
  height: 15px;
  margin-top: 230px;
  margin-left: 40px;
}
.carousel_bloc4
{
  position: relative;
  width: 550px;
  height: 90px;
  padding: 5px;
  margin-left: 8px;
  overflow: visible;
}
.carousel_bloc5
{
  position: relative;
  width: 500px;
  height: 15px;
  margin-left: 20px;
}
.carousel_bloc6
{
  position: relative;
  width: 250px;
  height: 230px;
}

/* design des liens rapides du bloc 1 */
.carousel_fastlink
{
  display: block;
  padding: 3px;
  margin-bottom: 1px;
  text-align: center;
  background-image:linear-gradient(#325118);
  color: #42A0C2 !important;
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
/* design des liens rapides du bloc 1 au survol */
.carousel_fastlink:hover
{
  background: #ccf1ff;
  color: #42A0C2 !important;
  transition: 500ms;
  -moz-transition: 500ms;
  -htm-transition: 500ms;
  -o-transition: 500ms;
  -webkit-transition: 500ms;
}
/* style pour l image illustrant le texte d accueil */
.carousel_img
{
  width: 150px;
  margin: 10px;
  float: left;
  transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -htm-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
}
/* style des images illustrant le staff et les wanted du bloc 2 */
.carousel_illu
{
  display: inline-block;
  margin: 2px;
  border: 1px solid #ccf1ff;
  width: 80px;
}
/* style des infobulles de description staff et wanted */
.carousel_description, .carousel_description2
{
  position: absolute;
  z-index: 999;
  display: block;
  width: 0px;
  height: 0px;
  margin-top: -50px;
  margin-left: 20px;
  background-image:linear-gradient(#ccf1ff, white);
  color: #42A0C2;
  line-height: 11px;
  text-align: center;
  opacity: 0;
  -moz-opacity: 0;
  -khtm-opacity: 0;
  filter: alpha(opacity=0);
  transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -htm-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  border-radius: 10px;
  -o-border-radius: 10px;
  -moz-border-radius: 10px;
  -htm-border-radius: 10px;
  -webkit-border-radius: 10px;
  overflow: hidden;
  transition: 200ms;
  -moz-transition: 200ms;
  -htm-transition: 200ms;
  -o-transition: 200ms;
  -webkit-transition: 200ms;
}
.carousel_mini /* ne pas modifier */
{
  display: inline-block;
}
/* ne pas modifier */
.carousel_mini:hover .carousel_description, .carousel_mini:hover .carousel_description2
{
  width: 150px;
  height: 100px;
  margin-top: -10px;
  padding: 3px;
  opacity: 0.8;
  -moz-opacity: 0.8;
  -khtm-opacity: 0.8;
  filter: alpha(opacity=80);
  transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -htm-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  box-shadow: 0px 0px 5px #ccf1ff;
  -moz-box-shadow: 0px 0px 5px #ccf1ff;
  -o-box-shadow: 0px 0px 5px #ccf1ff;
  -htm-box-shadow: 0px 0px 5px #ccf1ff;
  -webkit-box-shadow: 0px 0px 5px #ccf1ff;
  transition: 200ms;
  -moz-transition: 200ms;
  -htm-transition: 200ms;
  -o-transition: 200ms;
  -webkit-transition: 200ms;
}
/* ne pas modifier */
.carousel_mini:hover .carousel_description2
{
  margin-top: -180px;
}
myo*
myo*


Messages : 12
Date d'inscription : 21/09/2014


Private Blossom Empty
MessageSujet: Re: Private Blossom Private Blossom Empty
Contenu sponsorisé




Private Blossom Empty

Private Blossom

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: Titre de catégorie :: ◊ Votre 1er forum-