Fiche de présentation "luxe"
Bonjour à tous !
Voici une petit fiche de présentation que j'ai faite il y a quelques temps pour un de mes personnages. Je vous la laisse donc ici et à vous d'en faire ce que vous voulez
- Voici un aperçu !
-La fiche en direct
- La fiche fait 500px de large et sa hauteur varie en fonction du contenu
- L'image d'en-tête doit faire 500px de large et 250px de hauteur
-
- La fiche fait 500px de large et sa hauteur varie en fonction du contenu
- L'image d'en-tête doit faire 500px de large et 250px de hauteur
Le HTML
- Code:
<link href="https://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative|Open+Sans" rel="stylesheet" /><div class="astree-cadre"> <div style="background: url('http://www.imgweave.com/view/9733.png') no-repeat top center; width: 500px; height: 250px;"></div><span class="astree-nom">Prénom p²<br/>Nom</span> <div class="astree-titre">Identité</div><ul> <li><span>Âge :</span> XX ans</li><li><span>Sexe :</span> Truc</li><li><span>Race :</span> Machin</li><li><span>Rôle :</span> Bidule de chez Machin Chose</li><li><span>Célébrité utilisée :</span> Emma Stone</li></ul> <div class="astree-titre">Histoire</div><span class="astree-chapitre">Chapitre 1</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi. <a href="#">Je suis un super lien !</a></p><span class="astree-chapitre">Chapitre 2</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><div class="astree-titre">Catégorie 1</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, <q>Je suis un super texte mis en avant !</q> </p><div class="astree-titre">Catégorie 2</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, <q>Je suis un super texte mis en avant !</q> </p><div class="astree-titre">Autre</div><ul> <li><span>Lorem :</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iure minus necessitatibus saepe totam. </li><li><span>Ipsum ?</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li></ul> <div class="astree-credits"><a href="http://www.never-utopia.com/" target="_blank">Never Utopia | Shaneliae</a></div></div>
Le CSS
Quand vous être membre
Voici le code à ajouter en début de message, suivi du HTML :
- Code:
<style>.astree-cadre{border: 2px solid #968070; background-color: #292929; max-width: 500px; margin: 20px auto; color: #ababab; font-family: 'Open Sans', sans-serif; font-size: 13px;}.astree-cadre a{color: #968070; text-decoration: none !important; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-cadre a:hover{color: #8b2f32; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-nom{display: block; text-align: center; margin: -15px auto 40px; color: #968070; font-family: 'Cinzel Decorative', serif; font-size: 45px; line-height: 25px; text-shadow: 0 0 2px #000;}.astree-titre{border-bottom: 2px solid #968070; color: #968070; text-shadow: 0 0 2px #000; padding: 5px 20px; font-family: 'Cinzel Decorative', serif; font-size: 30px; margin-top: 20px;}.astree-cadre ul{list-style: none; padding: 0 20px;}.astree-cadre li span{font-family: 'Cinzel', serif; color: #968070; font-size: 16px;}.astree-chapitre{display: inline-block; font-family: 'Cinzel', serif; font-size: 25px; color: #968070; margin: 25px; padding: 5px 15px; border-left: 5px solid #968070; text-shadow: 0 0 2px #000;}.astree-cadre p{margin: 10px 20px; text-align: justify;}.astree-cadre p > q{display: block; font-family: 'Cinzel', serif; color: #968070; font-size: 16px; line-height: 28px;}.astree-cadre p > q:before, .astree-cadre p > q:after{content: '';}.astree-credits a{display: block; text-align: center; font-family: 'Cinzel', serif; color: #968070; line-height: 40px;}</style>
Quand vous êtes administrateur
Voici le CSS à mettre dans le feuille de style CSS de votre forum :
- Code:
/***** Fiche de présentation Luxe *****/
.astree-cadre {
border: 2px solid #968070;
background-color: #292929;
max-width: 500px;
margin: 20px auto;
color: #ababab;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
}
.astree-cadre a {
color: #968070;
text-decoration: none;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.astree-cadre a:hover {
color: #8b2f32;
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.astree-nom {
display: block;
text-align: center;
margin: -15px auto 40px;
color: #968070;
font-family: 'Cinzel Decorative', serif;
font-size: 45px;
line-height: 25px;
text-shadow: 0 0 2px #000;
}
.astree-titre {
border-bottom: 2px solid #968070;
color: #968070;
text-shadow: 0 0 2px #000;
padding: 5px 20px;
font-family: 'Cinzel Decorative', serif;
font-size: 30px;
margin-top: 20px;
}
.astree-cadre ul {
list-style: none;
padding: 0 20px;
}
.astree-cadre li span {
font-family: 'Cinzel', serif;
color: #968070;
font-size: 16px;
}
.astree-chapitre {
display: inline-block;
font-family: 'Cinzel', serif;
font-size: 25px;
color: #968070;
margin: 25px;
padding: 5px 15px;
border-left: 5px solid #968070;
text-shadow: 0 0 2px #000;
}
.astree-cadre p {
margin: 10px 20px;
text-align: justify;
}
.astree-cadre p > q {
display: block;
font-family: 'Cinzel', serif;
color: #968070;
font-size: 16px;
line-height: 28px;
}
.astree-cadre p > q:before, .astree-cadre p > q:after {
content: '';
}
.astree-credits a {
display: block;
text-align: center;
font-family: 'Cinzel', serif;
color: #968070;
line-height: 40px;
}
Il est conseillé de ne pas faire de sauts de ligne dans ce code pour obtenir le résultat attendu. Si vous avez besoin d'en faire pour question de lisibilité, je vous conseille d'éditer ce code sur un éditeur, puis de le passer sur un Minifier comme HTML Minifier avant de poster.
Merci d'avoir lu ce LS
Vous avez une question ou un problème avec ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.
Dernière édition par Shaneliae le Mer 1 Mar 2017 - 18:08, édité 2 fois
J'aime beaucoup le côté chic et sobre de ta fiche 
