todos

Õ) Já temos o arquivo index.html criado. Vamos apagar seu único parágrafo, pois adicionaremos conteúdo que fará sentido.
Crie o arquivo estilos.css na pasta css do projeto, que será onde escreveremos o CSS visual da página.
Adicione também a tag apontando para css/estilos.css:

ó) Próximo passo: criar o cabeçalho. Use as tags semânticas que vimos no curso, como , ,
, , etc. Crie links para as páginas do menu. E use para representar o título da página com o logo acessível.

Nenhum item na sacola de compras

Sua Conta
Lista de Desejos
Cartão Fidelidade
Sobre

Õ) Utilizaremos o CSS reset do Eric Meyer. O arquivo reset.css já foi copiado para a pasta css do nosso projeto quando importamos o projeto no capítulo inicial.
Precisamos só referenciá-lo no head antes do nosso estilos.css:

Abra novamente a página no navegador. Percebe a diferença, principalmente na padronização dos espaçamentos.
ó) Próximo passo: transformar nosso menu em horizontal e ajustar espaçamentos básicos.
Vamos usar a propriedade display para mudar os para inline. Aproveite e já coloque um espaçamento entre os links com margin.
Repare também como a sacola está desalinhada. O texto está muito pra cima e não alinhado com a base do ícone. Um padding-top deve resolver.
.menu-opcoes ul li { display: inline; margin-left: 20px;
}
.sacola { padding-top: 8px;
}
Teste a pagina melhorando

Õ) Posicione o menu à direita e embaixo no header. Use position: absolute para isso. E não esqueça: se queremos posicioná-lo absolutamente com relação ao cabeçalho, o cabeçalho precisa estar posicionado. header { position: relative;
}
.menu-opcoes { position: absolute; bottom: 0; right: 0;
}
ó) A sacola também deve estar posicionada a direita e no topo. Use position, top e right para conseguir esse comportamento. Adicione as regras de posicionamento ao seletor .sacola que já tínhamos:
.sacola { position: absolute; top: 0; right: 0;
}