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  

Poster un nouveau sujetRépondre au sujet
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]
» [Akino] Un page d'accueil pour New Day :)
» [terminée] Demande de cadre
» [Ketsuka] Page d'accueil pour Petites Bêtes du Monde [Terminé]

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Graphiorum :: Le coin des codes :: Boîte à codes-
Poster un nouveau sujetRépondre au sujetSauter vers: