Bom dia para toda a comunidade!
Sou analista de sistemas e desenvolvedor (Protheus, Advpl, C#, etc) mas não conheço Html por isso estou lendo a apostila Caelum-html-css só que o resultado não esta de acordo com o que esta na apostila, alinhamento, fundo, posição, etc.
Cheguei até a pagina 66 mas o resultado esta diferente, estou listando o meu Index.html e o Estilos.css, aqui:
De repente se alguém tiver estas fontes e puder me enviar agradeço
Index.html
Mirror Fashion<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>
<main class="container destaque">
<section class="busca">
<h2>Busca</h2>
<form>
<input type="search">
<button>Buscar</button>
</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 -->
<section class="banner-destaque">
<figure>
<img src="img/destaque-home.png" alt="Promoção: Big City Night">
</figure>
</section>
<!-- fim .banner-destaque -->
</main>
<!-- fim .container .destaque -->
</body>
Estilos.css:
body {
color: #333333;
font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
}
header {
position: relative;
}
.container {
margin: 0 auto;
width: 940px;
}
.sacola {
background-image: url(…/img/sacola.png);
background-repeat: no-repeat;
background-position: top right;
font-size: 14px;
padding-top: 8px;
padding-right: 35px;
text-align: right;
width: 140px;
position: absolute;
top: 0;
right: 0;
}
ul li {
display: inline;
}
.menu-opcoes {
position: absolute;
bottom: 0;
right: 0;
}
.menu-opcoes ul li {
display: inline;
margin-left: 20px;
font-size: 15px;
}
.menu-opcoes a {
color: #003366;
}
.busca,
.menu-departamentos {
background-color: #DCDCDC;
font-weight: bold;
text-transform: uppercase;
margin-right: 10px;
width: 230px;
}
.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[type=search] {
width: 170px;
}
