<!DOCTYPE html>
<!--Parte do código foi retirada para caber no fórum-->
<footer class="rodape">
<img src="./assets/Logo.png" alt="alura+" class="rodape__logo">
<ul class="rodape__lista">
<li class="lista__link">
<a href="#">Idioma</a>
</li>
<li class="lista__link">
<a href="#">Dispositivos compatíveis</a>
</li>
<li class="lista__link">
<a href="#">Contrato de assinatura</a>
</li>
<li class="lista__link">
<a href="#">Política de privacidade</a>
</li>
<li class="lista__link">
<a href="#">Proteção de dados no Brasil</a>
</li>
<li class="lista__link">
<a href="#">Anuncios personalizados</a>
</li>
<li class="lista__link">
<a href="#">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>
</body>
</html>
<!-- Aqui se encerra html e inicia-se css -->
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--cor-de-fundo: #00030C;
--cor-principal: #FFFFFF;
--cor-descricao: #C0C0C0;
--cor-de-botao: #167BF7;
}
body {
background-color: var(--cor-de-fundo);
color: var(--cor-principal);
font-family: "Inter", sans-serif;
font-size: 1rem;
font-weight: 400;
}
.apresentacao__container{
height: 100vh;
display: grid;
grid-template-columns: 50% 50%;
}
.apresentacao__container__caixa {
margin: 0 6em;
}
.conteudo__principal {
background-image: url("../assets/Background.png");
background-repeat: no-repeat;
background-size: contain;
/* essa é a class principal */
align-items: center;
text-align: center;
}
.apresentacao__conteudo__titulo {
font-family: "Inter", sans-serif;
font-weight: 700;
font-style: bold;
font-size: 28px;
}
.apresentacao__container__imagem {
margin: 1em 0 2em 0;
}
.apresentacao__botao {
background-color: var(--cor-de-botao);
border-radius: 8px;
padding: 1em;
font-size: 1rem;
text-decoration: none;
color: var(--cor-principal);
display: block;
margin-bottom: 1em;
}
.botao_secundario {
background-color: transparent;
border: 2px solid var(--cor-principal);
}
.apresentacao__container__aviso {
font-size: 12px;
color: var(--cor-descricao);
}
.conteudo__secundario__imagem {
width: 80%;
}
.conteudo__secundario {
align-items: center;
margin: 0 10em;
}
.descricao__titulo {
font-weight: 700;
font-size: 3rem;
color: var(--cor-principal);
margin-bottom: 0.1em;
}
.descricao__texto {
color: var(--cor-descricao);
}
.descricao__botao {
display: inline-block;
margin-top: 1em;
}
.apresentacao__container__descricao {
padding: 2em;
}
.dispositivos {
text-align: center;
}
.dispositivos__titulo {
color: var(--cor-principal);
font-size: 3rem;
font-weight: 700;
}
.dispositivos__lista {
display: flex;
justify-content: center;
list-style-type: none;
margin: 5em 0;
}
.lista__item {
font-size: 2rem;
color: var(--cor-principal);
}
.rodape {
text-align: center;
text-decoration: none;
margin: 5em 3em;
}
.rodape__texto {
margin: 1em 0;
color: var(--cor-descricao);
font-size: 14px;
}
.rodape__lista {
display: flex;
justify-content: center;
list-style-type: none;
margin: 2em 0;
text-decoration: none;
}
.lista__link {
color: var(--cor-principal);
font-size: 1em;
text-decoration: none;
margin-left: 1em;
}
Uma coisa tem me incomodado: os links no final da página continuam na cor azul/roxo e com linha; tentei tirar essa decoração de todas as formas possíveis (coloquei o text-decoration em várias classes e nada).