L'atelier de Neph' | Graphisme, transpas, codage et noms

Âmes sensibles (comme moi /paf/) s'abstenir /re-paf/:

Code:

http://zupimages.net/up/17/15/6sp0.gif

Code:

http://zupimages.net/up/17/15/pnqz.gif

Le réglo a écrit:Les UP's se font chaque semaine, tout UP fait avant vaudra un rallongement d'une semaine avant que je vous rende votre commande.

Code:

<link href="https://fonts.googleapis.com/css?family=Lobster|Satisfy" rel="stylesheet"><center><div class="qeel_blocprincipal">
  <div class="qeel_image"></div>
  <div class="qeel_titre">Qui erre dans Londres ?</div>
  <div style="font-family: 'satisfy', cursive; font-size: 20px; color: #515151;">Et à qui demander son chemin ?</div>
  <table><tr><td><div class="qeel_sous-titre">État des lieux</div><div class="qeel_stats"><span id="nombremessages">{TOTAL_POSTS}</span><span id="totalusers"> {TOTAL_USERS}</span>
    <span id="newuser"> {NEWEST_USER}, puisse-t-il s'attacher à notre belle capitale !</span>
    <span id="totalonline"> {TOTAL_USERS_ONLINE}</span>
    <span id="gensconnectés">{LOGGED_IN_USER_LIST}</span></div></td>
 
    <td><div class="qeel_sous-titre">Habitants en vadrouille</div><table class="qeel_24h"><tr><td><span id="24h">{L_CONNECTED_MEMBERS}</span></td></tr></table>
</td></tr></table>
 <div class="qeel_groupe"><span class="groupes">
  <span class="bubulle"><span style="color: #44d040; margin-left: -20px; margin-right: 20px;">I've got the power</span><span class="bubulle-hidden"><div class="onglet1"><span style="color: #CDFFC4; font-size: 14px;">I've got the power</span> • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis ac magna sed pellentesque. Integer et metus eu lacus posuere placerat ut non velit. Suspendisse potenti. Suspendisse euismod libero et nisl bibendum, eu porta justo efficitur. Vestibulum sit amet libero magna. Quisque luctus vestibulum lectus, quis ornare lorem molestie eu. Cras sed magna accumsan, tristique urna in, pulvinar ex.</div></span> </span>
    <span class="bubulle"><span style="color: #EEAA00; margin-right: 20px;">I've got the normality</span><span class="bubulle-hidden"><div class="onglet2"><span style="color: #FFEFB7; font-size: 14px;">I've got the normality</span> • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis ac magna sed pellentesque. Integer et metus eu lacus posuere placerat ut non velit. Suspendisse potenti. Suspendisse euismod libero et nisl bibendum, eu porta justo efficitur. Vestibulum sit amet libero magna. Quisque luctus vestibulum lectus, quis ornare lorem molestie eu. Cras sed magna accumsan, tristique urna in, pulvinar ex.</div></span></span>
  <span class="bubulle"><span style="color: #000">I've got the choice</span><span class="bubulle-hidden"><div class="onglet3"><span style="font-size: 14px;">I've got the choice</span> • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut venenatis ac magna sed pellentesque. Integer et metus eu lacus posuere placerat ut non velit. Suspendisse potenti. Suspendisse euismod libero et nisl bibendum, eu porta justo efficitur. Vestibulum sit amet libero magna. Quisque luctus vestibulum lectus, quis ornare lorem molestie eu. Cras sed magna accumsan, tristique urna in, pulvinar ex.</div></span></span>
  </span><div class="qeel_crédit"> Codage par Neph avec l'aide de Kayl pour Biket seulement</div></center>
 
 
  <script type="text/javascript">
        document.getElementById('nombremessages').innerHTML=document.getElementById('nombremessages').innerHTML.replace(/Nos membres ont posté un total de/,"Nos habitants se sont parlé");
      document.getElementById('nombremessages').innerHTML=document.getElementById('nombremessages').innerHTML.replace(/messages/,"fois.");
    document.getElementById('totalusers').innerHTML=document.getElementById('totalusers').innerHTML.replace(/Nous avons/,"Nous comptons");
document.getElementById('totalusers').innerHTML=document.getElementById('totalusers').innerHTML.replace(/membres enregistrés/,"londoniens dans nos rues.");
    document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Notre dernier(ère) arrivé(e) se nomme");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Il y a en tout/,"Actuellement, on peut croiser");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs en ligne/,"londoniens");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré/,"habitant");
document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés/,"habitants");
    document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible/,"espion");
    document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles/,"espions");
    document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité/,"touriste.");
    document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités/,"touristes.");
  </script>

Code:

/******************* DEBUT QEEL ***************/

.qeel_blocprincipal {
  background: #DB946B;
  height: 515px;
  width: 700px;
}

.qeel_image {
  width: 700px;
  height: 200px;
  background-image: url("http://zupimages.net/up/17/15/t2g1.png");
  overflow: hidden;
}

.qeel_descri-groupes {
  width: 500px;
  margin: 20px;
  height: 140px;
  opacity: 0.6;
  font-family: times;
  color: #fff;
  background: #000;
  padding: 8px;
  text-align: justify;
  overflow: hidden
}

.qeel_descri-groupes:hover {
  overflow: auto;
}

.groupes {
      font-family: 'lobster', cursive;
  font-size: 23px;
  margin-left: 10px;
  margin-bottom: -30px;
    }

.qeel_groupes {
 width:636px;
  height: 35px;
    background-color: #F5CFAB;   
  padding: 5px;
  text-align: center;
}

 .bubulle{
      position: relative;
    }
    .bubulle .bubulle-hidden{
      display: none;
      position: absolute;
      top: -435px;
      left: 20px;
    }
         
    .bubulle:hover .bubulle-hidden {
      display: block;}

.onglet1 {
  background-color: #000; 
  color: #fff;
  opacity: 0.6;
  padding: 5px;
  text-align: justify;
  width: 500px;
  height: 150px;
  margin-left: -25px;
  font-size: 13px;
  font-family: times;
  overflow: auto;
}

.onglet2 {
  background-color: #000; 
  color: #fff;
  opacity: 0.6;
  padding: 5px;
  text-align: justify;
  margin-left: -184px;
  width: 500px;
  height: 150px;
  font-size: 13px;
  font-family: times;
  overflow: auto;
}

.onglet3 {
  background-color: #000; 
  color: #fff;
  opacity: 0.6;
  padding: 5px;
  text-align: justify;
  margin-left: -393px;
  width: 500px;
  height: 150px;
  font-size: 13px;
  font-family: times;
  overflow: auto;
}

.qeel_titre {
  font-family: 'satisfy', cursive;
  font-size: 35px;
  color: #FACFB6;
  transition: all 1s;
  margin-bottom: -13px;
}

.qeel_titre:hover {
  letter-spacing: 3px;
  transition: all 1s;
}

.qeel_sous-titre {
  font-family: 'lobster', cursive;
  font-size: 23px;
  margin-left: 10px;
  color: #515151;
  margin-bottom: -30px;
}

.qeel_stats {
  background: #F5CFAB;
  padding: 5px;
  margin: 20px;
  color: #525252;
  font-family: times;
    font-size: 16px;
  text-align: justify;
  overflow: hidden;
  width: 290px;
  height: 125px;
}

.qeel_stats:hover {
  overflow: auto;
}

.qeel_24h {
  background: #F5CFAB;
  padding: 5px;
  margin: 20px;
  color: #525252;
  font-family: times;
  text-align: justify;
  overflow: hidden;
  width: 290px;
  height: 125px;
}


.qeel_24h:hover {
  overflow: auto;
}

.qeel_groupes {
  background: #F5CFAB;
  padding: 5px;
  margin: 20px;
  margin-top: -5px;
  font-family: 'lobster', cursive;
  overflow: hidden;
  width: 636px;
  padding-top: 5px;
  height: 35px;
  font-size: 18px;
}

.qeel_24h td.row1 {
background: #F5CFAB;
}

.qeel_24h td.row1 .gensmall {
  background: #F5CFAB;
  color: #525252;
  font-family: times;
 text-align: justify;
   position: relative;
   top: -52px;
  font-size: 16px;
}

.qeel_crédit {
  font-size: 10px;
  text-align: right;
  margin-right: 30px;
  margin-top: 20px;
  color: #000;
}
   
/******************** FIN QEEL *************************/