avatar
Sexe : Masculin
Date d'inscription : 03/03/2015
Messages : 5465
Modo / Anim' - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://moesaadis.forumactif.com
# VOTE - COTM Codage n°7le Sam 12 Mai 2018 - 8:34
Concours de Code numéro 7

Et voilà tous les codes sont là !  

C'est la première fois que j'ai eu des participations aussi tardive ! C'est pas bien de faire ses devoir au dernier moment :p mais ça va je vous pardonne car le résultat est là !  

Je rappelle que les votes ne se font plus avec un sondage mais avec des critères définis qui sont les suivants :

Code:
[b]Esthétique du rendu : /5[/b]
[b]Originalité du code : /5[/b]
[b]Propreté du code : /5[/b]

[b]Un petit commentaire :[/b]

Je vous rappelle aussi ce que le profil devait contenir :
  • Avatar

  • Pseudo

  • Rang

  • Dernière visite

  • contact

  • En ligne/Hors ligne

  • sujet et message posté par le membre

  • nombre de MP

  • sexe

  • inscription

  • Info du profil

  • Fonction administrative (Profil et bannir le membre)


Voici donc sans plus attendre le lien pour aller observer le rendu :
http://nishikitestcode.kanak.fr/h5-concours-de-code-n7

Epicodement,
Vos Animateur ~



Cadeau
Colibris :

Joy :

Izusa :


Aed :

Suki :

Eskimo. :


Harleen :

muguet doré
avatar
Sexe : Masculin
Date d'inscription : 03/03/2015
Messages : 5465
Modo / Anim' - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://moesaadis.forumactif.com
# Re: VOTE - COTM Codage n°7le Sam 12 Mai 2018 - 8:34
Et les codes qui sont dans l'ordre bien sur :

Code 1:

Code:
<link href="https://fonts.googleapis.com/css?family=Anton|Cormorant+Garamond|Roboto+Mono" rel="stylesheet"/>
<div class="content_profileviewbody">
 <h1> Compte Fondateur</h1>
 <img src="https://redcdn.net/hpimg15/pics/415369EpicodeAvatarFonda.png" class="avatar_member" alt="avatar200400"/>
 <div class="options_administration">
 Profil
 <br/>
 Bannir le membre
 </div>
 <div class="contact_icons">
 <img src="https://zupimages.net/up/18/17/rbpw.png" alt="iconcontact"/>
 <img src="https://zupimages.net/up/18/17/mgos.png" alt="iconcontact"/>
 <img src="https://zupimages.net/up/18/17/4ey4.png" alt="iconcontact"/>
 <img src="https://zupimages.net/up/18/17/ooqk.png" alt="iconcontact"/>
 </div>
 <div class="infos_block_right">
 <h2>♕ Fondatrice </h2>
 <span>Sujets</span>
 <span>Messages</span>
 <span>En ligne</span>
 <span>dernière visite : hier à 22:02</span>
 <div class="informations_profile">
 <ul>
 <li>Sexe : Féminin</li>
 <li>Date d'inscription : 08/01/2012</li>
 <li>Messages : 9718</li>
 <li>PointsCodes : 14169</li>
 <li>Date de naissance : 17/02/1991</li>
 <li>Localisation : la Vallée des Enfants </li>
 <li>Emploi/loisirs : Écrivaine</li>
 <li>Humeur : Amoureuse</li>
 <li>Niveau de Codage : Intermédiaire</li>
 <li>Niveau de Graphisme : Intermédiaire</li>
 <li>Crédit Avatar : DeviantArt</li>
 <li>Crédit Signature : //</li>
 </ul>
 </div>
 </div>
</div>

Code 2:

Code:
<html>
  
  <head>
    <title>Concours de code n°7 - Profil</title>
    <link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet" />
    <meta charset="utf-8" />
    <style>
      body{
        background-color:#d7e1d7;
        margin:0;
        font-size:12px;
        font-family:calibri;
        line-height:16px;
        color:#91755f;
      }
      #main_profil *{
        box-sizing:border-box;
      }
      #main_profil a{
        text-decoration:none;
        color:#ce6954;
        -webkit-transition:200ms;
        transition:200ms;
      }
      #main_profil a:hover{
        color:#a26627;
      }
      #main_profil{
        width:800px;
        margin:0 auto;
        padding:0 15px;
        background-color:#ccb8a8;
      }
      #profil{
        display:flex;
        flex-wrap:wrap;
        border-left:4px double #eef1e9;
        border-right:4px double #eef1e9;
        padding:15px;
      }
      #profil > h1{
        margin:0;
        padding:15px;
        width:100%;
        background-color:#ded8d2;
        text-align:center;
        letter-spacing:5px;
        font-family:'Gloria Hallelujah';
        font-style:italic;
        font-size:25px;
        color:#ab9584;
      }
      #profil > h1:first-letter{
        font-weight:bold;
        text-shadow:1px 1px 0px #eef1e9;
        color:#d47f6d;
      }
      #contact{
        margin:15px -15px;
        padding:5px;
        width:800px;
        height:35px;
        background-color:#a9a193;
        text-align:center;
        font-size:0;
      }
      #contact img{
        display:inline-block;
        margin:0 7px;
        border-radius:3px;
        opacity:0.8;
        -webkit-transition:200ms;
        transition:200ms;
      }
      #contact img:hover{
        opacity:1;
      }
      #avatar{
        position:relative;
        width:200px;
        height:400px;
        overflow:hidden;
      }
      #avatar img{
        -webkit-filter:brightness(1);
        filter:brightness(1);
        -webkit-transition:500ms;
        transition:500ms;
      }
      #avatar:hover img{
        -webkit-filter:brightness(0.85);
        filter:brightness(0.85);
      }
      #avatar:hover #credit_avatar{
        -webkit-transform:translateY(0px);
        transform:translateY(0px);
      }
      #credit_avatar{
        position:absolute;
        z-index:1;
        left:0;
        bottom:50px;
        padding:7px;
        width:100%;
        background-color:#eef1e9;
        text-align:center;
        letter-spacing:1.5px;
        -webkit-transform:translateY(100px);
        transform:translateY(100px);
        -webkit-transition:500ms;
        transition:500ms;
      }
      #credit_avatar:before{
        content:'';
        position:absolute;
        left:0;
        bottom:33px;
        width:200px;
        border-top:1px solid #eef1e9;
      }
      #credit_avatar:after{
        content:'';
        position:absolute;
        left:0;
        bottom:-4px;
        width:200px;
        border-top:1px solid #eef1e9;
      }
      #corps_profil{
        display:flex;
        flex-wrap:wrap;
        margin:30px 15px 0 0;
        width:547px;
      }
      #haut_profil_gauche{
        width:150px;
        height:137px;
      }
      .infos_compte{
        margin-bottom:15px;
        padding:3px 9px;
        background-color:#eef1e9;
        text-transform:uppercase;
        letter-spacing:2.5px;
        font-size:11px;
      }
      #haut_profil_droite{
        margin-left:30px;
        width:367px;
        height:137px;
      }
      #rang_messages{
        font-size:25px;
        text-align:center;
        font-style:italic;
        font-family:'Gloria Hallelujah';
      }
      #rang_messages:first-letter{
        font-weight:bold;
        text-shadow:1px 1px 0px #eef1e9;
        color:#ce6954;
      }
      #image_rang{
        position:relative;
        margin-top:15px;
        width:100%;
        height:102px;
        border:7px double #eef1e9;
        overflow:hidden;
      }
      #image_rang > img{
        position:absolute;
        top:-50px;
        left:0;
        width:100%;
        -webkit-filter:brightness(1);
        filter:brightness(1);
        -webkit-transition:500ms;
        transition:500ms;
      }
      #image_rang > img:hover{
        -webkit-filter:brightness(0.85);
        filter:brightness(0.85);
      }
      #bas_profil{
        margin:30px 0 0 30px;
        padding:15px;
        width:100%;
        height:203px;
        background-color:#dcd5cf;
      }
      #bas_profil > div{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:flex-start;
        padding:0 10px 10px 0;
        height:173px;
        border:4px double #eef1e9;
        overflow:auto;
      }
      .infos_profil{
        margin:10px 0 0 10px;
        padding:5px;
        width:215px;
        height:26px;
        background-color:#eef1e9;
        letter-spacing:1.5px;
      }
      .infos_profil:first-letter{
        color:#ce6954;
      }
      </style>
  </head>
  
  <body>
    
    <div id="main_profil">

      <div id="profil">

        <h1>Compte Fondateur</h1>

        <div id="contact">
          <a href="http://www.epicode-entraide.com/privmsg?mode=post&u=1"><img src="https://illiweb.com/fa/modernbb/icon_contact_pm.png" alt="Envoyer un message privé" /></a>
          <a href="http://www.epicode-entraide.com/profile?mode=email&u=1"><img src="https://illiweb.com/fa/modernbb/icon_contact_email.png" alt="Envoyer l'email" /></a>
          <a href="http://charlotte-mortange.wix.com/cavaliersnocturnes"><img src="https://illiweb.com/fa/modernbb/icon_contact_www.png" alt="Visiter le site web du posteur" /></a>
          <a href="https://twitter.com/Madouce_"><img src="https://illiweb.com/fa/modernbb/icon_contact_twitter.png" alt="Twitter" /></a>
        </div>

        <div id="avatar">
          <div id="credit_avatar"><b>Crédit avatar :</b> Bidule</div>
          <img src="https://redcdn.net/hpimg15/pics/415369EpicodeAvatarFonda.png" alt="Avatar du Compte Fondateur" />
        </div>

        <div id="corps_profil">

          <div id="haut_profil_gauche">
            <div class="infos_compte">En ligne</div>
            <div class="infos_compte">Hier à 11:49</div>
            <div class="infos_compte">
              <a href="http://www.epicode-entraide.com/sta/Compte%20Fondateur">Sujets</a>
            </div>
            <div class="infos_compte">
              <a href="http://www.epicode-entraide.com/spa/Compte%20Fondateur">Messages</a>
            </div>
          </div>

          <div id="haut_profil_droite">
            <div id="rang_messages">Fondatrice - 9718 Messages</div>
            <div id="image_rang"><img src="https://www.zupimages.net/up/18/19/dcd8.png" alt="Image du rang" /></div>
          </div>

          <div id="bas_profil">
            <div>
              <div class="infos_profil"><b>Date d'inscription :</b> 08/01/2012</div>
              <div class="infos_profil"><b>PointsCodes :</b> 14169</div>
              <div class="infos_profil"><b>Date de naissance :</b> 17/02/1991</div>
              <div class="infos_profil"><b>Emploi/loisirs :</b> Écrivaine</div>
              <div class="infos_profil"><b>Humeur :</b> Amoureuse</div>
              <div class="infos_profil"><b>Titre :</b> Texte</div>
              <div class="infos_profil"><b>Titre :</b> Texte</div>
              <div class="infos_profil"><b>Titre :</b> Texte</div>
              <div class="infos_profil"><b>Titre :</b> Texte</div>
              <div class="infos_profil"><b>Titre :</b> Texte</div>
            </div>
          </div>

        </div>

      </div>

    </div>
          
  </body>
  
</html>

Code 3:

Code:
<!DOCTYPE HTML>
<html>

<head>
 <meta charset="utf-8" />
 <title> Concours n°07 </title>
 <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
 <style type="text/css">
 .temp_profil {
 max-width: 800px;
 max-height: 500px;
 margin: auto;
 background: #84c3f9 -webkit-gradient(linear, left top, left bottom, from(rgba(152, 232, 244, 1)), to(rgba(152, 232, 244, 0)));
 background: #84c3f9 linear-gradient(rgba(152, 232, 244, 1), rgba(152, 232, 244, 0));
 font-family: "Arial Narrow", sans-serif;
 text-align: center;
 font-size: 14px;
 }

 .temp_profil a {
 text-decoration: none;
 }

 .temp_profil ::-webkit-scrollbar {
 width: 3px;
 background-color: white;
 }

 .temp_profil ::-webkit-scrollbar-thumb {
 background-color: #84c3f9;
 }

 .temp_profil header,
 .info li::first-letter {
 font-family: "Dancing Script", cursive;
 }

 .temp_profil header,
 .rank {
 color: #2b9c8d;
 }

 .temp_profil header {
 background-image: url("https://nsa39.casimages.com/img/2018/05/02/180502090159100826.png");
 font-size: 40px;
 text-shadow: 1px 1px 1px white;
 }

 .avatar {
 width: 110px;
 height: 110px;
 border: 5px solid white;
 overflow: hidden;
 border-radius: 100%;
 }

 .avatar img {
 width: 100%;
 position: relative;
 bottom: 80px;
 }

 .avatar:hover {
 z-index: 1;
 -webkit-transform: rotate(720deg);
 transform: rotate(720deg);
 }

 .avatar:hover img {
 -webkit-transform: scale(1.5);
 transform: scale(1.5);
 }

 .avatar,
 .avatar img,
 .avatar:hover,
 .avatar:hover img {
 -webkit-transition: 800ms all;
 transition: 800ms all;
 }

 .on_off_sexe {
 font-size: 12px;
 }

 .on_off_sexe,
 .info li::first-letter {
 color: #1485e5;
 }

 .rank span {
 border: 2px solid #2b9c8d;
 font-variant: small-caps;
 font-size: 30px;
 padding: 2px 15px;
 }

 .rank span,
 .links span:hover {
 background: aliceblue;
 }

 .boutons img {
 margin: 3%;
 }

 .last span {
 background: white;
 padding: 3px;
 }

 .links,
 .links a {
 color: aliceblue;
 }

 .links span {
 background: #2c353b;
 padding: 5px;
 }

 .links span:hover,
 .links span:hover a,
 .info,
 .temp_profil footer a {
 color: #2c353b;
 }

 .info {
 background: #c0e2fe;
 text-align: justify;
 text-transform: capitalize;
 margin: 0 30px;
 padding: 5px;
 }

 .info li::first-letter {
 font-size: 1.2em;
 }

 .info li {
 padding: 8px;
 margin: 0 10px;
 border-bottom: 1px solid #84c3f9;
 width: 40%;
 }

 .info ul {
 margin: 0;
 list-style: url("https://nsm09.casimages.com/img/2018/05/11//18051101373412811115707858.png");
 height: 190px;
 overflow: auto;
 }

 .info li:nth-child(odd) {
 float: left;
 }

 .info li:nth-child(even) {
 margin-left: 50%;
 }

 .temp_profil footer {
 border-bottom: 1px solid #2c353b;
 margin: 0 auto 5px;
 }

 .temp_profil footer a {
 padding: 5px;
 }

 .temp_profil {
 display: grid;
 grid-template: 100px repeat(5, 1fr) / repeat(3, 1fr);
 grid-gap: 1rem;
 }

 .temp_profil header {
 grid-column: 1/-1;
 }

 .avatar {
 grid-area: 2/2/4/3;
 position: relative;
 bottom: 65px;
 margin: auto;
 }

 .temp_profil footer {
 grid-area: 6/1/7/-1;
 }

 .info {
 grid-area: 5/1/6/-1;
 }

 .links {
 grid-area: 4/3/5/4;
 }

 .last {
 grid-area: 3/1/4/2;
 }

 .boutons {
 grid-area: 2/1/3/2;
 }

 .rank {
 position: relative;
 bottom: 35px;
 }

 .on_off_sexe {
 grid-area: 3/2/4/3;
 }
 </style>
</head>

<body>

 <section class="temp_profil">
 <header>Compte Fondateur</header>
 <div class="avatar"><img src="https://redcdn.net/hpimg15/pics/415369EpicodeAvatarFonda.png" alt="avatar du membre"></div>
 <div class="on_off_sexe">online <br><img src="https://nsa39.casimages.com/img/2018/05/02/180502090158603419.png" alt="femme"></div>
 <div class="rank"><span>Fondatrice</span></div>
 <div class="boutons">
 <a href="#"><img src="https://illiweb.com/fa/modernbb/icon_contact_pm.png" alt="MP"></a>
 <a href="#"><img src="https://illiweb.com/fa/modernbb/icon_contact_email.png" alt="email"></a>
 <a href="#"><img src="https://illiweb.com/fa/modernbb/icon_contact_www.png" alt="site web"></a>
 <a href="#"><img src="https://illiweb.com/fa/modernbb/icon_contact_twitter.png" alt="twitter"></a>
 </div>
 <div class="last"><span>Dernière visite : Aujourd'hui</span></div>
 <div class="links">
 <span>100 MPs</span>
 <span><a href="http://www.epicode-entraide.com/sta/Compte%20Fondateur">Sujets</a></span>
 <span><a href="http://www.epicode-entraide.com/spa/Compte%20Fondateur">Messages</a></span>
 </div>
 <div class="info">
 <ul>
 <li>Date d'inscription : 08/01/2012</li>
 <li>Messages : 9718</li>
 <li>PointsCodes : 14169</li>
 <li>Date de naissance : 17/02/1991</li>
 <li>Localisation : la Vallée des Enfants Perdus</li>
 <li>Emploi/loisirs : Écrivaine</li>
 <li>Humeur : Amoureuse</li>
 <li>Niveau de Codage : Intermédiaire</li>
 <li>Niveau de Graphisme : Intermédiaire</li>
 <li>Crédit Avatar : DeviantArt</li>
 <li>Crédit Signature : //</li>
 </ul>
 </div>
 <footer><a href="http://www.epicode-entraide.com/u1">Profil</a> | <a href="http://www.epicode-entraide.com/u1">Bannir ce membre</a></footer>
 </section>

</body>

</html>

Code 4:

Code:
<!DOCTYPE html>
<html>
<head>
   <title>Epicode</title>
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<section id="profil">
   <h1 class="hidden-visually">Profil</h1>

   <figure><img id="profil__avatar" class="hidden-visually" src="https://redcdn.net/hpimg15/pics/415369EpicodeAvatarFonda.png" alt="Avatar" /></figure>
   <span id="profil__pseudo" class="hidden-visually">Compte Fondateur</span>
   <span id="profil__rank" class="hidden-visually">Fondatrice</span>
   <span id="profil__online" class="hidden-visually">En ligne</span>



   <section id="profil__contact">
      <button class="profil__btn" title="Contact">
         <svg class="icon icon--contact" viewBox="0 0 455 455">
            <g>
               <path d="M455,297.5c0-86.985-70.515-157.5-157.5-157.5S140,210.515,140,297.5c0,86.984,70.515,157.5,157.5,157.5  c32.92,0,63.476-10.106,88.749-27.376l62.063,20.687l-20.688-62.062C444.894,360.977,455,330.42,455,297.5z" fill="#FFFFFF"/>
               <path d="M164.917,164.917c17.21-17.21,37.259-30.725,59.59-40.171C247.642,114.962,272.201,110,297.5,110  c3.443,0,6.87,0.1,10.283,0.284C287.723,46.369,228.033,0,157.5,0C70.515,0,0,70.515,0,157.5c0,32.92,10.106,63.476,27.376,88.749  L6.689,308.311l62.063-20.687c12.641,8.638,26.612,15.466,41.532,20.149C110.1,304.363,110,300.939,110,297.5  c0-25.299,4.962-49.858,14.747-72.993C134.192,202.176,147.707,182.127,164.917,164.917z" fill="#FFFFFF"/>
            </g>
         </svg>
      </button>

      <div class="profil__block__wrapper profil__block__wrapper--contact">
         <h2 class="profil__block__title">Contact</h2>
         <p>
            <a href="#"><img src="https://illiweb.com/fa/modernbb/icon_contact_pm.png" id="i_icon_pm" alt="Envoyer un message privé" title="Envoyer un message privé"></a> <a href="#"><img src="https://illiweb.com/fa/modernbb/icon_contact_email.png" id="i_icon_email" alt="Envoyer l'e-mail" title="Envoyer l'e-mail"></a> <a href="#" title="Visiter le site web du posteur" target="_blank"><img src="https://illiweb.com/fa/modernbb/icon_contact_www.png" alt="http://charlotte-mortange.wix.com/cavaliersnocturnes"></a> <a href="#" title="https://twitter.com/Madouce_" target="_blank"><img src="https://illiweb.com/fa/modernbb/icon_contact_twitter.png" alt="https://twitter.com/Madouce_"></a>
         </p>
      </div>
   </section>

   <section id="profil__admin">
      <button class="profil__btn" title="Administrer">
         <svg class="icon icon--admin" viewBox="0 0 478.703 478.703">
            <g>
               <path d="M454.2,189.101l-33.6-5.7c-3.5-11.3-8-22.2-13.5-32.6l19.8-27.7c8.4-11.8,7.1-27.9-3.2-38.1l-29.8-29.8    c-5.6-5.6-13-8.7-20.9-8.7c-6.2,0-12.1,1.9-17.1,5.5l-27.8,19.8c-10.8-5.7-22.1-10.4-33.8-13.9l-5.6-33.2    c-2.4-14.3-14.7-24.7-29.2-24.7h-42.1c-14.5,0-26.8,10.4-29.2,24.7l-5.8,34c-11.2,3.5-22.1,8.1-32.5,13.7l-27.5-19.8    c-5-3.6-11-5.5-17.2-5.5c-7.9,0-15.4,3.1-20.9,8.7l-29.9,29.8c-10.2,10.2-11.6,26.3-3.2,38.1l20,28.1    c-5.5,10.5-9.9,21.4-13.3,32.7l-33.2,5.6c-14.3,2.4-24.7,14.7-24.7,29.2v42.1c0,14.5,10.4,26.8,24.7,29.2l34,5.8    c3.5,11.2,8.1,22.1,13.7,32.5l-19.7,27.4c-8.4,11.8-7.1,27.9,3.2,38.1l29.8,29.8c5.6,5.6,13,8.7,20.9,8.7c6.2,0,12.1-1.9,17.1-5.5    l28.1-20c10.1,5.3,20.7,9.6,31.6,13l5.6,33.6c2.4,14.3,14.7,24.7,29.2,24.7h42.2c14.5,0,26.8-10.4,29.2-24.7l5.7-33.6    c11.3-3.5,22.2-8,32.6-13.5l27.7,19.8c5,3.6,11,5.5,17.2,5.5l0,0c7.9,0,15.3-3.1,20.9-8.7l29.8-29.8c10.2-10.2,11.6-26.3,3.2-38.1    l-19.8-27.8c5.5-10.5,10.1-21.4,13.5-32.6l33.6-5.6c14.3-2.4,24.7-14.7,24.7-29.2v-42.1    C478.9,203.801,468.5,191.501,454.2,189.101z M451.9,260.401c0,1.3-0.9,2.4-2.2,2.6l-42,7c-5.3,0.9-9.5,4.8-10.8,9.9    c-3.8,14.7-9.6,28.8-17.4,41.9c-2.7,4.6-2.5,10.3,0.6,14.7l24.7,34.8c0.7,1,0.6,2.5-0.3,3.4l-29.8,29.8c-0.7,0.7-1.4,0.8-1.9,0.8    c-0.6,0-1.1-0.2-1.5-0.5l-34.7-24.7c-4.3-3.1-10.1-3.3-14.7-0.6c-13.1,7.8-27.2,13.6-41.9,17.4c-5.2,1.3-9.1,5.6-9.9,10.8l-7.1,42    c-0.2,1.3-1.3,2.2-2.6,2.2h-42.1c-1.3,0-2.4-0.9-2.6-2.2l-7-42c-0.9-5.3-4.8-9.5-9.9-10.8c-14.3-3.7-28.1-9.4-41-16.8    c-2.1-1.2-4.5-1.8-6.8-1.8c-2.7,0-5.5,0.8-7.8,2.5l-35,24.9c-0.5,0.3-1,0.5-1.5,0.5c-0.4,0-1.2-0.1-1.9-0.8l-29.8-29.8    c-0.9-0.9-1-2.3-0.3-3.4l24.6-34.5c3.1-4.4,3.3-10.2,0.6-14.8c-7.8-13-13.8-27.1-17.6-41.8c-1.4-5.1-5.6-9-10.8-9.9l-42.3-7.2    c-1.3-0.2-2.2-1.3-2.2-2.6v-42.1c0-1.3,0.9-2.4,2.2-2.6l41.7-7c5.3-0.9,9.6-4.8,10.9-10c3.7-14.7,9.4-28.9,17.1-42    c2.7-4.6,2.4-10.3-0.7-14.6l-24.9-35c-0.7-1-0.6-2.5,0.3-3.4l29.8-29.8c0.7-0.7,1.4-0.8,1.9-0.8c0.6,0,1.1,0.2,1.5,0.5l34.5,24.6    c4.4,3.1,10.2,3.3,14.8,0.6c13-7.8,27.1-13.8,41.8-17.6c5.1-1.4,9-5.6,9.9-10.8l7.2-42.3c0.2-1.3,1.3-2.2,2.6-2.2h42.1    c1.3,0,2.4,0.9,2.6,2.2l7,41.7c0.9,5.3,4.8,9.6,10,10.9c15.1,3.8,29.5,9.7,42.9,17.6c4.6,2.7,10.3,2.5,14.7-0.6l34.5-24.8    c0.5-0.3,1-0.5,1.5-0.5c0.4,0,1.2,0.1,1.9,0.8l29.8,29.8c0.9,0.9,1,2.3,0.3,3.4l-24.7,34.7c-3.1,4.3-3.3,10.1-0.6,14.7    c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z" fill="#FFFFFF"/>
               <path d="M239.4,136.001c-57,0-103.3,46.3-103.3,103.3s46.3,103.3,103.3,103.3s103.3-46.3,103.3-103.3S296.4,136.001,239.4,136.001    z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z" fill="#FFFFFF"/>
            </g>
         </svg>
      </button>

      <div class="profil__block__wrapper profil__block__wrapper--admin">
         <h2 class="profil__block__title">Administrer</h2>
         <ul>
            <li><a href="#">Profil</a></li>
            <li><a href="#">Bannir</a></li>
         </ul>
      </div>
   </section>

   <section id="profil__stats">
      <button class="profil__btn" title="Statistiques">
         <svg class="icon icon--stats" viewBox="0 0 31.939 31.939">
            <g>
               <path d="M15.58,18.332h-0.777c-0.403,0-0.73-0.326-0.73-0.729c0-0.149,0.06-0.293,0.167-0.397c0.452-0.439,0.832-1.03,1.107-1.667    c0.056,0.041,0.116,0.071,0.184,0.071c0.436,0,0.95-0.964,0.95-1.621c0-0.657-0.061-1.19-0.498-1.19    c-0.052,0-0.106,0.009-0.162,0.023c-0.031-1.782-0.481-4.005-3.202-4.005c-2.839,0-3.17,2.219-3.202,3.999    c-0.04-0.008-0.08-0.017-0.117-0.017c-0.437,0-0.497,0.533-0.497,1.19c0,0.657,0.512,1.621,0.949,1.621    c0.054,0,0.104-0.015,0.151-0.042c0.274,0.627,0.649,1.206,1.094,1.641c0.107,0.104,0.167,0.246,0.167,0.396    c0,0.403-0.327,0.73-0.73,0.73H9.656c-1.662,0-3.009,1.347-3.009,3.009v0.834c0,0.524,0.425,0.95,0.95,0.95h10.042    c0.524,0,0.949-0.426,0.949-0.95v-0.834C18.589,19.68,17.242,18.332,15.58,18.332z" fill="#FFFFFF"/>
               <path d="M24.589,10.077h-8.421c0.243,0.538,0.417,1.2,0.489,2.019c0.18,0.111,0.315,0.29,0.425,0.506h7.507    c0.39,0,0.704-0.315,0.704-0.704v-1.117C25.293,10.393,24.979,10.077,24.589,10.077z" fill="#FFFFFF"/>
               <path d="M24.589,14.678h-7.335c-0.199,0.752-0.689,1.539-1.368,1.749c-0.02,0.037-0.043,0.069-0.064,0.106v0.67h8.766    c0.389,0,0.704-0.315,0.704-0.705v-1.116C25.293,14.993,24.979,14.678,24.589,14.678z" fill="#FFFFFF"/>
               <path d="M24.589,19.279h-5.726c0.378,0.598,0.6,1.303,0.6,2.062v0.463h5.126c0.39,0,0.704-0.315,0.704-0.704v-1.117    C25.293,19.594,24.979,19.279,24.589,19.279z" fill="#FFFFFF"/>
               <path d="M27.615,3.057H4.325C1.936,3.057,0,4.993,0,7.382v17.176c0,2.39,1.936,4.325,4.325,4.325h23.29    c2.389,0,4.324-1.936,4.324-4.325V7.382C31.939,4.993,30.004,3.057,27.615,3.057z M29.898,24.558c0,1.259-1.024,2.283-2.283,2.283    H4.325c-1.259,0-2.283-1.024-2.283-2.283V7.382c0-1.259,1.024-2.283,2.283-2.283h23.29c1.259,0,2.283,1.024,2.283,2.283V24.558z" fill="#FFFFFF"/>
            </g>
         </svg>
      </button>

      <div class="profil__block__wrapper profil__block__wrapper--stats">
         <h2 class="profil__block__title">Statistiques</h2>
         <ul>
            <li>Dernière visite : Mar 8 Mai 2018 - 18:20</li>
            <li>Date d'inscription : 08/01/2012</li>
            <li>Messages : 9718</li>
            <li><a rel="nofollow" href="#">Trouver tous les sujets ouverts par <span style="color:#2B9C8D"><strong>Compte Fondateur</strong></span> :</a> <a rel="nofollow" href="#">Sujets</a> - <a rel="nofollow" href="#">Messages</a></li>
         </ul>
      </div>
   </section>

   <section id="profil__infos">
      <button class="profil__btn" title="Informations">
         <svg class="icon icon--infos" viewBox="0 0 23.625 23.625">
            <g>
               <path d="M11.812,0C5.289,0,0,5.289,0,11.812s5.289,11.813,11.812,11.813s11.813-5.29,11.813-11.813  S18.335,0,11.812,0z M14.271,18.307c-0.608,0.24-1.092,0.422-1.455,0.548c-0.362,0.126-0.783,0.189-1.262,0.189  c-0.736,0-1.309-0.18-1.717-0.539s-0.611-0.814-0.611-1.367c0-0.215,0.015-0.435,0.045-0.659c0.031-0.224,0.08-0.476,0.147-0.759  l0.761-2.688c0.067-0.258,0.125-0.503,0.171-0.731c0.046-0.23,0.068-0.441,0.068-0.633c0-0.342-0.071-0.582-0.212-0.717  c-0.143-0.135-0.412-0.201-0.813-0.201c-0.196,0-0.398,0.029-0.605,0.09c-0.205,0.063-0.383,0.12-0.529,0.176l0.201-0.828  c0.498-0.203,0.975-0.377,1.43-0.521c0.455-0.146,0.885-0.218,1.29-0.218c0.731,0,1.295,0.178,1.692,0.53  c0.395,0.353,0.594,0.812,0.594,1.376c0,0.117-0.014,0.323-0.041,0.617c-0.027,0.295-0.078,0.564-0.152,0.811l-0.757,2.68  c-0.062,0.215-0.117,0.461-0.167,0.736c-0.049,0.275-0.073,0.485-0.073,0.626c0,0.356,0.079,0.599,0.239,0.728  c0.158,0.129,0.435,0.194,0.827,0.194c0.185,0,0.392-0.033,0.626-0.097c0.232-0.064,0.4-0.121,0.506-0.17L14.271,18.307z    M14.137,7.429c-0.353,0.328-0.778,0.492-1.275,0.492c-0.496,0-0.924-0.164-1.28-0.492c-0.354-0.328-0.533-0.727-0.533-1.193  c0-0.465,0.18-0.865,0.533-1.196c0.356-0.332,0.784-0.497,1.28-0.497c0.497,0,0.923,0.165,1.275,0.497  c0.353,0.331,0.53,0.731,0.53,1.196C14.667,6.703,14.49,7.101,14.137,7.429z"
                    fill="#FFFFFF"/>
            </g>
         </svg>
      </button>

      <div class="profil__block__wrapper profil__block__wrapper--infos">
         <h2 class="profil__block__title">Informations</h2>
         <ul>
            <li>Sexe : Féminin</li>
            <li>PointsCodes : 14169</li>
            <li>Date de naissance : 17/02/1991</li>
            <li>Localisation : la Vallée des Enfants Perdus</li>
            <li>Emploi/loisirs : Écrivaine</li>
            <li>Humeur : Amoureuse</li>
            <li>Niveau de Codage : Intermédiaire</li>
            <li>Niveau de Graphisme : Intermédiaire</li>
            <li>Crédit Avatar : DeviantArt</li>
            <li>Crédit Signature : //</li>
         </ul>
      </div>
   </section>

</section>

   <script src="js/app.min.js"></script>
</body>
</html>

Code:
/* Fonts
---------------------------------------------------------*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
/* RESET
----------------------------------------------------------------------------------------------------*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  font-size: 100%;
  background: transparent;
  border: 0;
  outline: 0;
}

html {
  font-size: 62.5%;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, main {
  display: block;
}

ul, ol {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
  content: '';
  content: none;
}

a,
input,
button,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  text-decoration: none;
  outline: none;
}

a {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  font-size: 100%;
  color: inherit;
  background: transparent;
  outline: none;
}

button {
  padding: 0;
  cursor: pointer;
}

ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9;
}

mark {
  font-style: italic;
  font-weight: bold;
  color: #000;
  background-color: #ff9;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  display: block;
  height: 1px;
  padding: 0;
  border: none;
}

input,
select {
  vertical-align: middle;
}

address {
  font-style: normal;
}

/* MAIN
----------------------------------------------------------------------------------------------------*/
::-moz-selection {
  color: #000000;
  background: rgba(255, 255, 255, 0.8);
}
::selection {
  color: #000000;
  background: rgba(255, 255, 255, 0.8);
}

::-moz-selection {
  color: #000000;
  background: rgba(255, 255, 255, 0.8);
}

.hidden-visually {
  overflow: hidden;
  position: absolute;
  width: 1px !important;
  height: 1px !important;
  clip: rect(1px, 1px, 1px, 1px);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Verdana", "Geneva", sans-serif;
  font-size: 1.4rem;
  line-height: 1.25;
  color: #ffffff;
}

a, a:visited, a:link, a.postlink, a.postlink:visited, a.postlink:link {
  color: #c640ad;
  transition: 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

a:hover, a:visited:hover, a:link:hover, a.postlink:hover, a.postlink:visited:hover, a.postlink:link:hover {
  color: #445cd6 !important;
}

/* PROFIL
----------------------------------------------------------------------------------------------------*/
#profil {
  position: relative;
  width: 1440px;
  height: 810px;
}

#profil canvas {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.profil__btn {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 10;
  border: none;
  background: transparent;
}

.profil__btn:hover + .profil__block__wrapper {
  opacity: 1;
  pointer-events: all;
}

.profil__block__wrapper {
  overflow: auto;
  padding: 1rem 5rem 2rem 8rem;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 2.5rem;
  opacity: 0;
  line-height: 2;
  transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1);
  pointer-events: none;
}

.profil__block__wrapper:hover {
  opacity: 1;
  pointer-events: all;
}

.profil__block__wrapper--infos {
  max-width: 50rem;
  max-height: 40rem;
}

.profil__block__wrapper--stats {
  max-width: 70rem;
  max-height: 25rem;
}

.profil__block__wrapper--contact {
  padding: 1rem 7rem 2rem 4rem;
  max-width: 24rem;
  max-height: 40rem;
}

.profil__block__wrapper--admin {
  padding: 1rem 8rem 2rem 5rem;
  max-width: 35rem;
  max-height: 20rem;
}

.profil__block__title {
  margin-bottom: 1rem;
  font-family: "Open Sans", "Verdana", "Geneva", sans-serif, sans-serif;
  font-weight: normal;
  font-size: 2rem;
  text-transform: uppercase;
}

#profil__infos {
  position: absolute;
  top: 45%;
  left: 52%;
}

#profil__infos::before {
  content: '';
  display: block;
  position: absolute;
  top: 3rem;
  left: -14rem;
  height: 1px;
  width: 14rem;
  background-color: #fff;
  transform: rotate(-10deg);
  transform-origin: right;
}

#profil__stats {
  position: absolute;
  top: 14%;
  left: 42%;
}

#profil__stats::before {
  content: '';
  display: block;
  position: absolute;
  top: 3rem;
  left: -14rem;
  height: 1px;
  width: 14rem;
  background-color: #fff;
  transform: rotate(-35deg);
  transform-origin: right;
}

#profil__contact {
  position: absolute;
  top: 24%;
  right: 83%;
}

#profil__contact::before {
  content: '';
  display: block;
  position: absolute;
  top: 5rem;
  right: -5.5rem;
  height: 1px;
  width: 5.5rem;
  background-color: #fff;
  transform: rotate(25deg);
  transform-origin: left;
}

#profil__contact .profil__btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  left: auto;
}

#profil__contact li {
  text-align: center;
}

#profil__admin {
  position: absolute;
  top: 69%;
  right: 73%;
}

#profil__admin::before {
  content: '';
  display: block;
  position: absolute;
  top: 3rem;
  right: -12rem;
  height: 1px;
  width: 12rem;
  background-color: #fff;
}

#profil__admin .profil__btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  left: auto;
}

#profil__admin li {
  text-align: center;
}

/* ICONS
----------------------------------------------------------------------------------------------------*/
.icon {
  width: 4rem;
  height: 4rem;
}

.icon svg {
  fill: #ffffff;
}

Code:
import $ from 'jquery'
import * as PIXI from 'pixi.js'
import 'pixi-layers'




/* PROFIL
----------------------------------------------------------------------------------------------------*/

export default class Profil {

    constructor() {
        this.$els = {
                planets           : ['planet1', 'planet2', 'planet3', 'planet4', 'planet5', 'planet6', 'planet7'],
                stars             : ['star1', 'star2', 'star3'],
                smallstars        : ['smallstar1', 'smallstar2', 'smallstar3', 'smallstar4'],
                particules        : ['particule1', 'particule2'],

                avatar            : $('#profil__avatar'),
                pseudo            : $('#profil__pseudo'),
                rank              : $('#profil__rank'),
                online            : $('#profil__online'),
        }

        this.initPixi()
    }




    /* Actions
    ---------------------------------------------------------*/

    initPixi() {
        this.Application = PIXI.Application
        this.loader = PIXI.loader
        this.resources = PIXI.loader.resources
        this.Sprite = PIXI.Sprite

        this.W = 1440
        this.H = 810
        this.deltaParticules = 0
        this.lastMousePosition = null

        this.pixi = new this.Application({
            width: this.W,
            height: this.H,
            transparent: false,
        })
        document.getElementById('profil').appendChild(this.pixi.view)

        this.loader
            .add('bg', 'img/bg.jpg')

        this.$els.planets.forEach((el) => {
            this.loader.add(el, 'img/'+el+'.png')
        })
        this.$els.stars.forEach((el) => {
            this.loader.add(el, 'img/'+el+'.png')
        })
        this.$els.smallstars.forEach((el) => {
            this.loader.add(el, 'img/'+el+'.png')
        })
        this.$els.particules.forEach((el) => {
            this.loader.add(el, 'img/'+el+'.png')
        })

        this.loader.add('rocket', 'img/rocket.png')
        this.loader.add('tardis', 'img/sprites/tardis.json')
        this.loader.add('avatar', this.$els.avatar.attr('src'), {crossOrigin: true})
        this.loader.load(() => this.setupPixi())
    }

    setupPixi() {

        this.pixi.stage = new PIXI.display.Stage()
        this.pixi.stage.group.enableSort = true

        // Background
        this.background = new PIXI.Sprite(this.resources.bg.texture)
        this.background.anchor.x = this.background.anchor.y = 0.5
        this.background.position.x = this.W/2
        this.background.position.y = this.H/2

        let imageRatio = this.background.width / this.background.height
        let containerRatio = this.W / this.H

        if(containerRatio > imageRatio) {
            this.background.height = this.background.height / (this.background.width / this.W)
            this.background.width = this.W
        }else{
            this.background.width = this.background.width / (this.background.height / this.H)
            this.background.height = this.H
        }

        this.pixi.stage.addChild(this.background)

        // Rocket
        this.rocketContainer = new PIXI.Container()
        this.rocketContainer.scale.set(0.75,0.75)
        this.rocketContainer.position.set(this.W/2 - 200, this.H/2)

        this.rocketGroup = new PIXI.display.Group(5, true)
        this.rocket = new PIXI.Sprite(this.resources.rocket.texture)
        this.rocket.anchor.x = this.rocket.anchor.y = 0.5
        this.rocket.parentGroup = this.rocketGroup
        this.rocketContainer.addChild(this.rocket)

        // Avatar
        let circle = new PIXI.Graphics()
        circle.beginFill(0x000000)
        circle.lineStyle(0)
        circle.drawCircle(- 120, - 120, 100)
        circle.endFill()
        this.rocketContainer.addChild(circle)

        this.avatar = new PIXI.Sprite(this.resources.avatar.texture)
        this.avatar.anchor.x = this.avatar.anchor.y = 0.5
        this.avatar.position.x = - 120
        this.avatar.position.y = - 120
        this.avatar.parentGroup = this.rocketGroup
        this.avatar.zOrder = 1
        this.avatar.mask = circle
        this.rocketContainer.addChild(this.avatar)

        // Pseudo
        let pseudo = new PIXI.Text(this.$els.pseudo.text().toUpperCase(), { align: 'center', fontSize: 28, fill: 0x757575, wordWrap: true, wordWrapWidth: 200 } )
        pseudo.resolution = 1
        pseudo.updateText()

        // Arc points
        let radius = 1200
        let maxRopePoints = 500
        let step = Math.PI / maxRopePoints

        let ropePoints = maxRopePoints - Math.round( (pseudo.texture.width / (radius * Math.PI)) * maxRopePoints )
        ropePoints /= 2

        let points = []
        for ( var i = maxRopePoints - ropePoints; i > ropePoints; i-- ) {
            let x = radius * Math.cos( -step * i )
            let y = radius * Math.sin( -step * i )
            points.push( new PIXI.Point( x, -y ) )
        }

        let container = new PIXI.Container()
        let rope = new PIXI.mesh.Rope( pseudo.texture, points )
        container.addChild( rope )
        let bounds = container.getLocalBounds()
        let matrix = new PIXI.Matrix()
        matrix.tx = -bounds.x
        matrix.ty = -bounds.y

        let renderTextureOne = PIXI.RenderTexture.create( bounds.width, bounds.height, 0, 1 )
        this.pixi.renderer.render( container, renderTextureOne, true, matrix, false )

        let spritePseudo = new PIXI.Sprite(renderTextureOne)
        spritePseudo.anchor.set(0.5,1)
        spritePseudo.position.set(10, 100)
        spritePseudo.rotation = -Math.PI/5.4
        spritePseudo.parentGroup = this.rocketGroup

        this.rocketContainer.addChild(spritePseudo)

        // Rang
        let rank = new PIXI.Text(this.$els.rank.text(), { align: 'center', fontSize: 22, fill: 0xffffff, wordWrap: true, wordWrapWidth: 200 } )
        rank.resolution = 1
        rank.updateText()

        ropePoints = maxRopePoints - Math.round( (rank.texture.width / (radius * Math.PI)) * maxRopePoints )
        ropePoints /= 2

        points = []
        for ( var i = maxRopePoints - ropePoints; i > ropePoints; i-- ) {
            let x = radius * Math.cos( -step * i )
            let y = radius * Math.sin( -step * i )
            points.push( new PIXI.Point( x, -y ) )
        }

        let containerRank = new PIXI.Container()
        let ropeRank = new PIXI.mesh.Rope( rank.texture, points )
        containerRank.addChild( ropeRank )
        bounds = containerRank.getLocalBounds()
        matrix = new PIXI.Matrix()
        matrix.tx = -bounds.x
        matrix.ty = -bounds.y

        let renderTextureRank = PIXI.RenderTexture.create( bounds.width, bounds.height, 0, 1 )
        this.pixi.renderer.render( containerRank, renderTextureRank, true, matrix, false )

        let spriteRank = new PIXI.Sprite(renderTextureRank)
        spriteRank.anchor.set(0.5,1)
        spriteRank.position.set(40, 145)
        spriteRank.rotation = -Math.PI/5.6
        spriteRank.parentGroup = this.rocketGroup

        this.rocketContainer.addChild(spriteRank);

        // Online
        let online = new PIXI.Text(this.$els.online.text().toUpperCase(), { align: 'center', fontSize: 18, fill: 0x616161, wordWrap: true, wordWrapWidth: 200 } )
        online.resolution = 1
        online.updateText()

        ropePoints = maxRopePoints - Math.round( (online.texture.width / (radius * Math.PI)) * maxRopePoints )
        ropePoints /= 2

        points = []
        for ( var i = maxRopePoints - ropePoints; i > ropePoints; i-- ) {
            let x = radius * Math.cos( -step * i )
            let y = radius * Math.sin( -step * i )
            points.push( new PIXI.Point( x, -y ) )
        }

        let containerOnline = new PIXI.Container()
        let ropeOnline = new PIXI.mesh.Rope( online.texture, points )
        containerOnline.addChild( ropeOnline )
        bounds = containerOnline.getLocalBounds()
        matrix = new PIXI.Matrix()
        matrix.tx = -bounds.x
        matrix.ty = -bounds.y

        let renderTextureOnline = PIXI.RenderTexture.create( bounds.width, bounds.height, 0, 1 )
        this.pixi.renderer.render( containerOnline, renderTextureOnline, true, matrix, false )

        let spriteOnline = new PIXI.Sprite(renderTextureOnline)
        spriteOnline.anchor.set(0.5,1)
        spriteOnline.position.set(100, 240)
        spriteOnline.rotation = -Math.PI/5.7
        spriteOnline.parentGroup = this.rocketGroup

        this.rocketContainer.addChild(spriteOnline);

        this.pixi.stage.addChild(this.rocketContainer)



        /* ELEMENTS */
        this.elements = []
        this.elementsParticules = []
        this.decorsContainer = new PIXI.Container()

        // Smallstars
        this.smallstarsGroup = new PIXI.display.Group(0, true)
        for(let i = 0; i < 30; ++i) {
            this.addSmallstar((Math.random()*1.5-0.5) * this.W, Math.random() * this.H)
        }

        // Planet
        this.planetsGroup = new PIXI.display.Group(1, true)
        for(let i = 0; i < 5; ++i) {
            this.addPlanet((Math.random()*1.5-0.5) * this.W, Math.random() * this.H)
        }

        // Stars
        this.starsGroup = new PIXI.display.Group(10, true)
        for(let i = 0; i < 3; ++i) {
            this.addStar(Math.random() * this.W, Math.random() * this.H)
        }

        // Tardis
        this.texturesTardis = []
        for (let i = 1; i <= 15; i++) {
            let val = i < 10 ? '0' + i : i;
            this.texturesTardis.push(PIXI.Texture.fromFrame('tardis_' + val + '.png'))
        }

        this.pixi.stage.addChild(new PIXI.display.Layer(this.rocketGroup))
        this.pixi.stage.addChild(new PIXI.display.Layer(this.planetsGroup))
        this.pixi.stage.addChild(new PIXI.display.Layer(this.starsGroup))
        this.pixi.stage.addChild(new PIXI.display.Layer(this.smallstarsGroup))

        // Start loop
        this.pixi.ticker.add(delta => this.run(delta))
    }

    run(delta) {

        // Move elements
        let newElements = []

        let mousePosition = null
        if(this.lastMousePosition)
            mousePosition = this.lastMousePosition

        this.lastMousePosition = this.pixi.renderer.plugins.interaction.mouse.global.x

        this.elements.forEach((el) => {
            el.x += el.vx * delta
            el.y += el.vy * delta

            // Mouse move
            if(mousePosition != null && mousePosition > 0 && el.vx > 0)
                el.x += (this.lastMousePosition - mousePosition)*(el.vx*el.vx + el.vy*el.vy)/10

            if(el.x > this.W + el.width || el.y > this.H + el.height)
                el.destroy()
            else
                newElements.push(el)
        })
        this.elements = newElements

        // Move tards
        if(this.tardis != null){
            this.tardis.x += this.tardis.vx * delta
            this.tardis.y += this.tardis.vy * delta
            this.tardis.rotation += 0.1 * delta

            if(this.tardis.x > this.W + this.tardis.width || this.tardis.y > this.H + this.tardis.height) {
                this.tardis.destroy()
                this.tardis = null
            }
        }
        else if(Math.random() > 0.9999)
            this.addTardis((Math.random()*2-0.5) * this.W)

        // Pop new element
        if(Math.random() > 0.98) {
            let random = Math.random()

            if(random < 0.5)
                this.addSmallstar((Math.random()*1.5-0.5) * this.W)
            else if(random < 0.75)
                this.addStar(Math.random() * 1.5 * this.W)
            else
                this.addPlanet((Math.random()*1.5-0.5) * this.W)
        }

        // Particules
        newElements = []
        this.elementsParticules.forEach((el) => {
            el.x += el.vx * delta
            el.y += el.vy * delta
            el.alpha -= delta/20

            if(el.x > this.W + el.width || el.y > this.H + el.height)
                el.destroy()
            else
                newElements.push(el)
        })
        this.elementsParticules = newElements

        this.deltaParticules += delta
        if(this.deltaParticules > 3) {
            this.addParticule(50 + (Math.random()*160))
            this.deltaParticules = 0
        }
    }




    /* Generate methods
    ---------------------------------------------------------*/

    addPlanet(x, y = 0) {
        let randomPlanet = Math.floor(Math.random() * this.$els.planets.length)

        let planet = new PIXI.Sprite(this.resources[this.$els.planets[randomPlanet]].texture)
        let scale = 0.25 + Math.random()*0.75
        planet.position.set(x, y == 0 ? -planet.height : y)
        planet.scale.set(scale, scale)

        let speed = (Math.random() * 0.3) + 0.2
        planet.vx = speed
        planet.vy = speed * 2
        planet.parentGroup = this.planetsGroup

        this.pixi.stage.addChild(planet)
        this.elements.push(planet)
    }

    addStar(x, y = 0) {
        let randomStar = Math.floor(Math.random() * this.$els.stars.length)

        let star = new PIXI.Sprite(this.resources[this.$els.stars[randomStar]].texture)
        let scale = 0.25 + Math.random()*0.75
        star.position.set(x, y == 0 ? -star.height : y)
        star.scale.set(scale, scale)

        let speed = (Math.random() * 10) + 2
        star.vx = -speed * 1.125
        star.vy = speed
        star.parentGroup = this.starsGroup

        this.pixi.stage.addChild(star)
        this.elements.push(star)
    }

    addSmallstar(x, y = 0) {
        let randomSmallstar = Math.floor(Math.random() * this.$els.smallstars.length)

        let smallstar = new PIXI.Sprite(this.resources[this.$els.smallstars[randomSmallstar]].texture)
        let scale = 0.25 + Math.random()*0.75
        smallstar.position.set(x, y == 0 ? -smallstar.height : y)
        smallstar.scale.set(scale, scale)

        let speed = (Math.random() * 0.1) + 0.05
        smallstar.vx = speed
        smallstar.vy = speed * 2
        smallstar.parentGroup = this.smallstarsGroup

        this.pixi.stage.addChild(smallstar)
        this.elements.push(smallstar)
    }

    addTardis(x) {
        let tardis = new PIXI.extras.AnimatedSprite(this.texturesTardis);
        tardis.anchor.set(0.5, 0)
        tardis.scale.set(Math.random() * 0.3 + 0.05)
        tardis.animationSpeed = 0.15
        tardis.position.set(x, 0 - tardis.height)
        tardis.vx = (Math.random() * 10) - 5
        tardis.vy = (Math.random() * 5) + 2 * 2
        tardis.play()

        this.pixi.stage.addChild(tardis)
        this.tardis = tardis
    }

    addParticule(x) {
        let randomParticule = Math.floor(Math.random() * this.$els.particules.length)

        let particule = new PIXI.Sprite(this.resources[this.$els.particules[randomParticule]].texture)
        particule.position.set(x, 280)
        particule.scale.set(0.75, 0.75)

        let speed = 8
        particule.vx = speed
        particule.vy = speed * 1.8
        particule.zOrder = 1
        particule.parentGroup = this.rocketGroup

        this.rocketContainer.addChild(particule)
        this.elementsParticules.push(particule)
    }




}



Cadeau
Colibris :

Joy :

Izusa :


Aed :

Suki :

Eskimo. :


Harleen :

muguet doré
avatar
Sexe : Féminin
Date d'inscription : 20/01/2018
Messages : 1399
Member One
Voir le profil de l'utilisateur
# Re: VOTE - COTM Codage n°7le Sam 12 Mai 2018 - 9:03
Numéro 1 :
Esthétique du rendu : 5/5
Originalité du code : 4/5
Propreté du code : X/5
Un petit commentaire : Mon préféré. J'aime les couleurs utilisé, l'emplacement de toutes les petites casses et graphiquement, il est beau.

Numéro 2 :
Esthétique du rendu : 4/5
Originalité du code : 4/5
Propreté du code : X/5
Un petit commentaire : J'aime tout les petits effets mit.. J'aime moins cette bande sombre qui n'est rempli qu'au centre, laissant les bords vides.

Numéro 3 :
Esthétique du rendu : 3/5
Originalité du code : 3/5
Propreté du code : X/5
Un petit commentaire : J'aime moins le bleu qui met en pls ma myopie -j'te jure que j'ai eux du mal, surtout pour lire le online- et la police utiliser. Par contre, l'effet rond qui tourne là, c'est le bien.

Numéro 4 :
Esthétique du rendu : 5/5
Originalité du code : 5/5
Propreté du code : X/5
Un petit commentaire : Je l'avais pas vu xD J'étais là "comment ça, le numéro 4 ?". J'aime beaucoup, c'est très original et y'a pleins de boutons à trifouiller.  
avatar
Sexe : Masculin
Date d'inscription : 03/03/2015
Messages : 5465
Modo / Anim' - 20 000 lieux sous les codes
Voir le profil de l'utilisateurhttp://moesaadis.forumactif.com
# Re: VOTE - COTM Codage n°7le Sam 12 Mai 2018 - 9:27
@Alek si tu veux voter il faut utiliser les critères sinon ton vote ne comptera pas, surtout qu'il faut donner des points à tous les participants ^^



Cadeau
Colibris :

Joy :

Izusa :


Aed :

Suki :

Eskimo. :


Harleen :

muguet doré
avatar
Sexe : Féminin
Date d'inscription : 20/01/2018
Messages : 1399
Member One
Voir le profil de l'utilisateur
# Re: VOTE - COTM Codage n°7le Sam 12 Mai 2018 - 10:18
@Naütilus. Je ne vois pas de quoi tu parle owo
Merci XD
avatar
Sexe : Féminin
Date d'inscription : 31/03/2012
Messages : 2741
Modo, Maxi-graphiste & Maîtresse des pingouins
Voir le profil de l'utilisateur
# Re: VOTE - COTM Codage n°7le Sam 12 Mai 2018 - 10:21
WAHOU c'est trop beau. Déjà bravo à tous, je suis toujours hyper impressionnée par ce vous faites, promis un jour je me mettrais au code *-*

Pour ceux pour qui ce n'est pas obvious, je ne vote pas pour la propreté du code.  

CODE 1
Esthétique du rendu : 5/5
Originalité du code : 2,5/5

Un petit commentaire : Ce code est MAGNIFIQUE. J'adore les couleurs, c'est hyper aéré, j'trouve ça hyper propre visuellement, c'est hyper agréable à regarder. Je ne trouve pas ça hyper original niveau disposition des éléments. C'est assez basique (ça ressemble un peu à Epicode si je puis me permettre xDD). Mais franchement, il est magnifique, je l'aime **

CODE 2
Esthétique du rendu : 4,5/5
Originalité du code : 4/5

Un petit commentaire : Encore une fois, très beau code ! Je suis moins fan des couleurs et des polices choisis (pour le pseudo et pour le rang + message) mais c'est un peu plus original dans l'organisation du code. Le petit crédit avatar qui apparait sur l'avatar, c'est hyper bien pensé. J'aime beaucoup la séparation entre les infos "plus importantes" (en ligne, dernière co, sujet, message) qui sont séparés du reste. J'aime beaucoup l'organisation en général de ce code que je trouve très bien pensé :D

CODE 3
Esthétique du rendu : 3/5
Originalité du code : 3/5

Un petit commentaire : C'est assez bien pensé d'avoir la photo de profil en haut, dans un petit rond qui tourne. J'ADORE LES RONDS QUI TOURNENT. Ensuite, j'apprécie la police choisie pour être calligraphique. Le choix de la mettre pour les premières lettres de infos est aussi bien pensé. Les éléments sont encore une fois répartie en fonction de leur importance (bien que je n'ai jamais vu le nombre de MP échangés sur le profil d'un membre xD), ce qui est appréciable. Néanmoins, je ne suis pas fan du rendu esthétique global. Je trouve que le blanc jure un peu avec le reste (pour le cadre du rang et pour le dernière visite) et je trouve pas que ce bleu soit un bon choix de couleur pour harmoniser le tout.

CODE 4
Esthétique du rendu : 5/5
Originalité du code : 5/5

Un petit commentaire : Alors là, je sais pas quoi dire. Wtf déjà dans un premier temps. Quel est cet code au milieu de tout ça. Franchement, j'aime beaucoup. C'est hyper original dans un premier temps. Ça rend propre, ce n'est pas surchargé. Les infos sont répartis en 4 endroits, c'est hyper ingénieux. Je ne sais pas franchement quoi soulever comme point positif ou négatif qui rentrent dans la notation xD
Point personnel, je ne suis pas sûre que j'utiliserai cela comme interface pour mes propres forums, mais bon xD


Pour conclure, gros coups de coeur pour le premier que je trouve hyper beau mais l'originalité du dernier bat tout le monde. Encore bravo à vous pour vos codes, ils sont hyper cool.


Merci Milou pour cet avatar  plz
Merci à à Aed pour cette sublime signature  Lovely  

avatar
Sexe : Féminin
Date d'inscription : 22/11/2017
Messages : 177
Membre timide
Voir le profil de l'utilisateur
# Re: VOTE - COTM Codage n°7le Sam 12 Mai 2018 - 17:51
Je viens noter mon avis avec mes commentaires pas constructif du tout, c'est que mon avis personnel très subjectif, huhu. Et je note pas la propreté du code, je suis pas assez expérimenté pour ça.

CODE 1
Esthétique du rendu : 5/5
Originalité du code : 3/5

Un petit commentaire : Ce n'est pas le plus original, mais c'est celui que je préfère, celui que je choisirais si je devais prendre l'un des 4 pour mon propre forum. J'ai pas grand chose à en dire, c'est joli, c'est simple, c'est clair, c'est net, c'est carré, c'est passe-partout. Et les couleurs sont très agréable.

CODE 2
Esthétique du rendu : 4.5/5
Originalité du code : 4/5

Un petit commentaire : Celui-ci est vraiment super joli aussi ! Il est très clair aussi, les couleurs sont harmonieuses, j'adore l'idée de la première lettre d'une couleur différente, le placement des éléments est bien pensé. Juste la zone des icones "contact" que je verrais mieux en bas plutôt que là, peut-être. Sans en être vraiment fan, je trouve la police sympa. Avec des catégories assorties, ça ferait un forum super beau.

CODE 3
Esthétique du rendu : 3.5/5
Originalité du code : 3.5/5

Un petit commentaire : Des trois, c'est celui que j'aime le moins. Il est plutôt sympa dans la forme, mais c'est pas un coup de cœur. Par contre, même chose que celui d'avant, j'aime beaucoup la première lettre d'une couleur différente (même si là, j'aime pas trop la police). Et les petites pastilles bleues, elles sont super sympa aussi, c'est jouli !

CODE 4
Esthétique du rendu : 4/5
Originalité du code : 5/5

Un petit commentaire : Qui que quoi wtf ?? Ce truc m'a vraiment surpris, je m'attendais à tout sauf à ça XD C'est hyper original, ça c'est clair, c'est super stylé aussi, j'aime beaucoup ! Je sais franchement pas quoi dire d'autre, haha...
avatar
Sexe : Féminin
Date d'inscription : 07/09/2016
Messages : 337
Fidèle au poste !
Voir le profil de l'utilisateurhttps://seven-light.tumblr.com/
# Re: VOTE - COTM Codage n°7le Sam 12 Mai 2018 - 18:59
Allez, je viens donner un p'tit avis aussi. :3

CODE 1

Esthétique du rendu : 5/5
Originalité du code : 3.5/5

Un petit commentaire : J'ai eu un vrai coup de cœur pour ce code. Il reste assez classique, mais ce côté épuré, structuré, j'apprécie beaucoup. Et les couleurs et les polices, sont bien choisis. Tout est bien pensé. C'est le genre de code que j'aime et que je pourrai facilement utiliser pour un forum.

CODE 2

Esthétique du rendu : 4/5
Originalité du code : 4/5

Un petit commentaire : Le code fonctionne sans problème et la disposition genre de l'ordinaire. Je ne suis pas fan des couleurs ou des typos choisis, mais j'adore l'idée de changer la couleur de la première et le crédit de l'avatar. :3 Bien utilisé, ça peut rendre vraiment bien sur un forum.

CODE 3

Esthétique du rendu : 3.5/5
Originalité du code : 3.5/5

Un petit commentaire : Ce code est sympa comme tout aussi, mais il y a plusieurs éléments que je n'ai pas apprécié plus que ça. Comme le choix de la police et de son style pour le mot "Fondateur". Les couleurs restent sympa et l'avatar, rond, j'aime beaucoup ! (sans l'animation, elle me donne le tournis. XD)

CODE 4

Esthétique du rendu : 5/5
Originalité du code : 5/5

Un petit commentaire : Comment s’asseoir sur les normes et faire un truc qui dépote ! Avec du svg en plus. x) Ça claque et le rendu est vraiment beau. Le fond est franchement dingue et les couleurs sont super jolies. Je vois bien ce genre de profil pour un forum d'entraide justement. Après, ça doit être chaud à utiliser sur un forum RPG, car il faut le thème avec, mais BIEN utilisé, ça peut rendre vraiment top.
avatar
Sexe : Féminin
Date d'inscription : 10/05/2018
Messages : 25
# Re: VOTE - COTM Codage n°7le Lun 14 Mai 2018 - 15:55
Tout cela me dépasse.
Bon, c'est mon premier vote, soyez indulgent :)
Je vous avoue ne pas avoir des yeux d'expert, donc ne tenez pas compte de mes choix encore une fois !
N'y connaissant rien en codage, mon vote ne sera pas juste.
Enfin, je n'avais pas vu le numéro 4...je me demander pourquoi tout le monde votait pour un n°4...et PAF ! il est apparut :)

CODE 1
Esthétique du rendu : 4/5
Originalité du code : 4/5
Un petit commentaire : J'ai longtemps hésité entre le code 1 & 2. Il sont tout les deux clair, précis, toutes les informations sont présente en 1 clic ! Ce qui va faire la différence c'est le choix de la couleur. Ici la police utiliser est standard. Un + selon moi. Mais le rouge aurait dû être décliné en plusieurs ton de couleur ! On se retrouve donc avec un gros cadre rouge en titre pratiquement vide....
1ème position.

CODE 2
Esthétique du rendu : 5/5
Originalité du code : 4/5
Un petit commentaire : Idem que le code 1. Vraiment dommage pour la police.  ici C'est un mauvais choix. Mais les couleurs sont parfaitement bien harmoniser et décliner en 2-3 tons. Concernant le tableau déroulant j'aurais préférer ne pas le voir. On s'embête toujours avec la souris (en effet, 1 fois sur 2 on va faire défiler notre page internet par erreur plutôt que la case.)
C'était vraiment mon préférer !!
2ème position

CODE 3
Esthétique du rendu : 3/5
Originalité du code : 4/5
Un petit commentaire :
- rectangle défilant ;  -écriture non standars, mais préférable au code 2 ; gros bloc bleu en arrière plan qu'il aurait fallu travailler.
3ème position

CODE 4
Esthétique du rendu : 4/5
Originalité du code : 5/5
Un petit commentaire : Génialissime ! mais pas utile pour moi. On n'as pas toutes les informations devant nous à moins de balader la souris. Je me suis amusé à déplacer ma souris d'un coin à l'autre de mon écran :)
4ème position
avatar
Sexe : Féminin
Date d'inscription : 05/06/2014
Messages : 3505
Maxi-Code master - Modo voleuse de PC ❤ - Ex-admin
Voir le profil de l'utilisateur
# Re: VOTE - COTM Codage n°7le Lun 14 Mai 2018 - 18:56
Création #1

Esthétique du rendu : 5/5
Originalité du code : 2/5
Propreté du code : 5/5

Un petit commentaire : J'aime beaucoup cette création. C'est le genre de code que je mettrais sur mon forum ! Par contre je la trouve peux original. Ce n'est ps forcément mal ! Mais c'est le genre de code qu'on voie un peux partout... mais c'est normal ces tellement canon ! Lovely Je suis pas mal sur de savoir qui a coder même si elle a voulu m'induire en erreurs avec une couronne !

Pour les code j'ai vraiment très peux de chose a dire. Le code est très propre il est facile de ce retrouver a l'intérieur, l’utilisation des bonne balise, vraiment bravo ! Il fraudais probablement ajouter une scroll bar pour les informations du profil. là c'est parfait, mais si on imagine le mettre en LS il ce peux que les profils des autre forum soit plus ou moins long. Bref c'est un détail !

Création #2

Esthétique du rendu : 4/5
Originalité du code : 3/5
Propreté du code : 5/5

Un petit commentaire : Bien qu'un peux moins mon genre de code je le trouve jolie aussi =) On reconnais bien la codeuse derrière hihi. Je trouve le haut du profil original =) Je n'ai jamais penser mettre les information ainsi =P

Pour le code nickel ! Très propre même si elle n'as pas utiliser des liste pour les information du profil ;) Les sélecteurs sont utilisés a la perfection bref je trouverais agréable d'utiliser ce code =D

Création #3

Esthétique du rendu : 3/5
Originalité du code : 4/5
Propreté du code : 5/5

Un petit commentaire : Je trouve la création un peux triste. Peut-être est-ce le choix des couleur et de l'image de fond ... Je trouve également qu'il y à un gros vide entre le haut du profil et les informations. Je trouve plutôt original la disposition des informations et le visuel de l'avatar =)

Pour les codes je n'ai rien a dire ! L'utilisation des grilles bravo ! A date j'ai vue très peux de gens les utiliser donc j’ose imaginer qui est derrière ce code, mais je pourrais me tromper x) Bref encore une fois je n'aurais pas de mal a utiliser ce code c'est très agréable à lire =)

Création #4

Esthétique du rendu : 4/5
Originalité du code : 5/5
Propreté du code : 5/5

Un petit commentaire : Je trouve la création très original ! Je ne crois pas que je la mettrais sur mon forum si j'en avais un par contre. Il faut vraiment un forum très spécifique pour mettre ce genre de profil, mais au final c'et ce qui rend la création original. Je trouve par contre l’ensemble moins ergonomique que les autres création... mais ergonomique et design c'Est souvent dur a concilier.

Pour le code, c'est de très bonne qualité ! On reconnais beaucoup de pratique utiliser dans la programmation de site web. Je me croirais presque dans mes cours xD

Par contre ce n'est pas le genre de code que j’imagine en LS les novice aurais probablement du mal a travailler avec. Cela n'enlève rien au travail du codeur ! je suis très curieuse de voir qui c'est =3


Je suis vraiment étonner de voir la qualité des codes franchement Wow ! Tout est très beau j'espère bien en voir un ou deux en LS =D Je ne crois pas que les créateur aurons du mal a les adapté hihi =)

Félicitation a tous ♥️



avatar
Sexe : Féminin
Date d'inscription : 12/10/2013
Messages : 2618
Maxi-Graphiste
Voir le profil de l'utilisateurhttp://mimill-1404.deviantart.com/gallery/
# Re: VOTE - COTM Codage n°7le Lun 14 Mai 2018 - 22:32
CODE 1
Esthétique du rendu : 4/5
Originalité du code : 2/5
Propreté du code : .../5

Un petit commentaire :
J'aime beaucoup les couleurs de ce codage et sa sobriété. Les rectangles bien alignés lui donnent une certaine élégance, même si on retrouve assez facilement ce genre de codage sur différents forums :)


CODE 2
Esthétique du rendu : 3/5
Originalité du code : 3/5
Propreté du code : .../5

Un petit commentaire :
j'aime bien l'organisation générale de ce profil, mais la police utilisée pour le pseudo, le rangs et le nombre de messages ne me plaît pas trop. Je trouve qu'elle casse un peu l'aspect carré du reste du codage. Sinon, les couleurs sont très jolies et je trouve la disposition des éléments plutôt sympa ;) ++ pour l'effet de l'avatar au survol *-*


CODE 3
Esthétique du rendu : 3/5
Originalité du code : 4/5
Propreté du code : .../5

Un petit commentaire :
Je trouve ce profil original. Il est sobre mais j'en ai rarement vu un de ce genre sur un forum :) Les informations sont claires et espacées, ça change un peu des rectangles alignés les uns en dessous des autres. J'aime bien l'emplacement et l'effet de l'avatar. Le bandeau bleu foncé en fond peut servir à plein de choses, j'aime bien l'idée !


CODE 4
Esthétique du rendu : 4/5
Originalité du code : 5/5
Propreté du code : .../5

Un petit commentaire :
Je trouve ce profil hyper original, c'est joli et ludique. Par contre, je trouve que le rendu est fort grand pour un profil. J'ai un petit ordi et je dois faire monter/descendre la page pour voir l'entièreté du code. J'ai trouvé ce profil un peu moins intuitif au tout début (genre dans les 10 premières secondes), parce que mon attention était plus attirée par l'espace en fond que par les icônes à survoler pour avoir les infos x) Mais c'est quand même une très bonne idée :D

Chapeau à tous les participants, c'est des jolis codages :3
avatar
Sexe : Féminin
Date d'inscription : 10/06/2016
Messages : 5713
Chasseuse de bonbons
Voir le profil de l'utilisateur
# Re: VOTE - COTM Codage n°7le Mar 15 Mai 2018 - 13:33
Coucou ♥️

Je ne suis pas hyper douée en codage mais je viens voter quand même pour la première fois :3

¤ Code 1 ¤
Esthétique du rendu : 5/5
Originalité du code : 4/5
Propreté du code : .../5

Un petit commentaire : J'adore les couleurs et les typos choisies :3 Enfin, même l'ensemble :P


¤ Code 2 ¤
Esthétique du rendu : 4/5
Originalité du code : 4/5
Propreté du code : .../5

Un petit commentaire : Les couleurs sont belles ♥️ Par contre, je trouve que la typo choisie pour les textes (pas celle des titres) n'est pas aussi ronde que celle des titres, c'est dommage qu'elles ne se ressemblent pas un peu plus.


¤ Code 3 ¤
Esthétique du rendu : 5/5
Originalité du code : 4/5
Propreté du code : .../5

Un petit commentaire : J'adore le bleu ** Ce qui tourne aussi ** (l'avatar, je me suis éclatée à le faire tourner au moins vingt fois XD) Le rendu est joli ♥️ Par contre, le petit "Online" avec le symbole sont un peu petits.


¤ Code 4 ¤
Esthétique du rendu : 5/5
Originalité du code : 5/5
Propreté du code : .../5

Un petit commentaire : Je n'avais jamais vu un tel profil, c'est trop classe ** Il faut trifouiller un peu partout pour trouver les informations mais ce n'est qu'un détail :3 Tout se trouve facilement. Par contre, le "En ligne" n'est pas assez visible, la couleur de la typo choisie se fond trop avec le fond ^^'


Ce sont de belles créations, félicitations aux personnes qui ont participé ♥️
avatar
Sexe : Féminin
Date d'inscription : 20/03/2018
Messages : 200
Membre timide
Voir le profil de l'utilisateur
# Re: VOTE - COTM Codage n°7le Ven 18 Mai 2018 - 1:01
J'espère qu'il n'est pas trop tard pour voter ^^

Code 1
Esthétique du rendu : 4/5
Originalité du code :  2/5

Un petit commentaire :
Le rendu est très joli et esthétique. Toutefois, je rejoins l'avis des autres membres concernant l'originalité. On voit cela sur plusieurs forums, mais c'est normal puisque le rendu est très cute et propre. =p

Code 2
Esthétique du rendu : 4/5
Originalité du code : 4/5

Un petit commentaire :
J'aime bien utiliser les couleurs beiges, crèmes et brunes sur mes forums, alors j'ai apprécié le rendu de ce codage ^^ Par contre, j'aime moins la petite barre déroulante et la police utilisée.

Code 3
Esthétique du rendu : 3/5
Originalité du code : 4/5

Un petit commentaire :
L'esthétique vient moins me chercher personnellement sur ce codage, mais je trouve que son l'originalité est du même niveau que celui du code précédent. Je crois que ce code a un bon potentiel, surtout si on lui apporte quelques petites modifications pour améliorer son design ^^

Code 4
Esthétique du rendu : 5/5
Originalité du code :  5/5

Un petit commentaire :
Omg, ce code saute aux yeux et j'aime beaucoup ! Je pense n'avoir jamais vu quelque chose de semblable sur un forum, donc je salue l'originalité et l'audace. Vraiment, bravo au créateur ou à la créatrice !
avatar
Sexe : Masculin
Date d'inscription : 06/06/2017
Messages : 2220
Anim'
Voir le profil de l'utilisateurhttp://www.epicode-entraide.com/t12931-tuto-boitier-jeux-video#2
# Re: VOTE - COTM Codage n°7le Sam 19 Mai 2018 - 17:35
Bon je vais voté avec mes minces connaissance ^^

#1
Esthétique du rendu : 3,5/5
Originalité du code : 3,5/5

Un petit commentaire :
Je trouve qu'il manque un peu de couleur personnellement, par contre j'aime bien le logo Fondatrice, il est léger et parfait

#2
Esthétique du rendu : 5/5
Originalité du code : 4/5
Un petit commentaire : Personellement je trouve que le fond utilisé est en harmonie parfaite avec l'image! Si j'avais un forum, c'est celui-là que j'aurais utilisé entre les 4 ^^

#3
Esthétique du rendu : 3,5/5
Originalité du code : 4/5
Un petit commentaire :
J'adore le positionnement sur cette image, avec la photo arrondie ça donne un beau coup d'oeil.

#4
Esthétique du rendu : 4/5
Originalité du code : 5/5
Un petit commentaire :
Bon que dire Wawwww quelle originalité! Un travail de fou :P Par contre je me dis que si j'avais un forum les informations sont moins visibles au coup d’œil.


Ma Galerie Avatar et Signature!

Up mon petit cadeau gagné ^^



Spoiler:
muguet rouge
avatar
Sexe : Féminin
Date d'inscription : 26/12/2013
Messages : 3185
Designer
Voir le profil de l'utilisateur
# Re: VOTE - COTM Codage n°7le Sam 19 Mai 2018 - 18:47
Je n'ai pas vraiment le temps de regarder les codes :(( Mais je passe quand même voter
#1
Esthétique du rendu : 5/5
Originalité du code : 3/5

Un petit commentaire : Très beau code, mais ça reste quelque chose d'assez basique bien qu'esthétique. On aurait pu mettre les icônes d'une largeur identique et choisir une meilleure police pour fondatrice et bannir le membre. Il reste toutefois mon deuxième préféré !

#2
Esthétique du rendu : 4/5
Originalité du code : 4/5

Un petit commentaire : J'aime bien l'idée d'une image par contre le code n'a pas été adapté pour un profil réel. (L'image se trouverait dans le champ profil normalement). Je ne suis pas non plus fan de la police utilisée pour le pseudo, mais ça c'est plutôt mes goûts personnels.

#3
Esthétique du rendu : 3/5
Originalité du code : 3/5

Un petit commentaire : L'idée de l'avatar est super sympathique !

#4
Esthétique du rendu : 5/5
Originalité du code : 5/5

Un petit commentaire : Mon préféré, je le trouve simplement GÉNIAL. C'est une template qu'on pourrait facilement retrouver comme profil sur le forum de forumactif.


bravo à tous ceux qui ont participé.





la plus belle c'est aed & la plus glamour c'est eskimo
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum