AccueilDernières imagesRechercherS'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.


    (SUGAR PLUM) Une pt'ite fiche de pub pour LGDC Hunger Games ?

    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Sam 14 Déc 2013 - 9:57

    Bonjour,
    Je viens passer commande ici, histoire d'avoir une jolie fiche de pub pour mon forum. J'espère que tout est OK dans la commande ! (:

    Commande
    Type de document voulu :Fiche de pub !
    Adresse du forum : http://lgdc-hunger-games.forumactif.com/
    Description des éléments : https://2img.net/r/hpimg11/pics/390959fichedepubshma.png

    Voilà donc un petit shéma, de ce que je voudrais, en gros ^-^

    • La police : Celle de N-U me semble bien... Quelque chose de simple, je laisse le choix au codeur :p
    • Les onglets : Simplement une image, qui s'efface pour laisser apparaître un texte au survol :p
    • Le fond : Qu'on puisse y mettre une image, que je mettrais moi-même ^-^ Donc le codeur pourra mettre une image blanche toute simple !

    Couleurs ou tons : [indiquez les couleurs ou les tons à utiliser, avec ou sans les codes de couleur, pour les fonds, les bordures, le texte...] Sachant que je changerais selon le design actuel, pour l'instant les même couleurs que sur le schéma, pour les images, des images toutes blanches feront l'affaire
    Images : http://img.xooimage.com/files99/3/e/2/12-42acb1f.png pour le fond (si ça ne rentre pas, mettre simplement une image blanche de la bonne taille en fond, j'me débrouillerais.
    Autres précisions : Hum, j'espère que l'absence d'images ne dérangera pas... (j'les ai pas encore toutes ._.) Et sinon, bah merci d'avance au codeur !


    Voilà, merci d'avance et bonne journée ^-^
    • Revenir en haut
    Neva
    Neva
    FémininAge : 32Messages : 18565

    Sam 14 Déc 2013 - 15:33

    Salut !

    Tout est bon pour moi, je valide

    La commande est validée !▬ il est autorisé de la relancer toutes les 48h minimum
    ▬ une commande laissée sans nouvelles sera relancée au bout de 10 jours et archivée au bout de 10 jours supplémentaires sans réponse
    ▬ nous rappelons que l'aide devra être créditée vers Never Utopia



     
    • Revenir en haut
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Sam 14 Déc 2013 - 17:43

    Coucou, je veux bien essayer quelque chose, je te tiens au courant ^^
    • Revenir en haut
    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Sam 14 Déc 2013 - 19:00

    Super ! Merci de tenter *-*
    • Revenir en haut
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Mar 17 Déc 2013 - 18:44

    Hey ! Catch ! http://cssperso.forumactif.org/h39-fiche-pub-lgdc
    • Revenir en haut
    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Mer 18 Déc 2013 - 19:40

    Wow, merci c'est superbe ! Par contre, y'a un pt'it problème.. Tous les cadres avec du texte (sauf le Coucou toi" sont décalés par rapport au fond... (J'utilise Chrome)
    • Revenir en haut
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Mer 18 Déc 2013 - 20:31

    Effectivement, je viens de voir... J'ai beaucoup tâtonné pour cette fiche. J'essayerai de récupérer tout ça demain ^^



    (SUGAR PLUM) Une pt'ite fiche de pub pour LGDC Hunger Games ? Kit_si10
    • Revenir en haut
    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Ven 20 Déc 2013 - 11:35

    Pas d'problème ^-^
    • Revenir en haut
    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Dim 22 Déc 2013 - 19:25

    Upinou ?
    • Revenir en haut
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Dim 22 Déc 2013 - 19:30

    Désolée, je sèche complètement... Et c'est devenu encore pire qu'avant ><



    (SUGAR PLUM) Une pt'ite fiche de pub pour LGDC Hunger Games ? Kit_si10
    • Revenir en haut
    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Dim 22 Déc 2013 - 20:03

    T'inquiètes, c'pas grave ^-^ Du coup on fait quoi ?
    • Revenir en haut
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Dim 22 Déc 2013 - 21:11

    Du coup je pense que je devrais laisser la commande à quelqu'un d'autre et s'il veut mes codes comme bases, qu'il le fasse savoir ^^



    (SUGAR PLUM) Une pt'ite fiche de pub pour LGDC Hunger Games ? Kit_si10
    • Revenir en haut
    sugar plum fairy
    sugar plum fairy
    FémininAge : 28Messages : 7

    Mar 24 Déc 2013 - 18:26

    Je vais tenter ! Wink
    • Revenir en haut
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Mar 24 Déc 2013 - 18:27

    Merci à toi ^^"
    Tu veux les codes du coup ?



    (SUGAR PLUM) Une pt'ite fiche de pub pour LGDC Hunger Games ? Kit_si10
    • Revenir en haut
    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Lun 30 Déc 2013 - 15:04

    Des nouvelles ?
    • Revenir en haut
    sugar plum fairy
    sugar plum fairy
    FémininAge : 28Messages : 7

    Mar 31 Déc 2013 - 17:13

    Excuse-moi du retard, je m'en occupe demain, et pas besoin des codes, j'ai déjà commencé sans. Wink
    • Revenir en haut
    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Mer 1 Jan 2014 - 13:02

    Pas de soucis, prend ton temps ^-^
    • Revenir en haut
    sugar plum fairy
    sugar plum fairy
    FémininAge : 28Messages : 7

    Jeu 2 Jan 2014 - 21:40

    Dis-moi ce que tu en penses :
    Tu crées une nouvelle page html de A à Z, avec ce code :
    Code:
    <!doctype html>
    <html lang="fr">
       <head>
          <meta charset="utf-8">
          <title>LGDC Hunger Games</title>
          <style>
       body {
          font-family: Calibri, Tahoma, Arial, Sans-Serif;
          width: 650px;
          height: 1230px;
          position: relative;
          color: white;
       }

       #banniere {
          width: 650px;
          height: 300px;
          position: absolute;
          top: 0;
          left: 0;
       }

       #contenu {
          background: url('http://img.xooimage.com/files99/3/e/2/12-42acb1f.png');
          position: absolute;
          top: 300px;
          left: 0;
          width: 100%;
          height: 100%;
       }
       
       .bloc {
          position: relative;
          padding-top: 5px;
       }
       
       p {
          text-align: justify;
          overflow: auto;
          padding: 0 10px;
          margin-top: 5px;
       }

       h1 {
          font-size: 26px;
          font-family: 'Dancing Script', Cursive;
          position: absolute;
          top: -30px;
          width: 100%;
          text-align: center;
          z-index: 999;
       }

       .coucoutoi {
          margin: 30px 15px 15px 15px;
          height: 175px;
          background: #768383;
       }

       .onglets {
          width: 150px;
          height: 530px;
          float: left;
          background: white;
          margin: 15px 0 0 15px;
       }
       
       .onglets p {
          height: 106px;
          width: 150px;
          position: relative;
          padding: 0;
          margin: 0;
       }
       
       .onglets p span {
          width: 140px;
          height: 96px;
          padding: 5px;
          color: black;
          display: none;
    }
       
       .onglets p:hover span {
          display: block;
          overflow: auto;
          background: white;
          opacity: .9;
          animation: opacity .5s;
          -webkit-animation: opacity .5s;      
       }

       @keyframes opacity {
          from {opacity: 0;}
          to {opacity: 0.9;}
       }

       @-webkit-keyframes opacity {
          from {opacity: 0;}
          to {opacity: 0.9;}
       }
       
       .notreunivers {
          width: 440px;
          height: 215px;
          background: #B3916F;
          float: right;
          margin: 15px;
       }
       
       .notrehistoire {
          width: 440px;
          height: 275px;
          background: #C8AD93;
          float: right;
          margin: 15px;
       }
       
       .encemoment {
          width: 340px;
          height: 190px;
          background: #739A76;
          float: left;
          margin: 15px;
       }
       
       .stats {
          width: 340px;
          height: 170px;
          background: #647666;
          float: left;
          margin: 15px;
       }
       
       .recherche {
          background: #90AFC9;
          float: right;
          margin: 15px;
          width: 250px;
          height: 395px;
       }
          </style>
          <link href="http://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">
       </head>
       
       
       <body>
          
          <img src="URL DE LA BANNIERE DU FORUM" alt="banniere" id="banniere"/>
          
          <div id="contenu">
          
             <div class="coucoutoi bloc">
                <h1 style="color:#000000;">Coucou toi !</h1>
                <p style="height: 170px;">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   Donec egestas scelerisque condimentum. Donec nibh libero, facilisis a augue ultrices, varius eleifend ipsum. Nullam velit ipsum, pharetra ac ullamcorper pulvinar, aliquet quis ligula. Aliquam vitae enim ut tortor tempus congue. Mauris vel lectus id ligula euismod lacinia in vel turpis. Cras facilisis luctus blandit. Nunc porta bibendum varius. In blandit lorem ut velit gravida iaculis. Maecenas non eleifend leo. Sed dolor tellus, porttitor sed ipsum id, blandit ultricies tellus. Nunc metus velit, gravida nec lacinia sed, feugiat ac velit. Aliquam erat volutpat. Sed vel mattis velit. Mauris ornare ipsum ac imperdiet pretium. Aenean suscipit elit nisi, et egestas tellus convallis et.
                </p>
             </div>
             
             <div class="onglets">
                <p style="background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>
                <p style="background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>
                <p style="background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>
                <p style="background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>
                <p style="background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>            
             </div>
             
             <div class="notreunivers bloc">
                <h1 style="color:#523A23;text-align:left;">Notre Univers...</h1>
                <p style="height: 210px;">
                   Quisque at arcu odio. Fusce pharetra, turpis ac hendrerit hendrerit, est nunc dictum sem, non laoreet justo tellus a eros. Aliquam fermentum in tortor aliquet porta. Suspendisse eu nibh et sem rutrum dignissim. Cras et pellentesque nisi. Quisque mollis dolor dui, at pulvinar nisi fermentum ut. Duis convallis urna non pulvinar tristique. Mauris gravida vulputate ligula at euismod. Aliquam quis scelerisque urna. Nullam consequat magna eu elit feugiat consequat.
                   Quisque at arcu odio. Fusce pharetra, turpis ac hendrerit hendrerit, est nunc dictum sem, non laoreet justo tellus a eros. Aliquam fermentum in tortor aliquet porta. Suspendisse eu nibh et sem rutrum dignissim. Cras et pellentesque nisi. Quisque mollis dolor dui, at pulvinar nisi fermentum ut. Duis convallis urna non pulvinar tristique. Mauris gravida vulputate ligula at euismod. Aliquam quis scelerisque urna. Nullam consequat magna eu elit feugiat consequat.
                </p>
             </div>
             
             <div class="notrehistoire bloc">
                <h1 style="color:#523A23;text-align:right;">...Notre histoire</h1>
                <p style="height: 270px;">
                   Proin eget mauris sagittis, bibendum orci sit amet, suscipit leo. Quisque et nulla sit amet turpis vestibulum egestas varius quis urna. Pellentesque sit amet dolor tincidunt, porttitor sem a, molestie magna. Nullam luctus convallis volutpat. Morbi auctor velit est, ac facilisis magna tincidunt eu. In adipiscing pretium lorem sit amet condimentum. Phasellus ornare bibendum tortor et venenatis. Suspendisse vestibulum congue semper. Integer lacinia, purus eget ullamcorper congue, dui diam commodo enim, sit amet luctus magna neque vitae dui. Donec aliquam auctor nibh, eu dapibus dolor lacinia ornare.
                   Morbi viverra pretium orci a tincidunt. Donec leo ligula, malesuada eu pharetra in, posuere vitae augue. Phasellus id neque id arcu cursus congue at euismod odio. Integer laoreet mi vitae sapien euismod feugiat. Maecenas ullamcorper sem at purus volutpat, a scelerisque arcu convallis. Curabitur sollicitudin feugiat vulputate. Vivamus in odio rhoncus, pulvinar arcu nec, interdum neque. Curabitur porta molestie magna sit amet volutpat. Maecenas dictum placerat auctor. Aliquam id mauris nec metus iaculis rutrum eget quis massa. Mauris dapibus turpis erat, at aliquet ipsum dapibus non. Duis in velit id arcu dignissim semper. In tincidunt metus vel dui accumsan, sit amet facilisis lectus rhoncus. In fringilla nulla et venenatis consectetur. Integer quis malesuada enim.
                </p>
             </div>
             
             <div class="encemoment bloc">
                <h1 style="color:#113114;text-align:left;">Et en c'moment ?</h1>
                <p style="height: 185px;">
                   Proin eget mauris sagittis, bibendum orci sit amet, suscipit leo. Quisque et nulla sit amet turpis vestibulum egestas varius quis urna. Pellentesque sit amet dolor tincidunt, porttitor sem a, molestie magna. Nullam luctus convallis volutpat. Morbi auctor velit est, ac facilisis magna tincidunt eu. In adipiscing pretium lorem sit amet condimentum. Phasellus ornare bibendum tortor et venenatis. Suspendisse vestibulum congue semper. Integer lacinia, purus eget ullamcorper congue, dui diam commodo enim, sit amet luctus magna neque vitae dui. Donec aliquam auctor nibh, eu dapibus dolor lacinia ornare.
                   Morbi viverra pretium orci a tincidunt. Donec leo ligula, malesuada eu pharetra in, posuere vitae augue. Phasellus id neque id arcu cursus congue at euismod odio. Integer laoreet mi vitae sapien euismod feugiat. Maecenas ullamcorper sem at purus volutpat, a scelerisque arcu convallis. Curabitur sollicitudin feugiat vulputate. Vivamus in odio rhoncus, pulvinar arcu nec, interdum neque. Curabitur porta molestie magna sit amet volutpat. Maecenas dictum placerat auctor. Aliquam id mauris nec metus iaculis rutrum eget quis massa. Mauris dapibus turpis erat, at aliquet ipsum dapibus non. Duis in velit id arcu dignissim semper. In tincidunt metus vel dui accumsan, sit amet facilisis lectus rhoncus. In fringilla nulla et venenatis consectetur. Integer quis malesuada enim.
                </p>
             </div>
             
             <div class="recherche bloc">
                <h1 style="color: #000000;">On recherche !</h1>
                <p style="height: 390px;">
                   Proin eget mauris sagittis, bibendum orci sit amet, suscipit leo. Quisque et nulla sit amet turpis vestibulum egestas varius quis urna. Pellentesque sit amet dolor tincidunt, porttitor sem a, molestie magna. Nullam luctus convallis volutpat. Morbi auctor velit est, ac facilisis magna tincidunt eu. In adipiscing pretium lorem sit amet condimentum. Phasellus ornare bibendum tortor et venenatis. Suspendisse vestibulum congue semper. Integer lacinia, purus eget ullamcorper congue, dui diam commodo enim, sit amet luctus magna neque vitae dui. Donec aliquam auctor nibh, eu dapibus dolor lacinia ornare.
                   Morbi viverra pretium orci a tincidunt. Donec leo ligula, malesuada eu pharetra in, posuere vitae augue. Phasellus id neque id arcu cursus congue at euismod odio. Integer laoreet mi vitae sapien euismod feugiat. Maecenas ullamcorper sem at purus volutpat, a scelerisque arcu convallis. Curabitur sollicitudin feugiat vulputate. Vivamus in odio rhoncus, pulvinar arcu nec, interdum neque. Curabitur porta molestie magna sit amet volutpat. Maecenas dictum placerat auctor. Aliquam id mauris nec metus iaculis rutrum eget quis massa. Mauris dapibus turpis erat, at aliquet ipsum dapibus non. Duis in velit id arcu dignissim semper. In tincidunt metus vel dui accumsan, sit amet facilisis lectus rhoncus. In fringilla nulla et venenatis consectetur. Integer quis malesuada enim.
                </p>
             </div>
             
             <div class="stats bloc">
                <h1 style="color:#000000;text-align:right;">Quelques stats...</h1>
                <p style="height: 165px;">
                   Proin eget mauris sagittis, bibendum orci sit amet, suscipit leo. Quisque et nulla sit amet turpis vestibulum egestas varius quis urna. Pellentesque sit amet dolor tincidunt, porttitor sem a, molestie magna. Nullam luctus convallis volutpat. Morbi auctor velit est, ac facilisis magna tincidunt eu. In adipiscing pretium lorem sit amet condimentum. Phasellus ornare bibendum tortor et venenatis. Suspendisse vestibulum congue semper. Integer lacinia, purus eget ullamcorper congue, dui diam commodo enim, sit amet luctus magna neque vitae dui. Donec aliquam auctor nibh, eu dapibus dolor lacinia ornare.
                   Morbi viverra pretium orci a tincidunt. Donec leo ligula, malesuada eu pharetra in, posuere vitae augue. Phasellus id neque id arcu cursus congue at euismod odio. Integer laoreet mi vitae sapien euismod feugiat. Maecenas ullamcorper sem at purus volutpat, a scelerisque arcu convallis. Curabitur sollicitudin feugiat vulputate. Vivamus in odio rhoncus, pulvinar arcu nec, interdum neque. Curabitur porta molestie magna sit amet volutpat. Maecenas dictum placerat auctor. Aliquam id mauris nec metus iaculis rutrum eget quis massa. Mauris dapibus turpis erat, at aliquet ipsum dapibus non. Duis in velit id arcu dignissim semper. In tincidunt metus vel dui accumsan, sit amet facilisis lectus rhoncus. In fringilla nulla et venenatis consectetur. Integer quis malesuada enim.
                </p>
             </div>
             
          </div>
          
       </body>
    </html>
    • Revenir en haut
    Brioche
    Brioche
    FémininAge : 23Messages : 64

    Sam 4 Jan 2014 - 20:44

    Désolé pour ma réponse en retard :p
    J'adore ! C'est vraiment super, merci *-* Juste, pourrais-tu faire les titres un peu plus grands, et qui empiètent un peu moins sur les rectangles de texte ? Et mettre des bords arrondis autour de la fiche & autour des carrés aussi, steuplait :p
    Merci encore pour cette fiche, c'est vraiment ce que je voulais ! Bonne soirée (:
    • Revenir en haut
    sugar plum fairy
    sugar plum fairy
    FémininAge : 28Messages : 7

    Dim 5 Jan 2014 - 22:41

    Pas de problème ! Est-ce mieux ? :)
    Code:
    <!doctype html>
    <html lang="fr">
       <head>
          <meta charset="utf-8">
          <title>LGDC Hunger Games</title>
          <style>
       body {
          font-family: Calibri, Tahoma, Arial, Sans-Serif;
          width: 650px;
          height: 1240px;
          position: relative;
          color: white;
       }

       #banniere {
          width: 650px;
          height: 300px;
          position: absolute;
          top: 0;
          left: 0;
          border-radius: 50px 50px 0 0;
       }

       #contenu {
          background: url('http://img.xooimage.com/files99/3/e/2/12-42acb1f.png');
          position: absolute;
          top: 300px;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 0 0 50px 50px;
       }
       
       .bloc {
          position: relative;
          padding-top: 5px;
          border-radius: 20px;
       }
       
       p {
          text-align: justify;
          overflow: auto;
          padding: 0 10px;
          margin-top: 5px;
       }

       h1 {
          font-size: 32px;
          font-family: 'Dancing Script', Cursive;
          position: absolute;
          top: -45px;
          width: 100%;
          text-align: center;
          z-index: 999;
          text-shadow: rgba(255,255,255,.6) 1px 1px 0;
       }

       .coucoutoi {
          margin: 30px 15px 15px 15px;
          height: 175px;
          background: #768383;
       }

       .onglets {
          width: 150px;
          height: 530px;
          float: left;
          background: white;
          margin: 15px 0 0 15px;
          border-radius: 20px;
       }
       
       .onglets p {
          height: 106px;
          width: 150px;
          position: relative;
          padding: 0;
          margin: 0;
       }
       
       .onglets p span {
          width: 140px;
          height: 96px;
          padding: 5px;
          color: black;
          display: none;
    }
       
       .onglets p:hover span {
          display: block;
          overflow: auto;
          background: white;
          opacity: .9;
          animation: opacity .5s;
          -webkit-animation: opacity .5s;      
       }

       @keyframes opacity {
          from {opacity: 0;}
          to {opacity: 0.9;}
       }

       @-webkit-keyframes opacity {
          from {opacity: 0;}
          to {opacity: 0.9;}
       }
       
       .notreunivers {
          width: 440px;
          height: 215px;
          background: #B3916F;
          float: right;
          margin: 15px;
       }
       
       .notrehistoire {
          width: 440px;
          height: 275px;
          background: #C8AD93;
          float: right;
          margin: 15px;
       }
       
       .encemoment {
          width: 340px;
          height: 190px;
          background: #739A76;
          float: left;
          margin: 15px;
       }
       
       .stats {
          width: 340px;
          height: 170px;
          background: #647666;
          float: left;
          margin: 15px;
       }
       
       .recherche {
          background: #90AFC9;
          float: right;
          margin: 15px;
          width: 250px;
          height: 395px;
       }
          </style>
          <link href="http://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css">
       </head>
       
       
       <body>
          
          <img src="URL DE LA BANNIERE DU FORUM" alt="banniere" id="banniere"/>
          
          <div id="contenu">
          
             <div class="coucoutoi bloc">
                <h1 style="color:#000000;">Coucou toi !</h1>
                <p style="height: 170px;">
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   Donec egestas scelerisque condimentum. Donec nibh libero, facilisis a augue ultrices, varius eleifend ipsum. Nullam velit ipsum, pharetra ac ullamcorper pulvinar, aliquet quis ligula. Aliquam vitae enim ut tortor tempus congue. Mauris vel lectus id ligula euismod lacinia in vel turpis. Cras facilisis luctus blandit. Nunc porta bibendum varius. In blandit lorem ut velit gravida iaculis. Maecenas non eleifend leo. Sed dolor tellus, porttitor sed ipsum id, blandit ultricies tellus. Nunc metus velit, gravida nec lacinia sed, feugiat ac velit. Aliquam erat volutpat. Sed vel mattis velit. Mauris ornare ipsum ac imperdiet pretium. Aenean suscipit elit nisi, et egestas tellus convallis et.
                </p>
             </div>
             
             <div class="onglets">
                <p style="border-radius: 20px 20px 0 0; background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>
                <p style="background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>
                <p style="background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>
                <p style="background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>
                <p style="border-radius: 0 0 20px 20px; background: url('IMAGE DU FOND DE L'ONGLET');">
                   <span>
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id quam viverra, consectetur orci non, imperdiet arcu. Vivamus gravida aliquet sapien, a pharetra neque elementum eu. Fusce vel nisl ut augue ultrices lobortis ac non mi. Nunc eget turpis sit amet nunc volutpat facilisis. Suspendisse cursus ligula lorem, sit amet porttitor ante luctus et. Etiam rutrum et ipsum vitae convallis. Vivamus sapien ante, condimentum eu libero sit amet, mattis dictum felis. Maecenas eu vehicula ipsum, eu elementum lectus. Morbi ut libero feugiat, consectetur nisl vel, accumsan arcu. Sed cursus lacus sed magna vulputate placerat.
                   </span>
                </p>            
             </div>
             
             <div class="notreunivers bloc">
                <h1 style="color:#523A23;text-align:left;">Notre Univers...</h1>
                <p style="height: 210px;">
                   Quisque at arcu odio. Fusce pharetra, turpis ac hendrerit hendrerit, est nunc dictum sem, non laoreet justo tellus a eros. Aliquam fermentum in tortor aliquet porta. Suspendisse eu nibh et sem rutrum dignissim. Cras et pellentesque nisi. Quisque mollis dolor dui, at pulvinar nisi fermentum ut. Duis convallis urna non pulvinar tristique. Mauris gravida vulputate ligula at euismod. Aliquam quis scelerisque urna. Nullam consequat magna eu elit feugiat consequat.
                   Quisque at arcu odio. Fusce pharetra, turpis ac hendrerit hendrerit, est nunc dictum sem, non laoreet justo tellus a eros. Aliquam fermentum in tortor aliquet porta. Suspendisse eu nibh et sem rutrum dignissim. Cras et pellentesque nisi. Quisque mollis dolor dui, at pulvinar nisi fermentum ut. Duis convallis urna non pulvinar tristique. Mauris gravida vulputate ligula at euismod. Aliquam quis scelerisque urna. Nullam consequat magna eu elit feugiat consequat.
                </p>
             </div>
             
             <div class="notrehistoire bloc">
                <h1 style="color:#523A23;text-align:right;">...Notre histoire</h1>
                <p style="height: 270px;">
                   Proin eget mauris sagittis, bibendum orci sit amet, suscipit leo. Quisque et nulla sit amet turpis vestibulum egestas varius quis urna. Pellentesque sit amet dolor tincidunt, porttitor sem a, molestie magna. Nullam luctus convallis volutpat. Morbi auctor velit est, ac facilisis magna tincidunt eu. In adipiscing pretium lorem sit amet condimentum. Phasellus ornare bibendum tortor et venenatis. Suspendisse vestibulum congue semper. Integer lacinia, purus eget ullamcorper congue, dui diam commodo enim, sit amet luctus magna neque vitae dui. Donec aliquam auctor nibh, eu dapibus dolor lacinia ornare.
                   Morbi viverra pretium orci a tincidunt. Donec leo ligula, malesuada eu pharetra in, posuere vitae augue. Phasellus id neque id arcu cursus congue at euismod odio. Integer laoreet mi vitae sapien euismod feugiat. Maecenas ullamcorper sem at purus volutpat, a scelerisque arcu convallis. Curabitur sollicitudin feugiat vulputate. Vivamus in odio rhoncus, pulvinar arcu nec, interdum neque. Curabitur porta molestie magna sit amet volutpat. Maecenas dictum placerat auctor. Aliquam id mauris nec metus iaculis rutrum eget quis massa. Mauris dapibus turpis erat, at aliquet ipsum dapibus non. Duis in velit id arcu dignissim semper. In tincidunt metus vel dui accumsan, sit amet facilisis lectus rhoncus. In fringilla nulla et venenatis consectetur. Integer quis malesuada enim.
                </p>
             </div>
             
             <div class="encemoment bloc">
                <h1 style="color:#113114;text-align:left;">Et en c'moment ?</h1>
                <p style="height: 185px;">
                   Proin eget mauris sagittis, bibendum orci sit amet, suscipit leo. Quisque et nulla sit amet turpis vestibulum egestas varius quis urna. Pellentesque sit amet dolor tincidunt, porttitor sem a, molestie magna. Nullam luctus convallis volutpat. Morbi auctor velit est, ac facilisis magna tincidunt eu. In adipiscing pretium lorem sit amet condimentum. Phasellus ornare bibendum tortor et venenatis. Suspendisse vestibulum congue semper. Integer lacinia, purus eget ullamcorper congue, dui diam commodo enim, sit amet luctus magna neque vitae dui. Donec aliquam auctor nibh, eu dapibus dolor lacinia ornare.
                   Morbi viverra pretium orci a tincidunt. Donec leo ligula, malesuada eu pharetra in, posuere vitae augue. Phasellus id neque id arcu cursus congue at euismod odio. Integer laoreet mi vitae sapien euismod feugiat. Maecenas ullamcorper sem at purus volutpat, a scelerisque arcu convallis. Curabitur sollicitudin feugiat vulputate. Vivamus in odio rhoncus, pulvinar arcu nec, interdum neque. Curabitur porta molestie magna sit amet volutpat. Maecenas dictum placerat auctor. Aliquam id mauris nec metus iaculis rutrum eget quis massa. Mauris dapibus turpis erat, at aliquet ipsum dapibus non. Duis in velit id arcu dignissim semper. In tincidunt metus vel dui accumsan, sit amet facilisis lectus rhoncus. In fringilla nulla et venenatis consectetur. Integer quis malesuada enim.
                </p>
             </div>
             
             <div class="recherche bloc">
                <h1 style="color: #000000;">On recherche !</h1>
                <p style="height: 390px;">
                   Proin eget mauris sagittis, bibendum orci sit amet, suscipit leo. Quisque et nulla sit amet turpis vestibulum egestas varius quis urna. Pellentesque sit amet dolor tincidunt, porttitor sem a, molestie magna. Nullam luctus convallis volutpat. Morbi auctor velit est, ac facilisis magna tincidunt eu. In adipiscing pretium lorem sit amet condimentum. Phasellus ornare bibendum tortor et venenatis. Suspendisse vestibulum congue semper. Integer lacinia, purus eget ullamcorper congue, dui diam commodo enim, sit amet luctus magna neque vitae dui. Donec aliquam auctor nibh, eu dapibus dolor lacinia ornare.
                   Morbi viverra pretium orci a tincidunt. Donec leo ligula, malesuada eu pharetra in, posuere vitae augue. Phasellus id neque id arcu cursus congue at euismod odio. Integer laoreet mi vitae sapien euismod feugiat. Maecenas ullamcorper sem at purus volutpat, a scelerisque arcu convallis. Curabitur sollicitudin feugiat vulputate. Vivamus in odio rhoncus, pulvinar arcu nec, interdum neque. Curabitur porta molestie magna sit amet volutpat. Maecenas dictum placerat auctor. Aliquam id mauris nec metus iaculis rutrum eget quis massa. Mauris dapibus turpis erat, at aliquet ipsum dapibus non. Duis in velit id arcu dignissim semper. In tincidunt metus vel dui accumsan, sit amet facilisis lectus rhoncus. In fringilla nulla et venenatis consectetur. Integer quis malesuada enim.
                </p>
             </div>
             
             <div class="stats bloc">
                <h1 style="color:#000000;text-align:right;">Quelques stats...</h1>
                <p style="height: 165px;">
                   Proin eget mauris sagittis, bibendum orci sit amet, suscipit leo. Quisque et nulla sit amet turpis vestibulum egestas varius quis urna. Pellentesque sit amet dolor tincidunt, porttitor sem a, molestie magna. Nullam luctus convallis volutpat. Morbi auctor velit est, ac facilisis magna tincidunt eu. In adipiscing pretium lorem sit amet condimentum. Phasellus ornare bibendum tortor et venenatis. Suspendisse vestibulum congue semper. Integer lacinia, purus eget ullamcorper congue, dui diam commodo enim, sit amet luctus magna neque vitae dui. Donec aliquam auctor nibh, eu dapibus dolor lacinia ornare.
                   Morbi viverra pretium orci a tincidunt. Donec leo ligula, malesuada eu pharetra in, posuere vitae augue. Phasellus id neque id arcu cursus congue at euismod odio. Integer laoreet mi vitae sapien euismod feugiat. Maecenas ullamcorper sem at purus volutpat, a scelerisque arcu convallis. Curabitur sollicitudin feugiat vulputate. Vivamus in odio rhoncus, pulvinar arcu nec, interdum neque. Curabitur porta molestie magna sit amet volutpat. Maecenas dictum placerat auctor. Aliquam id mauris nec metus iaculis rutrum eget quis massa. Mauris dapibus turpis erat, at aliquet ipsum dapibus non. Duis in velit id arcu dignissim semper. In tincidunt metus vel dui accumsan, sit amet facilisis lectus rhoncus. In fringilla nulla et venenatis consectetur. Integer quis malesuada enim.
                </p>
             </div>
             
             <div style="text-align:center;font-size:10px;opacity:.8;position:absolute;width:100%;top:1220px;">(c) sugar plum fairy on <a href="http://www.never-utopia.com/">Never-Utopia</a></div>
          </div>
          
       </body>
    </html>
    (J'ai édité en ajoutant le copyright, merci de ne pas l'enlever. :heart: )
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 43Messages : 20653

    Dim 26 Jan 2014 - 8:19

    Bonjour, nous sommes sans nouvelles...Ce topic est-il toujours d'actualité ? Merci de nous tenir informés du déroulement de cette demande.
    Attention, l'absence de réponse à ce message entrainera l'archivage du topic d'ici une semaine.



    (SUGAR PLUM) Une pt'ite fiche de pub pour LGDC Hunger Games ? 376864signichigo
    • Revenir en haut
    Klash
    Klash
    MasculinAge : 43Messages : 20653

    Lun 3 Fév 2014 - 8:54

    Pas de réponse j'archive.



    (SUGAR PLUM) Une pt'ite fiche de pub pour LGDC Hunger Games ? 376864signichigo
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 17 Mai 2024 - 4:42