Disponible pour les commandes.
Disponible pour les demandes.
↠ Le sujet ↞

Merci de ne jamais retirer les crédits.

Derniers ajouts :
- Fiche de partenariat
- Note façon téléphone


 
AccueilCalendrierFAQRechercherMembresGroupesS'enregistrerConnexion

Partagez | 

 Page d'accueil

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar
Admin
 ♦ Messages : 7 ♦ Date d'inscription : 13/12/2016 ♦ 

Voir le profil de l'utilisateur


http://refuge.forumactif.com
MessageSujet: Page d'accueil   20/12/2016, 23:16


Au survol des différents éléments :



ATTENTION : Avant d'enregistrer, vérifiez à chaque fois qu'aucun saut de ligne n'ait été inséré entre la fermeture de la div et le div class="staff03_eli".
Ici :



HTML
Code:
<div class="PA_eli">
                                                                                                                                                                                                                                      
 <div align="center">
                                                                                                                   <span class="quote1">Citation en deux<br /><span style="font-size:60px;">lignes</span></span>                                                                                                                  
 </div><br />                                                                                                                    
 <div class="vote_eli">
                                                                                                                    <a target="_blank" href="LIEN TOP SITE">V</a><br /><a target="_blank" href="LIEN TOP SITE">O</a><br /><a target="_blank" href="LIEN TOP SITE">T</a><br /><a target="_blank" href="LIEN TOP SITE">E</a><br />                                                                                                                    
 </div>
                                                                                                                                                                                                                                
 <div class="predef01">
                                                                                                                                                                                                                                
 <div class="predef02">
                                                                                                                 Predefinis                                                                                                                
 </div>
                                                                                                                                                                                                                        
 <div class="predef03">
                                                                                                                                                                                                                        
 <div class="predef04">
                                                                                                            <span class="predefnom">Prénom Nom</span><br />Relation<br /> Sous titre<br /><a href="LIEN">Fiche</a>                                                                                                            
 </div><img src="IMAGE 150*75" />                                                                                                            
 </div>
                                                                                                                                                                                                                      
 <div class="predef03">
                                                                                                                                                                                                                        
 <div class="predef04">
                                                                                                             <span class="predefnom">Prénom Nom</span><br />Relation<br /> Sous titre<br /><a href="LIEN">Fiche</a>                                                                                                            
 </div><img src="IMAGE 150*75" />                                                                                        
 </div>
                                                                                                                                                                                                                      
 <div class="predef03">
                                                                                                                                                                                                                      
 <div class="predef04">
                                                                                                           <span class="predefnom">Prénom Nom</span><br />Relation<br /> Sous titre<br /><a href="LIEN">Fiche</a>                                                                                                            
 </div><img src="IMAGE 150*75" />                                                                                                            
 </div><br />                                                                                                              
 </div>
                                                                                                                                                                                                                  
 <div class="contexte_eli">
                                                                                                                                                                                                          
 <div class="titre1_eli">
                                                                                                    Contexte                                                                                                    
 </div>
                                                                                                 Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum! precari ab indigno, supplicare, tum acerbius in aliquem invehi insectarique vehementius, quae in nostris rebus non satis honeste, in amicorum fiunt honestissime; multaeque res sunt in quibus de suis commodis viri boni multa detrahunt detrahique patiuntur, ut iis amici potius quam ipsi fruantur.  Harum trium sententiarum nulli prorsus assentior. Nec enim illa prima vera est, ut, quem ad modum in se quisque sit, sic in amicum sit animatus. Quam multa enim, quae nostra causa numquam faceremus, facimus causa amicorum!
 </div>
                                                                                                                                                                                                  
 <div class="infos_eli">
                                                                                                   <img src="http://zupimages.net/up/16/45/25df.png" /><img src="http://zupimages.net/up/16/45/zwxr.png" />  <img src="http://zupimages.net/up/16/45/yrhx.png" />                                                                                              
 </div>
                                                                                                                                                                                      
 <div class="staff_eli">
                                                                                                                                        
 <div class="staff01_eli">
                                                                                                                              
 <div class="staff02_eli">
                                                              <span class="papseudo">PSEUDO</span><br />Rang<br /><br /><a href="LIEN">Message</a> - <a href="LIEN">Fiche</a>                                                            
 </div>
                                                                                                                      
 </div><div class="staff03_eli">
                                                                                                                              
 <div class="staff02_eli">
                                                               <span class="papseudo2">PSEUDO</span><br />RANG<br /><br /><a href="LIEN">Message</a> - <a href="LIEN">Fiche</a>                                                                            
 </div>
                                                                                                                              
 </div>
                                                                                                                            
 <div class="titre2_eli">
                                                           Staff                                                          
 </div>
                                                                                                                            
 </div>
                                                                                                                
 <div class="news_eli">
                                                         <strong>00/00/00</strong> : <span style="color: #E8ECF0;"><strong>INFOS IMPORTANTE</strong></span> Le reste des annonces.      
 <div>
                                                                                                              
 </div><strong>                                                                                                     </strong>      
 </div><strong>                                                                                               </strong>      
 <div align="center">
                                                                                                        
 <div class="partenaires_eli">
                                                     <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a><a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a> <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a>  <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a> <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a> <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a> <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a> <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a> <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a> <a target="_blank" href="http://z-epidemie.forumactif.com/"><img src="http://zupimages.net/up/16/46/4hal.png" /></a>                                                  
 <div class="titre1_eli">
                                                    Partenaires                                                    
 </div>
                                                                                                        
 </div>
                                                                                                        
 </div><strong></strong>
</div>


CSS
Code:
/*- DEBUT PA BY Moses sur le refuge -*/

.PA_eli {
  position:relative;
  top:0px;
  text-align:left;
  width:100%;
  height:560px;
  overflow:hidden;
}

.quote1 {
  font-family: 'Playfair Display', serif;
  font-size:45px;
  text-shadow: -2px -2px 5px rgba(0, 0, 0, 1);
  color:white;
}

.vote_eli a {
font-size:40px;
  font-family: 'Alegreya Sans SC', sans-serif;
  position:relative;
  left:25px;
  text-shadow: 0px 2px 5px rgba(150, 150, 150, 1);
}

.predef01 {
  position:relative;
  top:-240px;
  left:90px;
}

.predef02 {
  font-size:25px;
  font-family: 'Alegreya Sans SC', sans-serif;
  position:relative;
  top:-280px;
  left:-464px;
  z-index:10;
  -moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);  
}

.predef03 {
  width:150px;
  height:75px;
  overflow:hidden;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
}

.predef04 {
  width:140px;
  height:65px;
  background-color:grey;
  text-align:center;
  padding:5px;
  color:#c2c6ca;
  font-size:12px;
}


.predef03 img {
  position:relative;
  top:-75px;
  left:0px;
  transition:1s;
}

.predef03:hover img {
  left:150px;
  transition:1s;
  z-index:8;
}

.predefnom {
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size:14px;
  color:#D19843;
}

.contexte_eli {
  width:280px;
  background-color:white;
  padding:10px;
  text-align:justify;
  position:relative;
  top:-475px;
  left:280px;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  font-size:12px;
}

.titre1_eli {
   font-size:25px;
  font-family: 'Alegreya Sans SC', sans-serif;
  margin-bottom:-7px;
}

.infos_eli {
  width:240px;
  height:78px;
  position:relative;
  top:-550px;
  left:25px;
}

.infos_eli img {
   webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.75);
}

.staff_eli {
  width:300px;
  height:150px;
  text-align:center;
  position:relative;
  top:-865px;
  left:590px;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.75);
}

.staff_eli img {
  display:inline-block;
  margin:0px;
  position:relative;
  top:-150px;
  z-index:9 !important;
}

.staff01_eli {
  width:150px;
  height:150px;
  display:inline-block;
  margin:0px !important;
  background-image:url(http://www.zupimages.net/up/16/45/l3rb.png);
}

.staff03_eli {
  width:150px;
  height:150px;
  display:inline-block;
  margin:0px !important;
  background-image:url(http://zupimages.net/up/16/46/pvqd.png);
}

.staff02_eli {
  width:150px;
  height:115px;
  background-image:url(http://www.zupimages.net/up/16/45/5la9.png);
  z-index:99 !important;
  -moz-transform: scale(0) rotate(760deg) translate(0px, 0px) skew(0deg, 0deg);
  -webkit-transform: scale(0) rotate(760deg) translate(0px, 0px) skew(0deg, 0deg);
  -o-transform: scale(0) rotate(760deg) translate(0px, 0px) skew(0deg, 0deg);
  -ms-transform: scale(0) rotate(760deg) translate(0px, 0px) skew(0deg, 0deg);
  transform: scale(0) rotate(760deg) translate(0px, 0px) skew(0deg, 0deg);
  transition:1s;
  color:#c2c6ca;
  font-size:15px;
  font-family: 'Alegreya Sans SC', sans-serif;
  padding-top:35px;
}

.staff01_eli:hover .staff02_eli {
  -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}

.staff03_eli:hover .staff02_eli {
  -webkit-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-o-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
-ms-transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
transform: scale(1) rotate(0deg) translate(0px, 0px) skew(0deg, 0deg);
}

.papseudo {
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size:17px;
  color:#D19843;
}

.papseudo2 {
  font-family: 'Alegreya Sans SC', sans-serif;
  font-size:17px;
  color:#549C9C;
}

.titre2_eli {
  height:25px;
  width:110px;
  background-color:#c2c6ca;
  font-size:25px;
  font-family: 'Alegreya Sans SC', sans-serif;
  margin-bottom:-7px;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  position:relative;
  top:-152px;
  left:95px;
}

.news_eli {
  width:290px;
  height:145px;
  -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  background-color:#272727;
  position:relative;
  top:-855px;
  left:590px;
  font-size:13px;
  text-align:center;
  padding:5px;
  color:#c2c6ca;
}

.partenaires_eli {
  text-align:center;
  border-bottom:3px solid #272727;
  width:575px;
  height:80px;
  position:relative;
  top:-835px;
}

.partenaires_eli img {
  -webkit-box-shadow: 0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow:    0px 5px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow:         0px 5px 5px 0px rgba(50, 50, 50, 0.75);
}

/*- FIN PA BY ELI -*/
 
Page d'accueil
Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [ABANDON] Une page d'accueil à onglets
» [Lixyr Yrna] Une page d'accueil pour rainbow style
» [Akino] Un page d'accueil pour New Day :)
» Message de page d'accueil pour Amplificatum[Phantasmagoria]
» Redirection vers page d'accueil

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Refuge :: Entrez dans le refuge :: Autres-
Sauter vers: