Fiche de réponses
Résumé des rps
Fiche de relations
Signature
Fiche de présentations
Codes divers
Avatars 200x320
Graphisme
Problème avec un code
Commandes
Partenaires



 
AccueilAccueil  RechercherRechercher  S'enregistrerS'enregistrer  ConnexionConnexion  

Graphiorum :: Le coin des codes :: Boîte à codesVoir le sujet précédent Voir le sujet suivant Aller en bas 
Page d'accueil pour La Guerre des Clans – Nouveau départ

avatar

Libella
Admin

MessageSujet: Page d'accueil pour La Guerre des Clans – Nouveau départ Dim 1 Juil 2018 - 12:21
Page d'accueil:
 

Le html
Code:
<div class="blocpa"><div class="bienvenuepa">Bienvenue sur La Guerre des Clans – Nouveau départ</div>
<div class="lignepa1"><div class="clanpa"><div class="texteclan"><div class="nomclan">Onyx - ouvert</div><ul><li>Apprenti guérisseur - Libre</li><li>Poste 2 - Pris</li><li>Poste 3 - Libre</li></ul><div class="nomclan">Emeraude - Ouvert</div><ul><li>Apprenti guérisseur - Libre</li><li>Poste 2 - Libre</li><li>Poste 3 - Libre</li></ul><div class="nomclan">Saphir - Ouvert</div><ul><li>Apprenti guérisseur - Libre</li><li>Poste 2 - Pris</li><li>Poste 3 - Libre</li></ul></div></div><div class="staffpa"><div class="staffimg" style="background-image: url('https://i62.servimg.com/u/f62/19/83/21/25/946c3g12.jpg');background-size:100%"><div class="textestaff">Tem<br> Fonda<br><a href="http://lcdc-nouveau-depart.forumactif.com/u2">Profil</a></div></div><div class="staffimg" style="background-image: url('https://i62.servimg.com/u/f62/19/83/21/25/nature13.jpg');background-size:100%"><div class="textestaff">Feufo<br>Admin<br><a href="http://lcdc-nouveau-depart.forumactif.com/u3">Profil</a></div></div></div><div class="saisonpa"><div class="textesaison">Le texte descriptif sur la saison en cours in rp. </div></div></div>
<div class="contextenews"><div class="newspa"><span class="datepa">03/05/18</span> Création du Forum <span class="datepa">05/05/18</span> Inscription d’Etoile Mélodieuse <span class="datepa">13/05/18</span> Design en place et commencement des territoires</div><div class="contextepa">Trois clans se sont formés suite à un voyage particulièrement long. Nous retrouvons donc le Clan de l’Onyx, celui du Saphir et celui de l’Emeraude. Le voyage a été long et difficile, et beaucoup de chats sont morts. Recommencer une nouvelle vie parait donc difficile. Pourtant, grâce à la motivation des différents chefs, les clans tournent la page et recommencent une nouvelle histoire… Plus d’informations dans le contexte !</div></div><div class="lignepa2"><div class="topsitepa"><a href="http://www.root-top.com/topsite/shoom/in.php?IDmark=925" target="_blank"><img src="https://zupimages.net/up/18/26/7nhq.png" class="imgtop"></a><a href="http://www.root-top.com/topsite/guerredesclans/in.php?IDmark=258" target="_blank"><img src="https://zupimages.net/up/18/26/42v1.png" class="imgtop"></a></div><div class="partenairepa"><a href="http://graphiorum.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/18/26/61o3.png" class="imgpartenaire"></a> <a href="http://lcdc-nouveau-depart.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/18/25/x2e8.png" class="imgpartenaire"></a> <a href="http://lcdc-nouveau-depart.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/18/25/x2e8.png" class="imgpartenaire"></a> <a href="http://lcdc-nouveau-depart.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/18/25/x2e8.png" class="imgpartenaire"></a> <a href="http://lcdc-nouveau-depart.forumactif.com/" target="_blank"><img src="https://zupimages.net/up/18/25/x2e8.png" class="imgpartenaire"></a></div><div class="creditpa">-Le forum a été créé par Tem (Étoile du Temps)<br>-Le design a été réalisé par<br>-La page d’accueil a été réalisée par <a href="http://graphiorum.forumactif.com/">Libella</a></div></div></div>

Le CSS
Code:
/***PAGE D'ACCUEIL***/
/*CADRE DE LA PAGE D'ACCUEIL*/
.blocpa {
  width:800px;
  font-family:Comic sans MS;
  font-size:12px;
  text-align:justify;
  color:#009900;
  border: 5px solid #009900;
  background:#C4E0AF;
}

/*ligne clan + staff + saison*/
.lignepa1 {display:flex; margin-top:15px;}
/*ligne top + partenaire + crédits*/
.lignepa2 {display:flex;margin-top:20px;}

/*MESSAGE BIENVENUE*/
.bienvenuepa {
  font-size:24px;
  font-weight:bold;
  text-align:center;
  padding-bottom:8px;
  background:#009900;
  color:#C4E0AF
}

/*LE BLOC DES CLANS*/
/*bloc clan*/
.clanpa {
  width:235px;
  margin-left:37px;
}
/*la mise en forme du texte*/
.texteclan {
  height:90px;
  overflow:auto;
  padding:10px;
  text-align:justify;
  border:1px solid #009900;
}

.nomclan {
  text-align:center;
  font-size:18px;
  border-bottom: 2px solid #009900}

/*LE BLOC STAFF*/
/*bloc du staff*/
.staffpa {
  width:215px;
  margin-left:20px;
  margin-right:20px;
  display:flex;
}
/*image du staff*/
.staffimg {
  width:100px;
  height:100px;
  margin:2px;
  border: 2px solid #009900;
}
/*info derrière l'image*/
.textestaff {
  width: 60px;
  height: 60px;
  background-color:#94CF84;
  color: #009900;
  text-align: center;
  linge-height:18px;
  padding:20px;
  opacity:0;
  -webkit-transition: opacity 0.6s ease-out;
  -moz-transition: opacity 0.6s ease-out;
  -o-transition: opacity 0.6s ease-out;
  transition: opacity 0.6s ease-out;}

.textestaff:hover {opacity: 1;}

/*LE BLOC SAISON*/
/*bloc saison*/
.saisonpa {
  width:235px;
}
/*mise en forme du texte*/
.textesaison {
  height:90px;
  overflow:auto;
  padding:10px;
  text-align:justify;
  border:1px solid #009900;
}
/*LE BLOC CUMUL CONTEXTE + NEWS/ANNONCES */
/*la ligne contexte + annonces*/
.contextenews {
  width:730px;
  margin:0 auto;
  margin-top:15px;
}
/*bloc contexte*/
.contextepa {
  width:480px;
  height:100px;
  padding:10px;
  overflow:auto;
  text-align:justify;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #009900 inset;
}
/*bloc annonce*/
.newspa {
  float:right;
  margin-left:3px;
  width:180px;
  height:100px;
  padding:10px;
  overflow:auto;
  text-align:justify;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #009900 inset;
}
/*date des annonces*/
.datepa {font-weight:bold;color:#537937;}

/*BLOC DES TOPS SITES*/
/*bloc top site*/
.topsitepa {
  width:150px;
  margin-left:45px;
}
/*mise en forme image des top sites*/
.imgtop {height:50px}

/*BLOC DES PARTENAIRES*/
/*bloc partenaire*/
.partenairepa {
  width:270px;
  height:60px;
  margin-left:8px;
  margin-right:10px;
}
/*image des partenaires*/
.imgpartenaire {
  width:50px;
  height:50px}
/*bloc credit*/
.creditpa {
  width:280px;
  height:60px;
  overflow:auto;
}

/***FIN PAGE D'ACCUEIL***/
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Page d'accueil pour La Guerre des Clans – Nouveau départ Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1
Sujets similaires
-
» [Lixyr Yrna] Une page d'accueil pour rainbow style
» Message de page d'accueil pour Amplificatum[Phantasmagoria]
» Page d'accueil pour mon forum
» ►Aide page d'accueil pour forum.
» impossible d'afficher la page d'accueil pour ceux qui on IE

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Graphiorum :: Le coin des codes :: Boîte à codes-
Sauter vers: