<html> <head> <meta charset="utf-8" /> <style>footer
{ background: url('images/ico_top.png') no-repeat top center, url('images/separateur.png') repeat-x top, url('images/ombre.png') repeat-x top; padding-top: 25px; } footer p, footer ul { font-size: 0.8em; } footer h1 { font-size: 1.1em; } #tweet, #mes_photos, #mes_amis { display: inline-block; vertical-align: top; } #tweet { width: 28%; } #mes_photos { width: 35%; } #mes_amis { width: 31%; } #mes_photos img { border: 1px solid #181818; margin-right: 2px; } #mes_amis ul { display: inline-block; vertical-align: top; margin-top: 0; width: 48%; list-style-image: url('images/ico_liensexterne.png'); padding-left: 2px; } #mes_amis a { text-decoration: none; color: #760001;
}</style> <link rel="stylesheet" href="style.css" /> <title>Zozor - Carnets de voyage</title> </head> <body> <div id="bloc_page"> <header> <div id="titre_principal"> <img src="images/zozor_logo.png" alt="Logo de Zozor" id="logo" /> <h1>Zozor</h1> <h2>Carnets de voyage</h2> </div> <nav> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Blog</a></li> <li><a href="#">CV</a></li> <li><a href="#">Contact</a></li> </ul> </nav> </header> <div id="banniere_image"> <div id="banniere_description"> Retour sur mes vacances aux États-Unis... <a href="#" class="bouton_rouge">Voir l'article <img src="images/flecheblanchedroite.png" alt="" /></a> </div> </div> <section> <article> <h1><img src="images/ico_epingle.png" alt="Catégorie voyage" class="ico_categorie" />Je suis un grand voyageur</h1> <p>Lorem ipsum dolor sit amet...</p> <p>Vivamus sed libero nec mauris pulvinar facilisis ut non sem...</p> <p>Phasellus ligula massa, congue ac vulputate non, dignissim at augue...</p> </article> <aside> <h1>À propos de l'auteur</h1> <img src="images/bulle.png" alt="" id="fleche_bulle" /> <p id="photo_zozor"><img src="images/zozor_classe.png" alt="Photo de Zozor" /></p> <p>Laisse-moi le temps de me présenter : je m'appelle Zozor, je suis né un 23 novembre 2005.</p> <p>Bien maigre, n'est-ce pas ? C'est pourquoi, aujourd'hui, j'ai décidé d'écrire ma biographie (ou zBiographie, comme vous voulez !) afin que les zéros sachent qui je suis réellement.</p> <p><img src="images/facebook.png" alt="Facebook" /><img src="images/twitter.png" alt="Twitter" /><img src="images/vimeo.png" alt="Vimeo" /><img src="images/flickr.png" alt="Flickr" /><img src="images/rss.png" alt="RSS" /></p> </aside> </section> <footer> <div id="tweet"> <h1>Mon dernier tweet</h1> <p>Hii haaaaaan !</p> <p>le 12 mai à 23h12</p> </div> <div id="mes_photos"> <h1>Mes photos</h1> <p><img src="images/photo1.jpg" alt="Photographie" /><img src="images/photo2.jpg" alt="Photographie" /><img src="images/photo3.jpg" alt="Photographie" /><img src="images/photo4.jpg" alt="Photographie" /></p> </div> <div id="mes_amis"> <h1>Mes amis</h1> <ul> <li><a href="#">Pupi le lapin</a></li> <li><a href="#">Mr Baobab</a></li> <li><a href="#">Kaiwaii</a></li> <li><a href="#">Perceval.eu</a></li> </ul> <ul> <li><a href="#">Belette</a></li> <li><a href="#">Le concombre masqué</a></li> <li><a href="#">Ptit prince</a></li> <li><a href="#">Mr Fan</a></li> </ul> </div> </footer> </div> </body> </html>
