Skip to content

Instantly share code, notes, and snippets.

@jeroavf

jeroavf/Flexbox.html

Created December 10, 2015 19:06
Show Gist options
  • Save jeroavf/56fdc000bb41f1f19824 to your computer and use it in GitHub Desktop.
Save jeroavf/56fdc000bb41f1f19824 to your computer and use it in GitHub Desktop.
Download ZIP
Flexbox.html
Raw
Flexbox.html
<!DOCTYPE html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/reset.css" />
<style>
.menu-opcoes li {
display: inline;
}
.container {
margin: 0 auto;
width: 940px;
min-height: 100%;
}
.sacola {
background: url(img/sacola.png) no-repeat top right;
width: 140px;
font-size: 14px;
text-align: right;
padding-right: 35px;
padding-top: 8px;
}
header {
display: flex;
justify-content: space-between;
}
header div {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}
</style>
</head>
<body>
<header class="container">
<h1>
<img src="img/logo.png" alt="Mirror Fashion">
</h1>
<div>
<p class="sacola">
Nenhum item na sacola de compras
</p>
<nav class="menu-opcoes">
<ul>
<li><a href="#">Sua Conta</a></li>
<li><a href="#">Lista de Desejos</a></li>
<li><a href="#">Cartão Fidelidade</a></li>
<li><a href="sobre.html">Sobre</a></li>
<li><a href="#">Ajuda</a></li>
</ul>
</nav>
</div>
</header>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment