Skip to content

Instantly share code, notes, and snippets.

@edilson

edilson/estilos.css

Created January 14, 2018 20:44
Show Gist options
  • Save edilson/007118596341808e1172ec225bd443ed to your computer and use it in GitHub Desktop.
Save edilson/007118596341808e1172ec225bd443ed to your computer and use it in GitHub Desktop.
Download ZIP
Raw
estilos.css
@charset "UTF-8";
header {
position: relative;
}
.menu-opcoes {
position: absolute;
bottom: 0;
right: 0;
}
.sacola {
background: url(../img/sacola.png) no-repeat top right;
position: absolute;
top: 0;
right: 0;
font-size: 14px;
padding-right: 35px;
text-align: right;
width: 140px;
padding-top: 8px;
}
.menu-opcoes ul {
font-size: 15px;
}
.menu-opcoes a {
color: #003366;
}
body {
color: #333333;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.menu-opcoes ul li {
display: inline;
margin-left: 20px;
}
.container {
margin: 0 auto;
width: 940px;
}
.busca,
.menu-departamentos {
background-color: #dcdcdc;
font-weight: bold;
text-transform: uppercase;
margin-right: 10px;
width: 230px;
float: left;
}
.menu-departamentos {
clear: left;
margin-top: 10px;
padding-bottom: 10px;
}
.busca h2,
.busca form,
.menu-departamentos h2 {
margin: 10px;
}
.menu-departamentos li {
background-color: white;
margin-bottom: 1px;
padding: 5px 10px;
}
.menu-departamentos a {
color: #333333;
text-decoration: none;
}
.busca input {
vertical-align: middle;
}
.busca input[type=search] {
width: 170px;
}
.destaque {
margin-top: 10px;
}
.painel {
margin: 10px 0;
padding: 10px;
width: 445px;
}
.novidades {
position: absolute;
float: left;
background-color: #f5dcdc;
}
.mais-vendidos {
position: absolute;
float: right;
background-color: #dcdcf5;
}
.painel li {
display: inline-block;
vertical-align: top;
width: 140px;
margin: 2px;
padding-bottom: 10px;
}
.painel h2 {
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 10px;
}
.painel a {
color: #333;
font-size: 14px;
text-align: center;
text-decoration: none;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Mirror Fashion</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/estilos.css">
</head>
<body>
<header class="container">
<h1><img src="img/logo.png" alt="Mirror Fashion"></h1>
<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>
</header>
<div class="container destaque">
<section class="busca">
<h2>Busca</h2>
<form>
<input type="search">
<input type="image" src="img/busca.png">
</form>
</section><!--Fim .busca-->
<section class="menu-departamentos">
<h2>Departamentos</h2>
<nav>
<ul>
<li><a href="#">Blusas e Camisas</a></li>
<li><a href="#">Calças</a></li>
<li><a href="#">Saias</a></li>
<li><a href="#">Vestidos</a></li>
<li><a href="#">Sapatos</a></li>
<li><a href="#">Bolsas e Carteiras</a></li>
<li><a href="#">Acessórios</a></li>
</ul>
</nav>
</section><!--Fim .menu-departamentos-->
<img src="img/destaque-home.png" alt="Promoção: Big City Night">
</div><!--Fim .container .destaque-->
<div class="container paineis">
<section class="painel novidades">
<h2>Novidades</h2>
<ol>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura1.png">
<figcaption>Fuzz Cardigan por R$ 129,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura5.png">
<figcaption>Blusa Azul por R$29,90</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura15.png">
<figcaption>Vestido a partir de R$35,00</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura9.png">
<figcaption>Conjunto blusa mais short por R120,00</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura11.png">
<figcaption>Short verde por R$20,00</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura6.png">
<figcaption>Blusa Rosa R$25,00</figcaption>
</figure>
</a>
</li>
<section class="painel mais-vendidos">
<h2>Mais Vendidos</h2>
<ol>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura2.png">
<figcaption>Blusa Estampada por R$55,00</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura8.png">
<figcaption>Blusa e calça por R$150,00</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura14.png">
<figcaption>Camisa azul escura por R$68,00</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura13.png">
<figcaption>Blusa lisa por R$37,98</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura12.png">
<figcaption>Blusa azul claro R$72,00</figcaption>
</figure>
</a>
</li>
<li>
<a href="produto.html">
<figure>
<img src="img/produtos/miniatura7.png">
<figcaption>Blusa verde R$46,00</figcaption>
</figure>
</a>
</li>
</ol>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment