Accueil
ET VOILA comme promis j'ai pu tout faire ce week-end. 
D'abord la previem pour la rs (jsp pourquoi les couleurs ne fonctionnent pas sur ce forum mais normalement c'est bon) :
Pseudo
info. info. info. info.
Lui/Elle
Texte de description ici
Liens souhaités
Texte de description ici
Et voici tous les codes.
D'abord le CSS, j'ai mis en haut les couleurs puis les polices avec des commentaires si tu veux modifier. J'ai gardé des classes séparées, comme ça, tu peux adapter chaque code si tu le modifies :
- Code:
/* Images */
/* fond image présentation */
.img-presentation {
background: url('http://i.imgur.com/Vpr6tUN.png');
}
/* Couleurs */
/* fond vert + texte blanc */
/* bordure bas post, survie, irl, titre de la rs */
.bordure, .survie-presentation, .irl-presentation, .fond-nom-rs {
background: #79b088;
color: #FFF;
}
/* fond gris foncé + texte gris clair */
/* titre d'un post, caractère, description rs, texte d'un lien */
.titre, .psychologie-presentation, .description-rs, .texte-lien {
background: #2c2c2c;
color: #d8d8d8;
}
/* fond gris clair */
/* fond d'un post, de la présentation, de la rs, des liens */
.post-contenu, .presentation, .rs, .liens {
background: #d8d8d8;
}
/* fond foncé + texte vert */
/* fond du titre de la présentation */
.haut-presentation {
background: #2c2c2c;
color: #79b088
}
/* bordure verte */
/* bordure sous le titre de la présentation */
.haut-presentation {
border-bottom: 5px solid #79b088;
}
/* texte gris foncé */
/* histoire */
.histoire-presentation {
color: #2c2c2c;
}
/* texte blanc */
.titre-liens {
color: #FFF;
}
/* texte vert */
/* liens vers rps, survol avatar d'un lien */
.journal-rp a, .survol-lien {
color: #79b088;
}
/* Polices */
/* titre d'un post */
.titre {
text-transform: lowercase;
font: 900 30px/1.2 Arial, sans-serif;
}
/* titre de la rs, des liens, pseudo d'un lien */
.titre-nom-rs, .titre-liens, .pseudo-lien {
text-transform: uppercase;
font: 900 30px/1.2 Arial, sans-serif;
}
/* titre de la présentation */
.haut-presentation {
text-transform: uppercase;
font: 900 20px/1.2 Arial, sans-serif;
}
/* sous-titre d'un post */
.sous-titre {
text-transform: uppercase;
font: italic 700 15px/1.2 Arial, sans-serif;
}
/* sous titre de la présentation, de la rs */
.titre-presentation, .sous-titre-rs {
font: italic 900 12px/1 Arial, sans-serif;
text-transform: uppercase;
}
/* Posts */
.post1 {
width: 500px; margin: 0 auto !important;
}
.titre {
text-align: center;
padding: 20px;
}
.post-contenu {
padding: 15px 10px 30px;
text-align: justify;
}
.sous-titre {
padding-bottom: 3px;
border-bottom: 2px solid;
text-align: right;
}
.post-contenu p {
font: 11px/1.3 Arial, sans-serif;
margin: 0;
text-indent: 1cm;
}
.post-contenu p + br {
display: none;
}
.bordure {
height: 20px;
}
/* Présentation */
.presentation {
width: 575px;
margin: 0 auto;
font: 11px/1.2 Arial, sans-serif;
text-align: justify;
}
.haut-presentation {
padding: 100px 50px 20px;
text-align: right;
}
.post-presentation {
display: flex;
}
.img-presentation {
width: 200px;
height: 495px;
overflow: hidden;
}
.img-presentation + div {
flex: 1;
}
.identite-presentation {
margin-right: 20px;
padding: 15px;
}
.identite-presentation p {
height: auto;
max-height: 260px;
overflow: auto;
padding: 0 5px;
}
.titre-presentation {
text-align: right;
padding-bottom: 3px;
border-bottom: 3px solid;
}
.survie-presentation {
padding: 15px 35px 15px 15px;
}
.presentation- b {
text-transform: lowercase;
font-weight: 700;
}
.survie-presentation p {
height: auto;
max-height: 115px;
overflow: auto;
padding: 0 5px;
}
.psychologie-presentation {
padding: 15px 35px;
}
.histoire-presentation {
padding: 15px 35px;
}
.irl-presentation {
padding: 15px 35px;
}
/* Rs */
.rs {
width: 550px;
margin: 0 auto;
text-align: justify;
}
.nom-rs {
display: flex;
}
.image-rs {
width: 300px;
height: 100px;
overflow: hidden;
}
.fond-nom-rs {
padding: 10px 20px;
flex: 1;
height: 80px;
}
.titre-nom-rs {
border-bottom: 2px solid;
text-align: right;
margin: 0;
font-style: italic;
}
.info-rs {
text-align: center;
font-weight: 700;
}
.description-rs {
padding: 20px;
}
.sous-titre-rs {
margin: 0 0 10px;
border-bottom: 2px solid;
text-align: right;
margin-top: 10px;
padding-bottom: 3px;
}
.journal-rp {
padding: 20px;
}
/* Messages liens */
.liens {
width: 550px;
margin: 0 auto;
}
.titre-liens {
margin: 0;
padding: 20px;
text-align: center;
}
.lien {
display: flex;
}
.image-lien {
width: 240px;
height: 240px;
overflow: hidden;
position: relative;
}
.image-lien img {
min-width: 240px;
min-height: 240px;
transition: all 1s;
}
.image-lien:hover img {
filter: grayscale(1);
}
.survol-lien {
transition: all 1s;
width: 160px;
height: 160px;
padding: 20px;
top: 20px;
left: 20px;
position: absolute;
background: rgba(255,255,255,.7);
text-align: center;
display: flex;
opacity: 0;
}
.image-lien:hover .survol-lien {
opacity: 1;
}
.survol-lien div {
margin: auto;
}
.pseudo-lien {
border-bottom: 2px solid;
margin: 0 0 10px;
}
.survol-lien span {
font-weight: 700;
}
.texte-lien {
flex: 1;
padding: 20px;
}
.texte-lien p {
height: 200px;
overflow: auto;
margin: 0;
padding: 0 5px;
font-size: 11px;
text-align: justify;
}
.lien:nth-child(odd) .image-lien {
order: 2;
}
Le code pour les posts :
- Code:
<div class="post1"><div class="titre">Titre</div><!--
--><div class="post-contenu"><div class="sous-titre">sous-titre</div>
<p>Paragraphe 1</p>
<p>Paragraphe 2</p></div><!--
--><div class="bordure"></div></div>
La présentation :
- Code:
<div class="presentation"><div class="haut-presentation">Prénom Nom</div><!--
--><div class="post-presentation"><div class="img-presentation"></div><div><!--
--><div class="identite-presentation"><div class="titre-presentation">Identité</div>
<p><b>Surnom(s) ;</b> écrire ici.</p></div><!--
--><div class="survie-presentation"><div class="titre-presentation">Survie</div>
<p><b>Intitulé ;</b> réponse</p></div><!--
--></div></div><div class="psychologie-presentation"><!--
--><div class="titre-presentation">Psychologie</div>
<p>Le texte ici</p><!--
--></div><!--
--><div class="histoire-presentation"><!--
--><div class="titre-presentation">Histoire</div>
<p>Le texte ici</p><!--
--></div><!--
--><div class="irl-presentation"><!--
--><div class="titre-presentation">Pseudo</div>
<p>le texte ici</p><!--
--></div><!--
--></div>
Premier post rs :
- Code:
<div class="rs"><!--
--><div class="nom-rs"><!--
--><div class="image-rs"><img src="http://placehold.it/300x100" alt="" /></div><!--
--><div class="fond-nom-rs"><div class="titre-nom-rs">Pseudo</div>
<div class="info-rs">info. info. info. info.</div></div><!--
--></div><!--
--><div class="description-rs"><div class="sous-titre-rs">Lui/Elle</div>
Texte de description ici
<div class="sous-titre-rs">Liens souhaités</div>
Texte de description ici</div><!--
--><div class="journal-rp"><div class="sous-titre-rs">Journal des rps</div>
<a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
<a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
<a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]
<a href="">www.</a> nom du rp ft. <em>nom du personnage</em> [color=#ff0000]X[/color] ou [color=#00cc66]V[/color]</div><!--
--></div>
Second message rs :
- Code:
<div class="liens"><div class="titre-liens">Hommes</div><!--
--><div class="lien"><div class="image-lien"><!--
--><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
--><div class="survol-lien"><div><!--
--><div class="pseudo-lien">Pseudo</div><!--
--><span>info. info. info. info.</span><!--
--></div></div><!--
--></div><!--
--><div class="texte-lien"><p>Le texte ici</p></div><!--
--></div><!--
--><div class="lien"><div class="image-lien"><!--
--><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
--><div class="survol-lien"><div><!--
--><div class="pseudo-lien">Pseudo</div><!--
--><span>info. info. info. info.</span><!--
--></div></div><!--
--></div><!--
--><div class="texte-lien"><p>Le texte ici</p></div><!--
--></div><!--
--></div>
Code pour rajouter un lien :
- Code:
--><div class="lien"><div class="image-lien"><!--
--><img src="http://i.imgur.com/o9QhbJ9.png" alt="" !><!--
--><div class="survol-lien"><div><!--
--><div class="pseudo-lien">Pseudo</div><!--
--><span>info. info. info. info.</span><!--
--></div></div><!--
--></div><!--
--><div class="texte-lien"><p>Le texte ici</p></div><!--
--></div><!--
Voilà, encore pardon pour le délai. =/
Pour mon forum cette fois-ci! Qui est toujours en première phase de développement haha.
