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.


    Fiche colorée

    Partagez
    avatar
    Llunn
    FémininAge : 27Messages : 85

    le Mer 20 Juil 2016 - 14:38



    Fiche colorée



    Je vous propose une petite fiche de ma création !
    Cette fiche peut servir pour des utilisation différentes donc, à vous de voir ce que vous en faites !

    Aperçu en direct
    Aperçu en image


    Le codage est a mettre dans une page html et ensuite, pour l'utiliser, vous devrez utiliser une belle iframe !

    Soyez gentils, laissez moi le petit crédit lorsque vous utiliser le code Wink



    Le code HTML



    Il s'agit du code complet que vous devez mettre dans une page html. (Module > Gestion des pages HTML).
    Sélectionnez bien les "non" avant de poster.

    C'est dans cette page que vous ajouterez votre contenu et les couleurs si vous le souhaitez.

    Code:
    <!DOCTYPE html><html>
    <head>
    <link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css' />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Fiche colorée</title>
    <style type="text/css">
    body {
    margin: 0px;
    }
    .banana {color: #2DB38F; font-family: Oswald;font-size: 11px;font-weight: bold;}
    .peach {color: #B51F8C; font-family: Oswald;font-size: 11px;font-weight: bold;}
    .b0 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #d0d3d4;} 
    .b1 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #e07059;}
    .b2 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #99d5e4;}
     
     /*Tableau du mag */

    .tab {width:504px !important;
     height: 600px :important!;
     box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
     background-color: #fff;
     border: 5px solid #fff;}

    .tab0 {width:500px !important;
     margin:auto;}


     /*Colonnes colorées en haut du tableau*/

    .tab1 {width: 25%, display:block;
      background-color: #ffc22c;}

    .tab2 {width: 25%, display:block;
      background-color: #f79037;}

    .tab3 {width: 25%, display:block;
      background-color: #13ada6;}

    .tab4 {width: 25%, display:block;
      background-color: #b6d552;}

    .tab5 {width: 25%, display:block;
      background-color: #ffc22c;
     height:25px;}

    .tab6 {width: 25%, display:block;
      background-color: #f79037;}

    .tab7 {width: 25%, display:block;
      background-color: #13ada6;}

    .tab8 {width: 25%, display:block;
      background-color: #b6d552;}

     /*Titres*/

    .headlight { width: 100%;
      background-color: #fff;
     height:100px;
     font-family: oswald;
     color: #414142 !important;
      text-align: center;
      text-transform: uppercase;
     font-size: 50px;
      font-weight: 700;}

    .bottomlight { width: 100%;
      background-color: #fff;
     height:60px;
     font-family: oswald;
     color: #414142 !important;
      text-align: justify;
      text-transform: italic;
     font-size: 14px;
      font-weight: 500;
     line-height: 12px;
     font-style:italic;
     padding: 10px;}

    .sub {color:#b6d552;
     display:block;
     font-family: 'Roboto', sans-serif;
     font-size:10px;
     margin-left: auto;
     margin-right: auto;
     text-align:center;
     width:90%;
     text-transform: uppercase;
     padding-top:-150px;
    border-bottom:1px solid #13ada6;}

    .cimg{
     opacity: 0.7;
     transition-duration: 0.7s;}

    .cimg:hover{
     opacity: 1;
     transition-duration: 0.7s;}

     /*Tableau à onglets*/
     .linknav {
      display:block;
      background-color: #c9d852;
      margin:5px;
      padding:5px;
      color: #eeeeec !important;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
     font-family: 'Questrial', sans-serif;
      font-size: 14px;
      font-weight: bold;
    }

    .linknav:hover {
      display:block;
      background-color: #ededea;
      border-bottom: #e1755d 2px solid;
      margin:5px;
      padding:5px;
      color: #e1755d !important;
      text-align: center;
      text-transform: uppercase;
      text-decoration: none;
     font-family: 'Questrial', sans-serif;
      font-size: 14px;
      font-weight: bold;
    }


    /* par défaut on masque le conenu de l.onglet */
    .contenu-onglet, .radio-onglet {
      display: none;
    }

    /* on affiche l.onglet sélectionné */
    .radio-onglet:checked + .contenu-onglet {
      display: block;
    }
     
     .credit {color:#b6d552;
     display:block;
     font-family: 'Roboto', sans-serif;
     font-size:10px;
     margin-left: auto;
     margin-right: auto;
     text-align:center;
     width:90%;
     padding-top:-150px;
    }
    </style>
    </head>
    <body>



    <center>
      <div class="tab">
        <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
          <tr>
            <td>
              <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                <tr>
                  <td class="tab5"></td>
                  <td class="tab6"></td>
                  <td class="tab7"></td>
                  <td class="tab8"></td>
                </tr>
              </table>
            </td>
          </tr>
          <tr>
            <td>
              <table style="border-spacing : 0px; border-collapse : collapse;" >
                <tr>
                  <td class="headlight">Gros titre <br /> <span class="sub">petit slogan bien sympa  </span></td>
                </tr>
                <tr>
                  <td>
                    <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                      <tr>
                        <td class="tab1"></td>
                        <td class="tab2"></td>
                        <td class="tab3"></td>
                        <td class="tab4"></td>
                      </tr>
                    </table>
                    <img src="http://img15.hostingpics.net/pics/750110melbournecityscape.png" class="cimg" width="500px"/>
                    <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                      <tr>
                        <td class="tab1"></td>
                        <td class="tab2"></td>
                        <td class="tab3"></td>
                        <td class="tab4"></td>
                      </tr>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td>
                    <center>
                      <div style="vertical-align:top;background-color: #edefec; border-bottom: 2px solid #ee9507;width:500px">
                        <div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
                          Edito
                        </div>
                        <div align="justify" style="display:block;height:175px;overflow:auto;background-color: #edefec;padding:2px;margin:2px;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;text-align: justify;">
                          <table>
                            <tr>
                              <td>
                                <table>
                                  <tr>
                                    <td>
                                      <br />
                                      <img src="http://i21.servimg.com/u/f21/19/32/80/36/mytyo10.png" />
                                    </td>
                                  </tr>
                                  <tr>
                                    <td>
                                      <center>
                                        <span class="b0">AM</span> <span class="b1">∆ 12° </span><span class="b2"> ∇ 9°</span><br /><span class="b0">PM</span> <span class="b1">∆ 28°</span>  <span class="b2">∇ 21° </span>
                                      </center>
                                    </td>
                                  </tr>
                                </table>
                              </td>
                              <td style="font-size: 12px;color: #787878;">
                                <div style="text-align: justify;">
                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna condimentum, accumsan augue in, semper augue. Nam hendrerit ligula et posuere commodo. Sed sagittis odio justo, rutrum malesuada lectus convallis et. Fusce felis metus, hendrerit a facilisis ut, laoreet vel mi. Nulla luctus elit dictum, mollis est sed, pretium tortor. Aenean sit amet tincidunt libero. Curabitur tellus leo, fermentum eleifend mattis et, aliquam eget leo. Nullam urna velit, egestas molestie mollis at, efficitur in lorem. Vivamus placerat fringilla odio vel volutpat. Aenean vitae dapibus tellus, eget finibus libero. Sed ipsum quam, tincidunt ac mollis et, lacinia in augue. Mauris nec lacinia odio. Aliquam in aliquet tellus, vitae semper orci.
                                </div>
                              </td>
                            </tr>
                          </table>
                        </div>
                      </div>
                    </center>
                    <table>
                      <tbody>
                        <tr>
                          <td align="justify" style="background-color: #fe8c21;border-bottom: 2px solid #50c6b6; width: 150px; height: 110px;overflow:auto;font-size: 12px;color: #787878;">
                            <label for="contenu1" class="linknav">Titre 1</label><label for="contenu2" class="linknav">Titre2</label><label for="contenu3" class="linknav">Titre 3</label><label for="contenu4" class="linknav">Titre 4</label><label for="contenu5" class="linknav">Titre 5</label>
                          </td>
                          <td align="justify" style="border-bottom: 2px solid #50c6b6; width: 300px; height: 150px;overflow:auto;font-size: 12px;color: #787878;">
                            <div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
                              Infos
                            </div>
                            <div align="justify" style="display:block;height:150px;width: 350px;overflow:auto;background-color: #edefec;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;">
                              <input type="radio" id="contenu1" checked class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna condimentum, accumsan augue in, semper augue. Nam hendrerit ligula et posuere commodo. Sed sagittis odio justo, rutrum malesuada lectus convallis et. Fusce felis metus, hendrerit a facilisis ut, laoreet vel mi. Nulla luctus elit dictum, mollis est sed, pretium tortor. Aenean sit amet tincidunt libero. Curabitur tellus leo, fermentum eleifend mattis et, aliquam eget leo. Nullam urna velit, egestas molestie mollis at, efficitur in lorem. Vivamus placerat fringilla odio vel volutpat. Aenean vitae dapibus tellus, eget finibus libero. Sed ipsum quam, tincidunt ac mollis et, lacinia in augue. Mauris nec lacinia odio. Aliquam in aliquet tellus, vitae semper orci.</div>
                              <input type="radio" id="contenu2" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 2 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                              <input type="radio" id="contenu3" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 3 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                              <input type="radio" id="contenu4" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 4 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                              <input type="radio" id="contenu5" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 5 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </td>
                </tr>
                <tr>
                  <td>
                    <table style="cborder-spacing : 0px; border-collapse : collapse;" >
                      <tr>
                        <td class="bottomlight">Maecenas vel libero quis arcu eleifend molestie accumsan eu neque. Suspendisse metus metus, imperdiet vitae turpis vel, semper efficitur velit </td>
                      </tr>
                    </table>
                    <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                      <tr>
                        <td class="tab5"></td>
                        <td class="tab6"></td>
                        <td class="tab7"></td>
                        <td class="tab8"></td>
                      </tr>
                    </table>
                    <div class="credit" style="text-align: center;">©Llunn</div>
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </div>
    </center>
    </body>
    </html>

    L'iframe



    Vous devez placer cette iframe dans un message ou ailleurs selon l'utilisation que vous en faites.

    Pensez bien à ajuster la largeur et/ou la hauteur si vous avez fait ces modifications dans le le css qui se trouve dans votre page HTML.


    Code:
    <iframe frameborder="0" scrolling="no" src="LIEN DE LA PAGE" name="fiche colorée" style="width: 550px; height: 970px; margin: auto; display: block;"></iframe>
    avatar
    Onyx
    FémininAge : 23Messages : 3013

    le Jeu 22 Déc 2016 - 1:04

    Salut!

    La fiche est superbe! Par contre, tu as oublié de refermer beaucoup de balises dans ton code. Je l'ai corrigé,mais fais attention la prochaine fois. S'il y a du rouge dans la page html, c'est qu'il y a des choses mal-refermées!

    Sur ce, je valide le Ls qui sera bientôt mis dans la bonne section.

    Merci du partage ^^



    avatar
    Evalla
    FémininAge : 24Messages : 43

    le Dim 19 Fév 2017 - 22:21

    merci
    avatar
    Kelalin
    FémininAge : 25Messages : 1676

    le Dim 19 Fév 2017 - 22:56

    Merci pour le partage !
    avatar
    Onlyo
    FémininAge : 20Messages : 24

    le Sam 15 Avr 2017 - 16:51

    Très beau, merci beaucoup ! <3
    avatar
    smily
    FémininAge : 18Messages : 64

    le Dim 30 Juil 2017 - 19:20

    Merci ~ 
    Contenu sponsorisé


      La date/heure actuelle est Jeu 19 Oct 2017 - 13:02