Pessoal, boa tarde!
Deveria haver um espaçamento da imagem com o texto conforme a aula e não consegui.
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!