Mes essentiels pour le Webdesign
HTML 5
<header> <div class="brand"> <h1>Lorem Ipsum</h1> <h2>Lorem Ipsum des sapienta</h2> </div> <nav> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <span> <a href="#"> <img src="http://estelle-autier.fr/laboratoire/images/main_03" alt="description"> </a> </span> <span> <a href="#"> <img src="http://estelle-autier.fr/laboratoire/images/main_03" alt="description"> </a> </span> </nav> </header>
CSS
/* reset */ * { margin:0; padding:0; box-sizing:content-box;} a { outline : none; } /* base */ html { background-color:#f1f1f1;} body { max-width:100%; background-color:white; margin-left:auto; font-family: arial, sans-serif; } /* parent */ header { height:110px; margin:0px 80px 0px 80px; padding-top:20px; display:flex; /* CSS align-items: flex-start | flex-end | center | baseline | stretch */ align-items:flex-end; } /* childs */ header .brand { display:flex; flex-direction:column; width:100%; } header nav { display:flex; justify-content:space-around; width:100%; } /* texte h1 et liens */ header h1 { color:#00349d; font-size:50px; font-style:normal; } header h2 { color:#fe70de; font-size:40px; font-weight:lighter; } header a { color:#4158b4; font-size:15px; font-weight:normal; display:flex; /* syntaxe : underline | overline | line-through | none */ flex-direction:none; } header a:hover, header a:active { /* syntaxe : underline | overline | line-through | none */ text-decoration:none; } /* images de la nav */ nav { display:flex; /* CSS align-items: flex-start | flex-end | center | baseline | stretch */ align-items:flex-end; } nav img { width:76px; height:78px; }
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.