Fiche divers nverutopia

 :: Administration :: Code Libre graph Voir le sujet précédent Voir le sujet suivant Aller en bas
Sam 10 Sep - 22:15
Never utopia



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>
Admin
avatar
Messages : 36
Date d'inscription : 31/03/2016
Voir le profil de l'utilisateur
Revenir en haut Aller en bas
Page 1 sur 1
Sauter vers :

Vous ne pouvez pas répondre aux sujets dans ce forum
Forumtestmonster :: Administration :: Code Libre graph-