Solucionado
Boa noite galera! Ao adicionar a ultima section com a foto do notebook, eu notei que ela ficou muito afastada dos itens acima...dei uma fuçada em algumas coisas do CSS mas sem sucesso...
Alguem consegue dar uma luz de como prosseguir? Obrigado desde já!
Olá, Henrique.
Tudo bem?
Compartilha os seus código HTML e CSS completos aqui com a gente por gentileza. Assim fica melhor para ajudar.
Valeu.
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="./estilos/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Krona+One&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<title>Alura Plus</title>
</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="./assets/Combo.png" alt="O combo+ é a junção do Alura+ e o AluraLingua">
<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 src="./assets/Plataformas.png" alt="Um monitor e um celular com o alura plus aberto" class="secundario__imagem">
<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 terceario">
<div class="container__descricao">
<p class="descricao__texto texto_combo">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 href="www.alura.com.br" class="container__botao botao__secundario">Assinar o Combo+</a>
</div>
<img src="./assets/Telas.png" alt="Tela do alura plus e do alura lingua" class="secundario__imagem">
</section>
<section class="container secundario">
<img src="./assets/Notebook.png" alt="Notebook" class="secundario__imagem">
<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>
</body>
</html>CSS
:root {
--branco-principal: #ffffff;
--cinza-secundario: #c0c0c0;
--botao-azul: #167ef7;
--cor-de-fundo: #00030c;
--fonte-principal: 'Inter';
}
body{
background-color: var(--cor-de-fundo);
color: var(--branco-principal);
font-family: var(--fonte-principal);
font-size: 16px;
font-weight: 400;
}
*{
margin: 0;
padding: 0;
}
.principal {
background-image: url("../assets/Background.png");
background-repeat: no-repeat;
background-size: contain;
align-items: center;
text-align: center;
}
.container {
height: 100vh;
display: grid;
grid-template-columns: 50% 50% ;
}
.container__botao {
background-color: var(--botao-azul);
border-radius: 5px;
padding: 1em;
color: var(--branco-principal);
display: block;
text-decoration: none;
margin-bottom: 1em;
}
.botao_secundario {
background-color: transparent;
border: 2px solid var(--branco-principal);
}
.container__aviso {
font-size: 12px;
color: var(--cinza-secundario);
}
.container__titulo {
font-size: 28px;
font-weight: 700;
}
.container__imagem {
margin: 1em 0 2em 0;
}
.container__caixa {
margin: 0 6em;
}
.secundario__imagem {
width: 80%;
}
.secundario {
align-items: center;
margin: 0 10em;
}
.descricao__titulo {
font-weight: 700;
font-size: 48px;
color: var(--branco-principal);
margin-bottom: 0.1em;
}
.descricao__texto {
color: var(--cinza-secundario);
}
.texto_combo {
margin-left: 5em;
align-items: center;
}
.botao__secundario {
display: inline-block;
margin: 0 0 0 18em;
align-items: center;
}
.container__descricao {
padding: 1em;
}
.texto_combo{
margin: 5em;
font-size: 16px;
}
.quarto__imagem{
width: 100%;
}
Olá colega, eu testei aqui na minha máquina e funcionou tranquilo. Tenta verificar se não pode ser uma imagem e/ou algum tamanho não definido corretamente. Dá pra utilizar o Box-sizzing: Border box; para impedir que os elementos saiam do escopo. Sou iniciante então só estou dando alguns palpites, se conseguir resolver ou não der certo manda mensagem aqui! E se algum instrutor ler isso e perceber que falei bobagem, peço que me diga para aumentar meu conhecimento também.
Abraço!
Sério? Que estranho pois aqui ja abri no notebook e no pc, e nos dois fica um espaço muito grande, tentei mexer ja, mas acabei desconfigurando outras coisas e nao consegui resolver o problema por enquanto... estou na luta ainda haha
[ DESCONSIDERE ]
Identifiquei o problema, sua classe .tercearia está sem align-items: center, sem ela, os elementos ficam no topo do bloco, dessa forma o espaçamento fica todo para baixo dando esse gap grande entre os elementos.
Segue o código a ser adicionado ao CSS:
.terceario {
align-items: center;
}Fica uma dica: Sugiro que você faça os cursos da alura sobre Flexbox e implemente nesse e em todos os seus outros projetos, pois é uma ferramenta maravilhosa, seu código fica mais claro e os elementos ficam melhor dispostos na tela.
Vê se funcionou aí e nos retorna
Bah!! Bem demais velho!! Muito obrigado, salvou muito!! Sempre é no detalhe né...muito obrigado pela atenção!!
Exatamente tchê, programação é sempre um ; uma letrinha que ferra com tudo!
Qualquer duvida só me chamar, minhas redes estão no meu perfil aqui na Alura. Bons estudos!