Pessoal, boa tarde!
Deveria haver um espaçamento da imagem com o texto conforme a aula e não consegui.
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!
Solucionado
Pessoal, boa tarde!
Deveria haver um espaçamento da imagem com o texto conforme a aula e não consegui.
Oi, Rodrigo! Como vai?
Agradeço por compartilhar seu código com a comunidade Alura.
O objetivo é manter texto à esquerda e imagem à direita dentro do mesmo contêiner. Para isso, use display: flex com justify-content: space-between e defina larguras máximas para evitar que o texto empurre a imagem. Além disso, percebi que os itens ficaram presos no topo. Para centralizar verticalmente na tela, aplique min-height: 100vh; ao contêiner principal e align-items: center;. Assim, o flexbox ocupa toda a altura da página e mantém os elementos no meio.
Ajuste no CSS:
.apresentacao {
display: flex;
justify-content: space-between;
align-items: center; /* centraliza verticalmente */
min-height: 100vh; /* ocupa toda a altura da tela */
padding: 0 32px;
}
Esse código garante que texto e imagem fiquem alinhados ao centro, tanto no eixo horizontal quanto vertical.
Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!
Rafaela, boa noite!
Tudo bem?
Entretanto fui mexer no figma para explorar as configurações e olha como ficou a segunda imagem(kkkk)
A primeira imagem é do meu projeto e aparentemente está correto.
Mas tem como a Alura me enviar uma outra imagem no figma para eu acompanhar o curso?
Outra coisa. Por favor analisa meus códigos e vê se estão corretos, porque estou achando que os textos e a imagem não estou agrupados na mesma classe do main:
Verifica se eu importei corretamente a fonte Montserrat semibold 600. Não apareceu selecionar semibold 600 no Google fonts.
Onde fica o botão inspecionar no figma, pois o meu não aparece?
HTML:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Portfolio</title>
</head>
<body>
<!--a tag main ela é utilizada para organização do conteúdo da página na internet-->
<!-- ela organiza os dados da empresa como quem somos e também organiza os principais links estilizados,-->
<!--como informática, cozinha e etc. E dentro de cada linka um produto de informática, como impressora, por exemplo-->
<!-- O uso de flexbox é para organizar os elementos ná página na internet de forma dinâmica. -->
<!--No exemplo da aula foi utilizado display: flex, no que separou a imagem dos textos-->
<!--Outro ponto importante de se falar é o item de alinhamento-->
<!--O item de alinhamento vai pegar o maior elemento da estrutura do html para centralizar, no caso o main-->
<!--No exemplo da aula como a imagem é o elemento maior de altura do main-->
<!--Sendo ele o elemento principal que decidirá qual o ponto central do alinhamento.-->
<header></header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque"> com um Front-end de qualidade!</strong></h1>
<p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS.
Ajudo pequenos negócios e designers a colocarem em prática boas ideias.
Vamos conversar? </p>
<div class="apresentacao__links">
<a class="apresentacao__links__link" href="https://www.instagram.com/rafaballerini/">Instagram</a>
<a class="apresentacao__links__link" href="https://github.com/guilhermeonrails">Github</a>
</div>
</section>
<img src="Imagem.png" alt="Foto Joana Santos programando">
</main>
<footer></footer>
</body>
</html>
<!--Na estilização da classe apresentacao conteúdo foi utilizado width 615 que -->
<!--se refere ao h1,p, a no qual a largura mencionada é da pessoa que editou essas tags no figma-->
<!--Já a classe apresentacao_conteúdo_titulo que é referente "Eleve seu negócio digital a outro nível <strong class="titulo-destaque">
com um Front-end de qualidade!</strong"-->
<!--colocamos o tamanho da fonte 36px que é o mesmo tamhanho do figma. -->
<!-- A mesma coisa fizemos na classe apresentacaoo_conteudo_texto onde o tamanho da fonte é 24px-->
CSS:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
margin: 0;
padding: 0;
}
body{
height: 100vh;
box-sizing: border-box;
background-color: black;
color: #F6F6F6;
}
.titulo-destaque{
color:#22D4FD;
}
.apresentacao{
margin: 10%;
display: flex;
align-items: center;
justify-content:space-between;
}
.apresentacao__conteudo{
width: 615px;
}
.apresentacao__conteudo__titulo{
font-size: 36px;
font-family: "Krona One", sans-serif;
}
.apresentacao__conteudo__texto{
font-size: 24px;
font-family: "Montserrat", sans-serif;
}
.apresentacao__links{
display:flex;
justify-content: space-between;
}
.apresentacao__links__link{
background-color: #22D4FD;
width: 280px;
text-align: center;
border-radius: 16px;
font-size: 24px;
font-weight: 600;
padding: 21.5px 0;
text-decoration: none;
color: #000000;
font-family: "Montserrat", sans-serif;
}
Obrigado
Oi, Rodrigo! Tudo bem?
Sobre sua última dúvida: o layout do código está correto — texto e imagem estão agrupados dentro da mesma classe .apresentacao. O que você pode fazer agora é ajustar alguns detalhes para deixar o espaçamento e a tipografia iguais ao projeto do Figma, e aproveitar para revisar as fontes.
Veja como organizar o código e os links de fonte corretamente:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Krona One (faltava importar) -->
<link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
<!-- Montserrat com todos os pesos, incluindo o **600** -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Portfolio</title>
</head>
E no seu CSS, faça estes ajustes diretos:
/* Reset e configuração básica */
*, *::before, *::after {
box-sizing: border-box;
}
* {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background-color: #000;
color: #F6F6F6;
font-family: "Montserrat", sans-serif;
}
/* Título em destaque */
.titulo-destaque { color: #22D4FD; }
/* Container principal */
.apresentacao {
display: flex;
justify-content: space-between;
align-items: center;
gap: 48px; /* **Espaço real** entre texto e imagem */
max-width: 1200px;
padding: 0 32px;
margin: 10% auto 0;
}
/* Conteúdo de texto */
.apresentacao__conteudo {
flex: 1;
max-width: 615px;
}
.apresentacao__conteudo__titulo {
font-size: 36px;
font-family: "Krona One", sans-serif;
line-height: 1.2;
margin-bottom: 16px;
}
.apresentacao__conteudo__texto {
font-size: 24px;
line-height: 1.5;
margin-bottom: 24px;
}
/* Links */
.apresentacao__links {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.apresentacao__links__link {
background-color: #22D4FD;
width: 280px;
text-align: center;
border-radius: 16px;
font-size: 24px;
font-weight: 600; /* **Montserrat 600** */
padding: 21.5px 0;
text-decoration: none;
color: #000;
font-family: "Montserrat", sans-serif;
}
/* Imagem */
.apresentacao img {
width: 40%;
min-width: 280px;
height: auto;
display: block;
border-radius: 8px;
}
Pontos rápidos de checagem:
gap: 48px.main com section e img está perfeita.E sobre o Figma, esse comportamento do Figma está bem estranho — tente abrir o projeto em outro navegador partindo deste link oficial para verificar se as configurações aparecem corretamente.
Além disso, sobre a aba Inspect, o Dev Mode agora é pago, como você pode ler aqui.
Mesmo assim, ainda dá pra visualizar algumas propriedades clicando diretamente nos elementos — o painel lateral mostra parte das informações:
E lembre-se: todas as configurações do projeto estão disponíveis nos arquivos das aulas, nas atividades chamadas “Projeto da aula anterior”.
Fico à disposição. Abraços e bons estudos!