Y a de l'ambiance #2

B'jour, b'soir.
Je vous propose quelque chose d'un peu particulier pour ce défi. Pour rappel :

"Une sensation, une émotion...ça passe aussi par les balises" - Le principe de cette épreuve est de coder un élément, imposé ou pas, qui peut être un message ou un élément de forum, en ne se basant QUE sur une ambiance, un mot, une image donnée par l'animateur. S'il vous dit "Apocalypse" on passe en mode sombre et oppressant, mais s'il vous dit "Couché de soleil" alors on sort les tons rouge & orangés. Qui a dit qu'il fallait forcément être graphiste pour exprimer des émotions ?

Pour le précédent Nyo vous avait proposé un mot, et bien moi je vous propose une image. En fait ce n'est pas une image à proprement parlé, mais une création. (Celui ou celle qui trouve la galerie du ou de la propriétaire aura le droit à un cookie \o/ )
Voilà la bête :

Spoiler:

À vous de l'interprêter comme vous le voulez. Je vous demande juste de rester logique et de ne pas partir trop trop trop loin sous prétexte que c'est une image ><.

Je ne vous impose pas la structure, épatez-moi !

En revanche je vous demande juste qu'on puisse en avoir un aperçu sur N-U. Genre si vous me faite une page d'accueil, vous postez le screen ainsi que le lien du forum où elle est. Et il faut qu'elle reste disponible jusqu'à la fin du défi !


Vous avez 20 jours pour ce faire. Je lancerai donc les votes le 3 mars (:

Tu veux forcément un élément de forum ou ça peut être n'importe quoi tant que c'est codé? ^^

Je veux qu'on puisse l'utiliser sur un forum. Peu importe ce que c'est, forumactif doit le supporter. C'est ma seule condition x)

C'est plutôt cool comme idée si j'ai un coup de génie, je tâcherai de te faire un truc!

Je ne sais plus s'il a gagné, mais c'est bien dans sa galerie que je l'ai trouvé xD

Wahou ! L'image est superbe et l'idée aussi... Je crois que je vais participer ! ^^

Il vous reste une dizaine de jours pour poster votre création ~

Il vous reste moins d'une semaine ! N'ayez pas peur de poster un rendu (: (Le mien arrive bientôt si ça peut vous rassurer u.u)

Je crois que ce thème n'inspire vraiment pas ...

Moi oui, je le fais bientôt!

C'est assez simple comme truc, mais j'aime pas les trucs compliqués

Et oui, c'est bien semblable au qeel de Folk Stories si quelqu'un le remarque, j'ai fait leur qeel en m'inspirant de celui-là.

---

Voilà le lien (et on va tout en bas) : http://forum-test-onyx10.forumsgratuits.fr/

Et voilà le screen (même si je recommande le lien puisqu'on ne voit pas les transitions sur le screen) :

---

Et voici les codes ~

CSS:

Code:

/* ------------------------------------------- QEEL ------------------------------------------- */

/*Les barres de défilement normales*/
.qeel_inside::-webkit-scrollbar {width:10px;background: #353535;border-radius:12px;}
.qeel_inside::-webkit-scrollbar-thumb {background:#000000;border-radius:12px;}
.qeel_inside::-webkit-scrollbar-corner {background:none;}


/* Fond du qeel */
#qeel {
  width: 776px;
  background: #151515;
  border-radius: 20px;
  margin: auto;
  margin-top: 15px;
  padding: 10px;
  padding-bottom: 25px;
  padding-top: 15px;
  border-top: 10px solid #101010;
  border-bottom: 10px solid #101010;
  box-shadow: 0px 0px 10px #000000;
}
/* Liens du qeel */
#qeel a {
  color: #7464bc;
  text-shadow: 1px 1px 1px #000000;
  transition: all .25s;
  -webkit-transition: all .25s;
}
/* Liens survolés du qeel */
#qeel a:hover {
  color: #d51c89;
}


/* Titre du qeel */
.qeel_title {
  display: block;
  margin: auto;
  font-size: 70px;
  margin-bottom: 10px;
  font-family: monotype corsiva;
  text-align: center;
}
/* Titre survolé du qeel */
.qeel_title:hover {
  text-decoration: none!important;
}


/*Positionnement des blocs*/
.qeel_blocs {
  float: left;
  margin-left: 15px;
  margin-top: 15px;
  text-align: center;
}


/* Blocs du qeel */
.qeel_bloc {
  padding: 10px;
  border-right: 2px solid #7464bc;
  border-left: 2px solid #7464bc;
  background-color: #202020;
  font-size: 14px;
  color: #a3a3a3;
  font-family: calibri;
  text-align: left;
  transition: all .25s;
  -webkit-transition: all .25s;
}

/*  Blocs du qeel survolés */
.qeel_bloc:hover {
  border-right: 2px solid #d51c89;
  border-left: 2px solid #d51c89;
}


.qeel_inside {
  margin-right: -10px;
  padding-right: 10px;
  overflow: auto;
}
/* Premier bloc - Stats */
#qeel_bloc1, #qeel_bloc1 .qeel_inside {
  width: 285px;
  height: 140px;
}
#contenu_qeelonglet_Stats {
  text-align: center;
}
/* Deuxième bloc - Groupes */
#qeel_bloc2, #qeel_bloc2 .qeel_inside {
  width: 398px;
  height: 140px;
  text-align: justify;
}
/* Troisième bloc - Message */
#qeel_bloc3, #qeel_bloc3 .qeel_inside {
  width: 215px;
  height: 120px;
  text-align: center;
}
/* Quatrième bloc - Connectés 24h */
#qeel_bloc4, #qeel_bloc4 .qeel_inside {
  width: 215px;
  height: 120px;
}
/* Cinquième bloc - Connectés */
#qeel_bloc5, #qeel_bloc5 .qeel_inside {
  width: 215px;
  height: 120px;
}


/* Espacement des onglets */
#qeelonglet_Credit, #qeelonglet_Stats, #grouponglet_Groupe2, #grouponglet_Groupe5 {
  margin-right: 20px;
  margin-left: 20px;
}
/* Onglets du qeel */
.qeelonglet, .grouponglet {
  display: inline-block;
  padding: 4px;
  padding-left: 20px;
  padding-right: 20px;
  border-top: 1px solid #151515;
  border-bottom: 1px solid #151515;
  text-align: center;
  font-size: 24px;
  color: #7464bc;
  font-family: 'Great Vibes',cursive;
  transition: all 0.25s;
  -webkit-transition: all .25s;
  text-shadow: 0 0 1px #000000;
}
/* Onglets survolés */
.qeelonglet_0:hover, .grouponglet_0:hover {
  cursor: pointer;
  border-top: 1px solid #d51c89;
  border-bottom: 1px solid #d51c89;
  background-color: #202020;
  color: #d51c89;
}
/* Onglet actif */
.qeelonglet_1, .grouponglet_1 {
  border-top: 1px solid #7464bc;
  border-bottom: 1px solid #7464bc;
  background-color: #202020;
}
/* Onglet actif survolé */
.qeelonglet_1:hover, .grouponglet_1:hover {
  border-top: 1px solid #d51c89;
  border-bottom: 1px solid #d51c89;
  color: #d51c89;
}
#qeelonglet_Stats, #qeelonglet_Credits, #grouponglet_Groupe1, #grouponglet_Groupe2, #grouponglet_Groupe3 {
  border-bottom: none;
}
#qeelonglet_Anniversaires, #grouponglet_Groupe4, #grouponglet_Groupe5, #grouponglet_Groupe6 {
  border-top: none;
}
/* Cacher le contenu des onglets non actifs */
.contenu_qeelonglet, .contenu_grouponglet {
  display: none;
}


/* Mise en forme pour contrer FA */
#birthday .gensmall, #totalconn .gensmall {
  font-size: 14px;
  font-family: calibri;
  color: #a3a3a3;
}
#birthday .row1, #totalconn  .row1 {
  background-color: transparent;
}

/* ------------------------------------------- FIN QEEL ------------------------------------------- */

Section viewonline du template Index_body :

Code:

<!-- BEGIN disable_viewonline -->
<script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
</script>
<script type="text/javascript">
        //<!--
                function change_grouponglet(name)
                {
                        document.getElementById('grouponglet_'+anc_grouponglet).className = 'grouponglet_0 grouponglet';
                        document.getElementById('grouponglet_'+name).className = 'grouponglet_1 grouponglet';
                        document.getElementById('contenu_grouponglet_'+anc_grouponglet).style.display = 'none';
                        document.getElementById('contenu_grouponglet_'+name).style.display = 'block';
                        anc_grouponglet = name;
                }
        //-->
</script>
<link href='http://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css' />
<div id="qeel">
  <a class="qeel_title" href="{U_VIEWONLINE}">
    Qui est en ligne?
  </a>
  <div class="qeel_blocs">
    <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Stats" onclick="javascript:change_qeelonglet('Stats');">
      Stats
    </span>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Credits" onclick="javascript:change_qeelonglet('Credits');">
      Crédits
    </span>
    <div id="qeel_bloc1" class="qeel_bloc">
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Stats"><div class="qeel_inside">
        <strong>Bienvenue sur World of Colors !</strong><br /><br />
        <span id="totaluser">{TOTAL_USERS}</span><span id="totalpost">{TOTAL_POSTS}</span>.<br />
        <span id="newuser">{NEWEST_USER}</span>.<br />
        Bienvenue dans une famille de fous \o/<br /><br /><span id="totalonline">{TOTAL_USERS_ONLINE}</span>.
        <script type="text/javascript">
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/Nous avons/,"");
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membre enregistré/,"punk - ");
          document.getElementById('totaluser').innerHTML=document.getElementById('totaluser').innerHTML.replace(/membres enregistrés /,"punks - ");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/Nos membres ont posté un total de/,"");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/message/,"moment inoubliable");
          document.getElementById('totalpost').innerHTML=document.getElementById('totalpost').innerHTML.replace(/messages/,"moments inoubliables");
          document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier punk à nous avoir rejoint est");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateur /,"punk ");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/utilisateurs /,"punks ");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/en ligne ::/,"en ligne :");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistré,/,"habitué,");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Enregistrés,/,"habitués,");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisible /,"fantôme ");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invisibles /,"fantômes ");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invité /,"curieux");
          document.getElementById('totalonline').innerHTML=document.getElementById('totalonline').innerHTML.replace(/Invités /,"curieux");
        </script>
        </div></div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Credits"><div class="qeel_inside">
        Les idées, le contexte, l'intrigue, la structure et le système du forum ont tous été imaginés et mis en place par <strong>Arya Strowsky</strong>. Merci de respecter son travail.<br /><br />
        Le Design a été fait par <strong>Lucas</strong> de <a href="http://www.never-utopia.com/" target="_blank">Color's Dream</a>.<br />
        Le Codage nous vient d'<strong>Onyx</strong> de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.
        </div></div>
      <div class="contenu_qeelonglet" id="contenu_qeelonglet_Anniversaires"><div class="qeel_inside">
        <table id="birthday" cellspacing="0" border="0" cellpadding="0">
          {L_WHOSBIRTHDAY_TODAY}
          {L_WHOSBIRTHDAY_WEEK}
        </table>
        </div></div>
    </div>
    <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Anniversaires" onclick="javascript:change_qeelonglet('Anniversaires');">
      Anniversaires
    </span>
  </div>
  <script type="text/javascript">
    //<!--
      var anc_qeelonglet = 'Stats';
      change_qeelonglet(anc_qeelonglet);
    //-->
  </script>
  <div class="qeel_blocs">
    <span class="grouponglet_1 grouponglet" id="grouponglet_Groupe1" onclick="javascript:change_grouponglet('Groupe1');">
      Groupe 1
    </span>
    <span class="grouponglet_0 grouponglet" id="grouponglet_Groupe2" onclick="javascript:change_grouponglet('Groupe2');">
      Groupe 2
    </span>
    <span class="grouponglet_0 grouponglet" id="grouponglet_Groupe3" onclick="javascript:change_grouponglet('Groupe3');">
      Groupe 3
    </span>
    <div id="qeel_bloc2" class="qeel_bloc">
      <div class="contenu_grouponglet" id="contenu_grouponglet_Groupe1"><div class="qeel_inside">
        Incenderat autem audaces usque ad insaniam homines ad haec, quae nefariis egere conatibus, Luscus quidam curator urbis subito visus: eosque ut heiulans baiolorum praecentor ad expediendum quod orsi sunt incitans vocibus crebris. qui haut longe postea ideo vivus exustus est.
        <br />
        <br />
        Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
        <br />
        <br />
        Postremo ad id indignitatis est ventum, ut cum peregrini ob formidatam haut ita dudum alimentorum inopiam pellerentur ab urbe praecipites, sectatoribus disciplinarum liberalium inpendio paucis sine respiratione ulla extrusis, tenerentur minimarum adseclae veri, quique id simularunt ad tempus, et tria milia saltatricum ne interpellata quidem cum choris totidemque remanerent magistris.
      </div></div>
      <div class="contenu_grouponglet" id="contenu_grouponglet_Groupe2"><div class="qeel_inside">
        Description du groupe 2, etc...
      </div></div>
      <div class="contenu_grouponglet" id="contenu_grouponglet_Groupe3"><div class="qeel_inside">
        Description du groupe 3, etc...
      </div></div>
      <div class="contenu_grouponglet" id="contenu_grouponglet_Groupe4"><div class="qeel_inside">
        Description du groupe 4, etc...
      </div></div>
      <div class="contenu_grouponglet" id="contenu_grouponglet_Groupe5"><div class="qeel_inside">
        Description du groupe 5, etc...
      </div></div>
      <div class="contenu_grouponglet" id="contenu_grouponglet_Groupe6"><div class="qeel_inside">
        Description du groupe 6, etc...
      </div></div>
    </div>
    <span class="grouponglet_0 grouponglet" id="grouponglet_Groupe4" onclick="javascript:change_grouponglet('Groupe4');">
      Groupe 4
    </span>
    <span class="grouponglet_0 grouponglet" id="grouponglet_Groupe5" onclick="javascript:change_grouponglet('Groupe5');">
      Groupe 5
    </span>
    <span class="grouponglet_0 grouponglet" id="grouponglet_Groupe6" onclick="javascript:change_grouponglet('Groupe6');">
      Groupe 6
    </span>
    <script type="text/javascript">
      //<!--
              var anc_grouponglet = 'Groupe1';
              change_grouponglet(anc_grouponglet);
      //-->
    </script>
  </div>
  <div class="qeel_blocs">
    <div id="qeel_bloc3" class="qeel_bloc"><div class="qeel_inside">
      <script type="text/javascript" src="http://tinyurl.com/var-fa"></script>
      Bonjour à toi <strong><span class="USERNAME"></span></strong> !<br /><br />
      Tu as posté <strong><span class="USERCOUNTPOST"></span></strong> messages depuis ton inscription.<br />
      Merci de ton implication \o/<br /><br />
      <a href="/search?search_id=egosearch" target="_blank">Voir mes messages</a><br />
    </div>
  </div></div>
  <div class="qeel_blocs">
    <div id="qeel_bloc4" class="qeel_bloc"><div class="qeel_inside">
      <div id="totalconn"><table cellspacing="0" border="0" cellpadding="0">{L_CONNECTED_MEMBERS}</table></div>
      <script type="text/javascript">
        document.getElementById('totalconn').innerHTML=document.getElementById('totalconn').innerHTML.replace(/Membres connectés/,"Punks connectés");
      </script>
    </div>
  </div></div>
  <div class="qeel_blocs">
    <div id="qeel_bloc5" class="qeel_bloc"><div class="qeel_inside">
      <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
      <script type="text/javascript">
        document.getElementById('loggedlist').innerHTML=document.getElementById('loggedlist').innerHTML.replace(/Utilisateurs enregistrés/,"Punks connectés");
      </script>
    </div>
  </div></div>
  <div style="clear: both;"></div>
</div>
<!-- END disable_viewonline -->

Nya, c'est super Onyx (a une participation ) Mais tu n'as pas mis les codes ><

J'avais... oublié T_T

C'est rajouté

Nikel (:

---

Voici donc ma participation :




Et pour voir en direct c'est ici !

Le code HTML :

Code:

<link href="http://fonts.googleapis.com/css?family=Keania+One|Expletus+Sans:400italic|Warnes" rel="stylesheet" type="text/css" />
<div class="fiche">
                  
   <div class="titre">
              Le titre du forum       
   </div><br />       
   <div class="banniere">
                     
   </div><br />       
   <div class="bloc">
                   
      <div class="soustitre">
             Contexte   
      </div><br />   
      <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam non varius lectus, et euismod enim. Fusce dui sem, congue nec quam vel, aliquet rhoncus nulla. Phasellus efficitur justo sit amet eros fringilla, nec porta dolor ultricies. Donec at felis tincidunt, sodales neque at, tincidunt ipsum. Maecenas imperdiet dui magna, in dignissim elit eleifend a. Aliquam et magna a enim elementum pulvinar ut vel magna. Nulla est justo, luctus vitae diam eu, commodo venenatis orci. Pellentesque non semper ipsum, aliquam dignissim risus. Pellentesque sodales nunc eget dui hendrerit imperdiet.   
      </p>
           
   </div>
                  
   <div class="bloc">
                   
      <div class="soustitre">
             News   
      </div><br />   
      <p>
           00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br />00/00/00 :: Pellentesque sodales nunc eget dui hendrerit imperdiet. <br /> 
      </p>
           
   </div><br /><br /><a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <a href=""><img src="http://nsa33.casimages.com/img/2015/03/01/15030102541423715.png" class="partoch" /></a> <br /><br /><a href="" class="credit">A-Lice</a><br /><br />
</div>

Et le CSS

Code:

.fiche {
width: 750px;
paddint: 10px;
border-radius: 100px;
background: #f1f1f1;
margin: auto;
border: 2px dotted white;
transition: all 0.5s;
}

.fiche:hover {
border-radius: 0px;
background: black;
border-top: solid 2px #4833b5;
border-bottom: solid 2px #bb1846;
border-left: none;
border-right: none;
transition: all 0.5s;
}

.titre {
text-align: center;
font-size: 25px;
height: 30px;
padding: 10px;
transition: all 0.5s;
color: white;
font-family: 'Expletus Sans', cursive;
text-shadow: 0px 0px 5px white;
}

.fiche:hover .titre {
transition: all 0.5s;
font-family: 'Keania One', cursive;
font-size: 25px;
letter-spacing: 2px;
}

.banniere {
width: 700px;
height: 200px;
border-radius: 100px;
margin: auto;
border: 2px dotted white;
transition: all 0.5s;
overflow: hidden;
background-image: url(http://nsa33.casimages.com/img/2015/03/01/150301022241788998.png);
}

.fiche:hover .banniere {
border-radius: 0px;
transition: all 0.5s;
border-top: solid 2px #4833b5;
border-bottom: solid 2px #bb1846;
background-image: url(http://nsa33.casimages.com/img/2015/03/01/150301022244568300.png);
}

.bloc {
display: inline-block;
width: 350px;
height: 165px;
border-radius: 80px;
border: 2px dotted white;
margin-right: 7px;
margin-left: 7px;
background: #f8ceda;
font-size: 13px;
text-align: justify;
transition: all 0.5s;
}

.fiche:hover .bloc {
border-radius: 0px;
border-top: solid 2px #4833b5;
border-bottom: solid 2px #bb1846;
transition: all 0.5s;
background: #94908f;
border-left: none;
border-right: none;
width: 354px;
opacity: 0.5;
}

.partoch { 
width: 50px;
height: 50px;
display: inline-block;
border-radius: 30px;
margin-left: 7px;
transition: all 0.5s;
}

.fiche:hover .partoch {
border-radius: 0px;
transition: all 0.5s;
}

a.credit {
text-decoration: none;
color: #f8ceda;
transition: all 0.5s;
text-align: center;
display: inline-block;
font-size: 11px;
text-shadow: 0px 0px 5px pink;
font-family: 'Expletus Sans', cursive;
}

.fiche:hover a.credit {
transition: all 0.5s;
color: white;
text-shadow: 0px 0px 5px white;
font-family: 'Warnes', cursive;
}

.soustitre {
text-align: center;
font-size: 22px;
height: 25px;
transition: all 0.5s;
color: white;
padding: 5px;
margin-bottom: -10px;
font-family: 'Expletus Sans', cursive;
}

.fiche:hover .soustitre {
transition: all 0.5s;
font-family: 'Keania One', cursive;
font-size: 20px;
letter-spacing: 2px;
}

p {
height: 100px;
width: 300px;
margin: auto;
overflow: auto;
}