News Accueil

Terrible

Libre-service de codages pour vos forums


Fiche #1

par Awful le le Mer 28 Fév - 14:19


Prénom Nom

  • écrire ici
  • écrire ici
  • écrire ici
  • écrire ici
  • écrire ici
  • écrire ici
  • écrire ici
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system

Physique & Caractère

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasureBut I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure

Histoire

But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasureBut I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure
Créé par Nom du joueur
Infos supplémentaires


La première image est de 200x320 pixels. La seconde image est de 80x80 pixels.

J'ai mis quelques variables pour les couleurs, afin d'éditer plus facilement les hexas qui se répètent. Je vous les liste ici :
--couleur-fond : couleur de fond du titre ("Prénom nom"), du fond du bloc infos joueur et du fond (foncé) des blocs Histoire / physique & caractère
--couleur-fond2 : couleur des titres des blocs texte ("physique", "physique & caractère"), couleur du fond du bloc infos, couleur du fond du titre du bloc joueur
--bordure-bloc : couleur de bordure du titre, du bloc infos et du bloc joueur
--bordure-int : couleur de la bordure intérieur des blocs texte

Les autres couleurs (à retrouver avec ctrl/cmd + F) sont là :
#282828 : couleur du fond de la fiche, bordure du bas des items du bloc infos
#2c2c2c : bordure de la fiche
#f2f2f2 : couleur du titre, couleur du fond (clair) des blocs texte, couleur du titre du bloc joueur
#aaa : couleur du texte du bloc infos, couleur du texte du bloc citation
#303030 : couleur du fond du bloc avatar
#1d1d1d : couleur du fond du bloc citation


Minifié, à poster directement dans un message :


Code:
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700|Roboto" rel="stylesheet"><style>:root {--couleur-fond: #424242;--couleur-fond: #353535;--bordure-int: #989898;--bordure-bloc: #111;}.app {width: 550px;font-family: 'Roboto', sans-serif;background-color: #282828;padding: 10px;box-sizing: border-box;border: 1px solid #2c2c2c;margin: auto;position: relative;}.app h2,.app h3 {font-family: 'Montserrat', sans-serif;margin:0;text-transform: uppercase;letter-spacing: 2px;font-size: 12px;font-weight: bold;}.app h2 {background-color: var(--couleur-fond);text-align: center;color: #f2f2f2;padding: 30px 0;border: 1px solid var(--bordure-bloc);}.app h3 {color: var(--couleur-fond2);margin-bottom: 10px;}.app-basics, .joueur {display: -webkit-box;display: -ms-flexbox;display: flex;}.app-info {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 360px;}.app ul {border: 1px solid var(--bordure-bloc);border-top: 0;border-bottom: 0;padding:10px 15px;margin: 0;list-style-type: none;font-size: 10px;background: var(--couleur-fond2);color: #aaa;height: 260px;overflow: auto;}.app ul li {border-bottom: 1px solid #2c2c2c;padding: 7px 0 7px;display: block;}.app ul li:last-child {border-bottom: 0;}.app ul li label {color: inherit;width: 30%;display: inline-block;font-weight: bold;text-transform: uppercase;font-family: 'Montserrat', sans-serif;}.app .app-avatar {padding: 20px;background: #303030;box-sizing: border-box;}.app .app-avatar img {vertical-align: middle;height: 320px;width: 200px;}.app-quote {line-height: 11px;-webkit-box-flex: 1;-ms-flex: 1;flex: 1;background: #1d1d1d;display: inline-block;font-size: 8px;text-transform: uppercase;letter-spacing: 1px;color: #aaa;vertical-align: top;padding: 20px;box-sizing: border-box;text-align: justify;}.app-story {background-color: var(--couleur-fond);border: 1px solid var(--bordure-bloc);padding: 10px;box-sizing: border-box;height: 300px;}.app-story + .app-story {border-top: 0;height: auto;}.app-story > div {background-color: #f2f2f2;border: 1px solid #393939;padding: 30px 50px;box-sizing: border-box;box-shadow: inset 6px 0 var(--bordure-int), inset 0 6px var(--bordure-int),inset -6px 0 var(--bordure-int), inset 0 -6px var(--bordure-int);height: 100%;}.app-story > div > div {font-size: 11px;text-align: justify;height: 100%;overflow: auto;padding-right: 10px;line-height: 14px;}.joueur .app-avatar {height: 100px;width: 100px;}.app-joueur {-webkit-box-flex: 1;-ms-flex: 1;flex: 1;}.app-joueur-head {font-family: 'Montserrat', sans-serif;background-color: var(--couleur-fond2);text-transform: uppercase;color: #f2f2f2;font-size: 10px;letter-spacing: 1px;padding: 10px;border: 1px solid var(--bordure-bloc);border-top: 0;}.app-joueur .infos {background-color: var(--couleur-fond);text-transform: none;color: #f2f2f2;font-family: "roboto";letter-spacing: 0px;height: 46px;overflow: auto;border: 1px solid var(--bordure-bloc);border-top: 0;padding: 10px;font-size: 11px;}.app-credit {position: absolute;bottom: -15px;left: 0;}.app-credit a {font-family: 'Montserrat', sans-serif;text-transform: uppercase;letter-spacing: 1px;font-size: 7px;font-weight: bold;text-decoration: none!important;color: #282828;}</style>

<div class="app"><h2>Prénom Nom</h2><!--
--><div class="app-basics"><div class="app-info"><ul><!--
--><li><label>Surnom</label>écrire ici</li><!--
--><li><label>Date de naissance</label> écrire ici</li><!--
--><li><label>Âge</label> écrire ici</li><!--
--><li><label>Métier</label> écrire ici</li><!--
--><li><label>Groupe</label> écrire ici</li><!--
--><li><label>Race</label> écrire ici</li><!--
--><li><label>Avatar</label> écrire ici</li></ul><!--

--><div class="app-quote">Citation ici</div><!--

--></div><div class="app-avatar"><img src="http://via.placeholder.com/200x320"  /></div></div><!--


--><div class="app-story"><div><div><h3>Physique & Caractère</h3>Texte ici</div></div></div><!--


--><div class="app-story"><div><div><h3>Histoire</h3>Texte ici</div></div></div><!--

--><div class="joueur"><img src="http://via.placeholder.com/80x80" class="app-avatar" /><div class="app-joueur"><div class="app-joueur-head">Créé par <b>Nom du joueur</b></div><div class="infos">Infos supplémentaires</div></div></div><div class="app-credit"><a href="http://terrible.forumactif.org" target="_blank">Awful</a></div></div>


CSS et HTML séparés :


Code:
:root {
    --couleur-fond: #424242;
    --couleur-fond: #353535;
    --bordure-int: #989898;
    --bordure-bloc: #111;
}
.app {
    width: 550px;
    font-family: 'Roboto', sans-serif;
    background-color: #282828;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #2c2c2c;
    margin: auto;
    position: relative;
}
.app h2,.app h3 {
    font-family: 'Montserrat', sans-serif;
    margin:0;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    font-weight: bold;
}
.app h2 {
    background-color: var(--couleur-fond);
    text-align: center;
    color: #f2f2f2;
    padding: 30px 0;
    border: 1px solid var(--bordure-bloc);
}
.app h3 {
    color: var(--couleur-fond2);
    margin-bottom: 10px;
}
.app-basics, .joueur {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.app-info {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 360px;
}
.app ul {
    border: 1px solid var(--bordure-bloc);
    border-top: 0;
    border-bottom: 0;
    padding:10px 15px;
    margin: 0;
    list-style-type: none;
    font-size: 10px;
    background: var(--couleur-fond2);
    color: #aaa;
    height: 260px;
    overflow: auto;
}
.app ul li {
    border-bottom: 1px solid #2c2c2c;
    padding: 7px 0 7px;
    display: block;
}
.app ul li:last-child {
    border-bottom: 0;
}
.app ul li label {
    color: inherit;
    width: 30%;
    display: inline-block;
    font-weight: bold;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
}
.app .app-avatar {
    padding: 20px;
    background: #303030;
    box-sizing: border-box;
}
.app .app-avatar img {
    vertical-align: middle;
    height: 320px;
    width: 200px;
}
.app-quote {
    line-height: 11px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    background: #1d1d1d;
    display: inline-block;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #aaa;
    vertical-align: top;
    padding: 20px;
    box-sizing: border-box;
    text-align: justify;
}
.app-story {
    background-color: var(--couleur-fond);
    border: 1px solid var(--bordure-bloc);
    padding: 10px;
    box-sizing: border-box;
    height: 300px;
}
.app-story + .app-story {
    border-top: 0;
    height: auto;
}
.app-story > div {
    background-color: #f2f2f2;
    border: 1px solid #393939;
    padding: 30px 50px;
    box-sizing: border-box;
    box-shadow: inset 6px 0 var(--bordure-int), inset 0 6px var(--bordure-int),inset -6px 0 var(--bordure-int), inset 0 -6px var(--bordure-int);
    height: 100%;
}
.app-story > div > div {
    font-size: 11px;
    text-align: justify;
    height: 100%;
    overflow: auto;
    padding-right: 10px;
    line-height: 14px;
}
.joueur .app-avatar {
    height: 100px;
    width: 100px;
}
.app-joueur {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.app-joueur-head {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--couleur-fond2);
    text-transform: uppercase;
    color: #f2f2f2;
    font-size: 10px;
    letter-spacing: 1px;
    padding: 10px;
    border: 1px solid var(--bordure-bloc);
    border-top: 0;
}
.app-joueur .infos {
    background-color: var(--couleur-fond);
    text-transform: none;
    color: #f2f2f2;
    font-family: "roboto";
    letter-spacing: 0px;
    height: 46px;
    overflow: auto;
    border: 1px solid var(--bordure-bloc);
    border-top: 0;
    padding: 10px;
    font-size: 11px;
}
.app-credit {
    position: absolute;
    bottom: -15px;
    left: 0;
}
.app-credit a {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 7px;
    font-weight: bold;
    text-decoration: none!important;
    color: #282828;
}

Code:
<div class="app"><h2>Prénom Nom</h2><!--
--><div class="app-basics"><div class="app-info"><ul><!--
--><li><label>Surnom</label>écrire ici</li><!--
--><li><label>Date de naissance</label> écrire ici</li><!--
--><li><label>Âge</label> écrire ici</li><!--
--><li><label>Métier</label> écrire ici</li><!--
--><li><label>Groupe</label> écrire ici</li><!--
--><li><label>Race</label> écrire ici</li><!--
--><li><label>Avatar</label> écrire ici</li></ul><!--

--><div class="app-quote">Citation ici</div><!--

--></div><div class="app-avatar"><img src="http://via.placeholder.com/200x320"  /></div></div><!--


--><div class="app-story"><div><div><h3>Physique & Caractère</h3>Texte ici</div></div></div><!--


--><div class="app-story"><div><div><h3>Histoire</h3>Texte ici</div></div></div><!--

--><div class="joueur"><img src="http://via.placeholder.com/80x80" class="app-avatar" /><div class="app-joueur"><div class="app-joueur-head">Créé par <b>Nom du joueur</b></div><div class="infos">Infos supplémentaires</div></div></div><div class="app-credit"><a href="http://terrible.forumactif.org" target="_blank">Awful</a></div></div>