Bonsoir j'ai un problème quelqu'un peut me dire comment je peut faire ? J'arrive pas 
"Enfin, je vous rappelle que vous devez m'envoyer pour le dimanche 22 janvier au plus tard (23h59...) la version Flexbox du mini-site CSS que nous avons fait ensemble. Vous avez reçu la correction de ce site il y a deux jours, nous l'avons fait avec des float et du positionnement inline-block, il faut remplacer tout cela par du flex."
Si y'en a un parmi vous qui peut m'aider, avec joie je prend ! :3
Merci d'avance.
LES IMAGES:
http://hpics.li/75b02a9
http://hpics.li/b6ddd30
http://hpics.li/0bb67dd
http://hpics.li/2cb2e7f
HTML:
<!DOCTYPE html>
<html lang='fr'>
<head>
<meta charset="utf-8" />
<meta name="description" content="Mon premier site web" />
<title>Premier site web</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="page">
<!-- HEADER -->
<header>
<img src="images/logo_chat.png" alt="logo de chat" id="logo_chat" />
<h1 id="logo"><a href="#">MIM 06</a></h1>
<nav>
<ul id="menu">
<li><a href="#">Accueil</a></li>
<li>
<a href="#">Qui sommes-nous ?</a>
<ul>
<li><a href="#">Présentation</a></li>
<li><a href="#">Equipe</a></li>
<li><a href="#">Historique</a></li>
</ul>
</li>
<li><a href="#">Nos Produits</a></li>
<li><a href="#">Liens</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- SECTION -->
<section>
<!-- ARTICLE -->
<article>
<h2>Bienvenue !</h2>
<img src="images/chat.jpg" alt="image de chat" class="alignright" />
<blockquote>Ibi victu recreati et quiete, postquam abierat timor, vicos opulentos adorti equestrium adventu cohortium, quae casu propinquabant, nec resistere planitie porrecta conati digressi sunt retroque concedentes omne iuventutis robur relictum in sedibus acciverunt.</blockquote>
<p>Et quoniam inedia gravi adflictabantur, locum petivere Paleas nomine, vergentem in mare, valido muro firmatum, ubi conduntur nunc usque commeatus distribui militibus omne latus Isauriae defendentibus adsueti. circumstetere igitur hoc munimentum per triduum et trinoctium et cum neque adclivitas ipsa sine discrimine adiri letali, nec cuniculis quicquam geri posset, nec procederet ullum obsidionale commentum, maesti excedunt postrema vi subigente maiora viribus adgressuri.</p>
<p>Emensis itaque difficultatibus multis et nive obrutis callibus plurimis ubi prope Rauracum ventum est ad supercilia fluminis Rheni, resistente multitudine Alamanna pontem suspendere navium conpage Romani vi nimia vetabantur ritu grandinis undique convolantibus telis, et cum id inpossibile videretur, imperator cogitationibus magnis attonitus, quid capesseret ambigebat.</p>
</article>
<!-- SIDEBAR -->
<aside>
<div class="module">
<h2>Recherche</h2>
<form id="recherche" method="POST" action="#">
<input type="text" value="Rechercher sur le site" onfocus="this.value='';"/>
<input type="submit" value="OK" />
</form>
</div>
<div class="module">
<h2>News du site</h2>
<ul id="news">
<li><a href="#">Bienvenue sur notre site</a><span>01/11/16</span></li>
<li><a href="#">Et quoniam inedia </a><span>25/10/16</span></li>
<li><a href="#">Ibi victu recreati </a><span>21/10/16</span></li>
</ul>
<a href="#" class="bouton">Voir toute l'actualité</a>
</div>
<div class="module">
<h2>Réseaux sociaux</h2>
<a href="#" class="icone" id="tw" title="Suivez-nous sur Twitter">Twitter</a>
<a href="#" class="icone" id="fb" title="Suivez-nous sur Facebook">Facebook</a>
</div>
</aside>
</section>
<!-- Fin du div PAGE -->
</div>
<!-- FOOTER -->
<div id="footer">
<p><strong>Copyright 2016</strong><br />Mini site pour apprendre le CSS</p>
<p><a href="http://francoispreschez.com" target="_blank">francoispreschez.com</a></p>
</div>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
color: #2d2d2d;
background: url(images/fond.png) top left no-repeat;
}
/* INFOS GENERALES */
- page {
position: relative;
width: 960px;
margin: 20px auto;
background-color: #fff;
border-top: 3px solid #ff0060;
border-bottom: 3px solid #ff0060;
}
a {
color: #ff0060;
text-decoration: none;
}
a:hover {
color: #9a003a;
}
/* HEADER */
h1 {
font-family: Georgia;
font-size: 30px;
letter-spacing: -1px;
margin-left: 20px;
}
- logo_chat {
position: absolute;
top: 4px;
right: 10px;
}
- menu {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #dedede;
text-align: center;
}
- menu li {
display: inline-block;
position: relative;
}
- menu li a {
display: block;
padding: 5px 10px;
color: #2d2d2d;
font-weight: bold;
text-transform: uppercase;
}
- menu li a:hover {
background-color: #ff0060;
color: #fff;
}
- menu li ul {
display: none;
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #dedede;
position: absolute;
top: 26px;
left: 0px;
width: 100%;
}
- menu li:hover ul {
display: block;
}
- menu li ul li {
display: list-item;
border-bottom: 1px solid #fff;
}
/* CLASSES UTILES */
.alignright {
float: right;
margin: 0 0 10px 10px;
padding: 5px;
border: 1px solid #dedede;
}
.alignright:hover {
border: 1px solid #ff0060;
}
/* SECTION */
h2 {
border-bottom: 5px solid #dedede;
}
/* ARTICLE */
article {
display: inline-block;
vertical-align: top;
width: 560px;
padding: 20px;
}
article p {
line-height: 1.5em;
}
blockquote {
font-family: Georgia;
font-style: italic;
margin: 0px;
padding: 0px;
line-height: 1.5em;
font-size: 16px;
color: #a6a6a6;
}
/* ASIDE */
aside {
display: inline-block;
vertical-align: top;
width: 260px;
padding: 20px;
}
.module {
margin-bottom: 30px;
}
- recherche input[type="text"] {
border: 1px solid #dedede;
font-family: Georgia;
font-size: 12px;
font-style: italic;
padding: 5px;
color: #848484;
width: 150px;
}
- recherche input[type="text"]:hover {
border: 1px solid #ff0060;
color: #ff0060;
}
- recherche input[type="submit"] {
border: none;
background-color: #ff0060;
color: #fff;
font-weight: bold;
font-size: 12px;
padding: 5px;
margin-left: -4px;
}
- recherche input[type="submit"]:hover {
background-color: #9a003a;
}
- news {
list-style-type: none;
margin-bottom: 10px;
padding: 0px;
}
- news li {
background-color: #dedede;
margin-bottom: 2px;
font-size: 12px;
padding: 5px;
}
- news li span {
float: right;
font-size: 11px;
}
.bouton {
font-size:11px;
background-color: #ff0060;
color:#fff;
text-transform: uppercase;
font-weight: bold;
border-radius: 50px;
padding: 2px 10px;
}
.bouton:hover {
background-color: #9a003a;
color:#fff;
}
.icone {
display: inline-block;
width: 26px;
height: 26px;
text-indent: -7000px;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
}
- fb {
background: url(images/reseaux.png) top left no-repeat;
}
- fb:hover {
background: url(images/reseaux.png) bottom left no-repeat;
}
- tw {
background: url(images/reseaux.png) top right no-repeat;
}
- tw:hover {
background: url(images/reseaux.png) bottom right no-repeat;
}
/* FOOTER */
- footer {
width: 960px;
margin: 20px auto;
}
- footer p {
text-align: center;
color:#dedede;
font-size: 11px;
margin: 0;
padding: 0;
}
