epicode
Epicode, c'est sept ans d'entraide dans la création de forums. Vous y trouverez une gamme complète de libre-service, allant du simple avatar jusqu'à l'index codé intégralement. Venez fouiller pour trouver votre bonheur ! Si jamais vous n'y parvenez pas, vous pourrez toujours commander ! Nos graphistes et codeurs sont là pour vous, pour répondre à vos demandes et vous aider dans la conception de vos forums.

Epicode, c'est une offre complète allant jusqu'au conseil sur forum. Envie d'avis sur votre contexte, d'une relecture ? Nos conseillers se feront une joie de vous aider dans ces tâches difficiles, vous permettant d'avoir un forum parfait jusqu'à la virgule près.

Pour finir, Epicode c'est aussi des animations, des jeux, des concours, des défis, avec des animateurs haut en couleurs prêt à vous embarquer dans de folles aventures. Mais surtout, Epicode, c'est avant tout une ambiance chaleureuse, un staff disponible et un forum actif ! Rejoignez-nous !
entre donc,

Aller en bas
# VOTE COTM Codage n°10 - le Dim 25 Aoû 2019 - 20:57
Concours de Code numéro 10
Qui sera ... le meilleur dresseur ?
Les votes !

Bonsoir à tous !  VOTE COTM Codage n°10 3775839356

Nous avons gardé espoir jusqu'à la fin et ça en valait la peine ! Et oui, mesdames et messieurs, nous avons DEUX participations et elles vont vous couper le souffle. Surtout que la tâche ne fut pas simple, soyons d'accord. Nous deux courageux participants sont bien là, merci à eux. Désormais il est temps de venir voter pour le meilleur code.

Que fallait-il coder ? Un QEEL + footer compatible avec FA !

Voici le formulaire de vote :

Code:
[b][color=#cc0033]Esthétique du rendu : /5[/color][/b]
[b][color=#cc0033]Originalité du code : /5[/color][/b]
[b][color=#cc0033]Propreté du code : /5[/color][/b]

[b][color=#cc0033]Un petit commentaire :[/color][/b]

Quels sont les bonus et récompenses ?
- Un bonus de PC sera donné aux participants.
- Le gagnant sera affiché sur la PA durant 1 mois et aura un badge codage.

Voici le lien pour observer notre première participation : Cliquez !

Et le code qui débute avec une partie du template à modifier :
Code:
<!-- BEGIN disable_viewonline -->

        <div class="qeel">

            <div class="headerQeel">
                <h1>Qui est là ?</h1>
            </div>
            
            <div class="mainQeel">
                
                <div class="colGauche">
                
                    <div class="joueursCo">
                        <h2>NOS JOUEURS CO'</h2>
                        <div class="blocJC">
                            {TOTAL_USERS_ONLINE}.<br/>
                            {LOGGED_IN_USER_LIST}
                        </div>
                    </div>

                    <div class="joueurs48">
                        <h2>IL Y A 48H...</h2>
                        <div class="bloc48">
                            {L_CONNECTED_MEMBERS}
                        </div>
                    </div>
                    
                </div>
                
                <div class="centerQeel">
                    
                    <div class="centre-haut">
                        
                        <div class="sepa-gauche"></div>
                        <div class="groupesQeel">

                            <h2>LES ÉQUIPES</h2>
                            
                            <div id="iconEquipe">
                            
                                <div class="equipe_une"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-ballon-aoba-johsai.png" width="50px" onclick="affiche_text('<h4>Aoba Johsai</h4><p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>')"/></div>
                                <div class="equipe_deux"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575999-ballon-fukurodani.png" width="50px" onclick="affiche_text('<h4>Fukurodani</h4><p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>')"/></div>
                                <div class="equipe_trois"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-ballon-karasuno.png" width="50px" onclick="affiche_text('<h4>Karasunoi</h4><p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>')"/></div>
                                <div class="equipe_quatre"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-ballon-nekoma.png" width="50px" onclick="affiche_text('<h4>Nekoma</h4><p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>')"/></div>
                            
                            </div>

                        </div>
                        <div class="sepa-droite"></div>
                    
                    </div>
                    
                    <div class="centre-bas">
                        
                        <div class="galerie">
                            <div id="rotator1566585156016"><a id="itemActif1566585156016" style="z-index:999" href="#" title="" target="_blank"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575949-aoba-johsai.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576106-fukurodani.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576256-karasuno.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576040-nekoma.png" alt="" /></a></div>
                              
                           <section>
                                <!--<div id="slider">
                                    <ul>
                                        <li><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575949-aoba-johsai.png" width="356px" height="164px"/></li>
                                        <li><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576106-fukurodani.png" width="356px" height="164px"/></li>
                                        <li><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576256-karasuno.png" width="356px" height="164px"/></li>
                                        <li><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576040-nekoma.png" width="356px" height="164px"/></li>
                                  </ul>
                                    <div class="bande-deplacement">
                                        <a id="prev">«</a><br/>
                                        <a id="next">»</a>
                                    </div>
                              </div>-->
                            
                             <br/>
                            
                            </section>

                        </div>
                        
                        <div class="descGroupe">
                            
                            <div id="descG">
                                
                                <h4>Aoba Johsai</h4>
                                <p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                
                            </div>
                            
                        </div>
                        
                    </div>
                
                </div>
                
                <div class="colDroite">
                
                    <p><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576036-volleyeurs.png" width="50px"/> {TOTAL_USERS}</p>
                    <p><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576036-points.png" width="50px"/> {TOTAL_POSTS}</p>
                    <p><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576036-scores.png" width="50px"/> {TOTAL_USERS}</p>
                    
                    <div class="newestUser">
                        {NEWEST_USER}
                    </div>
                
                </div>

            </div>
            
            <div class="footerQeel">
                
                <h1>Nos copains</h1>

                <div class="partos">
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                </div>
                <br/>
                <div class="partos">
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                </div>
                <br/>
                <div id="volet_clos">
                    <div id="volet">
                        <div class="partos">
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                        </div>
                        <br/>
                        <div class="partos">
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                        </div>
                        <br/><br/>
                    </div>
                </div>
                
                <div class="btn_ouverture">
                    <div id="btn1">
                        <a href="#volet" onclick="bascule()" class="ouvrir"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576036-ouvrir.png" width="30px"/></a>
                    </div>
                    <div id="btn2">
                        <a href="#volet_clos" onclick="basculeF()" id="close" class="fermer"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575940-fermer.png" width="30px"/></a>
                    </div>
                </div>
                
            </div>
        </div>
        
        <script language="javascript">
            function affiche_text(text){
                document.getElementById("descG").innerHTML = text;
            }
            
            function bascule(){
                var etatO = document.getElementById('btn1').style.display;
                var etatF = document.getElementById('btn2').style.display;
                var bouton = document.getElementById('afficheCache');
                
                if (etatO == 'none'){
                    document.getElementById('btn1').style.display='block';
                    document.getElementById('btn2').style.display='none';
                }else{
                    document.getElementById('btn1').style.display='none';
                    document.getElementById('btn2').style.display='block';
                }
            }
            
            function basculeF(){
                var etatO = document.getElementById('btn1').style.display;
                var etatF = document.getElementById('btn2').style.display;
                var bouton = document.getElementById('afficheCache');
                
                if (etatF == 'none'){
                    document.getElementById('btn2').style.display='block';
                    document.getElementById('btn1').style.display='none';
                }else{
                    document.getElementById('btn2').style.display='none';
                    document.getElementById('btn1').style.display='block';
                }
            }
        </script>

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script type="text/javascript">(function(){var r = document.getElementById("rotator1566585156016"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1566585156016"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1566585156016";n.style.zIndex = 999})},3500)})();</script>

<!-- END disable_viewonline -->

Et son CSS :
Code:
.qeel{
    max-width: 900px;
    max-height: 1300px;
}

.headerQeel{
    width: 100%;
    min-height: 84px;
    background-color: #f48f46;
    border-bottom-style: solid;
    border-bottom-color: #f3812f !important;
    border-top-style: solid;
    border-top-color: #f3812f !important;
    border-width: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.headerQeel > h1{
    margin-left: auto;
    margin-right: auto;
    width: 190px;
    font-family: 'Carter One', cursive;
    font-size: xx-large;
}

.mainQeel{
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    min-height: 502px;
    display: flex;
    overflow: hidden;
    margin-top: 5px;
}

.colGauche{
    display: flex;
    flex-direction: column;
    width: 273px;
}

/* BLOC JOUEURS CONNECTES ACTUELLEMENT */

.joueursCo{
    width: 253px;
    margin-top: 88px;
}

.joueursCo > h2{
    color: white;
    text-align:center;
    font-family: 'Russo One', sans-serif;
}

.blocJC {
    width: 253px;
    min-height: 97px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-width: 4px;
    border-radius: 5px;
    color: white;
    clear: both;
    font-family: 'Montserrat', sans-serif;
    padding-left: 5px;
    word-break: break-word;
}

/* BLOC CONNECTES IL Y A 48H */

.joueurs48{
    
}

.joueurs48 > h2{
    color: white;
    text-align:center;
    font-family: 'Russo One', sans-serif;
}

.bloc48 {
    width: 253px;
    min-height: 97px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-width: 4px;
    border-radius: 5px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    padding-left: 5px;
    word-break: break-word;
}

.centerQeel{
    width: 364px;
    display: flex;
    flex-direction: column;
}

.centre-haut{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.sepa-gauche{
    width: 20px;
    height: 122px;
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-left-style: solid;
    border-left-color: #e68844 !important;
    margin-left: 15px;
    
}

.groupesQeel{
    width: 100%;
}

.groupesQeel > h2{
    color: white;
    text-align: center;
    font-family: 'Russo One', sans-serif;
}

#iconEquipe{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.sepa-droite{
    width: 20px;
    height: 122px;
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-left-style: solid;
    border-left-color: #e68844 !important;
    margin-right: 15px;
}

.centre-bas{
    width: 357px;
    height: 362px;
    border-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-left-style: solid;
    border-left-color: #e68844 !important;
    margin-right: 15px;
}

.galerie{
    width: 349px;
    height: 164px;
}

a#prev{
  left: 15px;
  top: -25px;
  cursor: pointer;
}
a#prev:hover{
 
}

a#next{
  right: 15px;
  top: -25px;
  cursor: pointer;
}

a#next:hover{
  
}

section{
    text-align: center;
    width: 349px;
    height: 164px;
}

section a{
  color:  #40615a;
  font-size: 48px;
  position: absolute;
  text-decoration: none;
  z-index: 5;
}

section a:hover{
  color: black;
}

section a, #slider{
  display: inline-block;
  vertical-align: middle;
}

#slider{
    box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.3);
    overflow: hidden;
    position: relative;
    width: 349px;
    height: 164px;
    z-index: 5;
}

#slider ul{
  margin: 0;
  padding: 0;
  position: relative;
  width: 1200px;
}

#slider li{
  background-color: #f49595;
  float: left;
  color: #3d3d3d;
  font-size: 30px;
  height: 164px;
  line-height: 167px;
  list-style: none;
  margin: 0;
  position: relative;
  width: 349px;
}

.bande-deplacement{
    width: 100%;
    background-color: rgba(255, 255,255, 0.4);
    height: 30px;
    position: absolute;
    bottom: 0;
}

.descGroupe{
    width: 100%;
    height: 190px;
    overflow-y: scroll;
    font-family: 'Montserrat', sans-serif;
}

#descG > h4{
    color: aqua;
    text-align: center;
}

#descG > p{
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    color: white;
}

.colDroite{
    display: flex;
    flex-direction: column;
    width: 262px;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
}

.colDroite img{
    vertical-align: middle;
}

.colDroite p{
    color:white;
}

.newestUser{
    color: white;
}

.footerQeel{
    width: 100%;
    min-height: 84px;
    background-color: #f48f46;
    border-bottom-style: solid;
    border-bottom-color: #f3812f !important;
    border-top-style: solid;
    border-top-color: #f3812f !important;
    border-width: 2px;
    margin-top: 5px;
}

.footerQeel > h1{
    margin-left: auto;
    margin-right: auto;
    width: 182px;
    font-family: 'Carter One', cursive;
    font-size: xx-large;
}

.partos{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

#volet {
 position: absolute;
 left: -2000px;
}

#volet{
 background-color: #f48f46;
}

#volet a.ouvrir, #volet a.fermer {
 position: absolute;
 right: -88px;
 top: 150px;

 /* quelques styles CSS3 */
 -ms-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
 transform: rotate(270deg);

 border-radius: 0 0 8px 8px;
}

#volet {
 -webkit-transition: all .5s ease-in;
 transition: all .5s ease-in;
}

#volet:target {
 left: 0;
    position: relative;
}

.btn_ouverture{
    width: 60px;
    margin-left: auto;
    margin-right: auto
}

#btn1{
    position: absolute;
    margin-top: -10px;
}

#btn2{
    display: none;
}

#btn2{
    position: absolute;
    margin-top: -10px;
}


::-webkit-scrollbar {
      width: 15px;
}

::-webkit-scrollbar-track {
      background-color: rgba(0,0,0, 0.3);
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
    background-color: black;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-left-style: solid;
    border-left-color: #e68844 !important;
    border-radius: 5px;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: black;
}

#rotator1566585156016 {
  height:174px;
}

#rotator1566585156016 a{
  position:absolute;
  background:#FFFFFF;
}
#rotator1566585156016 img {
  height:164px;
  width:349px;
}

Et voici le lien pour notre seconde participation : Just here !

Le HTML :
Code:
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700,800,900|Rajdhani:400,700&display=swap" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<div id="qeel">
  <div class="qeel-head">
    <span class="th th-planet-1-o"></span>
    <h2>Statistiques</h2>
  </div>
  <div class="qeel-bd">
    <div class="qeel-top">
      <div class="qeel-links">
        <a href="#" title="topics récents"><span class="th th-bell"></span></a>
        <a href="#" title="topics sans réponse"><span class="th th-megaphone"></span></a>
        <a href="#" title="actifs aujourd'hui"><span class="th th-bookmark-1"></span></a>
        <a href="#" title="top 20 du jour"><span class="th th-stars"></span></a>
        <a href="#" title="top 20 du forum"><span class="th th-fire"></span></a>
        <a href="#" title="supprimer les cookies du forum"><span class="th th-cookie"></span></a>
      </div>
      <div class="qeel-middle">
        <div class="qeel-last">
          <div class="last-name"><a href="#">User name</a><b>Bienvenue à toi !</b></div>
          <div class="last-ava"><div class="avalast"><img src="https://www.zupimages.net/up/19/34/l2jd.jpg"/></div></div>
        </div>
        <div class="list-co"><div><a href="#">User Name</a></div></div>
      </div>
      <div class="qeel-right">
        <div class="list-24h"><div>Utilisateurs connectés les dernières 24h</div><span class="th th-earth-o" title="connectés au cours des 24 dernières heures" id="spa24"></span></div>
        <div class="qeel-stats">
          <div class="stat"><span>membres</span>XXX</div>
          <div class="stat"><span>messages</span>XXXX</div>
        </div>
        </div>
    </div>
    <div class="qeel-gp">
  <a href="#"><div><span class="th th-strawberry-o"></span><h3><b>Un groupe</b><br/>Lorem ipsum</h3></div></a>
  <a href="#" style="background: #95c0ca;"><div><span class="th th-blossom-o"></span><h3><b>Un groupe</b><br/>Lorem ipsum</h3></div></a>
  <a href="#" style="background:#95c8c2;"><div><span class="th th-donut-1-o"></span><h3><b>Un groupe</b><br/>Lorem ipsum</h3></div></a>
  <a href="#" style="background:#95d1b8;"><div><span class="th th-holly-o"></span><h3><b>Un groupe</b><br/>Lorem ipsum</h3></div></a></div></div></div>

<div class="ep-footer">
  <div class="foot-left">
    <div class="part-top">
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a><a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
    </div>
    <div class="part-foot">
     <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
    </div>
  </div>
  <div class="foot-right">
    <span>Crédits</span>
    Lorem ipsum dolor <a href="#">sit amet</a>, 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>

Et le CSS :
Code:
body {background-image: url('https://www.zupimages.net/up/19/34/acy2.png');}
a {text-decoration:none;}
@font-face { font-family: "ambarella"; src: url('https://dl.dropboxusercontent.com/s/5n01hn5ijf0beuz/Ambarella.ttf'); format("truetype");}
@keyframes pulser{0%{box-shadow: 0 0 0 0 rgba(255,255,255, 0.9);}70%{box-shadow: 0 0 0 20px rgba(255,255,255, 0);}100%{box-shadow: 0 0 0 0 rgba(255,255,255, 0);}}
@keyframes bounceIn {from, 20%, 40%, 60%, 80%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} 0% {opacity: 0;transform: scale3d(.3, .3, .3);} 20% {transform: scale3d(1.1, 1.1, 1.1);} 40% {transform: scale3d(.9, .9, .9);} 60% {opacity: 1;transform: scale3d(1.03, 1.03, 1.03);} 80% {transform: scale3d(.97, .97, .97);} to {opacity: 1;transform: scale3d(1, 1, 1);}}
.bounceIn {animation-name: bounceIn;}

#qeel {max-width:900px; margin:auto;}
.qeel-head {background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); overflow: hidden; height: 200px; justify-content:space-between; display:flex; align-items:center; color: #fff; padding: 0 40px; border-bottom: 2px solid #fff;}
.qeel-head h2 {border: 1px solid #fff; color: #fff; font-family: Poppins; font-size: 55px; font-weight: 700;letter-spacing: -3px; line-height: 40px; padding: 10px;}
.qeel-head h2:hover {text-shadow: none;transition: all 1s ease-in-out;}
.qeel-head span {font-size: 250px; opacity: 0.5;}
.qeel-bd {background: #F9F9F9;border: 1px solid #F9F9F9;}
.qeel-top {display:flex;}
.qeel-last {display:flex; justify-content:space-around; align-items:center; margin:40px 0px;}
.last-name {display:flex; flex-direction:column;}
.last-name a {font-family: ambarella; font-size:45px; font-weight:bolder; color: #B88380; letter-spacing: -1px;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; border-bottom: 8px dotted #E8E8E8; line-height:100%; margin-bottom:10px; display:block}
.last-name b {text-transform:uppercase; font-family: Rajdhani; font-size: 12px; font-weight:bold; line-height: 10px; letter-spacing: 1px; color: #777;}
.last-ava {background: #FFF; border-radius:100%;border: 1px solid #D2D2D2;border-radius: 100%;margin-top: 0px;animation: pulser 2s infinite; padding: 20px; background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); border: 2px solid #fff; margin-left:10px;}
.avalast {width:100px; height:100px; overflow:hidden; border-radius: 100%; border:2px solid #fff;}
.avalast img {width:100%; margin-top: -30%;} .qeel-middle {display:block; flex:1; border-right: none; flex-direction:column; display:flex;}
.qeel-links {margin:20px 20px 0 20px;}
.qeel-links a {border: 2px solid #FFF; position: relative; z-index: 1; background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); text-shadow: 2px 2px rgba(0, 0, 0, 0.13); font-size: 24px; color: #fff; padding: 15px; width: 20px; height: 20px; border-radius: 100%; display: block; position:relative;box-shadow: 2px 2px 10px #E8E8E8; display:flex; align-items:center;justify-content:center;}
.qeel-links a:nth-child(1):after, .qeel-links a:nth-child(3):after, .qeel-links a:nth-child(5):after {content: ""; background: #FFF; display: block; box-shadow: 2px 2px 10px #E8E8E8; width: 2px; height: 46px; transform: rotate(-60deg); position: absolute; top: 24px;left: 68px;}
.qeel-links a:nth-child(2):before, .qeel-links a:nth-child(4):before {content: ""; background: #FFF; display: block; box-shadow: 2px 2px 10px #E8E8E8; width: 2px; height: 47px; transform: rotate(50deg); position: absolute; top: 31px;right: 65px;}
.qeel-links a:nth-child(2), .qeel-links a:nth-child(4), .qeel-links a:nth-child(6) {margin-left:80px;}
.qeel-links a:hover {animation: bounceIn 900ms 1;}
.list-co {background: #fff; border: 1px solid #E8E8E8; border-radius:10px;box-shadow: 2px 2px 10px #E8E8E8;}
.list-co div {margin:20px; padding-right:5px; height:74px; text-align:justify; color: #555; border-radius:10px; font-size:0;}
.list-co a {color:#555; font-family: Poppins; font-size:12px; text-transform: uppercase;}
.qeel-right {display:flex; flex-direction:column;}
.list-24h {display:flex; margin:20px; width:180px; border: 1px solid #E8E8E8;align-items:flex-end; justify-content:center; border-radius:10px;}
.list-24h div {background: #fff; border: 20px solid #fff; font-family: Poppins; font-size: 12px; text-align:justify; flex:1; box-shadow: 2px 2px 10px #E8E8E8; border-radius:10px; height:150px; overflow:auto;}
.list-24h a {font-family: Poppins; font-size: 12px; text-transform: uppercase;}
#spa24 {border: 2px solid #FFF; z-index: 1; background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); text-shadow: 2px 2px rgba(0, 0, 0, 0.13); font-size: 16px; color: #fff; padding: 10px; border-radius: 100%; box-shadow: 2px 2px 10px #E8E8E8; display:flex; align-items:center;justify-content:center; position:absolute; margin-top:20px;}
.qeel-stats {flex:1; margin: 0 20px; display:flex; flex-direction:column; justify-content:center;}
.stat {border: 2px solid #fff; box-shadow: 2px 2px 10px #E8E8E8; text-align:center; margin: 5px 0; border-radius: 12px; overflow:hidden; font-family: Poppins; background-image: linear-gradient(10deg, #95b3d7, #95d1b8); color: transparent; background-clip: text; -webkit-background-clip: text; font-weight:900;}
.stat span {background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); color:#fff; padding:8px 10px; border-right: 2px solid #fff; float:left; text-transform:uppercase; font-size:12px; width:40%; font-weight:normal; line-height:100%;}

/**** PARTIE GROUPES ****/
.qeel-gp {margin:20px;display: flex; flex-wrap: wrap; justify-content: space-around;}
.qeel-gp a {flex-grow: 1; width: 0; margin: 5px; height: 80px; background: #95b3d7; transition: all ease-in-out 1.2s; text-align:center; transform: skewX(-10deg); overflow: hidden; border: 2px solid #fff; box-shadow: 2px 2px 10px #E8E8E8;}
.qeel-gp div {transform: skewX(10deg); position:relative; display:flex; align-items:center; justify-content:center;}
.qeel-gp a:hover {flex: none; width:400px;}
.qeel-gp div span {position:absolute; font-size:80px; left:-5px; color: #fff; opacity: 0.5;top: 10px;}
.qeel-gp h3 {position:relative; opacity:0;transition: all ease-in-out 1.2s; color: #fff; font-family: Poppins; text-shadow: 1px 1px #777; font-weight:normal; font-size:12px;}
.qeel-gp h3 b {font-family:ambarella; font-size:24px;}
.qeel-gp a:hover h3 {opacity:1;transition: all ease-in-out 1.2s;}


/**** PARTIE FOOTER ****/
.ep-footer {display:flex; margin:20px 50px; align-items:center;}
.foot-left {flex:1; margin-right:50px;}
.part-top, .part-foot {display:flex; justify-content:space-around; flex-wrap:wrap; margin: 20px 0px;}
.part-top img {width:50px height:50px; border: 5px solid #fff; outline: 1px solid #E8E8E8; margin: 2px;background:#fff;filter: grayscale(80%);transition: all 0.5s ease;}
.part-foot img {border-radius:100%; width:40px; height:40px; border: 1px solid #E8E8E8; margin: 2px; background: #fff; padding:5px; background: #fff;filter: grayscale(80%);transition: all 0.5s ease;}
.part-foot img:hover, part-top img:hover {filter: grayscale(0%);transition: all 0.5s ease;}
.foot-right {flex:0.6; text-align: justify; font-family:Poppins; font-size:8px; text-transform: uppercase; letter-spacing: 0.5px; color: #777; font-weight:600;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
.foot-right span {font-family:Ambarella; font-size:100px; text-transform:none; display:block; line-height:80px; font-weight:normal;}
.foot-right a {color: #95b3d7;}

/**** PARTIE LIENS FA ****/
div#page-footer {
    border: 2px solid #fff;
    border-radius: 20px;
    box-shadow: 2px 2px 10px #E8E8E8;
    font-family: Poppins;
    text-transform: uppercase;
    font-weight: 700;
    margin: 20px 140px;
    padding: 8px;
}
div#page-footer a, .gen {
    font-family: Poppins;
    text-transform: uppercase;
    font-weight: 700;
    color: #777;
    font-size: 10px;
}

Vous avez une semaine pour voter, les résultats seront là le 1er Septembre.

A vous de jouer !  VOTE COTM Codage n°10 1066248963

Épicodement,
Vos Animatrices  VOTE COTM Codage n°10 3544256468

Nataku
Anim et mini-graphiste
Date d'inscription : 29/11/2018
Messages : 696


VOTE COTM Codage n°10 QlwWl

VOTE COTM Codage n°10 W1ulfwm

VOTE COTM Codage n°10 4ny2
# Re: VOTE COTM Codage n°10 - le Dim 25 Aoû 2019 - 21:22
Bonsoir !

Déjà, félicitations aux deux participants, les deux propositions sont très esthétiques et parfaitement fonctionnelles VOTE COTM Codage n°10 3775839356
À part pour la lisibilité, je ne jugerai pas la qualité des codes, n'ayant pas les compétences pour me le permettre o/ Je mets donc 5/5 aux deux.

Proposition 1 :
Esthétique du rendu : 3.5/5
Originalité du code : 3/5
Propreté du code : 5/5

Un petit commentaire : Concernant la première proposition, elle est jolie et pratique, mais je ne retrouve pas cette harmonie et cette accessibilité qui m'a tant marquée dans la seconde. Le tout fait très bloc, très carré et je pense que, dans les cas du qeel et du footer, il ne faut pas hésiter à se disperser dans l'espace et à prendre des libertés. Malheureusement, ce n'est pas quelque chose que j'ai retrouvé ici. Les typographies restent très basiques, c'est dommage.
En revanche, j'ai bien aimé le côté scolaire et les couleurs, la combinaison orange/gris anthracite (voire noir) émet un contraste énergique. Le code est bien plus accessible (en ce qui concerne le css), également.

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

Un petit commentaire :Cependant, ma préférence va pour la seconde. Je la trouve légère, moins encombrante; le footer est distinct du qeel, pourtant les deux sont raccord. Il y a de l'espace, les animations sur les petites icônes sont sympathiques, et les autres sont fort agréables, elles sont très bien intégrées "dans le décors", si je puis m'exprimer ainsi. Le tout est à la fois élégant et moderne, c'est donc un immense oui de ma part aha
Ce qui m'a perturbée concerne la deuxième ligne d'icônes de partenariat rondes, qui n'est pas symétrique avec la première. Bon, c'est du détail aha
L'autre petit inconvénient que je peux relever concerne le css. En effet, il est très compact, il n'y a pas de sauts de lignes, ce qui entache la lisibilité.
Noth.
Membre timide
Date d'inscription : 09/06/2019
Messages : 126
# Re: VOTE COTM Codage n°10 - le Lun 26 Aoû 2019 - 8:22
Bonjour @Noth. et merci pour tes commentaires ! Néanmoins un formulaire est mis en place et il est nécessaire de l'utiliser afin de déterminer les notes de nos participants. VOTE COTM Codage n°10 3775839356
Nataku
Anim et mini-graphiste
Date d'inscription : 29/11/2018
Messages : 696


VOTE COTM Codage n°10 QlwWl

VOTE COTM Codage n°10 W1ulfwm

VOTE COTM Codage n°10 4ny2
# Re: VOTE COTM Codage n°10 - le Lun 26 Aoû 2019 - 10:32
Bonjour !
Un jour (très lointain), je parviendrai à voter de manière correcte du premier coup VOTE COTM Codage n°10 2702986051
Désolée pour cette méprise, c'est corrigé :p
Noth.
Membre timide
Date d'inscription : 09/06/2019
Messages : 126
# Re: VOTE COTM Codage n°10 - le Lun 26 Aoû 2019 - 10:55
Coucou,

Tout d'abord, vraiment bravo pour ces participations, elles sont c a n o n !! Ensuite, pour des raisons évidentes, je ne vais pas commenter la propreté du code - parce que je n'y connais r déjà, donc ça joue. Voilà o/

CRÉATION 1
Esthétique du rendu : 3/5
Originalité du code : 3,5/5

Un petit commentaire : HAIKYUU HAIKYUU HAIKYUU HAIKYUU HAIKYUU
Je trouve le code sympathique, j'aime beaucoup les références à Haikyuu glissées dedans (la tête d'Hinata, le ballon de volley, etc.) et les couleurs qui sont celles de l'équipe. Je suis moins fan du défilement automatique des groupes (surtout si on peut juste le faire au clic) et des cadres "coupés" sur la gauche. Mais sinon l'ambiance est cool, le respect du thème est cool. Bravo !

CRÉATION 2
Esthétique du rendu : 4,5/5
Originalité du code : 4,5/5

Un petit commentaire : Je suis complètement fan de cette participation VOTE COTM Codage n°10 1007048454 J'adore les couleurs, les différents éléments, leurs dispositions, les hovers, tout, c'est CANON. Un peu moins fan du footer mais ce qeel, mamamia, trop beauu dlkjgldfgkj. J'aimerai beaucoup voir un thème entier comme ça Coeur 2

Bravo à vous deux !!
Eskimo
Admin et maxi-graphiste - Maîtresse des pingouins
Date d'inscription : 31/03/2012
Messages : 4521


VOTE COTM Codage n°10 4g7g
Merci Yozo Lovely

VOTE COTM Codage n°10 B584

VOTE COTM Codage n°10 OKD4D
Merci Sygea  Panique  Lovely
# Re: VOTE COTM Codage n°10 - le Lun 26 Aoû 2019 - 13:30

n°1


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

Un petit commentaire :
Haikyu ouii ! Alors, la palette de couleurs est plutôt cool je trouve ! J'aime bien aussi la façon avec laquelle le QEEL est "encadré" par le titre Qui est là et le footer, ça crée une belle unité ! Les informations sont faciles à trouver et à voir aussi c: Le CSS et l'HTML m'ont l'air propres, après j'ai pas un niveau qui permet de commencer à juger les codes des autres mais rien me choque D: Après, je le trouve un peu basique, c'est à dire que les informations n'ont pas de dispositions particulières, à part pour les groupes, j'avoue que ça me manque un peu o3o On a beaucoup d'espace de perdu en haut et en bas des blocs qui sont sur les côtés des groupes et je trouve ça vraiment dommage aussi. Les icônes sont peut-être un peu grandes aussi, elles ont du mal à s'aligner au texte ou même entre-elle et du coup je trouve que ça fait un peu moins net ! Sinon dommage que le tout ne soit pas centré, même si je l'ai pas compté dans la "notation", ça me perturbe D:
Ceci dit, la partie dédiée aux groupes est vraiment cool, la scrollbar est originale aussi. Bravo !

n°2


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

Un petit commentaire :
C'est trop beaaaau, j'aime beaucoup, c'est moderne ! La palette de couleur est jolie aussi, et les formes sont harmonieuses! C'est original dans la disposition des éléments, je pense par exemple aux options à gauche et à l'affichage des membres et sujets qui est magnifique. J'ai mis 0.5 de moins à cause du fait que j'ai aussi l'impression qu'il y a une petite perte d'espace, avec des endroits très vides surtout au milieu, et que je préfère quand c'est compact ;;
Le fait qu'il y est des animations aussi bien choisies et intégrées donne vraiment du cachet au code, on a envie de passer la souris partout et c'est intuitif o/ Mon éléments préféré dans tout ça, ça doit être l'affichage des groupes qui est magique o3o
Après contrairement aux voisines, j'aime beaucoup le footer justement, avec ce mélange de ronds et de carrés, ça change un peu et ça s'accorde avec le QEEL, je pense que grâce à leur taille ça ne choque pas trop. Pareil, le fait d'avoir choisi de mettre les carrés en haut et pas faire l'inverse aide bien pour l'harmonie, sinon je pense que ça aurait fait un peu bizarre. Les crédits sont très élégants !

Bravo à vous deux, ça devait pas être facile, personnellement j'ai reculé par peur du footer o3o
Sygea
Accro au forum
Date d'inscription : 04/04/2016
Messages : 825


# Re: VOTE COTM Codage n°10 - le Jeu 29 Aoû 2019 - 6:10
Chalut o/
Encore deux codes magnifiques et un choix difficile  VOTE COTM Codage n°10 514879035

Pour le premier **
Esthétique du rendu : /5 4/5
Originalité du code : /55/5
Propreté du code : /55/5

Un petit commentaire : Je le trouve original et les couleurs que tu as choisis vont très bien avec l'anime même les icons sont tops . Ensuite il y a quelques petites modifications à faire notamment sur le titre  et un justify sur les textes des groupes mais ce n'est pas trop grave. Sinon dans l'ensemble moi il me plaît bien **

pour le deuxième
Esthétique du rendu : /5 4/5
Originalité du code : /53/5
Propreté du code : /55/5

Un petit commentaire : C'est très joli dans l'ensemble, ensuite niveau esthétique c'est super bien  j'aime bien les groupes. Pour le codage en lui même je peux pas trop dire car moi même je suis en mode apprend, donc si je me fis à mes seules connaissances je le trouve bien coder ** .

Bravo à tous les deux VOTE COTM Codage n°10 2691722282
Hanyo Yurikin
Newbie
Date d'inscription : 30/07/2018
Messages : 89
# Re: VOTE COTM Codage n°10 - le Jeu 29 Aoû 2019 - 13:27
Merci beaucoup pour vos votes VOTE COTM Codage n°10 3775839356

Il reste 2 jours pour voter !
Nataku
Anim et mini-graphiste
Date d'inscription : 29/11/2018
Messages : 696


VOTE COTM Codage n°10 QlwWl

VOTE COTM Codage n°10 W1ulfwm

VOTE COTM Codage n°10 4ny2
# Re: VOTE COTM Codage n°10 - le Ven 30 Aoû 2019 - 11:05
Et il est temps de voter !
Tout comme certains d'entre-vous, je ne jugerai pas la propreté des codes, car je n'ai pas suffisamment d'expérience en codage pour le faire.

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

Un petit commentaire :
Alors ! Pour le coup, je trouve cette participation assez simpliste. C'est un type de code que l'on retrouve assez souvent, à mon avis (me tape pas, créateur du code, je juge mais je serai incapable de faire ça plz).
J'aime bien les couleurs et images, qui correspondent à l'univers d'Haikyuu! Ca émet un bon contraste qui attire l'oeil de l'utilisateur.

En revanche, je regrette le placement des éléments et les polices d'écritures, qui ne sont pas travaillées Sad.
Par exemple, les éléments à gauche sont, à mon goût, trop alignés... à  gauche  VOTE COTM Codage n°10 2596956373.
C'est comme si ça débordait, mais dans un sens pas vraiment esthétique. C'est d'ailleurs un peu pareil pour les groupes !
Au niveau de ces derniers, d'ailleurs, j'aime beaucoup le défilement des images, mais, le problème, c'est que même si on clique sur un groupe pour l'afficher, cela continue à défiler. On ne sait donc pas "réellement" quel groupe est rattaché à quelle image.

Au niveau footer, là aussi, c'est assez simpliste, mais ça suit la continuité du queel !
Il faudrait peut-être rajouter un cadre aux images des partenaires, voire des info-bulles !
Le dernier point critique serait au niveau du petit rond qui affiche plus de partenaires. C'est dommage, car ces partenaires-là ne seront pas mis en avant. Mais après, c'est un choix !  VOTE COTM Codage n°10 3775839356

CODE N°2
Esthétique du rendu : 4/5
Originalité du code : 3.5/5

Un petit commentaire :
La première chose qui saute aux yeux, c'est que c'est très harmonieux, très aesthetic. J'aime beaucoup le style, les icons, le titre, ainsi que le gradient. J'adore ce côté arrondi.
Je te donne un point en plus pour la liste des liens forumactif qui ont été travaillées pour continuer de correspondre au thème !

En revanche, niveau originalité, j'ai déjà vu ce style thème plusieurs fois sur des forums anglais.
Ici un exemple :
VOTE COTM Codage n°10 Anglai10
Je t'enlève donc un point et demi pour cela :S.

Je suis aussi moins fan du footer, mais je ne saurais déterminer pourquoi VOTE COTM Codage n°10 2979024130.

En tout cas, comme Eskimo, j'aimerai aussi bien voir un thème complet ainsi ! VOTE COTM Codage n°10 665834366

Et, j'oubliais, bravo à vous deux pour ces participations !
InvalidSod
Newbie
Date d'inscription : 16/10/2016
Messages : 94
# Re: VOTE COTM Codage n°10 - le Lun 2 Sep 2019 - 13:01
Résultat du Concours de Code numéro 10
Qui sera ... le meilleur dresseur ?
Les résultats !

Bonjour à tous !

Il est temps d'annoncer ... QUI SERA LE MEILLEUR DRESSEUR ?  VOTE COTM Codage n°10 2691722282

Non, nous sommes là pour annoncer le gagnant du concours de code n°10. Merci à nos deux participants que nous avons attendus jusqu'au bout. Merci à tous ceux qui ont voté. Vous êtes toujours aussi présents et ça nous fait plaisir !

Que fallait-il coder ? Un QEEL + footer compatible avec FA !

Quels sont les bonus et récompenses ?
- Un bonus de PC sera donné aux participants.
- Le gagnant sera affiché sur la PA durant 1 mois et aura un badge codage.

En première place, nous avons @Letinia qui gagne donc sa tête sur la PA ainsi que des PC et son badge avec 57 points ! Elle est top en esthétique avec 22 points et top originalité avec 20 points !
Le lien de sa participation : Just here !

Le HTML :
Code:
<link href="https://fonts.googleapis.com/css?family=Poppins:400,600,700,800,900|Rajdhani:400,700&display=swap" rel="stylesheet">
<link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">

<div id="qeel">
  <div class="qeel-head">
    <span class="th th-planet-1-o"></span>
    <h2>Statistiques</h2>
  </div>
  <div class="qeel-bd">
    <div class="qeel-top">
      <div class="qeel-links">
        <a href="#" title="topics récents"><span class="th th-bell"></span></a>
        <a href="#" title="topics sans réponse"><span class="th th-megaphone"></span></a>
        <a href="#" title="actifs aujourd'hui"><span class="th th-bookmark-1"></span></a>
        <a href="#" title="top 20 du jour"><span class="th th-stars"></span></a>
        <a href="#" title="top 20 du forum"><span class="th th-fire"></span></a>
        <a href="#" title="supprimer les cookies du forum"><span class="th th-cookie"></span></a>
      </div>
      <div class="qeel-middle">
        <div class="qeel-last">
          <div class="last-name"><a href="#">User name</a><b>Bienvenue à toi !</b></div>
          <div class="last-ava"><div class="avalast"><img src="https://www.zupimages.net/up/19/34/l2jd.jpg"/></div></div>
        </div>
        <div class="list-co"><div><a href="#">User Name</a></div></div>
      </div>
      <div class="qeel-right">
        <div class="list-24h"><div>Utilisateurs connectés les dernières 24h</div><span class="th th-earth-o" title="connectés au cours des 24 dernières heures" id="spa24"></span></div>
        <div class="qeel-stats">
          <div class="stat"><span>membres</span>XXX</div>
          <div class="stat"><span>messages</span>XXXX</div>
        </div>
        </div>
    </div>
    <div class="qeel-gp">
  <a href="#"><div><span class="th th-strawberry-o"></span><h3><b>Un groupe</b><br/>Lorem ipsum</h3></div></a>
  <a href="#" style="background: #95c0ca;"><div><span class="th th-blossom-o"></span><h3><b>Un groupe</b><br/>Lorem ipsum</h3></div></a>
  <a href="#" style="background:#95c8c2;"><div><span class="th th-donut-1-o"></span><h3><b>Un groupe</b><br/>Lorem ipsum</h3></div></a>
  <a href="#" style="background:#95d1b8;"><div><span class="th th-holly-o"></span><h3><b>Un groupe</b><br/>Lorem ipsum</h3></div></a></div></div></div>

<div class="ep-footer">
  <div class="foot-left">
    <div class="part-top">
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a><a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
    </div>
    <div class="part-foot">
     <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
      <a href="/" title="forum"><img src="https://via.placeholder.com/50"/></a>
    </div>
  </div>
  <div class="foot-right">
    <span>Crédits</span>
    Lorem ipsum dolor <a href="#">sit amet</a>, 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>

Et le CSS :
Code:
body {background-image: url('https://www.zupimages.net/up/19/34/acy2.png');}
a {text-decoration:none;}
@font-face { font-family: "ambarella"; src: url('https://dl.dropboxusercontent.com/s/5n01hn5ijf0beuz/Ambarella.ttf'); format("truetype");}
@keyframes pulser{0%{box-shadow: 0 0 0 0 rgba(255,255,255, 0.9);}70%{box-shadow: 0 0 0 20px rgba(255,255,255, 0);}100%{box-shadow: 0 0 0 0 rgba(255,255,255, 0);}}
@keyframes bounceIn {from, 20%, 40%, 60%, 80%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);} 0% {opacity: 0;transform: scale3d(.3, .3, .3);} 20% {transform: scale3d(1.1, 1.1, 1.1);} 40% {transform: scale3d(.9, .9, .9);} 60% {opacity: 1;transform: scale3d(1.03, 1.03, 1.03);} 80% {transform: scale3d(.97, .97, .97);} to {opacity: 1;transform: scale3d(1, 1, 1);}}
.bounceIn {animation-name: bounceIn;}

#qeel {max-width:900px; margin:auto;}
.qeel-head {background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); overflow: hidden; height: 200px; justify-content:space-between; display:flex; align-items:center; color: #fff; padding: 0 40px; border-bottom: 2px solid #fff;}
.qeel-head h2 {border: 1px solid #fff; color: #fff; font-family: Poppins; font-size: 55px; font-weight: 700;letter-spacing: -3px; line-height: 40px; padding: 10px;}
.qeel-head h2:hover {text-shadow: none;transition: all 1s ease-in-out;}
.qeel-head span {font-size: 250px; opacity: 0.5;}
.qeel-bd {background: #F9F9F9;border: 1px solid #F9F9F9;}
.qeel-top {display:flex;}
.qeel-last {display:flex; justify-content:space-around; align-items:center; margin:40px 0px;}
.last-name {display:flex; flex-direction:column;}
.last-name a {font-family: ambarella; font-size:45px; font-weight:bolder; color: #B88380; letter-spacing: -1px;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; border-bottom: 8px dotted #E8E8E8; line-height:100%; margin-bottom:10px; display:block}
.last-name b {text-transform:uppercase; font-family: Rajdhani; font-size: 12px; font-weight:bold; line-height: 10px; letter-spacing: 1px; color: #777;}
.last-ava {background: #FFF; border-radius:100%;border: 1px solid #D2D2D2;border-radius: 100%;margin-top: 0px;animation: pulser 2s infinite; padding: 20px; background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); border: 2px solid #fff; margin-left:10px;}
.avalast {width:100px; height:100px; overflow:hidden; border-radius: 100%; border:2px solid #fff;}
.avalast img {width:100%; margin-top: -30%;} .qeel-middle {display:block; flex:1; border-right: none; flex-direction:column; display:flex;}
.qeel-links {margin:20px 20px 0 20px;}
.qeel-links a {border: 2px solid #FFF; position: relative; z-index: 1; background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); text-shadow: 2px 2px rgba(0, 0, 0, 0.13); font-size: 24px; color: #fff; padding: 15px; width: 20px; height: 20px; border-radius: 100%; display: block; position:relative;box-shadow: 2px 2px 10px #E8E8E8; display:flex; align-items:center;justify-content:center;}
.qeel-links a:nth-child(1):after, .qeel-links a:nth-child(3):after, .qeel-links a:nth-child(5):after {content: ""; background: #FFF; display: block; box-shadow: 2px 2px 10px #E8E8E8; width: 2px; height: 46px; transform: rotate(-60deg); position: absolute; top: 24px;left: 68px;}
.qeel-links a:nth-child(2):before, .qeel-links a:nth-child(4):before {content: ""; background: #FFF; display: block; box-shadow: 2px 2px 10px #E8E8E8; width: 2px; height: 47px; transform: rotate(50deg); position: absolute; top: 31px;right: 65px;}
.qeel-links a:nth-child(2), .qeel-links a:nth-child(4), .qeel-links a:nth-child(6) {margin-left:80px;}
.qeel-links a:hover {animation: bounceIn 900ms 1;}
.list-co {background: #fff; border: 1px solid #E8E8E8; border-radius:10px;box-shadow: 2px 2px 10px #E8E8E8;}
.list-co div {margin:20px; padding-right:5px; height:74px; text-align:justify; color: #555; border-radius:10px; font-size:0;}
.list-co a {color:#555; font-family: Poppins; font-size:12px; text-transform: uppercase;}
.qeel-right {display:flex; flex-direction:column;}
.list-24h {display:flex; margin:20px; width:180px; border: 1px solid #E8E8E8;align-items:flex-end; justify-content:center; border-radius:10px;}
.list-24h div {background: #fff; border: 20px solid #fff; font-family: Poppins; font-size: 12px; text-align:justify; flex:1; box-shadow: 2px 2px 10px #E8E8E8; border-radius:10px; height:150px; overflow:auto;}
.list-24h a {font-family: Poppins; font-size: 12px; text-transform: uppercase;}
#spa24 {border: 2px solid #FFF; z-index: 1; background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); text-shadow: 2px 2px rgba(0, 0, 0, 0.13); font-size: 16px; color: #fff; padding: 10px; border-radius: 100%; box-shadow: 2px 2px 10px #E8E8E8; display:flex; align-items:center;justify-content:center; position:absolute; margin-top:20px;}
.qeel-stats {flex:1; margin: 0 20px; display:flex; flex-direction:column; justify-content:center;}
.stat {border: 2px solid #fff; box-shadow: 2px 2px 10px #E8E8E8; text-align:center; margin: 5px 0; border-radius: 12px; overflow:hidden; font-family: Poppins; background-image: linear-gradient(10deg, #95b3d7, #95d1b8); color: transparent; background-clip: text; -webkit-background-clip: text; font-weight:900;}
.stat span {background-image: -webkit-linear-gradient(10deg,#95b3d7,#95d1b8); color:#fff; padding:8px 10px; border-right: 2px solid #fff; float:left; text-transform:uppercase; font-size:12px; width:40%; font-weight:normal; line-height:100%;}

/**** PARTIE GROUPES ****/
.qeel-gp {margin:20px;display: flex; flex-wrap: wrap; justify-content: space-around;}
.qeel-gp a {flex-grow: 1; width: 0; margin: 5px; height: 80px; background: #95b3d7; transition: all ease-in-out 1.2s; text-align:center; transform: skewX(-10deg); overflow: hidden; border: 2px solid #fff; box-shadow: 2px 2px 10px #E8E8E8;}
.qeel-gp div {transform: skewX(10deg); position:relative; display:flex; align-items:center; justify-content:center;}
.qeel-gp a:hover {flex: none; width:400px;}
.qeel-gp div span {position:absolute; font-size:80px; left:-5px; color: #fff; opacity: 0.5;top: 10px;}
.qeel-gp h3 {position:relative; opacity:0;transition: all ease-in-out 1.2s; color: #fff; font-family: Poppins; text-shadow: 1px 1px #777; font-weight:normal; font-size:12px;}
.qeel-gp h3 b {font-family:ambarella; font-size:24px;}
.qeel-gp a:hover h3 {opacity:1;transition: all ease-in-out 1.2s;}


/**** PARTIE FOOTER ****/
.ep-footer {display:flex; margin:20px 50px; align-items:center;}
.foot-left {flex:1; margin-right:50px;}
.part-top, .part-foot {display:flex; justify-content:space-around; flex-wrap:wrap; margin: 20px 0px;}
.part-top img {width:50px height:50px; border: 5px solid #fff; outline: 1px solid #E8E8E8; margin: 2px;background:#fff;filter: grayscale(80%);transition: all 0.5s ease;}
.part-foot img {border-radius:100%; width:40px; height:40px; border: 1px solid #E8E8E8; margin: 2px; background: #fff; padding:5px; background: #fff;filter: grayscale(80%);transition: all 0.5s ease;}
.part-foot img:hover, part-top img:hover {filter: grayscale(0%);transition: all 0.5s ease;}
.foot-right {flex:0.6; text-align: justify; font-family:Poppins; font-size:8px; text-transform: uppercase; letter-spacing: 0.5px; color: #777; font-weight:600;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;}
.foot-right span {font-family:Ambarella; font-size:100px; text-transform:none; display:block; line-height:80px; font-weight:normal;}
.foot-right a {color: #95b3d7;}

/**** PARTIE LIENS FA ****/
div#page-footer {
    border: 2px solid #fff;
    border-radius: 20px;
    box-shadow: 2px 2px 10px #E8E8E8;
    font-family: Poppins;
    text-transform: uppercase;
    font-weight: 700;
    margin: 20px 140px;
    padding: 8px;
}
div#page-footer a, .gen {
    font-family: Poppins;
    text-transform: uppercase;
    font-weight: 700;
    color: #777;
    font-size: 10px;
}

Et notre second participant, @Azalpher, qui gagnera aussi des PC gagne avec 48,5 points ! Il tient tête à la concurrence en terme de propreté de code avec 15 points !
Voici le lien pour observer sa superbe participation : Cliquez !

Et le code qui débute avec une partie du template à modifier :
Code:
<!-- BEGIN disable_viewonline -->

        <div class="qeel">

            <div class="headerQeel">
                <h1>Qui est là ?</h1>
            </div>
            
            <div class="mainQeel">
                
                <div class="colGauche">
                
                    <div class="joueursCo">
                        <h2>NOS JOUEURS CO'</h2>
                        <div class="blocJC">
                            {TOTAL_USERS_ONLINE}.<br/>
                            {LOGGED_IN_USER_LIST}
                        </div>
                    </div>

                    <div class="joueurs48">
                        <h2>IL Y A 48H...</h2>
                        <div class="bloc48">
                            {L_CONNECTED_MEMBERS}
                        </div>
                    </div>
                    
                </div>
                
                <div class="centerQeel">
                    
                    <div class="centre-haut">
                        
                        <div class="sepa-gauche"></div>
                        <div class="groupesQeel">

                            <h2>LES ÉQUIPES</h2>
                            
                            <div id="iconEquipe">
                            
                                <div class="equipe_une"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-ballon-aoba-johsai.png" width="50px" onclick="affiche_text('<h4>Aoba Johsai</h4><p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>')"/></div>
                                <div class="equipe_deux"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575999-ballon-fukurodani.png" width="50px" onclick="affiche_text('<h4>Fukurodani</h4><p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>')"/></div>
                                <div class="equipe_trois"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-ballon-karasuno.png" width="50px" onclick="affiche_text('<h4>Karasunoi</h4><p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>')"/></div>
                                <div class="equipe_quatre"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-ballon-nekoma.png" width="50px" onclick="affiche_text('<h4>Nekoma</h4><p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>')"/></div>
                            
                            </div>

                        </div>
                        <div class="sepa-droite"></div>
                    
                    </div>
                    
                    <div class="centre-bas">
                        
                        <div class="galerie">
                            <div id="rotator1566585156016"><a id="itemActif1566585156016" style="z-index:999" href="#" title="" target="_blank"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575949-aoba-johsai.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576106-fukurodani.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576256-karasuno.png" alt="" /></a><a  href="#" title="" target="_blank"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576040-nekoma.png" alt="" /></a></div>
                              
                           <section>
                                <!--<div id="slider">
                                    <ul>
                                        <li><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575949-aoba-johsai.png" width="356px" height="164px"/></li>
                                        <li><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576106-fukurodani.png" width="356px" height="164px"/></li>
                                        <li><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576256-karasuno.png" width="356px" height="164px"/></li>
                                        <li><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576040-nekoma.png" width="356px" height="164px"/></li>
                                  </ul>
                                    <div class="bande-deplacement">
                                        <a id="prev">«</a><br/>
                                        <a id="next">»</a>
                                    </div>
                              </div>-->
                            
                             <br/>
                            
                            </section>

                        </div>
                        
                        <div class="descGroupe">
                            
                            <div id="descG">
                                
                                <h4>Aoba Johsai</h4>
                                <p>Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolar sit amet, consectefur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                
                            </div>
                            
                        </div>
                        
                    </div>
                
                </div>
                
                <div class="colDroite">
                
                    <p><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576036-volleyeurs.png" width="50px"/> {TOTAL_USERS}</p>
                    <p><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576036-points.png" width="50px"/> {TOTAL_POSTS}</p>
                    <p><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576036-scores.png" width="50px"/> {TOTAL_USERS}</p>
                    
                    <div class="newestUser">
                        {NEWEST_USER}
                    </div>
                
                </div>

            </div>
            
            <div class="footerQeel">
                
                <h1>Nos copains</h1>

                <div class="partos">
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                </div>
                <br/>
                <div class="partos">
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                    <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                </div>
                <br/>
                <div id="volet_clos">
                    <div id="volet">
                        <div class="partos">
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                        </div>
                        <br/>
                        <div class="partos">
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                            <img src="https://image.noelshack.com/fichiers/2019/34/5/1566575939-copain.png" width="100px" height="35px"/>
                        </div>
                        <br/><br/>
                    </div>
                </div>
                
                <div class="btn_ouverture">
                    <div id="btn1">
                        <a href="#volet" onclick="bascule()" class="ouvrir"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566576036-ouvrir.png" width="30px"/></a>
                    </div>
                    <div id="btn2">
                        <a href="#volet_clos" onclick="basculeF()" id="close" class="fermer"><img src="https://image.noelshack.com/fichiers/2019/34/5/1566575940-fermer.png" width="30px"/></a>
                    </div>
                </div>
                
            </div>
        </div>
        
        <script language="javascript">
            function affiche_text(text){
                document.getElementById("descG").innerHTML = text;
            }
            
            function bascule(){
                var etatO = document.getElementById('btn1').style.display;
                var etatF = document.getElementById('btn2').style.display;
                var bouton = document.getElementById('afficheCache');
                
                if (etatO == 'none'){
                    document.getElementById('btn1').style.display='block';
                    document.getElementById('btn2').style.display='none';
                }else{
                    document.getElementById('btn1').style.display='none';
                    document.getElementById('btn2').style.display='block';
                }
            }
            
            function basculeF(){
                var etatO = document.getElementById('btn1').style.display;
                var etatF = document.getElementById('btn2').style.display;
                var bouton = document.getElementById('afficheCache');
                
                if (etatF == 'none'){
                    document.getElementById('btn2').style.display='block';
                    document.getElementById('btn1').style.display='none';
                }else{
                    document.getElementById('btn2').style.display='none';
                    document.getElementById('btn1').style.display='block';
                }
            }
        </script>

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 <script type="text/javascript">(function(){var r = document.getElementById("rotator1566585156016"), l = r.getElementsByTagName("A"), rotate = window.setInterval(function() {var a = document.getElementById("itemActif1566585156016"), n = jQuery(a).next()[0] || l[0]; if (!a) return window.clearInterval(rotate); n.style.opacity = 1;n.style.zIndex = 998;jQuery(a).animate({"opacity":0},800,"linear",function() {a.id = "";a.style.zIndex = "";n.id = "itemActif1566585156016";n.style.zIndex = 999})},3500)})();</script>

<!-- END disable_viewonline -->

Et son CSS :
Code:
.qeel{
    max-width: 900px;
    max-height: 1300px;
}

.headerQeel{
    width: 100%;
    min-height: 84px;
    background-color: #f48f46;
    border-bottom-style: solid;
    border-bottom-color: #f3812f !important;
    border-top-style: solid;
    border-top-color: #f3812f !important;
    border-width: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.headerQeel > h1{
    margin-left: auto;
    margin-right: auto;
    width: 190px;
    font-family: 'Carter One', cursive;
    font-size: xx-large;
}

.mainQeel{
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    min-height: 502px;
    display: flex;
    overflow: hidden;
    margin-top: 5px;
}

.colGauche{
    display: flex;
    flex-direction: column;
    width: 273px;
}

/* BLOC JOUEURS CONNECTES ACTUELLEMENT */

.joueursCo{
    width: 253px;
    margin-top: 88px;
}

.joueursCo > h2{
    color: white;
    text-align:center;
    font-family: 'Russo One', sans-serif;
}

.blocJC {
    width: 253px;
    min-height: 97px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-width: 4px;
    border-radius: 5px;
    color: white;
    clear: both;
    font-family: 'Montserrat', sans-serif;
    padding-left: 5px;
    word-break: break-word;
}

/* BLOC CONNECTES IL Y A 48H */

.joueurs48{
    
}

.joueurs48 > h2{
    color: white;
    text-align:center;
    font-family: 'Russo One', sans-serif;
}

.bloc48 {
    width: 253px;
    min-height: 97px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-width: 4px;
    border-radius: 5px;
    color: white;
    font-family: 'Montserrat', sans-serif;
    padding-left: 5px;
    word-break: break-word;
}

.centerQeel{
    width: 364px;
    display: flex;
    flex-direction: column;
}

.centre-haut{
    width: 100%;
    display: flex;
    flex-direction: row;
}

.sepa-gauche{
    width: 20px;
    height: 122px;
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-left-style: solid;
    border-left-color: #e68844 !important;
    margin-left: 15px;
    
}

.groupesQeel{
    width: 100%;
}

.groupesQeel > h2{
    color: white;
    text-align: center;
    font-family: 'Russo One', sans-serif;
}

#iconEquipe{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

.sepa-droite{
    width: 20px;
    height: 122px;
    border-left-width: 4px;
    border-right-width: 4px;
    border-top-width: 4px;
    border-bottom-width: 0px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-left-style: solid;
    border-left-color: #e68844 !important;
    margin-right: 15px;
}

.centre-bas{
    width: 357px;
    height: 362px;
    border-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-left-style: solid;
    border-left-color: #e68844 !important;
    margin-right: 15px;
}

.galerie{
    width: 349px;
    height: 164px;
}

a#prev{
  left: 15px;
  top: -25px;
  cursor: pointer;
}
a#prev:hover{
 
}

a#next{
  right: 15px;
  top: -25px;
  cursor: pointer;
}

a#next:hover{
  
}

section{
    text-align: center;
    width: 349px;
    height: 164px;
}

section a{
  color:  #40615a;
  font-size: 48px;
  position: absolute;
  text-decoration: none;
  z-index: 5;
}

section a:hover{
  color: black;
}

section a, #slider{
  display: inline-block;
  vertical-align: middle;
}

#slider{
    box-shadow: 0px 0px 25px 5px rgba(0,0,0,0.3);
    overflow: hidden;
    position: relative;
    width: 349px;
    height: 164px;
    z-index: 5;
}

#slider ul{
  margin: 0;
  padding: 0;
  position: relative;
  width: 1200px;
}

#slider li{
  background-color: #f49595;
  float: left;
  color: #3d3d3d;
  font-size: 30px;
  height: 164px;
  line-height: 167px;
  list-style: none;
  margin: 0;
  position: relative;
  width: 349px;
}

.bande-deplacement{
    width: 100%;
    background-color: rgba(255, 255,255, 0.4);
    height: 30px;
    position: absolute;
    bottom: 0;
}

.descGroupe{
    width: 100%;
    height: 190px;
    overflow-y: scroll;
    font-family: 'Montserrat', sans-serif;
}

#descG > h4{
    color: aqua;
    text-align: center;
}

#descG > p{
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    color: white;
}

.colDroite{
    display: flex;
    flex-direction: column;
    width: 262px;
    align-items: center;
    justify-content: center;
    font-family: 'Montserrat', sans-serif;
}

.colDroite img{
    vertical-align: middle;
}

.colDroite p{
    color:white;
}

.newestUser{
    color: white;
}

.footerQeel{
    width: 100%;
    min-height: 84px;
    background-color: #f48f46;
    border-bottom-style: solid;
    border-bottom-color: #f3812f !important;
    border-top-style: solid;
    border-top-color: #f3812f !important;
    border-width: 2px;
    margin-top: 5px;
}

.footerQeel > h1{
    margin-left: auto;
    margin-right: auto;
    width: 182px;
    font-family: 'Carter One', cursive;
    font-size: xx-large;
}

.partos{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
}

#volet {
 position: absolute;
 left: -2000px;
}

#volet{
 background-color: #f48f46;
}

#volet a.ouvrir, #volet a.fermer {
 position: absolute;
 right: -88px;
 top: 150px;

 /* quelques styles CSS3 */
 -ms-transform: rotate(270deg);
 -moz-transform: rotate(270deg);
 -webkit-transform: rotate(270deg);
 transform: rotate(270deg);

 border-radius: 0 0 8px 8px;
}

#volet {
 -webkit-transition: all .5s ease-in;
 transition: all .5s ease-in;
}

#volet:target {
 left: 0;
    position: relative;
}

.btn_ouverture{
    width: 60px;
    margin-left: auto;
    margin-right: auto
}

#btn1{
    position: absolute;
    margin-top: -10px;
}

#btn2{
    display: none;
}

#btn2{
    position: absolute;
    margin-top: -10px;
}


::-webkit-scrollbar {
      width: 15px;
}

::-webkit-scrollbar-track {
      background-color: rgba(0,0,0, 0.3);
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.2);
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
    background-color: black;
    border-bottom-style: solid;
    border-bottom-color: #e68844 !important;
    border-top-style: solid;
    border-top-color: #e68844 !important;
    border-right-style: solid;
    border-right-color: #e68844 !important;
    border-left-style: solid;
    border-left-color: #e68844 !important;
    border-radius: 5px;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: black;
}

#rotator1566585156016 {
  height:174px;
}

#rotator1566585156016 a{
  position:absolute;
  background:#FFFFFF;
}
#rotator1566585156016 img {
  height:164px;
  width:349px;
}

Encore une fois merci à tous, si vous avez des remarques à faire à propos des concours ou des envies concernant certains thèmes spécifiques n'hésitez pas à nous le signaler.

Épicodement,
Vos Animatrices  VOTE COTM Codage n°10 3544256468

Nataku
Anim et mini-graphiste
Date d'inscription : 29/11/2018
Messages : 696


VOTE COTM Codage n°10 QlwWl

VOTE COTM Codage n°10 W1ulfwm

VOTE COTM Codage n°10 4ny2
# Re: VOTE COTM Codage n°10 - le Lun 2 Sep 2019 - 13:10
Bravo pour vos participations, un vrai plaisir pour les yeux VOTE COTM Codage n°10 3775839356
Myrddin
Admin et designer
Date d'inscription : 24/03/2016
Messages : 2563


Alors comme ça on aime coder ? On aime le design ? Postule pour devenir designer !

VOTE COTM Codage n°10 Qqlf
Merci Azumii et Auryana pour les avatars et Azumii pour la signature VOTE COTM Codage n°10 3775839356

VOTE COTM Codage n°10 If7y
Merci Aed VOTE COTM Codage n°10 3775839356 ♥️
# Re: VOTE COTM Codage n°10 - le Lun 2 Sep 2019 - 14:23
Bravo à tous les deux ! o/ En terme d'envie j'avoue que j'aimerais bien voir des petites fiches de présentation ou des signatures codées dans les prochains concours, des trucs pas forcément difficiles mais qui demande une certaine ingéniosité pour que ça soit original et pas encombrant o3o
Sygea
Accro au forum
Date d'inscription : 04/04/2016
Messages : 825


# Re: VOTE COTM Codage n°10 - le Lun 2 Sep 2019 - 15:50
Hey ! Merci de ton avis @Sygea, on va noter ça de côté et prendre en compte pour les prochains concours de codage VOTE COTM Codage n°10 3775839356
Nataku
Anim et mini-graphiste
Date d'inscription : 29/11/2018
Messages : 696


VOTE COTM Codage n°10 QlwWl

VOTE COTM Codage n°10 W1ulfwm

VOTE COTM Codage n°10 4ny2
# Re: VOTE COTM Codage n°10 - le Lun 2 Sep 2019 - 18:30
Bravo à vous deux ! Un bonus de 50 PC chacun vous a été distribué !
Eskimo
Admin et maxi-graphiste - Maîtresse des pingouins
Date d'inscription : 31/03/2012
Messages : 4521


VOTE COTM Codage n°10 4g7g
Merci Yozo Lovely

VOTE COTM Codage n°10 B584

VOTE COTM Codage n°10 OKD4D
Merci Sygea  Panique  Lovely
Contenu sponsorisé
Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum