Solucionado
Olá! Tudo bem? Estou fazendo o desafio de HTML e CSS 7 Days of Code, mas cheguei na parte dos depoimentos e já tentei de tudo, mas a foto de perfil não fica centralizada! Alguém me ajuda, por favor! (fique à vontade para dar sugestões de melhoria no meu código também! Obrigada!). Segue foto de como seria e de como está, também segue meu HTML e CSS.
Não coube aqui o código, por isso coloquei nas respostas!
HTML part 1 -
<!DOCTYPE html>
<html lang="pt-br">
<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">
<title>OptimusTech</title>
<link rel="icon" type="image/x-icon" href="./assets/simbolo-optimustech.svg">
<link rel="stylesheet" href="styles/reset.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:slnt,wght@-10..0,100..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles/styles.css">
</head>
<body>
<header class="cabecalho">
<nav class="cabecalho__menu">
<div class="cabecalho__menu__logo">
<a href="#">
<img src="./assets/logo-optimustech.svg" alt="logo optimustech">
</a>
</div>
<div class="cabecalho__menu__links">
<a class="cabecalho__menu__link" href="#">Home</a>
<a class="cabecalho__menu__link" href="#">Produtos</a>
<a class="cabecalho__menu__link" href="#">Recursos</a>
<a class="cabecalho__menu__link" href="#">Sobre nós</a>
</div>
<div class="cabecalho__menu__botoes">
<a class="cabecalho__menu__botoes-entrar" href="#">Entrar</a>
<a class="cabecalho__menu__botoes-cadastrar" href="#">Cadastrar</a>
</div>
</nav>
</header>
<main class="home">
<section class="sobrenos">
<p class="sobrenos__subtitulo">Sobre Nós</p>
<h2 class="sobrenos__titulo">Por que somos diferentes?</h2>
<p class="sobrenos__texto">Nós focamos nos detalhes de tudo que fazemos. Tudo para ajudar as empresas de todo o mundo a se concentrarem naquilo que é realmente importante para elas.</p>
</section>
<section class="metricas">
<div class="metricas__item">
<h2 class="metricas__numero">400+</h2>
<h3 class="metricas__subtitulo">Projetos concluídos</h3>
<p class="metricas__texto">Nós ajudamos a construir mais de 400 projetos incríveis.</p>
</div>
<div class="metricas__item">
<h2 class="metricas__numero">100+</h2>
<h3 class="metricas__subtitulo">Colaboradores</h3>
<p class="metricas__texto">Temos mais de 100 colaboradores no nosso time que se preocupam com nossos clientes.</p>
</div>
<div class="metricas__item">
<h2 class="metricas__numero">20k</h2>
<h3 class="metricas__subtitulo">Downloads</h3>
<p class="metricas__texto">Nossos projetos que estão disponíveis em lojas já foram baixados mais de 20.000 vezes.</p>
</div>
<div class="metricas__item">
<h2 class="metricas__numero">500+</h2>
<h3 class="metricas__subtitulo">Reviews 5 estrelas</h3>
<p class="metricas__texto">Estamos orgulhosos de contar com mais de 500 reviews 5 estrelas em nossos produtos.</p>
</div>
</section>
HTML part 2 -
<section class="vagas__cabecalho">
<a class="vagasabertas">Vagas Abertas!</a>
<h1 class="vagas__titulo">Estamos procurando por talentos</h1>
<p class="vagas__texto">Somos uma equipe 100% remota com pessoas do Brasil inteiro.</p>
<img class="vagas__imagem" src="./assets/sala-de-trabalho.svg" alt="foto de uma sala de reunião com pessoas trabalhando felizes com seus notbooks">
</section>
<section class="vagas">
<div class="vagas__secao">
<h3 class="vagas__secao-titulo">Design</h3>
<div class="vaga">
<h4 class="vaga__titulo">Product Designer</h4>
<div class="vaga__informacoes">
<span>Full-time</span>
<span>Faixa salarial: R$7.000</span>
</div>
</div>
<div class="vaga">
<h4 class="vaga__titulo">UX Designer</h4>
<div class="vaga__informacoes">
<span>Full-time</span>
<span>Faixa salarial: R$6.000</span>
</div>
</div>
</div>
<div class="vagas__secao">
<h3 class="vagas__secao-titulo">Desenvolvimento de Software</h3>
<div class="vaga">
<h4 class="vaga__titulo">Desenvolvedor(a) iOS</h4>
<div class="vaga__informacoes">
<span>Full-time</span>
<span>Faixa salarial: R$8.000</span>
</div>
</div>
<div class="vaga">
<h4 class="vaga__titulo">Desenvolvedor(a) Front-end</h4>
<div class="vaga__informacoes">
<span>Full-time</span>
<span>Faixa salarial: R$7.000</span>
</div>
</div>
<div class="vaga">
<h4 class="vaga__titulo">Desenvolvedor(a) Back-end</h4>
<div class="vaga__informacoes">
<span>Full-time</span>
<span>Faixa salarial: R$8.000</span>
</div>
</div>
</div>
</section>
<section class="depoimento">
<div class="depoimento__container">
<span class="depoimento__chamada">Veja o que nossos colaboradores falam sobre nós</span>
<h2 class="depoimento__titulo">OptimusTech se importa com a saúde dos seus colaboradores e sempre procura nos dar todo tipo de auxílio possível.</h2>
<div class="depoimento__perfil">
<img class="depoimento__foto" src="./assets/julia-castro.svg" alt="foto da julia castro">
<span class="depoimento__nome">Júlia Castro</span>
<span class="depoimento__cargo">Desenvolvedora Web</span>
</div>
</div>
</section>
</main>
styles.css
@import url("./header.css");
@import url("./sobrenos.css");
@import url("./metricas.css");
@import url("./vagas-cabecalho.css");
@import url("./vagas.css");
@import url("./depoimento.css");
:root {
--font: 'Inter', sans-serif;
--cor-fundo: #FFFFFF;
--cor-primaria: #8E2424;
--cor-cinza-claro: #667085;
--cor-cinza-escuro: #101828;
--cor-borda: #EAECF0;
--cor-fundo-vermelho: rgba(195, 25, 25, 0.03);
--cor-fundo-cinza: rgba(249, 250, 251, 1);
--cor-direitos: #98A2B3;
}
body {
background-color: var(--cor-fundo);
font-family: var(--font);
font-size: 16px;
font-weight: 400;
box-sizing: border-box;
width: 100%;
height: 100vh;
line-height: 1.5;
}
depoimento.css
.depoimento__container {
text-align: center;
background-color: var(--cor-fundo-vermelho);
padding: 5em 10em;
margin: 1em 12em;
border-radius: 0.5em;
}
.depoimento__chamada {
color: var(--cor-primaria);
font-size: 14px;
font-weight: 600;
margin-bottom: 1em;
}
.depoimento__titulo {
color: var(--cor-cinza-escuro);
font-size: 36px;
font-weight: 500;
margin-bottom: 1em;
}
.depoimento__nome {
font-weight: 500;
}
.depoimento__cargo {
color: var(--cor-cinza-claro);
}
.depoimento__foto {
width: 5%;
}
.depoimento__perfil {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
Oi, Maysa! Tudo bem?
Uma solução possível é adicionar align-items: center; na div pai. Ficaria assim:
.depoimento__perfil {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
O align-items: center; centraliza os itens ao longo do eixo transversal, que, no caso de uma coluna ( flex-direction: column), é o eixo horizontal. Portanto, todos os itens filhos (como a imagem, o nome e o cargo) são centralizados horizontalmente dentro do contêiner.
Outra dica legal é você mudar a ordem no CSS, colocando primeiro o estilo da div pai seguido do estilo dos filhos. Por exemplo, primeiro o estilo da classe depoimento__perfil e depois o estilo dos filhos depoimento__foto,depoimento__nome ,depoimento__cargo. Assim o código fica mais organizado e seguindo a ordem do HTML:
.depoimento__perfil {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.depoimento__foto {
width: 5%;
}
.depoimento__nome {
font-weight: 500;
}
.depoimento__cargo {
color: var(--cor-cinza-claro);
}
Espero ter te ajudado com essa resposta. Fico à disposição em caso de outras dúvidas. Um abraço!
Muito obrigadaaaa, Rafaela! Me ajudou muito! Abraços!