Mes essentiels pour le Webdesign
HTML 5
<! DOCTYPE html> <html> <head> <title>Boilerplate</title> </head> <body> <div class="page"> <div class="header"> <a href="#"> Accueil</a> <a href="#"> Contact</a> <a href="#"> Tutoriels</a> <a href="#"> Portfolio</a> <a href="#"> Accueil</a> <a href="#"> Accueil</a> <a href="#"> Accueil</a> </div> <div class="body"> <div class="mosaic"> <form action=""> <label for="">Mon label</label> <input type="text"> <button>Envoyer</button> </form> </div> </div> <div class="sidebar"> Je suis une sidebar </div> <div class="sidebar sidebar-secondary"> Je suis une sidebar </div> </div> <div class="footer"> Le footer </div> </body> </html>
CSS
.page { display:flex; flex-wrap:wrap; } .header { width:100%; height:60px; background-color:#eee; display:flex; align-items:center; align-content:center; justify-content:space-around; flex-wrap:wrap; } .footer { order:4; width:100%; height:60px; background-color:#eee; display:flex; align-items:center; justify-content:center; } .sidebar { border: 1px solid #000; flex:2 0px; order: 1; width:20%; background-color:#bdc5ff; } .sidebar-secondary { flex-grow: 1; order: 3; width:20%; background-color:#bdc5ff; } .body { flex:2 0px; order:2; width:60%; background-color:#ffcabc; } .mosaic { height:500px; display:flex; justify-content:center; align-items:center; } .mosaic img { margin:5px; } @media (max-width:700px) { .body { flex-basis:100; } }
Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *
Commentaire
Nom *
Adresse de messagerie *
Site web
Enregistrer mon nom, mon e-mail et mon site web dans le navigateur pour mon prochain commentaire.