Solucionado
Olá, pessoal!
Já vi e revi meu código e ele está idêntico (exceto pelas "class") com o código da instrutora, porém o resultado na minha tela tá diferente.
Isso aconteceu no projeto anterior (projeto da Joana Santos), porém, nesse projeto, a diferença tá bem mais bizarra. Aqui está o print: https://drive.google.com/file/d/11t_xZmbVRoaUELn-zv5YUAIpQ4SltEhL/view
A resolução do meu monitor é 2560x1440.
Como faço pra resolver isso de forma definitiva?
BVoa noite Gustavo, consegue compartilhar teu código para eu der uma olhada? Se possivel de alguma forma que consiga passa as imagens juntas.
Bom dia, Danilo. Acabei me esquecendo de enviar o código. Aqui está:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
<title>Alura Plus</title>
</head>
<body>
<section class="section1">
<div class="section1__div">
<h1 class="section1__h1">Com o Combo+, você pode aproveitar a Alura+ e o Alura Língua por um preço único.</h1>
<img src="img/combo.png" class="section1__img" alt="O combo mais é a junção do alura mais com o alura línguas.">
<a href="https://www.alura.com.br" class="section1__botao1">Assine por 12x de R$ 120,00*</a>
<a href="https://www.alura.com.br" class="section1__botao2">Assinar somente o Alura+</a>
<p class="section1__p">*O preço pode variar caso a assinatura seja feita em outros planos.</p>
</div>
</section>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
}
:root {
--bg-color: #00030C;
--main-white: #FFF;
--secondery-white: #F9F9F9;
--main-grey: #C0C0C0;
--button-blue: #167BF7;
--lingua-red: #EC2F46;
--main-font: "Inter", sans-serif;
}
body {
background-color: var(--bg-color);
color: var(--main-white);
font-family: var(--main-font);
font-size: 16px;
font-weight: 400;
}
.section1 {
background-image: url("img/background.png");
background-repeat: no-repeat;
background-size: contain;
height: 100vh;
display: grid;
grid-template-columns: 50% 50%;
align-items: center;
text-align: center;
}
.section1__div {
margin: 0 6em; /* 0= top and bottom; 6= left and right */
}
.section1__h1 {
color: var(--main-white);
font-family: var(--main-font);
font-size: 28px;
font-weight: 700;
}
.section1__img {
margin: 1em 0em 2em 0em; /* top, right, bottom, left */
}
.section1__botao1 {
background-color: var(--button-blue);
color: var(--main-white);
text-decoration: none;
padding: 16px;
border-radius: 8px;
margin-bottom: 1em;
}
.section1__botao2 {
background-color: transparent;
color: var(--main-white);
text-decoration: none;
padding: 16px;
border: 1px solid var(--main-white);
border-radius: 8px;
}
.section1__p {
color: var(--main-grey);
font-size: 12px;
}
As imagens utilizadas estão disponíveis nesse link: https://github.com/alura-cursos/aluraplus/tree/aula02/img
Bom dia Gustavo, obrigado por compartilhar o código deu certo aqui, mas eu fui ver nas aulas como deveria ser o layout da pagina e me veio uma dúvida, você assistiu pelo menos os 4 módulos do curso? Pois eu vi que tem muito código que a instrutora faz mais pra frente que vão resolvendo os layouts da sua página.
Pois nas aulas o CSS final será esse aqui: https://github.com/alura-cursos/aluraplus/blob/aula04/styles.css
Me fala em qual aula você parou que eu comparo o resultado da instrutora com a sua versão.
Bom dia, Danilo! :D
Eu parei na "Aula 3 - Posicionando elementos", "Atividade 04 - Alinhamentos" pois é nela que a instrutora conclui a construção da primeira section e o resultado que obtive está muito diferente (link do print está na mensagem de abertura dessa thread).
Entendo que existem outros códigos que a instrutora ainda fará no projeto, mas achei melhor mandar a dúvida agora, antes de prosseguir com o curso, para sanar essa questão antes de criar as outras sections e ter o mesmo problema com elas.
Tranquilo, vou dar uma olhada nessa aula e volto a te dar uma resposta em breve.
Gustavão vi aqui que faltou somente o display: block; nas suas classes dos botões: section1__botao1 e section1__botao2.
Isso resolve o problema, mas uma outra observação que gostaria de te dar é a seguinte, não sei por qual motivo você adotou essas nomenclatura para as classes, mas é uma boa pratica a gente adotar o reaproveitamento de código, veja que você repete o mesmo código em classes diferentes para os botões. O ideal seria seguir a ideia da instrutora.
Deu certo, Danilo!
Obrigado pela atenção e pelo tempo gasto para me ajudar.
Agradeço também pela dica a respeito do reaproveitamento de código. Revi aqui e, de fato, havia muita repetição desnecessária, mas já fiz os ajustes.
Valeu demais!
Fico feliz em ter ajudado, qualquer dúvida estarei a disposição e de olho nos chats do forúm.
Se a resposta ajudou, não esquece de marcar com a Solução.