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
Cette fiche peut servir pour des utilisation différentes donc, à vous de voir ce que vous en faites !
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
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.
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.
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>
