<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Mise en page Flexbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Mise en page Flexbox">
<link rel="stylesheet" media="screen" href="flex.css">
</head>
<body>
<header>
<div class="container">
<h1>Mise en page avec Flexbox</h1>
</div>
</header>
<div class="container">
<nav>
<a href="apropos.html">A propos</a>
<a href="travaux.html">Travaux</a>
<a href="agenda.html">Agenda</a>
<a href="contact.html">Contact</a>
</nav>
<main>
<h2>Mes articles</h2>
<article>
<h3>Lorem ipsum</h3>
<p>
Aliquam non euismod enim, iaculis pretium massa. Aenean eu convallis mi. Nunc finibus nunc at placerat semper. Nunc aliquam erat nec tincidunt fermentum. Sed dictum turpis et ligula suscipit tincidunt. Nunc efficitur sit amet felis non condimentum. Proin fringilla nisl sed dictum efficitur. Proin tempus nisi lorem, eu porttitor dui scelerisque non.
</p>
</article>
<article>
<h3>Vestibulum ante ipsum</h3>
<p>
<a href="https://fr.wikipedia.org/wiki/Portrait_de_Bindo_Altoviti" target="_blank">
<img src="bindo-altoviti.jpg" alt="Bindo Altoviti, Raphael" title="Bindo Altoviti, Raphael">
</a>
Maecenas eleifend feugiat odio at vehicula. Nam sed mauris at dolor porta ultrices. Integer auctor iaculis metus ac congue. Nullam nec suscipit mauris. Pellentesque ultrices, mauris sed tincidunt placerat, tortor purus commodo ipsum, quis posuere sapien diam sed odio. Nam in metus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor lorem sed tristique imperdiet. Pellentesque ut diam egestas, accumsan dolor eget, egestas libero. Quisque lacinia neque ac eros malesuada sagittis. Vestibulum lacinia, mi sed tristique accumsan, lacus tortor auctor nulla, ut maximus quam purus non erat.
</p>
<p>
Maecenas eleifend feugiat odio at vehicula. Nam sed mauris at dolor porta ultrices. Integer auctor iaculis metus ac congue. Nullam nec suscipit mauris. Pellentesque ultrices, mauris sed tincidunt placerat, tortor purus commodo ipsum, quis posuere sapien diam sed odio. Nam in metus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent tempor lorem sed tristique imperdiet. Pellentesque ut diam egestas, accumsan dolor eget, egestas libero. Quisque lacinia neque ac eros malesuada sagittis. Vestibulum lacinia, mi sed tristique accumsan, lacus tortor auctor nulla, ut maximus quam purus non erat.
</p>
</article>
</main>
</div>
<footer>
<p>Source: <a href="http://fr.lipsum.com/" target="_blank">Lorem ipsum</a></p>
</footer>
</body>
</html>