estou achando meu espaçamento entre as 'section' muito longas. já tentei alguns códigos de margin e padding, mas não obtive sucesso, se alguém puder dar uma olhada pra mim eu agradeço.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
estou achando meu espaçamento entre as 'section' muito longas. já tentei alguns códigos de margin e padding, mas não obtive sucesso, se alguém puder dar uma olhada pra mim eu agradeço.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Alura Plus</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="container principal">
<div class="container__caixa">
<h1 class="container__titulo">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
<img class="container__imagem" src="img/combo.png" alt="O combo+ agrega o alura+ e o alura língua">
<a href="www.alura.com.br" class="container__botao">Assine por 12x de R$ 120,00*</a>
<a href="www.alura.com.br" class="container__botao botao__secundario">Assinar somente o Alura+</a>
<p class="container__aviso">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
</div>
</section>
<section class="container secundario">
<img class="secundario__imagem" src="img/plataformas.png" alt="Monitor e um celular com alura plus aberto">
<div class="container__descricao">
<h2 class="descricao__titulo">Assista do seu jeito</h2>
<p class="descricao__texto">Aproveite a tela grande da TV ou assista no tablet, laptop, celular e outros aparelhos. Nossa seleção de cursos não para de crescer.</p>
</div>
</section>
<section class="container secundario">
<div class="container__descricao">
<p class="descricao__texto">Só o Combo+ oferece Alura+ e Alura Língua juntos para você ter acesso a cursos de diversas áreas da tecnologia e aprender inglês ou espanhol, onde e como quiser.</p>
<a class="container__botao botao__terciario" href="www.alura.com.br">Assine o Combo+</a>
</div>
<img class="terciario__imagem" src="img/telas.png" alt="telas alura+ e alura línguas">
</section>
<section class="container secundario">
<img class="secundario__imagem" src="img/notebook.png" alt="notebook mostrando aula de html e css">
<div class="container__descricao">
<h2 class="descricao__titulo">Baixe seus cursos</h2>
<p class="descricao__texto">Baixe e assista quando e onde quiser. Assim, seus favoritos estão sempre com você, até mesmo sem internet.</p>
</div>
</section>
<section class="dispositivos">
<h2 class="dispositivos__titulo">Disponível nos seus dispositivos favoritos</h2>
<ul class="dispositivos__listas">
<li>
<img src="img/tv.png" alt="imagem de uma televisão">
<h3 class="lista__item">TV</h3>
</li>
<li>
<img src="img/computador.png" alt="imagem de um computador">
<h3 class="lista__item">Computadores</h3>
</li>
<li>
<img src="img/celular.png" alt="imagem de um celular">
<h3 class="lista__item">Celulares e Tablets</h3>
</li>
</ul>
</section>
<footer class="rodape">
<img class="rodape__logo" src="img/logo.png" alt="logo alura+">
<ul class="rodape__lista">
<li>
<a class="lista__link" href="#">Idioma</a>
</li>
<li>
<a class="lista__link" href="#">Dipositivos compatíveis</a>
</li>
<li>
<a class="lista__link" href="#">Contrato de assinatura</a>
</li>
<li>
<a class="lista__link" href="#">Política de privacidade</a>
</li>
<li>
<a class="lista__link" href="#">Proteção de dados no Brasil</a>
</li>
<li>
<a class="lista__link" href="#">Anúncios personalizados</a>
</li>
<li>
<a class="lista__link" 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>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
:root{
--branco-principal: #FFFFFF;
--cinza-secundario: #C0C0C0;
--botao-azul: #4c27d1;
--cor-de-fundo: #00030C;
--fonte-principal: 'Inter', sans-serif;
--botao-efeito: #2c97c9;
}
*{
margin:0;
padding:0;
}
body {
background-color: var(--cor-de-fundo);
color: var(--branco-principal);
font-family: var(--fonte-principal);
font-size: 16px;
font-weight: 400;
}
.principal{
background-image: url(img/background.png);
background-repeat: no-repeat;
background-size: cover;
align-items: center;
text-align: center;
}
.container{
height: 100vh;
display: grid;
grid-template-columns: 50% 50%;
align-items: center;
}
.container__caixa{
margin: 0 6em;
}
.container__titulo{
font-size: 28px;
font-weight: 700;
}
.container__botao{
background-color: var(--botao-azul);
border-radius: 5px;
padding: 1em;
color: var(--branco-principal);
display: block;
text-decoration: none;
margin-bottom: 1em;
}
.container__botao:hover{
background-color: var(--botao-efeito);
color: var(--cor-de-fundo);
}
.botao__secundario{
background-color: transparent;
border: 2px solid var(--branco-principal);
}
.container__aviso{
font-size: 12px;
color: var(--cinza-secundario);
}
.container__imagem{
margin: 1em 0 2em 0;
}
.secundario__imagem{
width: 80%;
}
.secundario{
margin: 0 10em 0 10em;
}
.descricao__titulo{
font-weight: 700;
font-size: 48px;
color: var(--branco-principal);
}
.descricao__texto{
color: var(--cinza-secundario);
}
.botao__terciario{
margin-top: 1em;
display: inline-block;
}
.terciario__imagem{
width: 90%;
padding-left: 100px;
}
.dispositivos{
text-align: center;
}
.dispositivos__titulo{
font-size: 48px;
}
.dispositivos__listas{
display: flex;
justify-content: center;
list-style-type: none;
margin: 5em 0;
}
.rodape{
text-align: center;
margin: 5em 2em ;
}
.rodape__lista{
display: flex;
justify-content: center;
list-style-type: none;
margin: 50px 50px;
}
.lista__link{
text-decoration: none;
color: var(--branco-principal);
font-size: 16px;
padding: 10px;
}
.lista__link:hover{
color: var(--botao-azul);
}
.lista__link:active{
color: var(--botao-efeito);
}
.rodape__texto{
font-size: 14px;
color: var(--cinza-secundario);
margin: 2em 0;
}
Olá Elizabeth,
.container{ height: 100vh; display: grid; grid-template-columns: 50% 50%; align-items: center; }
o tipo de display que está sendo utilizado é que não está permitindo a alteração, talvez utilizando o Display: flex; e modificando o tamanho da imagem te ajude.
espero ter ajudado.
Olá Everton, acabei seguindo as dicas da instrutora, por isso o display está no grid, nas foi colocar como flex e alterar como você sugeriu, depois volto pra te contar se deu certo. OBrigada