AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    [VOTE][CODE] Y'a de l'ambiance ! #5 - le secret - Onyx gagnante !

    Partagez

    Sondage

    Qui évoque au mieux le secret ?

    [ 6 ]
    26% [26%] 
    [ 17 ]
    74% [74%] 

    Total des votes: 23
    avatar
    Youp
    FémininAge : 22Messages : 579

    le Lun 27 Fév 2017 - 9:13

    Oyé oyé ! Déjà je tiens à m'excuser pour cette attente interminable, voici enfin les votes du défi "Y'a de l'ambiance" numéro 5. Il vous fallait user de votre plus beau css et de votre plus fort html afin de créer un codage de fiche de présentation OU de fiche de relation qui évoque : LE SECRET, l'art de dissimuler ou de révéler, de dire à demi mot, de ne jamais avouer ...

    A vos votes, partez !
    Vous avez 15 jours.


    Participation secrète numéro un:


    Prénom P. Nom
    Caractère

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.

    Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.
    Nom : Ecrire ici
    Prénom : Ecrire ici
    Âge : Ecrire ici
    Date de Naissance : Ecrire ici
    Orientation sexuelle : Ecrire ici
    Groupe : Ecrire ici
    Nationalité & Ascendance : Ecrire ici
    Particularités : Ecrire ici
    Baguette : Ecrire ici
    Patronus : Ecrire ici
    Epouvantard : Ecrire ici
    Maison : Ecrire ici
    Situation Familiale : Ecrire ici
    Célébrité : Ecrire ici
    Crédit : Ecrire ici
    Physique

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.
    Histoire

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.

    Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.
    ©XXX. Images By ©Magnificient.


    Prénom : Ecrire Ici
    Pseudo : Ecrire Ici
    Âge : Ecrire Ici
    Comment avez-vous connu le forum ?: Ecrire Ici
    Commentaire : Ecrire Ici
    Code du règlement :

    ©XXX. Images By ©Magnificient.


    Code:

    <style type="text/css">.titre{font-family:Damion;font-size:40px;color:#561616;text-shadow:#333333 1px 1px;}.globale{color:#000;width:510px;height:725px;overflow:hidden;background-color:#696969;box-shadow:1px 1px 1px #333333;}.caractere{width:509px;height:200px;overflow:hidden;}.imgcaractere{position:relative;z-index:2;width:520px;height:200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.caracterecontent{position:relative;z-index:1;width:450px;height:170px;padding:25px;font-family:Times New Roman;font-size:14px;overflow:auto;}.titre2{font-family:Damion;font-size:25px;color:#8B0000;}.table{width:500px;height:320px;z-index:2;}.qr{width:300px;height:320px;overflow:auto;color:#C0C0C0;}.physique{width:200px;height:320px;overflow:hidden;}.imgphysique{position:relative;left:0px;z-index:2;width:200px;height:320px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.physiquecontent{position:relative;z-index:1;width:150px;height:250px;padding:25px;font-family:Times New Roman;font-size:14px;overflow:auto;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;top:-320px;left:-200px;}.histoire{width:509px;height:200px;overflow:hidden;}.imghistoire{position:relative;z-index:2;width:520px;height:200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.histoirecontent{position:relative;z-index:1;width:450px;height:170px;padding:25px;font-family:Times New Roman;font-size:14px;overflow:auto;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;top:-600px;}.gras{font-weight:bold;}.reponse{visibility:hidden;}.qr:hover .reponse{visibility:visible;}.caractere:hover .imgcaractere{margin-top:-200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.physique:hover .imgphysique{opacity:0;left:200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.physique:hover .physiquecontent{transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;left:0px;}.histoire:hover .imghistoire{margin-top:200px;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.histoire:hover .histoirecontent{transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;-transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;top:-400px;}</style><center><link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet"><div class="titre">Prénom P. Nom</div><div align="justify" class="globale"><div class="caractere"><div class="imgcaractere"><img src="http://img15.hostingpics.net/pics/385155mindblanche.png"></div><div class="caracterecontent"><div class="titre2"><center>Caractère</center></div><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.

    Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.</div></div><table class="table"><tr><td><div class="qr"><span class="gras">Nom :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Prénom :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Âge :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Date de Naissance :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Orientation sexuelle :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Groupe :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Nationalité & Ascendance :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Particularités :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Baguette :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Patronus :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Epouvantard :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Maison :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Situation Familiale :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Célébrité :</span> <span class="reponse">Ecrire ici</span>
    <span class="gras">Crédit :</span> <span class="reponse">Ecrire ici</span></div></td><td><div class="physique"><div class="imgphysique"><img src="http://img15.hostingpics.net/pics/539266bodyblanche.png"></div><div class="physiquecontent"><div class="titre2"><center>Physique</center></div><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.</div></div></td></tr></table><div class="histoire"><div class="imghistoire"><img src="http://img15.hostingpics.net/pics/522610soulblanche.png"></div><div class="histoirecontent"><div class="titre2"><center>Histoire</center></div><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ex sapien, suscipit et molestie at, pellentesque sit amet massa. Donec maximus semper pharetra. Mauris nec sapien luctus, luctus arcu sit amet, consequat orci. Aliquam varius neque eu bibendum tempor. Praesent leo quam, vestibulum a ante et, tempus consequat risus. Proin imperdiet turpis dui, quis venenatis tortor vehicula nec. Nulla nunc quam, sollicitudin sed tristique id, feugiat eu erat. Nullam ac enim nec sapien mollis vehicula. Nullam vitae nunc non lectus consectetur euismod eu sit amet elit. Aliquam pellentesque justo metus, ultricies varius purus fringilla eget. Aliquam erat volutpat. Mauris lacinia felis lacus, a finibus massa scelerisque at. Praesent ut est efficitur, finibus neque ut, accumsan mi. Proin scelerisque neque vel nisi pulvinar mollis. Nulla nec orci vulputate, pellentesque arcu sit amet, viverra ante. Vestibulum elementum sagittis purus nec tempor.

    Nullam rutrum justo et massa semper ullamcorper. In porttitor tortor sed dui mollis, ut accumsan sapien dapibus. Phasellus sagittis arcu et magna accumsan, id posuere purus elementum. Aenean nunc lectus, lobortis eget libero vitae, suscipit fringilla quam. Sed ultrices, elit sed suscipit pharetra, velit metus scelerisque ante, eget aliquam mauris leo id orci. Nam a mattis nulla. Nunc nec nunc id lectus pellentesque commodo. Aenean eget fermentum nulla, in consectetur orci. Integer venenatis vestibulum mattis. Aliquam mattis orci ut velit dictum, sed consectetur purus vehicula.</div></div></div><div align="center" style="font-family:Times New Roman;Font-size:10px;color:#333333;">©XXX. Images By ©Magnificient.</div></center>

    <style type="text/css">.imgirl{float:left;z-index:2;border:solid 2px #561616;}.irl{position:relative;top:-104px;left:54px;box-shadow:1px 1px 1px #333333;width:400px;height:104px;color:#C0C0C0;overflow:auto;background-color:#696969;opacity:0;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}.irlglobale{width:500px;height:110px;overflow:hidden;}.irlglobale:hover .irl{opacity:1;transform:all;-moz-transform:all;-o-transform:all;-htm-transform:all;-webkit-transform:all;transition:1s;-moz-transition:1s;-o-transition:1s;-htm-transition:1s;-webkit-transition:1s;}</style><center><div class="irlglobale"><img src="http://img15.hostingpics.net/pics/888841inter.png" class="imgirl"><div class="irl" align="justify"><span class="gras">Prénom :</span> Ecrire Ici
    <span class="gras">Pseudo :</span> Ecrire Ici
    <span class="gras">Âge :</span> Ecrire Ici
    <span class="gras">Comment avez-vous connu le forum ?:</span> Ecrire Ici
    <span class="gras">Commentaire :</span> Ecrire Ici
    <span class="gras">Code du règlement :</span> [hide]Ecrire Ici[/hide]
    </div></div>
    <span style="font-family:Times New Roman;font-size:10px;">©XXX. Images By ©Magnificient.</span></center>

    Participation secrète numero deux:



    Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <meta name="author" content="Auteur" />
        <base target="_blank" />
        <title>Présentation d'un secret</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
        <style type="text/css">
          /*Corps*/
          body {
          margin: 0px;
          font-family: 'Verdana';
          font-size: 13px;
          color: #454545;
          }
          .prez {
          background: #101010;
          padding-bottom: 5px;
          width: 600px;
          margin: auto;
          border: 3px solid #000000;
          text-align: center;
          }
          .prez a {
          color: #a3a3a3;
          text-decoration: none;
          }
          .prez a:hover {
          color: #ffffff;
          text-decoration: none;
          }
          .prez_image {
          border-bottom: 3px solid #000000;
          }
          .prez_title {
          color: #757575;
          font-family: 'Homemade Apple', cursive;
          font-size: 36px;
          text-align: center;
          margin-top: -36px;
          }
          .prez_subtitle {
          color: #454545;
          text-shadow: 1px 1px 1px #000000;
          margin-top: -10px;
          margin-bottom: 10px;
          font-family: 'Homemade Apple', cursive;
          font-size: 18px;
          text-align: center;
          -webkit-transition: 1s;
          transition: 1s;
          line-height: 1.4em;
          }
          .prez_bloc_title {
          color: #757575;
          font-family: 'Homemade Apple', cursive;
          font-size: 36px;
          text-align: center;
          margin-bottom: -30px;
          position: relative;
          z-index: 2;
          }
          .prez_bloc_subtitle {
          position: relative;
          color: transparent;
          font-family: 'Homemade Apple', cursive;
          font-size: 18px;
          text-align: center;
          -webkit-transition: 1s;
          transition: 1s;
          line-height: 1.4em;
          z-index: 3;
          }
          .prez_bloc_subtitle2 {
          display: none;
          position: relative;
          color: #555555;
          text-shadow: 1px 1px 1px #050505;
          font-family: 'Homemade Apple', cursive;
          font-size: 18px;
          text-align: center;
          line-height: 1.4em;
          z-index: 3;
          }
          .prez_bloc {
          margin: 0px 15px 15px 15px;
          padding: 15px 5px 5px 5px;
          background: #202020;
          box-shadow: 2px 2px 5px #000000;
          position: relative;
          overflow: hidden;
          text-align: center;
          }
          .prez_bloc:hover .prez_bloc_subtitle {
          color: #555555;
          text-shadow: 1px 1px 1px #050505;
          }
          .prez_blocs {
          height: 180px;
          margin-top: 10px;
          color: #656565;
          padding-right: 5px;
          margin-right: -5px;
          overflow: auto;
          position: relative;
          z-index: 2;
          visibility: hidden;
          opacity: 0;
          -webkit-transition: 1s;
          transition: 1s;
          text-align: justify;
          }
          .animals {
          position: absolute;
          -webkit-transition: 0.5s;
          transition: 0.5s;
          cursor: pointer;
          }
          #rat {
          left: 0px;
          bottom: 0px;
          background: url('http://img4.hostingpics.net/pics/483356rat.png') right top;
          width: 310px;
          height: 180px;
          }
          #rat:hover {
          background: url('http://img4.hostingpics.net/pics/194994rat2.png') right top;
          }
          #serp {
          right: 0px;
          top: 0px;
          background: url('http://img4.hostingpics.net/pics/969908serp.png') left bottom;
          width: 280px;
          height: 120px;
          }
          #serp:hover {
          background: url('http://img4.hostingpics.net/pics/506132serp2.png') left bottom;
          }
          #frog {
          right: 0px;
          bottom: 0px;
          background: url('http://img4.hostingpics.net/pics/145236frog.png') left top;
          width: 250px;
          height: 140px;
          }
          #frog:hover {
          background: url('http://img4.hostingpics.net/pics/895545frog2.png') left top;
          }
          .enigme {
          position: absolute;
          top: 80px;
          left: 0px;
          text-align: center;
          width: 100%;
          color: #555555;
          }
          #inputenter {
          width: 35px;
          }
          input, select {
          border: none;
          background: #353535;
          color: #a3a3a3;
          padding: 3px 8px 3px 8px;
          border-radius: 5px;
          }
          input[type="button"]:hover {
          box-shadow: 2px 2px 5px #101010;
          cursor: pointer;
          background: #404040;
          color: #b5b5b5;
          }
          input:focus, select:focus, option:focus {
          outline: none;
          }
          .prez_ava {
          width: 150px;
          height: 150px;
          float: left;
          margin-left: 10px;
          margin-right: 15px;
          border: 1px dotted #000000;
          }
          #prez_bloc4 {
          height: 425px;
          }
          #enigme5 {
          position: static;
          }
          #enigme5 img {
          display: inline-block;
          position: absolute;
          opacity: 0.3;
          -webkit-transition: 0.5s;
          transition: 0.5s;
          z-index: 3;
          }
          #shuri {
          top: 20px;
          left: 0px;
          }
          #sen {
          top: 100px;
          left: 180px;
          }
          #ken {
          top: 30px;
          right: -20px;
          }
        </style>
        <link href="https://fonts.googleapis.com/css?family=Coming+Soon|Homemade+Apple|Over+the+Rainbow|Permanent+Marker" rel="stylesheet" />
        <script type="text/javascript">
        //<!--
          $(function() {
            $('#frog').click(function() {
              $(this).closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
              $(this).closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
              $('.animals').css('display', 'none');
              $('#prez_bloc1').css('opacity', '1').css('visibility', 'visible');
            });
            $('#buttonenter').click(function() {
              if ($('#inputenter').val() == '8') {
                $(this).closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
                $(this).closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
                $('#enigme2').css('display', 'none');
                $('#prez_bloc2').css('opacity', '1').css('visibility', 'visible');
              }
            });
            $('#buttonvert').click(function() {
              if ($('#option1').val() == 'verre') {
                if ($('#option2').val() == 'vers') {
                  if ($('#option3').val() == 'vers') {
                    if ($('#option4').val() == 'vert') {
                      $(this).closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
                      $(this).closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
                      $('#enigme3').css('display', 'none');
                      $('#prez_bloc3').css('opacity', '1').css('visibility', 'visible');
                    }
                  }
                }
              }
            });
            $('#buttonlab').click(function() {
              if ($('#bonasso').attr('checked')) {
                $(this).closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
                $(this).closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
                $('#enigme4').css('display', 'none');
                $('#prez_bloc4').css('opacity', '1').css('visibility', 'visible').css('height', '180px');
              }
            });
          });
        //-->
        </script>
        <script type="text/javascript">
        //<!--
          function myover() {
            $('#enigme5').closest('.prez_bloc').find('.prez_bloc_subtitle').css('display', 'none');
            $('#enigme5').closest('.prez_bloc').find('.prez_bloc_subtitle2').css('display', 'inline-block');
            $('#enigme5').css('display', 'none');
            $('#prez_bloc5').css('opacity', '1').css('visibility', 'visible');
          }
        //-->
        </script>
      </head>
      <body>
        <div class="prez">
          <img class="prez_image" alt="image" src="http://img4.hostingpics.net/pics/660176Sanstitre.jpg" />
          <div class="prez_title">Prénom et nom</div>
          <div class="prez_subtitle">« Pour chaque énigme résolue,<br />un de mes secrets sera révélé »</div>
          <div class="prez_bloc_title">Qui suis-je ?</div>
          <div class="prez_bloc">
            <span class="prez_bloc_subtitle">« Pour dévoiler mon identité,<br />cliques sur la créature du puit »</span>
            <span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà mon identité dévoilée »</span>
            <div class="animals" id="frog"></div>
            <div class="animals" id="rat"></div>
            <div class="animals" id="serp"></div>
            <div class="prez_blocs" id="prez_bloc1">
              <img class="prez_ava" src="http://img4.hostingpics.net/pics/268316madara.png" alt="vava" />
              <b>Nom : </b>Réponse<br />
              <b>Surnom : </b>Réponse<br />
              <b>Âge : </b>Réponse<br />
              <b>Rang : </b>Réponse<br />
              <b>Groupe : </b>Réponse<br />
              <b>Capacités : </b>Réponse<br />
              <b>Armes : </b>Réponse
              <span style="clear: both;"></span>
            </div>
          </div>
          <div class="prez_bloc_title">Description physique</div>
          <div class="prez_bloc">
            <span class="prez_bloc_subtitle">« Pour rendre visible mon apparence,<br />réponds à la question suivante »</span>
            <span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà mon apparence visible »</span>
            <div class="enigme" id="enigme2">
              <label for="inputenter" id="labelenter">Un bucheron a sept filles et<br />chacune de ces filles a un frère.<br />Combien a-t-il d'enfants ?</label><br /><br />
              <input id="inputenter" type="number" value="0" min="0" max="20" />
              <input id="buttonenter" type="button" value="J'ai trouvé la bonne réponse !" />
            </div>
            <div class="prez_blocs" id="prez_bloc2">
              Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.<br />
              <br />
              Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.<br />
              <br />
              Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
            </div>
          </div>
          <div class="prez_bloc_title">Description psychologique</div>
          <div class="prez_bloc">
            <span class="prez_bloc_subtitle">« Pour accéder à mon esprit,<br />complètes les phrases suivantes »</span>
            <span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà mon esprit sans barrières »</span>
            <div class="enigme" id="enigme3">
              Le
              <select id="option1">
                <option></option>
                <option>verre</option>
                <option>ver</option>
                <option>vert</option>
                <option>vers</option>
              </select>
              de
              <select id="option2">
                <option></option>
                <option>verres</option>
                <option>vers</option>
                <option>verts</option>
                <option>vairs</option>
              </select>
              que j'avais apporté<br />
              pour pêcher
              <select id="option3">
                <option></option>
                <option>verre</option>
                <option>ver</option>
                <option>vert</option>
                <option>vers</option>
              </select>
              6h ce matin m'a permis de<br />
              récolter 5 poissons !
              Mon frère en est
              <select id="option4">
                <option></option>
                <option>verre</option>
                <option>ver</option>
                <option>vert</option>
                <option>vers</option>
              </select>
              de jalousie !<br /><br />
              <input id="buttonvert" type="button" value="J'ai complété les phrases !" />
            </div>
            <div class="prez_blocs" id="prez_bloc3">
              Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.<br />
              <br />
              Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.<br />
              <br />
              Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
            </div>
          </div>
          <div class="prez_bloc_title">Histoire</div>
          <div class="prez_bloc">
            <span class="prez_bloc_subtitle">« Pour apprendre la vie que j'ai menée,<br />choisis la bonne option »</span>
            <span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà mon histoire racontée »</span>
            <div class="enigme" id="enigme4">
              <img src="http://img4.hostingpics.net/pics/984580Sanstitre.jpg" alt="labirynthe" />
              <label>A = 1; B = 2; C = 4 et D = 3</label><input type="radio" name="radiolab" />
              <label style="padding-left: 20px;">A = 4; B = 3; C = 2 et D = 1</label><input type="radio" id="bonasso" name="radiolab" /><br />
              <label>A = 3; B = 4; C = 1 et D = 2</label><input type="radio" name="radiolab" />
              <label style="padding-left: 20px;">A = 2; B = 1; C = 3 et D = 4</label><input type="radio" name="radiolab" /><br /><br />
              <input id="buttonlab" type="button" value="J'ai choisi cette option !" />
            </div>
            <div class="prez_blocs" id="prez_bloc4">
              Denique Antiochensis ordinis vertices sub uno elogio iussit occidi ideo efferatus, quod ei celebrari vilitatem intempestivam urgenti, cum inpenderet inopia, gravius rationabili responderunt; et perissent ad unum ni comes orientis tunc Honoratus fixa constantia restitisset.<br />
              <br />
              Principium autem unde latius se funditabat, emersit ex negotio tali. Chilo ex vicario et coniux eius Maxima nomine, questi apud Olybrium ea tempestate urbi praefectum, vitamque suam venenis petitam adseverantes inpetrarunt ut hi, quos suspectati sunt, ilico rapti conpingerentur in vincula, organarius Sericus et Asbolius palaestrita et aruspex Campensis.<br />
              <br />
              Haec ubi latius fama vulgasset missaeque relationes adsiduae Gallum Caesarem permovissent, quoniam magister equitum longius ea tempestate distinebatur, iussus comes orientis Nebridius contractis undique militaribus copiis ad eximendam periculo civitatem amplam et oportunam studio properabat ingenti, quo cognito abscessere latrones nulla re amplius memorabili gesta, dispersique ut solent avia montium petiere celsorum.
            </div>
          </div>
          <div class="prez_bloc_title">Derrière le masque</div>
          <div class="prez_bloc">
            <span class="prez_bloc_subtitle">« Pour révéler qui je suis réellement,<br />survoles mon arme »</span>
            <span class="prez_bloc_subtitle2">« Pour avoir résolu l'énigme,<br />voilà ma réelle identité révélée »</span>
            <div class="enigme" id="enigme5">
              <img id="shuri" src="http://www.renders-graphiques.fr/image/upload/mini/shuriken.png" alt="shuriken" onmouseover="myover()" />
              <img id="sen" src="http://illiweb.com/fa/pbucket.gif" alt="senbon" />
              <img id="ken" src="http://static.tumblr.com/bddc5227b1ebae1633081763860e1d76/mjvcmrg/gENo6s7t3/tumblr_static_hhifxdrzchs08w8okw00c4w8.png" alt="kunai" />
            </div>
            <div class="prez_blocs" id="prez_bloc5">
              <img class="prez_ava" src="http://img4.hostingpics.net/pics/268316madara.png" alt="vava" />
              <b>Nom : </b>Réponse<br />
              <b>Âge : </b>Réponse<br />
              <b>D'où je viens : </b>Réponse<br />
              <b>Comment j'ai connu le forum : </b>Réponse<br />
              <b>Ce que je pense du forum : </b>Réponse<br />
              <b>Le code du règlement : </b>Réponse
              <span style="clear: both;"></span>
            </div>
          </div>
          <span>Fiche par XXX de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a></span>
        </div>
      </body>
    </html>





    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Lun 27 Fév 2017 - 18:21

    Franchement, je trouve que les deux créations sont vraiment très cool. Le thème est super bien respecté, mais j'ai beaucoup apprécié cette idée de faire des petites énigmes pour voir le contenu des blocs dans la deuxième création.

    En tout cas chapeau à tous les deux, vous avez bien bossé *^*



    avatar
    Ushinau
    FémininAge : 25Messages : 9

    le Lun 27 Fév 2017 - 22:29

    Alors là chapeau ! J'avoue que les deux participation sont bluffantes... c'est du bon, que dis-je, du merveilleux travail !

    J'ai tout de même ma petite préférence pour les énigmes que je me suis amusée à faire, mais même le premier franchement tout ça est bien pensé ! =) Je vous remercie pour m'avoir montré ces merveilles ! Car au début, j'étais un peu perdue et je n'y comprenais rien du tout ...

    Félicitation à vous deux ! ham3
    avatar
    Eriwyn
    FémininAge : 21Messages : 2

    le Mar 28 Fév 2017 - 12:58

    Les deux créations sont époustouflantes. J'ai cependant préféré la première, bien que les énigmes aient étés intéressantes, j'ai eu du mal avec celle des vers x).
    avatar
    valtena_ethan
    MasculinAge : 26Messages : 414

    le Mar 28 Fév 2017 - 23:06

    Bravo aux deux participants. Vos deux fiches sont très jolies.

    Mais comme c'est un défi code, je note surtout sur le code. Mes critères sont : la lisibilité du code, la facilité d'édition du contenu, la factorisation du code et la sémantique.

    Ainsi je vote pour la deuxième fiche, bien que pour les validateurs de fiches, c'est une horreur si tout le monde fait des énigmes. :p



    avatar
    Shaneliae
    FémininAge : 21Messages : 807

    le Mer 1 Mar 2017 - 11:10

    Bravo aux deux participants, vous avez bien respectez la contrainte !

    Comme Val' je considère avant tout le code que le rendu. Je vote donc pour la deuxième participation qui a un code un peu plus complexe avec ses énigmes. Mais bon c'est un peu galère à utiliser dans le cas d'une vraie fiche de présentation xD

    Petit défaut aussi sur la première participation : le nom se retrouve sous la première image, du coup il est un peu mangé, c'est dommage ! Mais bravo quand même pour ta participation, dans le cas d'une fiche de présentation c'est elle qui sera préféré car plus pratique, elle fera un super LS :)



    Présence réduite.
    avatar
    Ryukaï
    MasculinAge : 19Messages : 613

    le Mer 1 Mar 2017 - 20:58

    Bravo aux deux participants, vos deux fiches sont superbes!!

    N'étant que très moyen en codage, j'ai choisi en fonction du rendu général au visuel (et non à l'amusement même si les énigmes étaient amusantes). J'ai donc choisi la deuxième fiche pour sa meilleur intégration des différents éléments.

    Encore BRAVO à tous les deux!



    avatar
    Eliadorina
    FémininAge : 24Messages : 83

    le Ven 3 Mar 2017 - 9:47

    Les deux sont superbes, vraiment.
    C'est pour son originalité que j'ai choisis la deuxième fiche.

    Bravo à vous deux.
    avatar
    Melle Lena
    FémininAge : 42Messages : 292

    le Sam 4 Mar 2017 - 7:17

    Magnifique! Quel talent! Wink La Une, visuellement moins sombre. Le petit "hic", dommage que nom et prénom soient coupés avant d'ouvrir l'image.
    avatar
    KoalaBzh9
    FémininAge : 18Messages : 54

    le Sam 4 Mar 2017 - 19:28

    Tant de respect pour vous deux, on pourrait passer des heures à s'amuser avec vos fiches !
    J'avoue que mon faible est pour la deuxième, même si elle est peut-être un chouia trop sombre. 
    Bravo en tout cas !
    avatar
    Nihil Scar Winspeare
    Messages : 4810

    le Mer 8 Mar 2017 - 21:42

    Bravo aux 2 auteurs pour vos fiches !

    C'était un sujet intéressant et j'adore comment la seconde fiche a décidé de prendre le défi ♥︎. La première fiche est aussi très sympa et respecte bien le thème, j'avais pas vu au début les infos sur le perso qui apparaissent au survol. Merci pour votre participation et le temps que vous avez passé dessus pour nous étonner :aww:
    avatar
    Youp
    FémininAge : 22Messages : 579

    le Jeu 23 Mar 2017 - 13:52

    Félicitations aux deux participants qui nous ont bluffé sur ce coup ! Pour le coup, leur secret à eux était d'avoir du talent (m'enfin c'était pas vraiment un secret, on le savait tous Razz) Le gagnant est Onyx et ses petites énigmes.
    J'invite le deuxième participant à se manifester s'il souhaite révéler son nom.

    Bonne journée !



    avatar
    Nihil Scar Winspeare
    Messages : 4810

    le Sam 25 Mar 2017 - 1:31

    Je m'en doutais :hudada:

    Félicitations Onyx ! :friends:
    avatar
    Onyx
    FémininAge : 23Messages : 3050

    le Sam 25 Mar 2017 - 3:13

    Merci beaucoup pour tous ces votes *o*

    Et ouais, ceux qui me connaisssent auraient reconnus ma manie de jouer avec le js de façon compliquée pour rien XD



    Contenu sponsorisé


      La date/heure actuelle est Ven 24 Nov 2017 - 8:34