AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


1 résultat trouvé pour auteur_RozenBreizh

RozenBreizh

Fiche de présentation compacte - Jeu 30 Avr 2020 - 18:39

#présentation #html #css #auteur_RozenBreizh

Fiche de présentation compacte


Hellooow,

Voici un LS pour une fiche de présentation "compacte".

Aperçus de la fiche:



Codes pour les fondateurs et Administrateurs, HTML et CSS divisés :

Partie HTML dans le message :


Code:
<div class="blocprez"><div class="blochaut"><img class="IMGprez" src="https://i.servimg.com/u/f51/18/81/56/20/imgpre11.jpg" /><div class="infosprez"><div class="carreprez"><span><!---->NATIONALITE ICI<!----></span><span><!---->AGE ICI<!----></span><span><!---->GENRE ICI<!----></span><span><!---->DATE D'ARRIVEE ICI<!----></span><span><!---->FACTION ICI<!----></span><span><!---->FONCTION ICI<!----></span></div><div class="blocphobie"><span>Phobies et Peurs</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div></div></div><div class="pseudoperso">Prénom&Nom ou Pseudo du personnage</div><div class="blocmilieu"><div class="blocpower"><span>Pouvoir Inutile</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div><div class="blocIB"><span>Infos Bonus</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div><div class="blocpsyphy"><div class="blocpsy"><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span></div><div class="bloctaille"><!---->TAILLE ICI<!----></div><div class="blocorpu"><!---->CORPULENCE ICI<!----></div><div class="bloctiff"><!---->CHEVEUX ICI<!----></div><div class="blocSD"><span>Signe Distinctif</span><!---->ECRIRE ENTRE LES BALISES<!----></div></div><div class="blocsouvenirs"><span>Mes Souvenirs</span><p><!---->ECRIRE ENTRE LES BALISES<!----></p></div></div><div class="pseudojoueur">Pseudo du joueur</div><div class="blocbas"><div class="infosjoueur"><span>Comment as-tu découvert le forum ?</span></div></div></div>


Partie CSS dans la feuille de style :

Code:
/** Fiche de présentation du personnage **/
.blocprez {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
background:url("https://i.servimg.com/u/f90/17/48/87/58/fondca12.png") rgba(69,68,68,0.75);
border-top: 2px solid #fcae19;
border-bottom: 2px solid #fcae19;
color: #DEDEDE;}

.blochaut {
  display: flex;
background-color: rgba(78,5,5,0.15);
width: 100%;
height: 150px; }

.IMGprez {
position: relative;
margin: 0 5px 0 0;
width: 125px;
height: 125px;
top: 10px;
left: 20px;
border: 10px solid transparent;
outline: 1px solid #e59b0d;}

.infosprez {
  display: flex;
  position: relative;
  width: 75%;
  height: 125px;
top: 10px;
left: 20px;}

.carreprez {
  position: relative;
  width: 42%;
  height: 115px;
  margin: 0 3px 0 0;
top: 5px;
left: 5px;
padding: 2px;}

.carreprez span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
text-align: center;}

.blocphobie {
  background: linear-gradient(328deg, rgba(35,34,34,1) 50%, rgba(53,53,53,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
  border: 1px solid #484747;
  position: relative;
  width: 55%;
  height: 115px;
top: 5px;
left: 5px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocphobie span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocphobie p {text-align: justify; font-size: 12px;}

.pseudoperso {
position: relative;
width: 85%;
height: 25px;
top: 0px;
left: 100px;
font-family: 'Special Elite', verdana;
color: #fcae19;
text-shadow: 0 1px 2px black;
font-size: 30px;}

.blocmilieu{
width: 100%;
height: 380px;
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: space-between;}

.blocpower {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 38%;
height: 115px;
top: 5px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocpower span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocpower p {text-align: justify; font-size: 12px;}

.blocIB {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 55%;
height: 115px;
top: 5px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocIB span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocIB p {text-align: justify; font-size: 12px;}

.blocpsyphy {
  display: flex;
flex-direction: column;
justify-content: space-between;
margin: auto;
position: relative;
width: 38%;
height: 255px;
top: 15px;
left: 0px;
padding: 2px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocpsy {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
height: 75px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.quali { display: inline-block; background: #11927c; line-height: 1.5;
text-align: center;margin: 2px;
padding: 2px 3px;}

.defo { display: inline-block; background: #8b1919;line-height: 1.5;
text-align: center; margin: 1px;
padding: 2px 3px;}

.bloctaille {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
line-height: 1.5;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocorpu {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
line-height: 1.5;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.bloctiff{
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 30px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
line-height: 1.5;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocSD{
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 100%;
 height: 70px;
top: 0px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocSD span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocsouvenirs {
background-color: rgba(78,5,5,0.15);
border: 1px solid #682323;
margin: auto;
position: relative;
width: 55%;
 height: 255px;
top: 15px;
left: 0px;
padding: 3px;
overflow: auto;
scrollbar-width: thin;  /* Les valeurs en px ne fonctionnent pas */}

.blocsouvenirs span {
display: inline-block;
margin: 2px;
padding: 2px 5px;
background: linear-gradient(328deg, rgba(79,5,5,1) 0%, rgba(158,90,90,1) 100%);/*Changer ici les couleurs du dégradé de fond*/
line-height: 1.5;
font-size: 14px;
text-transform: uppercase;
font-weight: 700;
text-align: center;}

.blocsouvenirs p {text-align: justify; font-size: 12px;}

.pseudojoueur {
position: relative;
width: 90%;
height: 25px;
top: 20px;
left: 20px;
font-family: 'Special Elite', verdana;
text-shadow: 0 1px 2px black;
font-size: 25px;
color: #DEDEDE;}

.blocbas{
background-color: rgba(78,5,5,0.15);
width: 100%;
height: 65px; }

.infosjoueur {
margin: auto;
position: relative;
width: 90%;
height: 45px;
top: 20px;
left: 20px; }

.infosjoueur span { font-weight: bold;}
/**Fin fiche de présentation du personnage **/


Code de la police "Special Elite" :


Code a mettre dans le template overall_header entre les balises < head >< /head > (sans les espaces dans le template ^^) :

Code:
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">



Codes pour les membres, HTML et CSS ensemble dans le message :


Code:
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<style>.blocprez{display:flex;flex-direction:column;justify-content:space-between;width:100%;background:url(https://i.servimg.com/u/f90/17/48/87/58/fondca12.png) rgba(69,68,68,0.75);border-top:2px solid #fcae19;border-bottom:2px solid #fcae19;color:#DEDEDE}.blochaut{display:flex;background-color:rgba(78,5,5,0.15);width:100%;height:150px}.IMGprez{position:relative;margin:0 5px 0 0;width:125px;height:125px;top:10px;left:20px;border:10px solid transparent;outline:1px solid #e59b0d}.infosprez{display:flex;position:relative;width:75%;height:125px;top:10px;left:20px}.carreprez{position:relative;width:42%;height:115px;margin:0 3px 0 0;top:5px;left:5px;padding:2px}.carreprez span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;text-align:center}.blocphobie{background:linear-gradient(328deg,rgba(35,34,34,1) 50%,rgba(53,53,53,1) 100%);border:1px solid #484747;position:relative;width:55%;height:115px;top:5px;left:5px;padding:2px;overflow:auto;scrollbar-width:thin}.blocphobie span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocphobie p{text-align:justify;font-size:12px}.pseudoperso{position:relative;width:85%;height:25px;top:0;left:100px;font-family:'Special Elite',verdana;color:#fcae19;text-shadow:0 1px 2px #000;font-size:30px}.blocmilieu{width:100%;height:380px;display:flex;flex-flow:row wrap;align-content:flex-start;justify-content:space-between}.blocpower{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:38%;height:115px;top:5px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocpower span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocpower p{text-align:justify;font-size:12px}.blocIB{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:55%;height:115px;top:5px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocIB span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocIB p{text-align:justify;font-size:12px}.blocpsyphy{display:flex;flex-direction:column;justify-content:space-between;margin:auto;position:relative;width:38%;height:255px;top:15px;left:0;padding:2px;overflow:auto;scrollbar-width:thin}.blocpsy{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:75px;top:0;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.quali{display:inline-block;background:#11927c;line-height:1.5;text-align:center;margin:2px;padding:2px 3px}.defo{display:inline-block;background:#8b1919;line-height:1.5;text-align:center;margin:1px;padding:2px 3px}.bloctaille{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;line-height:1.5;overflow:auto;scrollbar-width:thin}.blocorpu{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;overflow:auto;line-height:1.5;scrollbar-width:thin}.bloctiff{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:30px;top:0;left:0;padding:3px;overflow:auto;line-height:1.5;scrollbar-width:thin}.blocSD{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:100%;height:70px;top:0;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.blocSD span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:12px;text-transform:uppercase;font-weight:700;text-align:center}.blocsouvenirs{background-color:rgba(78,5,5,0.15);border:1px solid #682323;margin:auto;position:relative;width:55%;height:255px;top:15px;left:0;padding:3px;overflow:auto;scrollbar-width:thin}.blocsouvenirs span{display:inline-block;margin:2px;padding:2px 5px;background:linear-gradient(328deg,rgba(79,5,5,1) 0%,rgba(158,90,90,1) 100%);line-height:1.5;font-size:14px;text-transform:uppercase;font-weight:700;text-align:center}.blocsouvenirs p{text-align:justify;font-size:12px}.pseudojoueur{position:relative;width:90%;height:25px;top:20px;left:20px;font-family:'Special Elite',verdana;text-shadow:0 1px 2px #000;font-size:25px;color:#DEDEDE}.blocbas{background-color:rgba(78,5,5,0.15);width:100%;height:65px}.infosjoueur{margin:auto;position:relative;width:90%;height:45px;top:20px;left:20px}.infosjoueur span{font-weight:700}</style>

<div class="blocprez"><div class="blochaut"><img class="IMGprez" src="https://i.servimg.com/u/f51/18/81/56/20/imgpre11.jpg" /><div class="infosprez"><div class="carreprez"><span><!---->NATIONALITE ICI<!----></span><span><!---->AGE ICI<!----></span><span><!---->GENRE ICI<!----></span><span><!---->DATE D'ARRIVEE ICI<!----></span><span><!---->FACTION ICI<!----></span><span><!---->FONCTION ICI<!----></span></div><div class="blocphobie"><span>Phobies et Peurs</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div></div></div><div class="pseudoperso">Prénom&Nom ou Pseudo du personnage</div><div class="blocmilieu"><div class="blocpower"><span>Pouvoir Inutile</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div><div class="blocIB"><span>Infos Bonus</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p></div><div class="blocpsyphy"><div class="blocpsy"><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span><span class="quali">Qualité 1</span><span class="defo">Défaut 1</span></div><div class="bloctaille"><!---->TAILLE ICI<!----></div><div class="blocorpu"><!---->CORPULENCE ICI<!----></div><div class="bloctiff"><!---->CHEVEUX ICI<!----></div><div class="blocSD"><span>Signe Distinctif</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</div></div><div class="blocsouvenirs"><span>Mes Souvenirs</span><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p></div></div><div class="pseudojoueur">Pseudo du joueur</div><div class="blocbas"><div class="infosjoueur">[b]Comment as-tu découvert le forum ?[/b]
[b]Feat sur l'avatar :[/b]</div></div></div>


Revenir en haut

La date/heure actuelle est Mer 8 Mai 2024 - 9:07