-34%
Le deal à ne pas rater :
Ventilateur ROWENTA VU5640 TURBO SILENCE EXTRÊME
66 € 100 €
Voir le deal

Votes Code n°11


Aller en bas

Naütilus.
20 000 lieux sous les codes

http://aelke-rpg.forumactif.com/
le Jeu 12 Mar 2020 - 13:17
# Votes Code n°11
Votes
Une collaboration sans faille !
C'est l'heure de voter !


Bonjour ! Bonsoir !  Votes Code n°11 1066248963

Il est temps, après plus d'un mois de travail, de révéler au grand public le fruit de votre union  Votes Code n°11 3775839356 bien sur je parle du code !!
Avant de vous donner les participations je voulais voir avec vous les "nouveaux" critères de cette édition en collaboration  Happyness  car nous avons en effet ajouté deux petits critères, le premier est le "respect de la maquette" et l'autre la "propreté du code". Bien entendu le deuxième sur le code est totalement facultatif car il concerne surtout ceux sachant coder  Votes Code n°11 2979024130  donc pas de panique !!

Code:
[b]Esthétique du rendu : /5[/b]
[b]Respect de la maquette : /5[/b]
[b]Originalité : /5[/b]

[b](facultatif) Propreté du code :[/b]  [i]commentaire pour ceux qui s'y connaissent le plus ![/i]

[b](facultatif) Un petit commentaire :[/b]

Ceci étant dit, passons maintenant aux superbes codes  Miam

Participation 1:
Lien de la maquette
Lien pour voir le code

Code:
<!DOCTYPE html>
<html lang="fr">

  <head>
    <meta charset="utf-8" />
    <title>Page d'accueil (c) Pseudo</title>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script src="https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/js/slick.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
      //<![CDATA[
      $(document).ready(function() {
        $(".regular").slick({
          dots: true,
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1
        });
      });
      //]]>

    </script>

    <link rel="stylesheet" type="text/css" href="https://www.jqueryscript.net/demo/Fully-Responsive-Flexible-jQuery-Carousel-Plugin-slick/css/slick.css" />

    <style type="text/css">
      .bloc-pa {
        background-color: #191417;
        width: 540px;
        display: flex;
        flex-flow: wrap;
      }
      .news {
      width: 140px;
      height: 250px;
      background-color: #6BA2B6;
      }
      span.newstxt {
      display: block;
      margin: 5px;
      padding: 5px;
      color: #000000;
      font-family: 'Century Gothic', sans serif;
      font-size: 11px;
      text-align: justify;
      margin-bottom: 5px;
      }
      .news a {
      color: #ffffff;
      font-family: 'Century Gothic', sans serif;
      font-size: 13px;
      font-weight: bold;
      text-decoration: none !important;
      }
      .contexte {
      width: 212px;
      height: 305px;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      color: #ffffff;
      font-family:'Century Gothic', sans serif;
      font-size: 10px;
      text-align: justify;
      }
      .bloc-staff {
      width: 168px;
      height: 270px;
      text-align: center;
      }
      .staff {
      margin-bottom: 20px;
      }
      .staffimg {
      width: 84px;
      height: 84px;
      margin-left: 35px;
      }
      .staff img {
      border: 10px solid #C4CCCF;
      border-radius: 50px;
      }
      .staffpseudo {
      display: block;
      font-family: 'Old English Text MT';
      font-size: 28px;
      color: #C4D2D5;
      margin-top: -5px;
      }
      .staffrang {
      display: block;
      font-family: 'Century Gothic', sans serif;
      font-size: 12px;
      text-transform: uppercase;
      color: #6BA2B6;
      margin-top: -7px;
      }
      .bloc-pv {
      width: 140px;
      height: 105px;
      margin-top: -75px;
      }
      .bloc-pv img {
      position: relative;
      top: 30px;
      border: 3px solid #C4CCCF;
      border-radius: 50px;
      margin-left: 5px;
      }
      .credits {
      width: 232px;
      height: 40px;
      font-family: 'Century Gothic', sans serif;
      font-size: 12px;
      text-transform: uppercase;
      color: #6BA2B6;
      text-align: justify;
      }
      .credits span {
      display: block;
      padding-left: 10px;
      padding-right: 10px;
      padding-bottom: 10px;
      }
      .partenaires {
      position: relative;
      margin-top: -55px;
      width: 168px;
      height: 90px;
      z-index: 1;
      }
      .partenaires img {
      position: relative;
      left: 15px;
      top: 20px;
      }
      .partenaires span {
      position: absolute;
      width: 70px;
      background-color: #C4CCCF;
      padding: 3px;
      margin-top: 15px;
      border: 2px solid transparent;
      -moz-border-top-colors: #282728;
      -moz-border-bottom-colors: #679AAD;
      -moz-border-left-colors: #282728 #679AAD;
      -moz-border-right-colors: #282728 #679AAD;
      border-radius: 10px;
      text-transform : uppercase;
      color: #233646;
      font-family: 'Century Gothic', sans serif;
      font-size: 10px;
      transition:all .25s;
      opacity:0;
      transform:scale(0) rotate(-12deg);
      z-index: 5;
      }
      a:hover span {
      position: absolute;
      transform: scale(1) rotate(0);
      opacity: 1;
      z-index: 999;
      }
      .liens {
      width: 540px;
      height: 50px;
      padding: 10px;
      }
      .liens a {
      position: relative;
      left: 5px;
      color: #C4D2D5;
      font-family: 'Century Gothic', sans serif;
      font-size: 13px;
      letter-spacing: 2px;
      text-transform: uppercase;
      text-decoration: none !important;
      margin-right: 10px;
      text-align: justify;
      }
    </style>
  </head>

  <body>
    <div class="bloc-pa">
      <div class="news">
        <span class="newstxt"><a href="#">XX.XX</a> news news news news news news news news </span>
        <span class="newstxt"><a href="#">XX.XX</a> news news news news news news news news </span>
        <span class="newstxt"><a href="#">XX.XX</a> news news news news news news news news </span>
        <span class="newstxt"><a href="#">XX.XX</a> news news news news news news news news </span>
       </div>
      <div class="contexte">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim. Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh. Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit.Lorem ipsum dolor sit amet, consectetur adipiscing elit...
</div>
      <div class="bloc-staff"><div class="staff"><div class="staffimg"><img src="https://via.placeholder.com/65" /></div>
        <span class="staffpseudo">pseudonyme</span>
        <span class="staffrang">Administrateur</span></div>
        <div class="staff"><div class="staffimg"><img src="https://via.placeholder.com/65" /></div>
        <span class="staffpseudo">pseudonyme</span>
        <span class="staffrang">Modérateur</span></div>
      </div>
      <div class="bloc-pv"> <a href="#"><img src="https://via.placeholder.com/30" /></a> <a href="#"><img src="https://via.placeholder.com/30" /></a> <a href="#"><img src="https://via.placeholder.com/30" /></a>
        <a href="#"><img src="https://via.placeholder.com/30" /></a> <a href="#"><img src="https://via.placeholder.com/30" /></a> <a href="#"><img src="https://via.placeholder.com/30" /></a>
      </div>
      <div class="credits"><span>Le forum a été codé par Pseudo et le contexte est de Pseudo</span></div>
      <div class="partenaires"><a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 1</span></a> <a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 2</span></a> <a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 3</span></a>
        <a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 4</span></a> <a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 5</span></a> <a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 6</span></a>
        <a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 7</span></a> <a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 8</span></a> <a href="#"><img src="https://i.imgur.com/cPj6DRb.png" /><span>Partenaire 9</span></a></div>
      <div class="liens"><a href="#">Contexte</a> <a href="#">Règlement</a> <a href="#">Annexes</a> <a href="#">Groupes</a> <a href="#">Partenariat</a>
        <a href="#">Avatars</a> <a href="#">Présentations</a> <a href="#">Liens</a> <a href="#">Crédits</a> <a href="#">Fiche et logos</a></div>
    </div>
  </body>
</html>

Participation 2:
Lien de la maquette
Lien pour voir le code

Code:
<div id="header_forum">
  
    <div id="nav_bar">
      <span><img src="https://i.imgur.com/TL6asju.png" alt="Accueil" /><a href="#" target="_blank" title="Accueil">Accueil</a></span>
      <span><img src="https://i.imgur.com/ntiP0og.png" alt="Membres" /><a href="#" target="_blank" title="Membres">Membres</a></span>
      <span><img src="https://i.imgur.com/tp59LC3.png" alt="Groupes" /><a href="#" target="_blank" title="Groupes">Groupes</a></span>
      <span><img src="https://i.imgur.com/oRFypT7.png" alt="Profil" /><a href="#" target="_blank" title="Profil">Profil</a></span>
      <span><img src="https://i.imgur.com/o4kSFhg.png" alt="Rechercher" /><a href="#" target="_blank" title="Rechercher">Rechercher</a></span>
      <span><img src="https://i.imgur.com/Z2RyFY3.png" alt="Messagerie" /><a href="#" target="_blank" title="Messagerie">Messagerie</a></span>
      <span><img src="https://i.imgur.com/1SrNVsw.png" alt="Déconnexion" /><a href="#" target="_blank" title="Déconnexion">Déconnexion</a></span>
    </div>

    <div class="item" data-animation-path-duration="800" data-animation-path-easing="easeInOutCubic" data-path-elasticity="300" data-morph-path="M 189,80.37 C 232.6,46.67 352.5,67.06 350.9,124.1 349.5,173.4 311.7,168 312.4,248.1 312.9,301.1 382.5,319.2 368.5,379.1 349.4,460.6 137.7,467.5 117.6,386.3 98.68,309.7 171.5,292.2 183.6,240.1 195.7,188.2 123.8,130.7 189,80.37 Z" data-path-scalex="0.8" data-path-scaley="1.1" data-path-translatex="0" data-path-translatey="30" data-path-rotate="5" data-animation-image-duration="800" data-animation-image-easing="easeInOutQuart" data-image-elasticity="300" data-image-scalex="1.2" data-image-scaley="1.2" data-image-translatex="-20" data-image-translatey="-45" data-image-rotate="-5" data-animation-deco-duration="1300" data-animation-deco-easing="easeOutQuad" data-deco-elasticity="300" data-deco-scalex="0.8" data-deco-scaley="0.9" data-deco-translatex="-5" data-deco-translatey="-5" data-deco-rotate="2">
      <img src="https://i.imgur.com/vl5Ltp8.png" alt="Zozio" id="zozio" />
      <svg class="item__svg" width="550px" height="500px" viewBox="0 47 400 470">
        <clipPath id="clipShape1">
          <path class="item__clippath" d="M 189,80.37 C 243,66.12 307.3,87.28 350.9,124.1 389.3,156.6 417,211.2 418.1,263.4 419.1,305.7 401.8,355.6 368.5,379.1 298.8,428 179.2,446.4 117.6,386.3 65.4,335.3 78.55,230.3 105.5,160.5 119.7,123.6 152.6,89.85 189,80.37 Z" style="transform: scaleX(1) scaleY(1) translateX(0px) translateY(0px) rotate(0deg);"></path>
        </clipPath>
        <g class="item__deco" style="transform: scaleX(1) scaleY(1) translateX(0) translateY(0) rotate(0deg);">
          <path id="rond_gris" d="M132.7,-178.2C178.1,-149.7,225,-119.1,238.4,-77.6C251.7,-36.1,231.4,16.3,206.4,58.9C181.3,101.6,151.5,134.5,116.3,161.6C81.1,188.6,40.6,209.8,-1,211.2C-42.5,212.5,-85,194,-119.1,166.6C-153.2,139.2,-178.8,102.8,-196.6,60.9C-214.3,19,-224.1,-28.5,-214.8,-73.7C-205.5,-118.9,-177.1,-161.8,-138.1,-192.3C-99.1,-222.8,-49.6,-240.9,-2.9,-236.8C43.7,-232.8,87.4,-206.6,132.7,-178.2Z"></path>
        </g>
        <g clip-path="url(#clipShape1)">
          <image class="item__img" xlink:href="https://i.imgur.com/YghRjom.png" x="0" y="0" height="550px" width="500px" style="transform: scaleX(1) scaleY(1) translateX(0) translateY(0) rotate(0deg);"></image>
        </g>
      </svg>
    
      <div id="info_global_fo">
        <div id="forum_title"><span>S</span><span>I</span><span>R</span><span>T</span><span>H</span><span>A</span><span>A</span><span>L</span></div>
        <div id="sub_title_fo">where is my love</div>

        <div id="context_pa">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          <br /><br />
          Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
          ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
          voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
          Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
          tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
          <br /><br />
          <a href="#" target="_blank" title="Contexte entier">plus ?</a>
        </div>
      </div>
    </div>
  
    <script src="https://sunhae.alwaysdata.net/Javascript/concours_bis.js"></script>
    <script src="https://sunhae.alwaysdata.net/Javascript/concours.js"></script>
  
    <div id="sub_header">
      <div id="partenaire_pa">
        <span id="title_pa">PARTENAIRES</span>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/IkaIDjX.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/yqZhaXV.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/EkaUwOL.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/buX0tQp.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/ND64wox.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/1tXXRMa.png" alt="Nom du partenaire" /></a>
      
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/3Ohujyw.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/NfOmshW.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/3JmHXdJ.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/m9MGgo4.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/IIzgVfB.png" alt="Nom du partenaire" /></a>
        <a href="#" target="_blank" title="Nom du partenaire"><img src="https://i.imgur.com/hqBzTXT.png" alt="Nom du partenaire" /></a>
      </div>
    
      <div id="slider_wrap">
        <div class="slider_pa">
          <div>
            <div id="title_pa">NOUVEAUTÉS</div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
            Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
            dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
          <div>à définir</div>
          <div>à définir</div>
        </div>
      
        <div id="lien_impt">
          <a href="#" target="_blank" title="Contexte">Contexte</a>
          <a href="#" target="_blank" title="Boîte à idées">Boîte à idées</a>
          <a href="#" target="_blank" title="Invités">Invités</a>
          <a href="#" target="_blank" title="Crédits">Crédits</a>
        </div>
      </div>
    
      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
      <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
      <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
    
      <script type="text/javascript">//<![CDATA[
        $(document).ready(function(){
        $('.slider_pa').slick({
        dots: true
        });
        });
      //]]></script>
    
      <div id="staff_pa">
        <div class="infobulles_staff staff-1">
          <div class="staff_info">
            <span id="pseudo_pa">Pierre</span>
            <p><a href="#" title="Voir le profil" target="_blank">Profil</a> - <a href="#" title="Envoyer un message" target="_blank">MP</a></p>
          </div>
        </div>
      
        <div class="infobulles_staff staff-2">
          <div class="staff_info">
            <span id="pseudo_pa">Paul</span>
            <p><a href="#" title="Voir le profil" target="_blank">Profil</a> - <a href="#" title="Envoyer un message" target="_blank">MP</a></p>
          </div>
        </div>
      
        <div class="infobulles_staff staff-3">
          <div class="staff_info">
            <span id="pseudo_pa">Jacques</span>
            <p><a href="#" title="Voir le profil" target="_blank">Profil</a> - <a href="#" title="Envoyer un message" target="_blank">MP</a></p>
          </div>
        </div>
      </div>
    
      <div id="top_site_pa">
        <a href="#" target="_blank" title="Nom du top-site"><img src="https://i.imgur.com/eTI35Fv.png" alt="Nom du top-site" /></a>
        <a href="#" target="_blank" title="Nom du top-site"><img src="https://i.imgur.com/eTI35Fv.png" alt="Nom du top-site" /></a>
        <a href="#" target="_blank" title="Nom du top-site"><img src="https://i.imgur.com/eTI35Fv.png" alt="Nom du top-site" /></a>
      </div>
  
    </div>
  </div>

Code:
:root {
  --gradient-top: #69BBDA;
  --gradient-bottom: #499EBE;
  --font-principal: 'DM Serif Display', serif;
  --font-secondaire: 'Fira Sans Condensed', sans-serif;
  --couleur-principale-titre: #000000;
  --couleur-secondaire-titre: #6DB0CA;
  --couleur-texte: #000000;
}

#header_forum {
  background-color: #F1F1F1;
  padding: 50px 0 118px;
  border-radius: 0 0 100% 100%;
}

/* ------- NAVIGATION ------- */
#nav_bar,
#nav_bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19px;
}

#nav_bar a,
#lien_impt a {
  padding: 0 10px;
  padding-top: 2px;
  font-family: var(--font-secondaire);
  text-transform: uppercase;
  color: white;
  background: linear-gradient(var(--gradient-top), var(--gradient-bottom));
  border-radius: 20px;
  margin: 0 15px 0 2px;
  position: relative;
  left: -10px;
  transition: all 0.3s linear;
}

#nav_bar a:hover,
#lien_impt a:hover,
#partenaire_pa a:hover > img {
  box-shadow: 0 0 0 0 #3e464c7a;
  animation: pulse 1.5s infinite;
  -webkit-animation: pulse 1.5s infinite;
}

@-webkit-keyframes pulse {
  70% {
    box-shadow: 0 0 0 4px #3e464c00;
  }

  100% {
    box-shadow: 0 0 0 0 #3e464c00;
  }
}

#nav_bar span > img {
  height: 10px;
  position: relative;
  left: 10px;
  transition: all 0.3s linear;
}

#nav_bar span:hover > img {
  height: 19px;
}

#nav_bar span:hover > a,
#nav_bar span:hover > img {
  left: 0;
}

/* ------- CONTEXTE, TITRE ET ZOZIO ------- */
.item {
  width: 1180px;
  position: relative;
  top: 50px;
  display: grid;
  grid-template-areas: "zozio blabla";
  margin: auto;
}

.item__clippath,
.item__deco,
.item__img {
  transform-origin: 50% 50%;
}

.item__deco {
  fill: #eaeaea;
}

#rond_gris {
  transform: scaleX(0.8) scaleY(0.8) translateX(290px) translateY(320px) rotate(65deg);
  transition: all 0.5s linear;
}

.item:hover #rond_gris {
  transform: scaleX(0.5) scaleY(0.5) translateX(80px) translateY(545px) rotate(0deg);
}

#zozio {
  position: absolute;
  top: 95px;
  left: 235px;
  transition: all 0.7s linear;
}

.item:hover > #zozio {
  left: -10px;
}

#info_global_fo {
  position: relative;
  transition: all 0.7s linear;
  left: 0;
  top: 75px;
  width: 630px;
}

.item:hover > #info_global_fo {
  left: -120px;
}

#forum_title {
  font-family: var(--font-principal);
  font-size: 90px;
  line-height: 92px;
}

#forum_title span {
  display: inline-block;
  transition: all 0.4s cubic-bezier(0.1, 1, 0.3, 1) 0s;
  transform-origin: 50% 100%;
  transform: scaleY(1) scaleX(1);
  color: var(--couleur-principale-titre);
}

#forum_title span:hover {
  transform: scaleX(0.977083) scaleY(1.06875);
  background: -webkit-linear-gradient(var(--gradient-top), var(--gradient-bottom));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#sub_title_fo {
  font-family: var(--font-secondaire);
  font-size: 16px;
  font-style: italic;
  color: var(--couleur-secondaire-titre);
  letter-spacing: 2px;
}

#sub_title_fo::before {
  content: '';
  display: inline-block;
  background-color: var(--couleur-principale-titre);
  height: 1px;
  width: 163px;
  margin: 4px 24px 4px 40px;
  transition: all 0.7s linear;
}

.item:hover > #info_global_fo > #sub_title_fo::before {
  width: 330px;
}

#context_pa {
  font-family: var(--font-secondaire);
  font-size: 10px;
  color: var(--couleur-texte);
  line-height: 12px;
  width: 550px;
  text-align: center;
  margin-top: 20px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s linear 0s;
}

#context_pa a {
  font-family: var(--font-secondaire);
  font-size: 12px;
  font-style: italic;
  font-weight: bold;
  color: var(--couleur-secondaire-titre);
  letter-spacing: 1px;
}

.item:hover > #info_global_fo > #context_pa {
  opacity: 1;
  visibility: visible;
  transition: all 0.3s linear 0.6s;
}

/* ------- PARTENAIRE ET SLIDESHOW ------- */
#sub_header {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  flex-flow: wrap;
  top: -30px;
}

#title_pa {
  background: -webkit-linear-gradient(var(--gradient-top), var(--gradient-bottom));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-principal);
  width: 100%;
  font-size: 18px;
  padding-left: 5px;
}

#partenaire_pa {
  width: 365px;
  display: flex;
  flex-flow: wrap;
  height: 147px;
  justify-content: space-between;
  align-content: space-between;
  position: relative;
  top: 83px;
  left: -50px;
}

#partenaire_pa a {
  padding: 2px;
}

#slider_wrap {
  position: relative;
  left: -20px;
  text-align: center;
}

.slick-slide #title_pa {
  text-align: center;
  font-size: 25px;
  height: 32px;
  line-height: 17px;
}

.slick-prev,
.slick-next {
  width: 20px;
  height: 25px;
  padding: 10px 0 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent;
}

.slick-prev:hover::before,
.slick-prev:focus::before,
.slick-next:hover::before,
.slick-next:focus::before {
  opacity: 1;
}

.slick-prev.slick-disabled::before,
.slick-next.slick-disabled::before {
  opacity: 0.25;
}

.slick-prev::before,
.slick-next::before {
  opacity: 0.75;
}

.slick-prev::before {
  content: url('https://i.imgur.com/qQNtjp0.png');
}

.slick-next::before {
  content: url('https://i.imgur.com/sVmjy7A.png');
}

.slick-dots {
  width: 100%;
  padding: 0 85px;
  margin: 0;
  list-style: none;
  text-align: right;
  height: 0;
  position: relative;
  top: -18px;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  cursor: pointer;
  padding: 1px;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover::before,
.slick-dots li button:focus::before {
  opacity: 1;
  filter: grayscale(0%);
}

.slick-dots li button::before {
  font-size: 30px;
  content: '•';
  opacity: 0.75;
  background: linear-gradient(var(--gradient-top), var(--gradient-bottom));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: all 0.3s linear;
  filter: grayscale(100%);
}

.slick-dots li.slick-active button::before {
  opacity: 1;
  filter: grayscale(0%);
}

.slick-slider {
  width: 450px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-flow: wrap;
}

.slick-list {
  overflow: hidden;
  margin: 0;
  padding: 0;
  background-color: #EDEDED;
  width: 380px;
  height: 200px;
  border-radius: 40px;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-slide {
  display: none;
  float: left;
  height: 170px;
  min-height: 1px;
  padding: 20px 30px 0;
  box-sizing: border-box;
  text-align: justify;
  overflow: hidden;
  font-family: var(--font-secondaire);
  color: var(--couleur-texte);
  font-size: 12px;
  line-height: 15px;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

#lien_impt a {
  margin: 0 3px;
  top: 15px;
  left: 0;
}

/* ------- STAFF ET TOPS ------- */
#staff_pa {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 100%;
  position: relative;
  top: 63px;
}

.infobulles_staff {
  width: 95px;
  height: 95px;
  border-radius: 50%;
  cursor: default;
  box-shadow:
    inset 0 0 0 5px var(--couleur-secondaire-titre),
    0 1px 2px rgba(0, 0, 0, 0.1);
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  background-size: contain;
  margin: 0 10px;
}

.staff-1 {
  background-image: url('https://i.imgur.com/1zh82N9.jpg');
}

.staff-2 {
  background-image: url('https://i.imgur.com/Q6y3PID.jpg');
}

.staff-3 {
  background-image: url('https://i.imgur.com/aYCW4QR.png');
}

.staff_info {
  display: flex;
  flex-flow: wrap;
  justify-content: center;
  align-content: center;
  background-color: #edededb5;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
}

.staff_info #pseudo_pa {
  font-family: var(--font-principal);
  color: var(--couleur-texte);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 17px;
  line-height: 20px;
}

.staff_info p {
  font-family: var(--font-secondaire);
  color: #FFF;
  padding-top: 3px;
  font-style: italic;
  font-size: 10px;
  border-top: 1px solid #F1F1F1;
  opacity: 0;
  -webkit-transition: all 0.6s ease-in-out 0.4s;
  -moz-transition: all 0.6s ease-in-out 0.4s;
  -o-transition: all 0.6s ease-in-out 0.4s;
  -ms-transition: all 0.6s ease-in-out 0.4s;
  transition: all 0.6s ease-in-out 0.4s;
}

.staff_info p a {
  color: var(--couleur-texte);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-style: normal;
  transition: all 0.3s ease-in-out;
}

.staff_info p a:hover {
  color: #FFF;
  text-shadow: 1px 1px 1px #bfbfbf;
}

.infobulles_staff:hover {
  box-shadow:
    inset 0 0 0 0 var(--couleur-secondaire-titre),
    0 1px 2px rgba(0, 0, 0, 0.1);
}

.infobulles_staff:hover .staff_info {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.infobulles_staff:hover .staff_info p {
  opacity: 1;
}

#top_site_pa {
  position: relative;
  top: 102px;
}

#top_site_pa a {
  margin: 0 18px;
  display: inline-block;
}

#top_site_pa a:nth-of-type(2) {
  position: relative;
  top: 20px;
}

Participation 3:
Lien de la maquette
Lien pour voir le code

Code:
<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Concours Epicode</title>
</head>

<body>
    <div><img src="https://zupimages.net/up/20/10/z2k9.png" alt="Header" /></div>
    <div id="PA">
        <!-- ZONE HAUTE -->
        <div id="PAhaut">
            <!-- IMAGES GAUCHE -->
            <div>
                <a href="/"><img src="https://zupimages.net/up/20/10/vw3k.png" alt="Liens top sites" /></a>
                <img src="https://zupimages.net/up/20/10/vg95.png" alt="Decoration" />
            </div>

            <!-- LIENS -->
            <ul>
                <li><a href="/">Login succeded</a></li>
                <li><a href="/">Updates</a></li>
                <li><a href="/">Ranked #1</a></li>
                <li><a href="/">Recruitement</a></li>
            </ul>

            <!-- CONTEXTE -->
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas, sint magnam. Commodi omnis qui
                recusandae dolorem molestiae fugiat, architecto veritatis nesciunt non optio consequatur ipsam corrupti
                itaque? Repellat, ad harum.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae obcaecati aperiam, facilis quam
                deserunt
                dignissimos consectetur expedita magni quia repudiandae architecto, veniam temporibus in nulla eum sed
                error
                unde cumque.
                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda, illo quia? Ullam alias itaque
                similique
            </p>

            <!-- IMAGES DROITES -->
            <div>
                <img src="https://zupimages.net/up/20/10/qzux.png" alt="Decoration" />
                <img src="https://zupimages.net/up/20/10/tsgi.png" alt="Decoration" />
            </div>
        </div>

        <!-- ZONE BASSE -->
        <div id="PAbas">
            <!-- STAFF -->
            <div>
                <h3>Agents <br />de contrôle</h3>

                <a href="/"><img src="https://zupimages.net/up/20/10/5410.png" alt="Pseudo" /></a>
                <a href="/"><img src="https://zupimages.net/up/20/10/5410.png" alt="Pseudo" /></a>
                <a href="/"><img src="https://zupimages.net/up/20/10/5410.png" alt="Pseudo" /></a>
                <a href="/"><img src="https://zupimages.net/up/20/10/5410.png" alt="Pseudo" /></a>
            </div>

            <!-- GLOBE -->
            <div>
                <h1>Target information :</h1>

                <div>
                    <img src="https://zupimages.net/up/20/10/b9ii.png" alt="Contour" />
                    <img src="https://zupimages.net/up/20/10/98mk.png" alt="Contour" />
                    <img src="https://zupimages.net/up/20/10/iazk.png" alt="Globe" />
                </div>

                <h2>Searching safe zone : Epicode</h2>
            </div>

            <!-- PARTENAIRES -->
            <div>
                <h3>Partenaires <br />de mission</h3>

                <div>
                    <a href="/" target="_blank"><img src="https://zupimages.net/up/20/10/z328.jpg"
                            alt="Partenaire" /></a>
                    <a href="/" target="_blank"><img src="https://zupimages.net/up/20/10/z328.jpg"
                            alt="Partenaire" /></a>
                    <a href="/" target="_blank"><img src="https://zupimages.net/up/20/10/z328.jpg"
                            alt="Partenaire" /></a>
                    <a href="/" target="_blank"><img src="https://zupimages.net/up/20/10/z328.jpg"
                            alt="Partenaire" /></a>
                    <a href="/" target="_blank"><img src="https://zupimages.net/up/20/10/z328.jpg"
                            alt="Partenaire" /></a>
                    <a href="/" target="_blank"><img src="https://zupimages.net/up/20/10/z328.jpg"
                            alt="Partenaire" /></a>
                    <a href="/" target="_blank"><img src="https://zupimages.net/up/20/10/z328.jpg"
                            alt="Partenaire" /></a>
                    <a href="/" target="_blank"><img src="https://zupimages.net/up/20/10/z328.jpg"
                            alt="Partenaire" /></a>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Code:
/******* PA *******/
/* Partos  */
@font-face {
    font-family: 'Futurist Fixed-width';
    src: url('https://dl.dropbox.com/s/fkyvhdz60z1f3wy/FuturistFixedWidthRegular.woff2?dl=0') format('woff2'),
        url('https://dl.dropbox.com/s/c4rktfeus1eplbc/FuturistFixedWidthRegular.woff?dl=0') format('woff');
    font-weight: 100;
    font-style: normal;
}

/* Target info  */
@font-face {
    font-family: 'Smile and Wave';
    src: url('https://dl.dropbox.com/s/8vw7xekvw0qaaac/SmileandWave.woff2?dl=0') format('woff2'),
        url('https://dl.dropbox.com/s/595280ez9bok9x7/SmileandWave.woff?dl=0') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Cadre sous bannière */
@import url(http://fr.allfont.net/allfont.css?fonts=franklin-gothic-demi);
/* font-family  : 'Franklin Gothic Demi', arial; */


/* Aspect général */
body,
#PA {
    margin: auto;
    background: #0F4D67;
    /* Couleur de fond */
}

body>div:first-of-type {
    text-align: center;
    margin-bottom: 10px;
}

#PA {
    width: 1000px;
    font-size: 15px;
    text-transform: uppercase;
}

/* Retire les styles du navigateur */
#PA * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

/* Zone haute */
#PAhaut {
    display: flex;
    height: 275px;
    justify-content: space-around;
}

/* Images gauches */
#PAhaut>:first-child {
    height: 80%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: flex-end;
}

/* Liens utiles */
#PAhaut>:nth-child(2) {
    font-family: 'Smile and Wave', arial;
    /* Typo */
    width: 185px;
    height: 85%;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;
    letter-spacing: 1px;
}

#PAhaut>:nth-child(2) li,
#PAhaut>:nth-child(2) li a {
    color: #64EBF7;
    /* Couleur liens */
    position: relative;
    z-index: 3;
    padding: 5px;
}

#PAhaut>:nth-child(2) li:before {
    content: "";
    position: absolute;
    background: #296B75;
    /* Fond des liens */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    -webkit-clip-path: polygon(82% 0, 100% 45%, 100% 100%, 18% 100%, 0 45%, 0 0);
    clip-path: polygon(82% 0, 100% 45%, 100% 100%, 18% 100%, 0 45%, 0 0);
}

#PAhaut>:nth-child(2) li:after {
    content: "";
    position: absolute;
    background: #F1F4F6;
    /* Contour des liens */
    top: -1px;
    left: -3px;
    width: 103%;
    height: 109%;
    -webkit-clip-path: polygon(82% 0, 100% 45%, 100% 100%, 18% 100%, 0 45%, 0 0);
    clip-path: polygon(82% 0, 100% 45%, 100% 100%, 18% 100%, 0 45%, 0 0);
}

/* Contexte */
#PAhaut>:nth-child(3) {
    background: #2B6276;
    /* Fond contexte */
    color: #6C949A;
    /* Couleur txt */
    font-family: 'Franklin Gothic Demi', arial;
    /* Typo*/
    width: 370px;
    font-variant: small-caps;
    text-transform: initial;
    font-size: 13px;
    align-self: center;
    padding: 20px 10px;
    font-weight: bold;
    text-align: center;
    position: relative;
}

#PAhaut>:nth-child(3):before {
    content: "";
    position: absolute;
    height: 100%;
    width: 5px;
    top: 0;
    left: -16px;
    background: rgb(2, 0, 36);
    background: -moz-linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(101, 142, 150, 1) 50%, rgba(0, 212, 255, 0) 100%);
    background: -webkit-linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(101, 142, 150, 1) 50%, rgba(0, 212, 255, 0) 100%);
    background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, rgba(101, 142, 150, 1) 50%, rgba(0, 212, 255, 0) 100%);
    /* Barre entre liens & contexte */
}

/* Images droites */
#PAhaut>:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#PAhaut>:last-child>img:last-child {
    object-fit: contain;
}

/* Zone basse */
#PAbas {
    height: 600px;
    display: flex;
    justify-content: space-evenly;
}

/* Agents & Partenaires */
#PAbas h3 {
    font-family: 'Futurist Fixed-width';
    /* Typo */
    background: #366A7F;
    /* Fond */
    color: white;
    /* Couleur texte */
    text-align: center;
    font-size: 13px;
    padding: 10px 28px;
    font-weight: lighter;
}

/* Staff */
#PAbas>:first-child {
    /* width          : 20%; */
    height: 88%;
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

#PAbas>:first-child a {
    position: relative;
    z-index: 2;
}

#PAbas>:first-child a img {
    transition: all .5s linear;
}

#PAbas>:first-child a:hover img {
    filter: hue-rotate(80deg) invert(20%) grayscale(0.5);
}

/* Cadre */
#PAbas>:first-child a:before {
    content: "";
    background: url('https://zupimages.net/up/20/10/5bv0.png') no-repeat;
    position: absolute;
    top: -4px;
    left: -4px;
    width: 110%;
    height: 110%;
    z-index: 5;
}

/* Zone centrale */
#PAbas>:nth-child(2) {
    font-family: 'Smile and Wave';
    /* Typo */
    color: white;
    /* Couleur fond */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    position: relative;
    width: 55%;
    letter-spacing: 1px;
}

/* Bandes */
#PAbas>:nth-child(2):before,
#PAbas>:nth-child(2):after {
    content: "";
    position: absolute;
    width: 7%;
    height: 86%;
    top: 8%;
}

#PAbas>:nth-child(2):before {
    background: url('https://zupimages.net/up/20/10/jlpa.png') round;
    /* left      : 0; */
}

#PAbas>:nth-child(2):after {
    background: url('https://zupimages.net/up/20/10/5kvk.png') round;
    right: 0;
}

/* Les... euh... traits... */
#PAbas>:nth-child(2)>div:before {
    content: "";
    background: url('https://zupimages.net/up/20/10/y5nf.png') no-repeat;
    width: 250px;
    height: 50px;
    position: absolute;
    top: -75px;
    left: -45px;
}

#PAbas>:nth-child(2)>h2:after {
    content: "";
    background: url('https://zupimages.net/up/20/10/t3gd.png') no-repeat;
    width: 250px;
    height: 50px;
    position: absolute;
    bottom: -8px;
    right: -88px;
}

/* Globe */
#PAbas>:nth-child(2)>div {
    position: absolute;
    top: 21%;
    left: 16%;
}

#PAbas>:nth-child(2)>div img {
    position: absolute;
}

#PAbas>:nth-child(2)>h2 {
    position: relative;
    margin-bottom: 35px;
    width: 85%;
    font-size: 21px;
}

#PAbas>:nth-child(2)>div img:first-of-type {
    width: 423px;
    top: -20px;
    left: -20px;
    -webkit-animation: rotating 33s linear infinite;
}

#PAbas>:nth-child(2)>div img:nth-of-type(2) {
    width: 415px;
    left: -15px;
    top: -17px;
    -webkit-animation: rotating2 25s ease infinite;
}

#PAbas>:nth-child(2)>div img:last-of-type {
    opacity: 0.9;
}

/* Partos */
#PAbas>:last-child {
    /* width    : 20%; */
    height: 88%;
    align-self: center;
}

#PAbas>:last-child div {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
    margin-left: 20px;
    width: 80%;
}

#PAbas>:last-child>div a:nth-child(odd) {
    align-self: flex-end;
}

#PAbas>:last-child a {
    position: relative;
}

#PAbas>:last-child a:before {
    content: "";
    background: url('https://zupimages.net/up/20/08/cj14.png') no-repeat;
    /* Img fond partos */
    position: absolute;
    top: -13px;
    left: -13px;
    width: 79px;
    height: 79px;
    transition: all 7s linear;
}

#PAbas>:last-child a:hover:before {
    transform: rotate(360deg);

}

#PAbas>:last-child a img {
    border-radius: 50%;
    width: 55px;
    height: 55px;
}

@-webkit-keyframes rotating {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes rotating2 {
    from {
        -webkit-transform: rotate(360deg);
    }
}
/******* FIN PA *******/

Naütilus.
Date d'inscription : 03/03/2015
Messages : 7559

Livvybe
Admin et maxi-graphiste - Maîtresse des pingouins

http://half-god-rpg.forums-actifs.net
Je ne peux pas voter parce que j'ai participé mais je tiens quand même à dire que vos créas sont trop cool !!! Voilà, je repars. Félicitations tout le monde Votes Code n°11 1058202338 Votes Code n°11 1058202338 Votes Code n°11 1058202338
Livvybe
Date d'inscription : 31/03/2012
Messages : 5248


Artemis
Modo et codeuse

http://hakumei.forumactif.org/
Tout est vraiment magnifique, bravo à tous les participants ! Pour une fois que je ne participe pas au concours de code, je peux m'en donner à coeur joie pour commenter les vôtres Votes Code n°11 885843852

Participation 1.
Esthétique du rendu : 3/5
Respect de la maquette : 4/5
Originalité : 2/5
(facultatif) Propreté du code : 3/5  Dans l'ensemble, je trouve le code plutôt propre. Je déplore l'absence de balises sémantiques, mais ça, c'est surtout parce que je suis une maniaque  Miam J'ai vu passer un gros margin, cépabien attention, mais sinon je n'ai pas grand-chose à redire. c:
(facultatif) Un petit commentaire : J'ai mis 2 pour l'originalité car c'est une en-tête "classique", si j'ose dire, mais je trouve la bannière absolument sublime. Votes Code n°11 3488708190

Participation 2.
Esthétique du rendu : 4/5
Respect de la maquette : 5/5
Originalité : 3/5
(facultatif) Propreté du code : 4/5  Commentaire non-pertinent tout en sachant que je n'ai aucune idée de ce que signifient les "data-animation" et autres curiosités en Js, mais y'a du root, du flex, du grid - c'est cool 8D Je veux bien épouser le codeur parce que les effets sont du bonbon pour les yeux.  Votes Code n°11 3488708190 A quand un tuto pour faire les hovers TROP GENIAUX sur les top sites ?? kjhgfjdk
(facultatif) Un petit commentaire : J'aime beaucoup cette participation ! Même si la maquette reste classique (ne vous méprenez pas, le sobre c'est tout ce que j'aime), les effets apportent une grosse touche d'originalité  Votes Code n°11 885843852

Participation 3.
Esthétique du rendu : 4/5
Respect de la maquette : 5/5
Originalité : 5/5
(facultatif) Propreté du code : 5/5 DES BALISES SÉMANTIQUES ! J'aime lire un HTML où je sais d'un coup d’œil quel élément correspond à quoi. ♥
(facultatif) Un petit commentaire : Ma participation préférée du concours ! C'est hyper original, j'adore l'ambiance de votre en-tête, on voit tout de suite dans quel genre d'univers on vient d'atterrir Votes Code n°11 3972358593 Franchement ça mérite d'être élargit en index complet Votes Code n°11 3972358593 Votes Code n°11 3972358593 Votes Code n°11 3972358593 Votes Code n°11 3972358593 Votes Code n°11 3972358593 Votes Code n°11 3972358593 Votes Code n°11 3972358593
Artemis
Date d'inscription : 14/01/2017
Messages : 2508


Votes Code n°11 OKHL2aD

Votes Code n°11 Eoml

Votes Code n°11 JuJldVD
♥️ Merci Aed, Azumii et Sunhae ♥️

Nataku
Anim et mini-graphiste

Mais les maquettes et les codes sont tellement beau ! OMG ! Votes Code n°11 3775839356
Bravo à tous les participants !

CODE 1 :
Esthétique du rendu : 4/5
Respect de la maquette : 5/5
Originalité : 2/5

(facultatif) Propreté du code :  commentaire pour ceux qui s'y connaissent le plus !

(facultatif) Un petit commentaire : Je trouve que la PA est très jolie après ça reste une PA assez "classique" je dirais, assez répandu. Mais ça ne change rien à la beauté de l'ensemble !  Votes Code n°11 2691722282

CODE 2 :
Esthétique du rendu : 5/5
Respect de la maquette : 5/5
Originalité : 4/5

(facultatif) Propreté du code :  commentaire pour ceux qui s'y connaissent le plus !

(facultatif) Un petit commentaire : Je suis fan ! Fan fan fan !  Votes Code n°11 3775839356

CODE 3 :
Esthétique du rendu : 5/5
Respect de la maquette : 5/5
Originalité : 5/5

(facultatif) Propreté du code :  commentaire pour ceux qui s'y connaissent le plus !

(facultatif) Un petit commentaire : Cette participation est juste ... Wahou. J'adore, c'ma participation préférée même si j'hésite beaucoup avec la seconde participation. Lovely
Nataku
Date d'inscription : 29/11/2018
Messages : 960


Votes Code n°11 QlwWl

Votes Code n°11 W1ulfwm

Votes Code n°11 4ny2

Sygea
Accro au forum

https://sygea.deviantart.com/
Esthétique du rendu : 5/5
Respect de la maquette : 4/5
Originalité : 4/5

(facultatif) Un petit commentaire : Mémé est swagg, l'ensemble fait un très joli début d'index goth/baroque là et la PA est compacte aussi avec les informations habituelles sans en faire trop ! C'est dommage d'avoir oublié de mettre le lien des polices non ? A moins que ça soit juste mon navigateur qui veut pas les afficher mais je vois du times new, alors que Century Gothic est bien dans le code o3o Je trouve que les polices de la maquette faisaient aussi beaucoup de l'esthétique et aussi de la lisibilité, un police en sérif avec un line-height un peu faible et une petite taille comme ça mon cerveau il guehguehgueh <: Le fait qu'il n'y est pas de hover me gêne absolument pas, les informations sont directement accessibles et on gagne du temps, pas de complexe à avoir o/ Bravo !


Esthétique du rendu : 5/5
Respect de la maquette : 5/5
Originalité : 4/5

(facultatif) Un petit commentaire : En fait ce qui fait l'originalité du code ce sont surtout les hovers qui sont très dynamiques et variés, sans pour autant cacher d'informations importantes o/ La navigation est facile et les hover sont pas frustrants non plus, DIEU MERCI. Bref un vrai design minimaliste qui fait du bien à ma rétine c:  Bravo aussi ! c:


Esthétique du rendu : 4/5
Respect de la maquette : 5/5
Originalité : 5/5

(facultatif) Un petit commentaire : La bannière tue ! J'aime beaucoup l'ensemble esthétiquement en tout cas c: J'ai quand même quelques regrets du genre la hauteur de la PA pour peu d'informations finalement, et l'espace central avec la target qui tourne prend énormément de place sans être exploité pour autant, il n'apporte pas d'informations (et j'ai cliqué partout en essayant de target un truc justement pour voir si ça allait s'afficher et tout jme suis faite avoir ;o; ). Pareil les images en bas à gauche on comprend que ce sont les staffiens j'imagine, mais pas de pseudo même en infobulle ce qui multiplie le nombre de clics et augmente le temps de recherche d'une information ;;
Je savais pas comment faire refléter tout ça dans les "notes" donc ça vous pénalise pas, mais en tout cas pour moi le point noir c'est l'ergonomie et le fait que ce design mériterait vraiment d'être poussé plus loin ! Ca n'enlève rien à votre très beau travail en tout cas, bravo !
Sygea
Date d'inscription : 04/04/2016
Messages : 1348


ea5g5.png

Hanyo Yurikin
Membre timide

https://boutiquedecode.forumsrpg.com/
Ah OMG!!! tout est trop beau  Panique   Sad  Sick

  1ère maquette
   Esthétique du rendu :  5/5
   Respect de la maquette : 5/5
   Originalité : 5/5
   (facultatif) Propreté du code :
   (facultatif) Un petit commentaire : j'adore  plz

  2ère maquette
   Esthétique du rendu :  5/5
   Respect de la maquette : 5/5
   Originalité : 5/5
       (facultatif) Propreté du code :
   (facultatif) Un petit commentaire : superbe  plz

   3ème maquette
   Esthétique du rendu :  5/5
   Respect de la maquette : 5/5
   Originalité : 5/5
       (facultatif) Propreté du code :
   (facultatif) Un petit commentaire : magnifique  Panique

Alors je n'ai pas su choisir, car j'ai tout aimé, et si je n'ai pas fait de commentaires, c'est que je suis restée scotcher par tout ça Lovely et pour les codes je ne me sens pas encore capable de donner un avis Sad Salut
Hanyo Yurikin
Date d'inscription : 30/07/2018
Messages : 220

kooerry
Membre timide

http://loonatheworld.com/
Hello je viens rajouter mon grain de sable!

1ère maquette
Esthétique du rendu : 3,5/5
Respect de la maquette : 5/5
Originalité : 4/5

(facultatif) Un petit commentaire : C'est simple avec peu d'effet mais je trouve que le tout rend très bien avec le header!

2e maquette
Esthétique du rendu : 5/5
Respect de la maquette : 4/5
Originalité : 5/5

(facultatif) Un petit commentaire : Les petits effets n'étaient pas sur la maquette mais je trouve que ça donne encore plus de dynamisme et que c'est très bien trouvé, je suis absolument fan!

3e maquette
Esthétique du rendu : 3/5
Respect de la maquette : 5/5
Originalité : 4/5

(facultatif) Un petit commentaire : Je trouve que la page s'étale trop sur la hauteur, malgré tout l'originalité est bien présente et je trouve ça bien trouvé (les petits effets sur les partos et le globe, j'aime beaucoup) !
kooerry
Date d'inscription : 18/01/2015
Messages : 106

Avilyssia
Newbie

Allez, je viens donner ma participation ! <3

Proposition 1 :

Esthétique du rendu : 3/5
Respect de la maquette : 4/5
Originalité : 3/5

(facultatif) Propreté du code : commentaire pour ceux qui s'y connaissent le plus !
(facultatif) Un petit commentaire : Votes Code n°11 2702986051

Proposition 2 :
Esthétique du rendu : 4/5
Respect de la maquette : 5/5
Originalité : 3/5
(facultatif) Propreté du code : commentaire pour ceux qui s'y connaissent le plus !
(facultatif) Un petit commentaire : J'aime beaucoup les oiseaux !

Proposition 3:
Esthétique du rendu : 5/5
Respect de la maquette : 5/5
Originalité : 5/5

(facultatif) Propreté du code : commentaire pour ceux qui s'y connaissent le plus !

(facultatif) Un petit commentaire : 8)

Et voilà ! :3
Avilyssia
Date d'inscription : 18/02/2020
Messages : 22

Naütilus.
20 000 lieux sous les codes

http://aelke-rpg.forumactif.com/
Merci pour les votes !!
C'est du coudes à coudes ;)
Naütilus.
Date d'inscription : 03/03/2015
Messages : 7559

Colinette
Newbie

Aller je viens donner un avis pas du tout constructif !

n°1
Esthétique du rendu : 3/5
Respect de la maquette : 4/5
Originalité : 3/5

(facultatif) Propreté du code :  commentaire pour ceux qui s'y connaissent le plus !


(facultatif) Un petit commentaire : j'aime beaucoup la simplicité, c'est un rendu efficace, lisible et tout aussi beau dans cette simplicité ! Votes Code n°11 665834366 Votes Code n°11 665834366

N°2 :
Esthétique du rendu : 4/5
Respect de la maquette : 5/5
Originalité : 4/5

(facultatif) Propreté du code :  commentaire pour ceux qui s'y connaissent le plus !

(facultatif) Un petit commentaire : Okay je suis assez fan des oiseaux, des couleurs et de la douceur du rendu, c'est vraimnt joli et les effets sont super sympa (bon si on sais qu'ils sont la ! :P )

N°3
Esthétique du rendu : 4/5
Respect de la maquette : 4/5
Originalité :5 /5

(facultatif) Propreté du code :  commentaire pour ceux qui s'y connaissent le plus !

(facultatif) Un petit commentaire : okay, j'avais jamais vu ce genre de code, c'est... Lunaire. Clairement ca s'adapte à tellement de SF et futurisme, je suis assre impressionnée du travail accompli...


Dans tous les cas bravo à tout le monde <3 vous avez fait des merveilles Votes Code n°11 2691722282 Votes Code n°11 2691722282
Colinette
Date d'inscription : 28/02/2020
Messages : 35

Naütilus.
20 000 lieux sous les codes

http://aelke-rpg.forumactif.com/
Moi aussi je vote ! Parce que moi aussi j'ai le droit !! :p

Participation 1
Esthétique du rendu : 3/5
Respect de la maquette : 4/5
Originalité : 4/5

(facultatif) Un petit commentaire : Alors pour le rendu, je trouve ça vachement sombre même si c'est un beau début de design, ça me touche moins :/ Je trouve aussi que c'est très sombre et j'ai un peu du mal haha Cela dit on capte rapidement le thème du forum sur lequel on arrive et il faut le dire c'est un thème originale ! Juste dommage que en terme de placement cela reste vachement "forum de base".


Participation 2
Esthétique du rendu : 5/5
Respect de la maquette : 5/5
Originalité : 5/5

(facultatif) Un petit commentaire : I love blue you know ?!
Non sinon j'aime beaucoup comment c'est fait, les effets de codes rendent bien et mettent totalement en valeur le graph ! C'est une bonne collaboration et je trouve que ça marche parfaitement ! Bon j'ai juste un peu de mal à discerner un thème franc qui s'échappe du code mais l'ensemble est harmonieux et rafraîchit pas mal les design actuels ! J'approuve !


Participation 3
Esthétique du rendu : 5/5
Respect de la maquette : 5/5
Originalité : 5/5

(facultatif) Un petit commentaire : Pas grand chose à dire, c'est juste génial ! On a le thème SF direct, le design casse complètement le code des forums actuels et aussi les effets rendent hommage au graphiste. En d'autre terme très belle collaboration **



Je vous remercie grandement d'avoir participé au concours et d'avoir mis autant d'énergie et de temps dans ce travail Votes Code n°11 3775839356
Naütilus.
Date d'inscription : 03/03/2015
Messages : 7559

Shigurai
C'est dur de plus être conseiller

Participation 1
Esthétique du rendu : 4/5
Respect de la maquette : 5/5
Originalité : 3.5/5

(facultatif) Un petit commentaire : J'aime beaucoup l'ambiance globale ! Je trouve un peu dommage que le gif baisse la qualité de la bannière, et en même temps le gif apporte un petit plus non négligeable Votes Code n°11 514879035. En tous cas, je pense qu'une maquette dans la continuation de ce thème pourrait rendre très bien, bravo à vous deux ! Votes Code n°11 3775839356


Participation 2
Esthétique du rendu : 5/5
Respect de la maquette : 5/5
Originalité : 5/5

(facultatif) Un petit commentaire : J'ai pas les mots pour dire à quel point cette participation est ma préférée. Je me suis trop amusé à explorer toutes les petites particularités du code, les différents hovers, le fait que l'on puisse "slider" les nouveautés comme sur un écran tactile, la déformation de la bannière... Combiné aux couleurs et à l'ambiance super soft que donne le tout, ça donne un design à la fois posé et impressionnant. Voilà, je pourrais m'étendre plus longtemps encore mais je pense que le message est passé


Participation 3
Esthétique du rendu : 3.5/5
Respect de la maquette : 5/5
Originalité : 4/5

(facultatif) Un petit commentaire : Je pense que ce thème a beaucoup de potentiel ! Selon moi, seulement, il y a beaucoup de choses qui sont là "juste comme ça". Des images qui sont posées là pour l'esthétique mais qui ne servent en fin de compte à rien dans le thème. Certes, ça ajoute de l'ambiance, mais je dois avouer avoir été un peu déçu en essayant de cliquer partout et en voyant que peu de choses étaient en fait cliquable. Je comprend aussi que, vu la complexité de la maquette, tout coder de manière originale aurait été très compliqué (et vu que je sais pas coder bah voilà quoi). Gros big-up au poti gif qui tourne et au hover des "partenaires de mission" (même si je ne sais pas trop ce que c'est), qui donnent un peu de vie au tout malgré tout !

Encore bravo à tout le monde, ça devait être beaucoup de travail et le défi est en tous cas bien réussi pour tout le monde Votes Code n°11 3775839356
Shigurai
Date d'inscription : 25/06/2018
Messages : 763

Shaneliae
Newbie

http://www.epicode-entraide.com/t16353-galerie-de-shane#329801

Participation 1

Esthétique du rendu : 3/5
Respect de la maquette : 4/5
Originalité : 3/5

(facultatif) Propreté du code :  Le CSS dans le template, je suis pas fan. Il aurait fallu séparer les deux pour commencer. Le span.newstxt pour chaque ligne de news aurait pu être évité et utiliser un ul/li ou des p et ensuite cibler en CSS. Le seul reproche que je peux faire c'est la sur-utilisation de class à certains endroits où il aurait été possible d'en enlever. Sinon le code reste propre, il faudrait juste un peu plus de de balises sémantiques au niveau du HTML. AU niveau du CSS, attention à ne pas abuser des margin négatifs et quand il y a des grosses valeurs, il faut penser à faire autrement. Un bon point avec l'utilisation de flex ♥

(facultatif) Un petit commentaire : C'est un bon début de thème ! Je trouve que cela va bien pour une thème RPG très sombre, type dark-fantasy. La maquette a été plutôt bien respecté, mais je trouve les tailles et les proportions moins respecté. La PA rend toute riquiqui par rapport à la maquette, et il faut se mettre des lunettes en plus de cela ! Il aurait peut-être fallu adapter un peu de ce côté là. Je trouve également dommage que le header soit aussi flou en raison du gif. Il aurait peut être fallu voir pour donner ce rendu autrement ou séparer les deux. Et puis, cacher la partie non codée aurait été un petit plus 😉

Participation 2

Esthétique du rendu : 5/5
Respect de la maquette : 4,5/5
Originalité : 4/5

(facultatif) Propreté du code : Au niveau du HTML ça manque un peu de balises sémantiques mais je salue l'utilisation du SVG ! En plus de ça, les alt et title sont remplis et c'est un super point niveau accessibilité ! Attention aux ID par contre, j'en ai vu qui sont utilisés plusieurs fois. Pour le CSS, j'ai envie de dire chapeau ! Du flex, du gris, des variables, on essaye d'être compatibles sur un maximum de navigateurs, on a un maximum d'animations faites en CSS, vraiment bravo ! Attention toutefois à la compatibilité de grid, mais sinon c'est génial !

(facultatif) Un petit commentaire : Une maquette qui change un peu tout en restant simple. C'est mon coup de coeur au niveau esthétique. J'aime beaucoup les petits effets et animations, il y a eu un vrai travail là dessus et c'est super bon point. Un bon respect de la maquette mais je n'ai pas mit tous les points à cause du rond bleu qui n'est pas un rond et parce qu'il aurait fallu changer le fond du forum (en blanc plutôt que gris) et cacher ce qui n'a pas été codé. Attention aussi aux textes longs écrits en 10px ! Le résumé sous le header en 10px, il faut des lunettes pour le lire ! Je note aussi que le rendu tente de s'adapter à la taille de l'écran, même si ce n'était pas forcément voulu cela prouve que flex et gris ont été bien utilisés.

Participation 3

Esthétique du rendu : 4/5
Respect de la maquette : 5/5
Originalité : 5/5

(facultatif) Propreté du code : HTML au top ! Il y a des balises sémantiques et les alt des images sont remplis. Que dire de plus ? Même W3C valide ton HTML !
Pour le CSS, on commence par un font-face, et ça déjà ça me plait beaucoup. Il y a aussi du flex et le code est propre et commenté. Un super travail ! Il y a même des pourcentages pour les tailles plutôt que des pixels. Seuls quelques valeurs top/bottom ou left/right un peu élevées viennent tacher ce travail.

(facultatif) Un petit commentaire : Une maquette sympa et remportant le prix de l'originalité. Même si ce n'est pas mon style, je salue le travail graphique. On a un respect de la maquette au top et des petites animations et des effets sympa ! Petite note : le cercle animé central se décale un peu quand il tourne, je pense que le point de rotation n'est pas tout à fait juste 😉
Un bonus pour moi : tu as caché ce qui n'est pas codé ! Un vrai bon point ! Manquerait plus que le logo "Epicode" soit fait avec du texte plutôt qu'en image est ça aurait été parfait.

Pour terminer, bravo à ces 3 participations, votre boulot est génial aussi bien pour les graphistes que les codeurs a été génial ! Votes Code n°11 2691722282
Shaneliae
Date d'inscription : 16/03/2020
Messages : 29

Naütilus.
20 000 lieux sous les codes

http://aelke-rpg.forumactif.com/
Résultats
Une collaboration sans faille !
C'est l'heure du verdict !


Bonjour ! Bonsoir !  Votes Code n°11 1066248963

Les votes sont clos, je passe donc à l'annonce des résultats  Votes Code n°11 3775839356
Je tiens encore une fois à remercier nos membres d'avoir participé et d'avoir donné un tel rendu !  Lovely Il faut dire que les créations sont toutes trois magnifiques et montres à quel point vous êtes talentueux/se  plz

Maintenant trêve de bavardage, c'est parti !  Ordi
Pour le rendu, c'est @livvybe et @Sunhae qui l'emportent avec 48 points !
Pour ce qui est de l'originalité ainsi que le respect de la maquette, avec 48 et 49 points c'est @Sieben et @Azumii qui l'emportent ! Mais attention, il faut le savoir @livvybe et @Sunhae ont obtenu 48,5 points pour le respect de la maquette.  Dance 3

Les votes sont serrés et ça montre bien le talent de nos super membres  Super héro

A la troisième place, j'appelle @Aed au graphisme et @Pizi au code, avec 117 points au total Câlin 2  Félicitation ! L'ambiance de votre création été juste sublime !!  Vous repartez avec 25PC.
Participation 1:

A la deuxième place ! Avec un total de 142,5 points, @Sunhae au code et @livvybe au graphisme  Câlin 3  Félicitation aussi ! Les effets de codes sont géniaux ! Voilà 35PC pour vous.
Participation 2:

Et donc à la première place avec 144,5 points ! @Sieben au code et @Azumii au graphisme  Coeur 2
Célébration Félicitation !!!
Participation 3:

Vous remportez donc le badge de code n°11 ainsi que 50PC !
Et un affichage de votre forum sur la PA  Coeur 3


Merci encore d'avoir participé ! Merci à tous nos voteurs aussi !
N'hésitez pas à venir dire ce que vous pensez des COTMs et ce qui vous donne envie !!

On se retrouve très vite pour la photo  Votes Code n°11 2702564696

Naütilus.
Date d'inscription : 03/03/2015
Messages : 7559

Artemis
Modo et codeuse

http://hakumei.forumactif.org/
Félicitations à tous les participants ! C'était vraiment du bonbon pour les mirettes Votes Code n°11 3488708190
Artemis
Date d'inscription : 14/01/2017
Messages : 2508


Votes Code n°11 OKHL2aD

Votes Code n°11 Eoml

Votes Code n°11 JuJldVD
♥️ Merci Aed, Azumii et Sunhae ♥️

Sieben
Maxi-code master

http://transmetropolitan.forumactif.com/
Merci beaucouuuuuuuuuuuuuup Votes Code n°11 3775839356 Votes Code n°11 665834366 Lovely Panique

C'était un super concours à faire, et félicitations aux autres participants la concurrence était rude, j'adore vos participations Polochon
Sieben
Date d'inscription : 19/07/2018
Messages : 153

Livvybe
Admin et maxi-graphiste - Maîtresse des pingouins

http://half-god-rpg.forums-actifs.net
Bravo tout le monde c'était canooooooooooon
Livvybe
Date d'inscription : 31/03/2012
Messages : 5248


Azumii
Graphiste

http://wooruru.forumactif.com/
AH! J'avais testé d'envoyer un message avec mon tel, mais je vois que ça n'a pas marché...
Donc, je disais donc, bravo à tous les participants ! Merci aux votant et super contente d'obtenir la première place avec mon super acolyte ! Votes Code n°11 1066248963 Votes Code n°11 1066248963 Votes Code n°11 1066248963
Azumii
Date d'inscription : 09/01/2014
Messages : 785


MERCI SHERLOCK, SYGEA, ARTEMIS & YOZORA ! Votes Code n°11 2130634661

" CE MONDE M'ÉTRANGLE, M'ÉCRASE ET ME BRÛLE. ME DÉTRUIT, M'EMPÊCHE DE VIVRE DANS MA BULLE [LOÏC NOTTET] "
Azumii

Pizi
Ancien.ne du staff

http://esteria.forumactif.com
Bravo aux gagnants Votes Code n°11 1066248963 Votes Code n°11 1066248963
Je suis contente de ne pas avoir démérité pour mon premier concours de codage Votes Code n°11 3775839356
Merci à @AED d’avoir bien voulu faire équipe avec moi Votes Code n°11 3775839356

J’aurais juste une petite question : c’est quoi les balises sémantiques?
Pizi
Date d'inscription : 06/07/2018
Messages : 369

Sieben
Maxi-code master

http://transmetropolitan.forumactif.com/
Hey @Pizi ! Les balises sémantiques c'est un peu la grammaire du code :3
Avoir des <*h1> pour définir le titre principal, des <*p> pour les paragraphes etc... Ca va permettre de savoir quel type de champ on est censé renseigner et éviter les display: block; ou display: inline; puisque chacune de ces balises a déjà son propre display. (<*div> et <*p> vont être des block, <*span> des inlines...).
Ca va aussi être utiliser les balises <*ul><*li> ou <*ol><*li> pour les listes etc...

Tu peux retrouver un petit tutoriel Epicode dessus ici ou  par exemple.
Sieben
Date d'inscription : 19/07/2018
Messages : 153

Pizi
Ancien.ne du staff

http://esteria.forumactif.com
Ah je comprends mieux du coup !

Merci beaucoup @Sieben Votes Code n°11 3775839356
Pizi
Date d'inscription : 06/07/2018
Messages : 369

Contenu sponsorisé


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum