| 
|
| | |  Dim 23 Fév - 11:41 Pseudo du membre  Information 1Information 2Information 3Information 4Information 1Information 5Information 6Information 7agora• Description mentaleLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim elit egestas felis suscipit luctus. Nullam tristique odio a efficitur fringilla. In porta dolor vitae ligula dignissim ornare. Nunc vel turpis et eros bibendum efficitur at in velit. Vivamus sed ultrices felis, quis aliquet ante. Nulla lobortis dolor nec felis mattis, egestas vestibulum ante imperdiet. Aliquam dui sem, blandit non urna vitae, fringilla gravida massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit mattis dui, convallis semper felis scelerisque sit amet. Nunc ut enim elit. Nunc nec justo elementum, vestibulum enim nec, elementum nisl. Integer tempus nisi mi, ac rhoncus est volutpat vel. Fusce eleifend auctor felis a luctus. Integer ut nibh nisi. Praesent ultricies mattis elit, ac finibus sapien iaculis ut. • Description physiqueLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim elit egestas felis suscipit luctus. Nullam tristique odio a efficitur fringilla. In porta dolor vitae ligula dignissim ornare. Nunc vel turpis et eros bibendum efficitur at in velit. Vivamus sed ultrices felis, quis aliquet ante. Nulla lobortis dolor nec felis mattis, egestas vestibulum ante imperdiet. Aliquam dui sem, blandit non urna vitae, fringilla gravida massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit mattis dui, convallis semper felis scelerisque sit amet. Nunc ut enim elit. Nunc nec justo elementum, vestibulum enim nec, elementum nisl. Integer tempus nisi mi, ac rhoncus est volutpat vel. Fusce eleifend auctor felis a luctus. Integer ut nibh nisi. Praesent ultricies mattis elit, ac finibus sapien iaculis ut. • Description historiqueLorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim elit egestas felis suscipit luctus. Nullam tristique odio a efficitur fringilla. In porta dolor vitae ligula dignissim ornare. Nunc vel turpis et eros bibendum efficitur at in velit. Vivamus sed ultrices felis, quis aliquet ante. Nulla lobortis dolor nec felis mattis, egestas vestibulum ante imperdiet. Aliquam dui sem, blandit non urna vitae, fringilla gravida massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit mattis dui, convallis semper felis scelerisque sit amet. Nunc ut enim elit. Nunc nec justo elementum, vestibulum enim nec, elementum nisl. Integer tempus nisi mi, ac rhoncus est volutpat vel. Fusce eleifend auctor felis a luctus. Integer ut nibh nisi. Praesent ultricies mattis elit, ac finibus sapien iaculis ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim elit egestas felis suscipit luctus. Nullam tristique odio a efficitur fringilla. In porta dolor vitae ligula dignissim ornare. Nunc vel turpis et eros bibendum efficitur at in velit. Vivamus sed ultrices felis, quis aliquet ante. Nulla lobortis dolor nec felis mattis, egestas vestibulum ante imperdiet. Aliquam dui sem, blandit non urna vitae, fringilla gravida massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit mattis dui, convallis semper felis scelerisque sit amet. Nunc ut enim elit. Nunc nec justo elementum, vestibulum enim nec, elementum nisl. Integer tempus nisi mi, ac rhoncus est volutpat vel. Fusce eleifend auctor felis a luctus. Integer ut nibh nisi. Praesent ultricies mattis elit, ac finibus sapien iaculis ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim elit egestas felis suscipit luctus. Nullam tristique odio a efficitur fringilla. In porta dolor vitae ligula dignissim ornare. Nunc vel turpis et eros bibendum efficitur at in velit. Vivamus sed ultrices felis, quis aliquet ante. Nulla lobortis dolor nec felis mattis, egestas vestibulum ante imperdiet. Aliquam dui sem, blandit non urna vitae, fringilla gravida massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit mattis dui, convallis semper felis scelerisque sit amet. Nunc ut enim elit. Nunc nec justo elementum, vestibulum enim nec, elementum nisl. Integer tempus nisi mi, ac rhoncus est volutpat vel. Fusce eleifend auctor felis a luctus. Integer ut nibh nisi. Praesent ultricies mattis elit, ac finibus sapien iaculis ut. Derrière l'écran • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim elit egestas felis suscipit luctus. Nullam tristique odio a efficitur fringilla. In porta dolor vitae ligula dignissim ornare. Nunc vel turpis et eros bibendum efficitur at in velit.
HTML & CSS direct sur le sujet - Code:
-
<div class="b0"><div class="b1">Pseudo du membre</div> <div class="b2"><div class="b22"><img src="https://zupimages.net/up/20/08/77pt.png" class="bimg" /><!-- --><span class="b3">Information 1</span><!-- --><span class="b3">Information 2</span><!-- --><span class="b3">Information 3</span><!-- --><span class="b3">Information 4</span><!-- --><span class="b3">Information 1</span><!-- --><span class="b3">Information 5</span><!-- --><span class="b3">Information 6</span><!-- --><span class="b3">Information 7</span><!-- --><!-- CRÉDIT A NE PAS RETIRER, MERCI --><a class="cr" href="https://agora-ls.forumactif.com/" target="_blank">agora</a></div></div><!-- partie description & histoire --><div class="b4"><div class="b44"><span class="b5">• Description mentale</span><div class="b6">Je suis un paragraphe.</div> <span class="b5">• Description physique</span><div class="b6">Je suis un paragraphe.</div> <span class="b5">• Description historique</span><div class="b6">Je suis un paragraphe.</div></div></div><!-- --><div class="b7"><div class="b77"><img src="https://zupimages.net/up/20/08/77pt.png" class="b77img" /><!-- --><div class="b8"> [b][color=#43769e]Derrière l'écran •[/color][/b] Je suis un paragraphe.</div></div></div></div><!-- feuille de style--><style>@import url('https://fonts.googleapis.com/css?family=Barlow+Condensed|Gupter&display=swap'); .b0 {width: 550px; margin: auto; margin-top: 20px; margin-bottom: 20px; font-family: 'Barlow Condensed', serif;} .b1 {color: #43769e; font-family: 'Gupter', sans-serif; font-size: 38px; margin-bottom: -5px; -webkit-transition: margin-left 0.5s linear; -moz-transition: margin-left 0.5s linear; -ms-transition: margin-left 0.5s linear; -o-transition: margin-left 0.5s linear; transition: margin-left 0.5s linear;} .b0:hover .b1 {margin-left: 70px; -webkit-transition: margin-left 0.5s linear; -moz-transition: margin-left 0.5s linear; -ms-transition: margin-left 0.5s linear; -o-transition: margin-left 0.5s linear; transition: margin-left 0.5s linear;} .b2 {width: 160px; border: 1px solid #c8c8c8; float: left;} .b22 {margin: 4px; background-color: #dfdfdf; border: 1px solid: #c8c8c8; padding: 21px 21px 10px 21px;} .bimg {border: 5px solid #43769e; margin-bottom: 10px;} .b3 {display: block; width: 110px; margin: auto; margin-top: 2px; margin-bottom: 3px; background-color: #e5e5e5; border: 1px solid #d6d6d6; font-variant-caps: all-small-caps; font-size: 18px; line-height: 16px; padding-bottom: 4px; text-align: center; color: #43769e;} .b4 {width: 380px; border: 1px solid #c8c8c8; margin-left: 166px;} .b44 {margin: 4px; background-color: #dfdfdf; border: 1px solid: #c8c8c8; padding: 21px;} .b5 {display: block; color: #43769e; font-family: 'Gupter', sans-serif; font-size: 20px; line-height: 20px; padding: 3px; border-bottom: 1px solid #43769e; margin-bottom: 5px;} .b6 {padding: 5px; font-size: 12px; line-height: 13px; max-height: 150px; overflow: auto; -webkit-transition: max-height 1s linear; -moz-transition: max-height 1s linear; -ms-transition: max-height 1s linear; -o-transition: max-height 1s linear; transition: max-height 1s linear;} .b6:hover {max-height: 700px; -webkit-transition: max-height 1s linear; -moz-transition: max-height 1s linear; -ms-transition: max-height 1s linear; -o-transition: max-height 1s linear; transition: max-height 1s linear;} .b6::-webkit-scrollbar {width: 2px; height: 10px; background-color: #EEEEEE;} .b6::-webkit-scrollbar-track {background-color: #EEEEEE;} .b6::-webkit-scrollbar-thumb {background-color: #FFF;} .b7 {width: 380px; border: 1px solid #c8c8c8; margin-top: 6px; margin-left: 166px;} .b77 {min-height: 60px; margin: 4px; background-color: #dfdfdf; border: 1px solid: #c8c8c8; padding: 21px;} .b77img {width: 50px; border: 5px solid #43769e; float: left;} .b8 {margin-left: 65px; font-size: 12px; line-height: 13px;} a.cr {display: block; margin-top: 10px; color: #9A9A9A; opacity: 0.8; font-size: 9px; letter-spacing: 1px; text-align: center;} a.cr:hover { opacity: 1;}</style>
Si vous souhaitez partager le css du html, vous avez besoin d'ajouter les deux typo utilisées pour le code sans quoi, la typo prise en compte sera celle déjà présente sur votre forum ! Barlow Condensed & GupterPour le faire, vous devez selectionner le code ci-dessous et l'insérer dans le template < overall_header > et le mettre entre les balises < style > < /style >. Si cette partie vous semble compliqué, je vous invite à trouver un tuto sur internet, vous devriez en trouver sans trop de difficulté ! Vous pouvez aussi poser la question sur le forum dans la partie de l'administration. - Code:
-
<link href="https://fonts.googleapis.com/css?family=Barlow+Condensed|Gupter&display=swap" rel="stylesheet">
Le code html de la fiche - Code:
-
<div class="b0"><div class="b1">Pseudo du membre</div> <div class="b2"><div class="b22"><img src="https://zupimages.net/up/20/08/77pt.png" class="bimg" /><!-- --><span class="b3">Information 1</span><!-- --><span class="b3">Information 2</span><!-- --><span class="b3">Information 3</span><!-- --><span class="b3">Information 4</span><!-- --><span class="b3">Information 1</span><!-- --><span class="b3">Information 5</span><!-- --><span class="b3">Information 6</span><!-- --><span class="b3">Information 7</span><!-- --><!-- CRÉDIT A NE PAS RETIRER, MERCI --><a class="cr" href="https://agora-ls.forumactif.com/" target="_blank">agora</a></div></div><!-- partie description & histoire --><div class="b4"><div class="b44"><span class="b5">• Description mentale</span><div class="b6">Je suis un paragraphe.</div> <span class="b5">• Description physique</span><div class="b6">Je suis un paragraphe.</div> <span class="b5">• Description historique</span><div class="b6">Je suis un paragraphe.</div></div></div><!-- --><div class="b7"><div class="b77"><img src="https://zupimages.net/up/20/08/77pt.png" class="b77img" /><!-- --><div class="b8"> [b][color=#43769e]Derrière l'écran •[/color][/b] Je suis un paragraphe.</div></div></div></div> Le css - Code:
-
/* FICHE DE PRESENTATION - AGORA LS */
.b0 {/* ensemble fiche */
width: 550px;
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
font-family: 'Barlow Condensed', serif;
}
.b1 { /* PSEUDO du personnage */
color: #43769e;
font-family: 'Gupter', sans-serif;
font-size: 38px;
margin-bottom: -5px;
-webkit-transition: margin-left 0.5s linear;
-moz-transition: margin-left 0.5s linear;
-ms-transition: margin-left 0.5s linear;
-o-transition: margin-left 0.5s linear;
transition: margin-left 0.5s linear;
}
.b0:hover .b1 {
margin-left: 70px;
-webkit-transition: margin-left 0.5s linear;
-moz-transition: margin-left 0.5s linear;
-ms-transition: margin-left 0.5s linear;
-o-transition: margin-left 0.5s linear;
transition: margin-left 0.5s linear;
}
.b2 { /* BLOC info personnage */
width: 160px;
border: 1px solid #c8c8c8;
float: left;
}
.b22 {
margin: 4px;
background-color: #dfdfdf;
border: 1px solid: #c8c8c8;
padding: 21px 21px 10px 21px;
}
.bimg { /* avatar fiche */
border: 5px solid #43769e;
margin-bottom: 10px;
}
.b3 {/* information personnage */
display: block;
width: 110px;
margin: auto;
margin-top: 2px;
margin-bottom: 3px;
background-color: #e5e5e5;
border: 1px solid #d6d6d6;
font-variant-caps: all-small-caps;
font-size: 18px;
line-height: 16px;
padding-bottom: 4px;
text-align: center;
color: #43769e;
}
.b4 {/* bloc contenu fiche */
width: 380px;
border: 1px solid #c8c8c8;
margin-left: 166px;
}
.b44 {
margin: 4px;
background-color: #dfdfdf;
border: 1px solid: #c8c8c8;
padding: 21px;
}
.b5 { /* sous titre fiche */
display: block;
color: #43769e;
font-family: 'Gupter', sans-serif;
font-size: 20px;
line-height: 20px;
padding: 3px;
border-bottom: 1px solid #43769e;
margin-bottom: 5px;
}
.b6 {/* bloc paragaphe contenu fiche qui grandit au survol */
padding: 5px;
font-size: 12px;
line-height: 13px;
max-height: 150px;
overflow: auto;
-webkit-transition: max-height 1s linear;
-moz-transition: max-height 1s linear;
-ms-transition: max-height 1s linear;
-o-transition: max-height 1s linear;
transition: max-height 1s linear;
}
.b6:hover {
max-height: 700px;
-webkit-transition: max-height 1s linear;
-moz-transition: max-height 1s linear;
-ms-transition: max-height 1s linear;
-o-transition: max-height 1s linear;
transition: max-height 1s linear;
}
.b6::-webkit-scrollbar {
width: 2px;
height: 10px;
background-color: #EEEEEE;
}
.b6::-webkit-scrollbar-track {
background-color: #EEEEEE;
}
.b6::-webkit-scrollbar-thumb {
background-color: #FFF;
}
.b7 {/* bloc info irl */
width: 380px;
border: 1px solid #c8c8c8;
margin-top: 6px;
margin-left: 166px;
}
.b77 {/* bloc info irl */
min-height: 60px;
margin: 4px;
background-color: #dfdfdf;
border: 1px solid: #c8c8c8;
padding: 21px;
}
.b77img {/* img bloc info irl */
width: 50px;
border: 5px solid #43769e;
float: left;
}
.b8 {/* paragraphe bloc info irl */
margin-left: 65px;
font-size: 12px;
line-height: 13px;
}
a.cr {/* crédit SAKURA sur Agora ; ne pas le retirer */
display: block;
margin-top: 10px;
color: #9A9A9A;
opacity: 0.8;
font-size: 9px;
letter-spacing: 1px;
text-align: center;
}
a.cr:hover {
opacity: 1;
} |
Sujets similaires | |
|
| | Permission de ce forum: | Vous ne pouvez pas répondre aux sujets dans ce forum
| |
| |
| |
|
Accueil