Comment créer son profil et devenir un vrai Monstrofluencer

Salut salut mes chériiiis! Ici Vix, votre idole fa-vo-rite. Bienvenue sur ce rapide tuto pour devenir un vrai Monstrofluencer, comme moi!

Vous vous êtes toujours demandé comment garder facilement un historique sur vos aventures? Et comment montrer à tout le monde à quel point vous détestez Kévin Trois-pieds? Ou votre nouveau crush sur le magnifique Chad McMusclehead? Eheh c'est pour ça que je suis lààà!

Tout d'abord, je vais vous montrer un profil correct en prenant l'exemple de celui que j'ai fait pour Le Directeur, vous ne voulez pas voir à quoi ressemble l'ancien, vraiment.






KoalaVolant



Pour ça mes chéris il suffit de suivre ma magnifique masterclasse (sous couvert de payer la modique somme de 150 monstrodollars par heure <3)

Code:

<style> .prayablock {margin:auto; width:700px; height:auto; background-color: #a5a5a5} .profilpraya { float: left; margin-top: -100px; position: relative; margin-left: 31px; border-radius: 50%; border: 3px solid #ffffff; } .barreblanche { background-color: #ffffff; height: 50px; margin-bottom: -21px; } .barrenav_praya { float: right; height: 30px; margin-top: 12px; padding-right: 33px; } .info_praya { background-color: #ffffff; float: left; height: auto; width: 200px; } .publi_praya {background-color:#ffffff; float: left; height:auto; width:478px; } .Idpraya { position: absolute; color: #ffffff; margin-left: 190px; margin-top: -27px; font-size: 20px; font-family: arial; } .Idpost { color: #a4cecc; font-size: 15px; font-family: arial; font-weight: bold; margin-top: 15px; margin-left: 63px; } .date_praya { color: #a5a5a5; margin-left: 62px; font-size: 12px; } .contenant_praya {color: #a5a5a5; font-size: 12px; font-family: arial; margin-top: -30px; float: right; display: flex; } .praya_tiret {padding-left:10px; padding-right:10px; color:#a4cecc;} .citapraya{background-color:transparent; width:200px; margin:auto; text-align:center;} .textcitapraya{color:#191919; font-size:12px; font-family:arial; padding:7px;} .separapraya{margin-left:50px;} .infointro{padding-left:7px;padding-bottom:8px;color:#191919;}    .infointro span{font-size:12px; color:#a5a5a5; padding-right:6px;} .infointro img{margin-right:6px;} .textinfo{padding-bottom:8px; padding-left:6px; float:right; color:#191919;}.etudeinfo{font-size:12px; color:#a5a5a5;float:left; padding-left:6px;} .imgecole{float:left;} .imgpost{border-radius:50%; float:left; padding-right:10px; padding-left:6px; padding-top:5px; width:40px; height:40px;} .fontpublipraya{ background-color:transparent; margin:auto; text-align:center;}.publipraya{color:#191919; font-size:12px; font-family:arial; padding:9px;} .fontjaime{background-color:transparent; float:left; width:200px;} .likepraya{color:#a5a5a5; font-size:14px; font-family:arial; float:left;    padding-left:5px; padding-top:2px;} .imglikepraya{margin-left:7px; margin-bottom:7px; margin-right:5px; float:left;} .nbrcom{color:#a5a5a5; font-size:14px; font-family:arial; float:right; padding-top: 2px; padding-right:7px;} .comentbarre{margin-bottom: 10px;} .fontinfopubli{background-color:transparent; width:700px; height:auto;} .copyright_oceen{background-color:transparent; margin:auto; text-align:center; color:#BDBDBD; font-size:10px; padding:5px;} .blocpublicationP{float:right; background-color:transparent; margin-top:-36px;} .intropad{padding:5px;}
</style>

<!-- le haut de page ne pas toucher --><div class="prayablock"><img src="https://zupimages.net/up/20/06/p4qr.png"/>
<!-- l'url de l'image de couverture --><img src="https://i.pinimg.com/originals/3e/bb/20/3ebb2065900f2188fc14d6a89dac2ecb.jpg" alt="image de couverture" style="width:700px; height: 300px;" /><!-- le nom et prenom --><div class="Idpraya">Le directeur</div>
<!-- l'image de profil --><img src="https://64.media.tumblr.com/f81964007dc452124baeab0247ae679f/802d7054c61fe4d6-dc/s540x810/4a4d32b61ce2d0bdec6b3f52cff212c7c41759c8.jpg" alt="image de profil" class="profilpraya" style="width:136px;height:136px;"/><div class="barreblanche"><div class="barrenav_praya">

<!-- les liens --><div class="contenant_praya"><a href="#">Linkerin</a><div class="praya_tiret">|</div><a href="#">Amis</a><div class="praya_tiret"> |</div><a href="#">Plus ▼</a></div></div></div>

<!-- la colonne introduction --><div class = "info_praya"><img src="https://zupimages.net/up/20/06/o8cy.png" alt="symbole intro" class="intropad"/><div class="citapraya"><!-- le texte d'introduction --><div class="textcitapraya">"Si vous voulez dépasser les limites dans lesquelles la société vous cantonne, il faut vous battre."</div></div>
<div class="separapraya"><img src = "https://zupimages.net/up/20/06/43gq.png"/></div>
<div class="infointro"><img src="https://zupimages.net/up/20/06/cd5z.png"/><!-- le métier --> Directeur au Monster Camp </div><div class="infointro"><img src="https://zupimages.net/up/20/06/5fcz.png"/><!-- le lieu d'habitation --> Monster Camp </div><div class="infointro"> <img src="https://zupimages.net/up/20/06/i96z.png"/><span>A étudié à:</span><!-- l'école où le personnage a étudié --> [̸̟̞͚͍͇̃̒͂̒R̶̼̬̥͔̲͍͔̭͈̘̜̘̀͐̔͊̓̇̀͒̐̎̽͒ḛ̵̦̱͉̤̺̖́̀̽͜ḋ̵̹̏̍̂̊̉͛̀̚ä̶̝͓̯̙͍̖͖́͌͜c̸͚̅́͌̃͛̏t̴̛̠̮̙̪̤̰̙̜̟̃̂́̒͝ę̴̥͇̟̟̘̘̲̗̭̀̆͒͗͐̿̎̅̒́͝ḍ̴͉̘̱͐͑͊͂͋̍͘͝͝͝͝]̶̢̹̘̫̪̓̉͑̿̿̓̓̏̓͝͠͝ </div> <div class="infointro"><img src="https://zupimages.net/up/20/06/gu3q.png"/><!-- Situation -->Célibataire </div></div>

<!-- profil et pseudo publication --><div class="blocpublicationP"><div class="publi_praya"><!-- url image de profil --><img src="https://pbs.twimg.com/media/FBv3bMYVEAg-hCG.png:small" alt="image de profil" class="imgpost"/><!-- nom prénom --><div class="Idpost">Robert Fluffyman</div><!-- date publication --><div class="date_praya">2 Juin, 23:12</div>

<!--publication--><div class="fontpublipraya"><div class="publipraya"> Bienvenue à tous au Monster Camp eheh !   Si vous avez un problème, contactez moi!   </div></div>

<!-- bas de la publication --><img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<div class="fontjaime"><img src = "https://zupimages.net/up/20/06/smvg.png" alt="like" class="imglikepraya"/><!-- nombre de likes --><div class="likepraya">32</div></div><!-- nombre de commentaires --><div class="nbrcom">10 commentaires</div>
<img src="https://zupimages.net/up/20/06/bm14.png" alt="barre séparation"/>
<img src="https://zupimages.net/up/20/06/9fy3.png" alt="barre commenter" class="comentbarre"/></div></div>
<div class="copyright_oceen">@Nasträlya</div></div>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'><link href="https://coderps.xyz/codesrps/cellorp.css" rel="stylesheet" type="text/css" /><style><style>.rpcello h3{background:#BBC2E2 !important; color:#222;} .koala{display:flex; justify-content:center; font-size:8px; letter-spacing:5px; }</style>
<div class="rpcello" style="border-color:#847979;width:700px;background:#fff;"><h3>[size=18]RPs en Cours[/size]</h3>

[size=13]<a href="#">Titre du rp</a> ~ feat Mon partenaire
<a href="#">Titre du rp</a> ~ feat Mon partenaire
<a href="#">Titre du rp</a> ~ feat Mon partenaire[/size]

<h3>[size=18]RPs Finis[/size]</h3>

[size=13]<a href="#">Titre du rp</a> ~ feat Mon partenaire
<a href="#">Titre du rp</a> ~ feat Mon partenaire
<a href="#">Titre du rp</a> ~ feat Mon partenaire[/size]

<h3>[size=18]RPs Prévus[/size]</h3>

[size=13]<a href="#">Titre du rp</a> ~ feat Mon partenaire
<a href="#">Titre du rp</a> ~ feat Mon partenaire
<a href="#">Titre du rp</a> ~ feat Mon partenaire[/size]
</div><a href="https://pisrale.forumactif.com/" class="koala">KoalaVolant</a>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'><style type="text/css">.contour{width: 500px;margin: auto;} .un_coeur{display: inline-block; verical-align: bottom; position: relative; width: 200px; height: 190px; margin: 20px;} .un_coeur:before{content:""; position: absolute; top: 0px; left: 65px; width: 100px; height: 190px; background-color:#7fc9c1; border-radius: 100px 100px 0 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);} .un_coeur:after{content:""; position: absolute; top: 0px; left: 0px; width: 100px; height: 190px; background-color:#7fc9c1; border-radius: 100px 100px 0 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}.une_croix{display: inline-block; verical-align: bottom; position: relative; width: 200px; height: 190px;} .une_croix:before{content:""; position: absolute; top: 0px; left: 80px; width: 50px; height: 190px; background-color:#444444; -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: 50% 50%;} .une_croix:after{content:""; position: absolute; top: 0px; left: 80px; width: 50px; height: 190px; background-color: #444444; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); transform-origin: 50% 50%;}.img_perso{position: absolute; z-index: 3; top: 65px; left: 45px;width: 75px; height:75px; border-radius:50%; background-size: auto 75px;} .pseudo_fiche{position: absolute; z-index: 4; width: 200px; top: 95px; left: -20px; text-align: center; font-family: 'Amatic SC'; font-size: 30pt; color: white; text-shadow: 1px 1px 1px black;} .img_perso_croix{position: absolute; z-index: 3; top: 60px; left: 65px;width: 75px; height:75px; border-radius:50%; background-size: auto 75px;} .pseudo_fiche_croix{position: absolute; z-index: 4; width: 200px; top: 95px; left: 0px; text-align: center; font-family: 'Amatic SC'; font-size: 30pt; color: white; text-shadow: 1px 1px 1px black;} .un_coeur .infobulle{position: absolute; z-index: 5; top: 100px; left: 130px; width: 200px; height: 155px; border: 1px solid #7fc9c1; background-color: white; border-radius: 30px; overflow: hidden; opacity: 0; visibility: hidden; transition: all ease 1s;} .un_coeur:hover .infobulle{opacity: 1; visibility: visible; transition: all ease 1s;} .infobulle h3{border-width: 0px; background: none; margin: 5px; margin-top: 10px; width: 100%; text-align: center; font-family:'Amatic SC'; color: grey; font-size: 20pt;} .infobulle p{margin: 0px; width: 100%; height: 100px; margin: auto; margin-top: -20px; padding: 10px; font-size: 8pt; overflow: auto; text-align: justify;} .une_croix .infobulle{position: absolute; z-index: 5; top: 100px; left: 130px; width: 200px; height: 155px; border: 1px solid #444444; background-color: white; border-radius: 30px; overflow: hidden; opacity: 0; visibility: hidden; transition: all ease 1s;} .une_croix:hover .infobulle{opacity: 1; visibility: visible; transition: all ease 1s;} .nyo_a_fait{display: block; width: 100%; text-decoration: none !important; text-align: center; text-shadow: 1px 1px 1px grey;}</style>
<div class="rpcello" style="border-color:#847979;width:700px;background:#fff;">
<div class="contour"><div class="un_coeur"><div class="pseudo_fiche">Prénom Nom</div><div class="img_perso" style="background-image:url('https://64.media.tumblr.com/54be0951e80ed3f590c3342a236c47eb/1d0f4116795e37c1-00/s400x600/53e844ae7f8ca48ae2a899dd8c420ce4416d7890.png'); background-position: center center;"></div><div class="infobulle"><h3>Type de Lien</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet ligula enim, et blandit diam semper nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum dapibus eros, lobortis posuere purus tincidunt interdum. Aenean dui arcu, cursus ac urna a, interdum pulvinar risus. Aenean rhoncus ornare varius. In hac habitasse platea dictumst. Donec eu nisl laoreet, commodo enim id, volutpat leo. Mauris odio mauris, commodo sit amet sapien ac, fermentum faucibus arcu. Nunc gravida lorem eu tortor eleifend, at pulvinar lectus fringilla. </p></div></div><!--

--><div class="un_coeur"><div class="pseudo_fiche">Prénom Nom</div><div class="img_perso" style="background-image:url('https://64.media.tumblr.com/54be0951e80ed3f590c3342a236c47eb/1d0f4116795e37c1-00/s400x600/53e844ae7f8ca48ae2a899dd8c420ce4416d7890.png'); background-position: center center;"></div><div class="infobulle"><h3>Type de Lien</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet ligula enim, et blandit diam semper nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum dapibus eros, lobortis posuere purus tincidunt interdum. Aenean dui arcu, cursus ac urna a, interdum pulvinar risus. Aenean rhoncus ornare varius. In hac habitasse platea dictumst. Donec eu nisl laoreet, commodo enim id, volutpat leo. Mauris odio mauris, commodo sit amet sapien ac, fermentum faucibus arcu. Nunc gravida lorem eu tortor eleifend, at pulvinar lectus fringilla. </p></div></div><!--

--><div class="un_coeur"><div class="pseudo_fiche">Prénom Nom</div><div class="img_perso" style="background-image:url('https://64.media.tumblr.com/54be0951e80ed3f590c3342a236c47eb/1d0f4116795e37c1-00/s400x600/53e844ae7f8ca48ae2a899dd8c420ce4416d7890.png'); background-position: center center;"></div><div class="infobulle"><h3>Type de Lien</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet ligula enim, et blandit diam semper nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum dapibus eros, lobortis posuere purus tincidunt interdum. Aenean dui arcu, cursus ac urna a, interdum pulvinar risus. Aenean rhoncus ornare varius. In hac habitasse platea dictumst. Donec eu nisl laoreet, commodo enim id, volutpat leo. Mauris odio mauris, commodo sit amet sapien ac, fermentum faucibus arcu. Nunc gravida lorem eu tortor eleifend, at pulvinar lectus fringilla. </p></div></div><!--

--><div class="un_coeur"><div class="pseudo_fiche">Prénom Nom</div><div class="img_perso" style="background-image:url('https://64.media.tumblr.com/54be0951e80ed3f590c3342a236c47eb/1d0f4116795e37c1-00/s400x600/53e844ae7f8ca48ae2a899dd8c420ce4416d7890.png'); background-position: center center;"></div><div class="infobulle"><h3>Type de Lien</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet ligula enim, et blandit diam semper nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum dapibus eros, lobortis posuere purus tincidunt interdum. Aenean dui arcu, cursus ac urna a, interdum pulvinar risus. Aenean rhoncus ornare varius. In hac habitasse platea dictumst. Donec eu nisl laoreet, commodo enim id, volutpat leo. Mauris odio mauris, commodo sit amet sapien ac, fermentum faucibus arcu. Nunc gravida lorem eu tortor eleifend, at pulvinar lectus fringilla. </p></div></div></div>

<div class="contour"><div class="une_croix" style="margin-right:40px;"><div class="pseudo_fiche_croix">Prénom Nom</div><div class="img_perso_croix" style="background-image:url('https://64.media.tumblr.com/00e5929e634d57f0b8a0f420508ba383/df8422f354255d9f-a8/s1280x1920/6d3f38351a38bb298f2ef3c2b5a42c5c9a89c897.jpg'); background-position: center center;"></div><div class="infobulle"><h3>Type de Lien</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet ligula enim, et blandit diam semper nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum dapibus eros, lobortis posuere purus tincidunt interdum. Aenean dui arcu, cursus ac urna a, interdum pulvinar risus. Aenean rhoncus ornare varius. In hac habitasse platea dictumst. Donec eu nisl laoreet, commodo enim id, volutpat leo. Mauris odio mauris, commodo sit amet sapien ac, fermentum faucibus arcu. Nunc gravida lorem eu tortor eleifend, at pulvinar lectus fringilla. </p></div></div><!--

--><div class="une_croix"><div class="pseudo_fiche_croix">Prénom Nom</div><div class="img_perso_croix" style="background-image:url('https://64.media.tumblr.com/00e5929e634d57f0b8a0f420508ba383/df8422f354255d9f-a8/s1280x1920/6d3f38351a38bb298f2ef3c2b5a42c5c9a89c897.jpg'); background-position: center center;"></div><div class="infobulle"><h3>Type de Lien</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet ligula enim, et blandit diam semper nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum dapibus eros, lobortis posuere purus tincidunt interdum. Aenean dui arcu, cursus ac urna a, interdum pulvinar risus. Aenean rhoncus ornare varius. In hac habitasse platea dictumst. Donec eu nisl laoreet, commodo enim id, volutpat leo. Mauris odio mauris, commodo sit amet sapien ac, fermentum faucibus arcu. Nunc gravida lorem eu tortor eleifend, at pulvinar lectus fringilla. </p></div></div><!--

--><div class="une_croix" style="margin-right:40px;"><div class="pseudo_fiche_croix">Prénom Nom</div><div class="img_perso_croix" style="background-image:url('https://64.media.tumblr.com/00e5929e634d57f0b8a0f420508ba383/df8422f354255d9f-a8/s1280x1920/6d3f38351a38bb298f2ef3c2b5a42c5c9a89c897.jpg'); background-position: center center;"></div><div class="infobulle"><h3>Type de Lien</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet ligula enim, et blandit diam semper nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum dapibus eros, lobortis posuere purus tincidunt interdum. Aenean dui arcu, cursus ac urna a, interdum pulvinar risus. Aenean rhoncus ornare varius. In hac habitasse platea dictumst. Donec eu nisl laoreet, commodo enim id, volutpat leo. Mauris odio mauris, commodo sit amet sapien ac, fermentum faucibus arcu. Nunc gravida lorem eu tortor eleifend, at pulvinar lectus fringilla. </p></div></div><!--

--><div class="une_croix"><div class="pseudo_fiche_croix">Prénom Nom</div><div class="img_perso_croix" style="background-image:url('https://64.media.tumblr.com/00e5929e634d57f0b8a0f420508ba383/df8422f354255d9f-a8/s1280x1920/6d3f38351a38bb298f2ef3c2b5a42c5c9a89c897.jpg'); background-position: center center;"></div><div class="infobulle"><h3>Type de Lien</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet ligula enim, et blandit diam semper nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed interdum dapibus eros, lobortis posuere purus tincidunt interdum. Aenean dui arcu, cursus ac urna a, interdum pulvinar risus. Aenean rhoncus ornare varius. In hac habitasse platea dictumst. Donec eu nisl laoreet, commodo enim id, volutpat leo. Mauris odio mauris, commodo sit amet sapien ac, fermentum faucibus arcu. Nunc gravida lorem eu tortor eleifend, at pulvinar lectus fringilla. </p></div></div></div>
<a href="http://www.never-utopia.com" class="koala">(c) NyoTheneko // Never Utopia</a></div>