1 - Criação de seção de dispositivos em HTML e CSS
HTML:
<section class = "dispositivos">
<h2 class = "dispositivos__titulo"> Disponível nos seus dispositivos favoritos </h2>
<il class = "dispositivos__lista">
<li class = "lista__item">
<img src = "Imagens/tv.png" alt = "Ícone de uma TV">
<h3 class = "item__titulo"> TV </h3>
</li>
<li class = "lista__item">
<img src = "Imagens/computador.png" alt = "Ícone de um computador">
<h3 class = "item__titulo"> Computadores </h3>
</li>
<li class = "lista__item">
<img src = "Imagens/celular.png" alt = "Ícone de um celular">
<h3 class = "item__titulo"> Celulares e tablets </h3>
</li>
</il>
</section>
2 - Estilizando a lista de dispositivos
CSS:
.dispositivos {
text-align: center;
}
.dispositivos__titulo {
font-weight: 700;
font-size: 48px;
}
.dispositivos__lista {
margin: 5em;
display: flex;
justify-content: center;
list-style-type: none;
}
.item__titulo {
font-weight: 700;
font-size: 32px;
}
3 - Construindo o footer com HTML
HTML:
<footer class = "rodape">
<img src = "Imagens/Logo.png" alt = "Logo do Alura+" class = "rodape__logo">
<ul class = "rodape__lista">
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Idioma </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Dispositivos compatíveis </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Contrato de assinatura </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Política de privacidade </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Proteção de dados no Brasil </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Anúncios personalizados </a>
</li>
<li class = "lista__links">
<a href = "#" class = "link-rodape"> Ajuda </a>
</li>
</ul>
<p class = "rodape__texto"> ® 2021 Alura, Alura+ e Alura Língua. Todos os direitos reservados. Serviço de assinatura paga. Conteúdo sujeito a disponibilidade. </p>
<p class = "rodape__texto"> Alura+ é um serviço pago, baseado em assinatura e sujeito a termos e condições. O serviço Alura+ é comercializado por Aovs Sistemas de Informática S.A., Rua Vergueiro, 3185 - Liberdade, São Paulo - SP, 04101-300, Brasil e CNPJ 05.555.382/0001-33 </p>
</footer>
4 - Estilizando o footer com CSS
CSS:
.rodape {
text-align: center;
margin: 7em 0;
}
.rodape__logo {
margin: 1.5em;
}
.rodape__lista {
display: flex;
justify-content: center;
list-style-type: none;
margin: 1em;
}
.link-rodape {
margin: 1em;
font-size: 16px;
color: var(--title-color);
text-decoration: none;
}
.rodape__texto {
margin-bottom: 2em;
font-size: 14px;
color: var(--subtitle-color);
}
5 - Personalizando links com pseudo classes CSS
CSS:
:root {
[...]
--hover-botao-cor: #60e7ff;
--active-ancora-cor: #ffee00;
}
Imagem:
6 - Criando efeitos visuais em botões com variáveis CSS
CSS:
:root {
[...]
--botao-azul-efeito: #001aff;
}
.container-padrao__botao:hover {
background-color: var(--botao-azul-efeito);
}
.botao-secundario:hover {
background-color: var(--botao-azul-efeito);
}
Imagens:
