Quando estamos criando um projeto baseado no figma nao temos que usar exatamente as distâncias colocadas?? E como faço isso??
As vezes uso com px mas fica muito espaçado e tento usar com "em" mas tambem não sei quanto isso da em pixels para saber se coloquei na medida certa. Outro pergunta, posso usar varias tipos de medidas no meu projeto, como px e em??
Eu tambem quando coloquei o meu botão em inline-block ele reduziu demais e ficou com a frase bem colada nos cantos, entao coloquei um padding para que a frase coubesse melhor no botão, mas o da professora so de colocar em inline-block ficou perfeito. Isso se deve a algo que fiz errado ou a diferença em dispositivos que usamos??
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8"
<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="background container">
<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 src="Img/Combo.png" alt="Logo do combo" class="container__img">
<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="Img/Plataformas.png" alt="Mockup computador e celular com a plataforma" class="container__secundario__img">
<div class="container__secundario__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__secundario__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 href="www.alura.com.br" class="container__botao botao__terceario">Assine o Combo+</a>
</div>
<img src="Img/Telas.png" alt="Telas do alura+" class="container__tercario__img">
</section>
<section class="container secundario">
<img src="Img/Notebook.png" alt="Mockup notebook plataforma" class="container__secundario__img">
<div class="container__secundario__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
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
--branco-principal: #FFFFFF;
--cinza-principal: #F9F9F9;
--cinza-secundario: #C0C0C0;
--vermelho-efeito: #EC2F46;
--azul-botao: #167BF7;
--background: #00030C;
--fonte-inter: 'Inter', sans-serif;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: var(--background);
color: var(--branco-principal);
font-family: var(--fonte-inter);
font-size: 16px;
font-weight: 400;
}
.background {
background-image: url("Img/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__caixa {
margin: 54px;
padding: 4em;
}
.container__titulo {
font-size: 28px;
font-weight: 700;
}
.container__img {
margin: 22px 0 54px 0;
}
.container__botao {
background-color: var(--azul-botao);
color: var(--branco-principal);
text-decoration: none;
border-radius: 8px;
padding: 1em 0;
display: block;
margin-bottom: 16px;
}
.botao__secundario {
background-color: transparent;
border: 2px solid var(--branco-principal);
}
.container__aviso {
color: var(--cinza-principal);
font-size: 12px;
margin-top: 10px;
}
.container__secundario__img {
width: 80%;
}
.secundario {
align-items: center;
margin: 0 10em;
}
.descricao__titulo {
font-size: 48px;
font-weight: bold;
color: var(--branco-principal);
margin-bottom: 8px;
}
.descricao__texto {
font-size: 16px;
color: var(--cinza-principal);
}
.botao__terceario{
display: inline-block;
padding:1em;
margin-top: 1em;
}
.container__tercario__img {
width: 80%;
margin-left: 3em;
}
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!