Partagez
Voir le sujet précédentAller en basVoir le sujet suivant
avatar
Mademoiselle
Admin
Messages : 69
Date d'inscription : 14/03/2017
http://milano.forumactif.com

Original - Simple - Color {petit}

le Dim 23 Avr - 16:03


LIEN ET EXPLICATION DU LIEN ICI, à la place du Lorem Ipsum pour les autres.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl.



Code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet"><style type="text/css">#updo { width: 260px; height: 100px; overflow: hidden; } .updow { width: 260px; height: 100px; position: relative; top: -320px; background-color: rgba(255,255,255,.3); -webkit-transition-duration: .7s; -o-transition-duration: .7s; -moz-transition-duration: .7s; } #updo:hover .updow { top: -100px; } .down-one { margin:15px; width: 220px; height:50px; background-color: #fff; margin-top:-10px; margin-right:-10px;padding:5px;} .down-three { height:50px; font-family: calibri; font-size: 9px; text-align: justify; line-height: 100%; letter-spacing: 1px; overflow:auto;} .down-four { height: 30px; } .down-seven { width: 260px; height: 100px; padding: 5px; background-color: #fff; border: 1px solid #eee; } .pselink {width:100px;text-align:center; color:white; font-size:11px; font-family: 'Open Sans Condensed', sans-serif; padding-top:35px; margin-bottom:0px; border-bottom:1px solid white;} .inflink{text-align:center; color:white; font-size:9px; font-family: 'Open Sans Condensed', sans-serif;} .grylink {width:260px; height:100px; background-color:#F5A9A9;} .slylink {width:260px; height:100px; background-color:#BCF5A9;} .ravlink {width:260px; height:100px; background-color:#A9A9F5;} .huflink {width:260px; height:100px; background-color:#F5DA81;} .tealink {width:260px; height:100px; background-color:#E2A9F3;} .goglink {height:5px; width: 525px; border: 1px solid #eee; font-size:14px; font-family: 'Open Sans Condensed', sans-serif; padding:10px; margin:15px;padding-bottom:20px;}</style>

<center><div class="goglink">FILLES/GARÇON</div><table><tr><td><div class="down-seven"><div id="updo"><div class="grylink"><center><div class="pselink">NOM PRENOM</div><div class="inflink">âge x études x année</div></center></div><div class="updow"><div class="down-four"></div><div class="down-one"><div class="down-three">LIEN ET EXPLICATION DU LIEN ICI, à la place du Lorem Ipsum pour les autres.</div></div></div></div></div></td><td><div class="down-seven"><div id="updo"><div class="slylink"><center><div class="pselink">NOM PRENOM</div><div class="inflink">âge x études x année</div></center></div><div class="updow"><div class="down-four"></div><div class="down-one"><div class="down-three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl. </div></div></div></div></div></td></tr></table>
<table><tr><td><div class="down-seven"><div id="updo"><div class="huflink"><center><div class="pselink">NOM PRENOM</div><div class="inflink">âge x études x année</div></center></div><div class="updow"><div class="down-four"></div><div class="down-one"><div class="down-three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl. </div></div></div></div></div></td><td><div class="down-seven"><div id="updo"><div class="ravlink"><center><div class="pselink">NOM PRENOM</div><div class="inflink">âge x études x année</div></center></div><div class="updow"><div class="down-four"></div><div class="down-one"><div class="down-three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl. </div></div></div></div></div></td></tr></table>
<table><tr><td><div class="down-seven"><div id="updo"><div class="tealink"><center><div class="pselink">NOM PRENOM</div><div class="inflink">âge x études x année</div></center></div><div class="updow"><div class="down-four"></div><div class="down-one"><div class="down-three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl. </div></div></div></div></div></td><td><div class="down-seven"><div id="updo"><div class="grylink"><center><div class="pselink">NOM PRENOM</div><div class="inflink">âge x études x année</div></center></div><div class="updow"><div class="down-four"></div><div class="down-one"><div class="down-three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec augue nibh, egestas vitae sapien in, rutrum blandit ipsum. Curabitur ultrices in est a ornare. Nam scelerisque ligula sit amet justo dictum pretium. Pellentesque odio tortor, venenatis a vulputate vitae, viverra a eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend nisi augue, a pretium augue dictum sit amet. Suspendisse congue lorem ut rutrum dapibus. Maecenas sollicitudin suscipit turpis, vitae aliquet est lobortis id. In congue erat dolor, a scelerisque elit pharetra at. Pellentesque sed nulla ante. Fusce fringilla, massa non feugiat varius, ligula ante pulvinar sem, vitae fringilla arcu mi facilisis enim. Sed euismod commodo condimentum. Praesent sodales bibendum neque ac gravida. Nulla tempus posuere nunc, dapibus facilisis dui ullamcorper id. Nunc at lobortis magna. Cras dignissim ornare mi, sit amet tincidunt augue fringilla sit amet. Sed tristique tellus in mauris rhoncus, vel venenatis quam cursus. Suspendisse luctus rhoncus tincidunt. In ornare, augue a rutrum luctus, enim nulla porta tortor, at pharetra felis elit vitae nisl. </div></div></div></div></div></td></tr></table></center>
Voir le sujet précédentRevenir en hautVoir le sujet suivant
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum