[Projeto] Projeto Flexbox

HTML

<!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>Potifolio de Stephanie</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
      <div class="titulo">
        <div class="subtitulo">
      <h1>Bem-vindo ao meu site</h1>
      <p>Eleve seu negócio digital a outro nível com um <span>Front-end de qualidade!</span></p>
      </div>
    </header>
    <main>
        <div class="nome">
            <div class="img"></div>
        <h2>Stephanie Monteiro</h2>
        <img src="Imagem.png" alt="Foto profissional figma">
        </div>
        <p>Olá! Sou Stephanie, designer e desenvolvedora Front-end com especialidade em <strong>React, HTML, CSS e Figma</strong>. Foco na criação de interfaces organizadas, responsivas e bem estruturadas. Tenho atenção aos detalhes e pensamento analítico, o que me permite evoluir rapidamente na área de tecnologia. Ajudo pequenos negócios a colocarem em prática boas ideias. Vamos conversar?</p>
         <div class="botoes">
        <a href="http://127.0.0.1:5500/index.html" class="btn">Instagram</a>
        <a href="http://127.0.0.1:5500/index.html" class="btn">Github</a>
        </div>
    </main>
    <footer>
        <p><strong>© 2026 - Desenvolvido por Stephanie</strong></p>
    </footer>
</body>
</html>

CSS

* { 
    padding: 0;
}
body {
    height: 100vh;
    box-sizing: border-box;
    background-color: rgb(0, 0, 0);
    color: #FFFFFF;   
    margin: 0;
}
strong {
    color: #22D4FD;
}
p {
    font-weight: bold;
}
span {
    color: #ffef3c;
    border: 1px solid#ffef3c;
    padding: 10px;
}
a {
    color: #ffffff;
    background-color: #22D4FD;
    border: 1px solid#005cc5;
    padding: 12px 25px;
    border-radius: 30px;
}
.botoes {
  display: flex;
  justify-content: center;
  gap: 20px; 
}
.titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nome {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #89f5ff;
    font-weight: bolder;
    font-family:'Times New Roman', Times, serif;
    text-decoration: underline;
}
img {
    max-width: 50%;
    height: auto;
    border-radius: 8px;
}
footer {
    background-color: #585858;
    display: flex;
    flex: 1;
    margin-top: 40px;
}

Olá, Stephanie, como vai?

Obrigado por compartilhar seu projeto no fórum. O código apresentado segue bem a proposta da atividade e demonstra que você aplicou corretamente conceitos importantes de CSS, como o uso de height: 100vh no body, a configuração de box-sizing: border-box e a utilização de Flexbox para alinhamento e organização dos elementos. Também é possível observar a preocupação com centralização de conteúdo e organização visual da página.

Há apenas um ponto estrutural no HTML que merece ajuste. A div com classe subtitulo é aberta, mas não é fechada antes do fechamento da div de classe titulo. Isso pode causar inconsistências na renderização do layout dependendo do navegador.

Continue compartilhando seus projetos e experimentando novas variações de organização com Flexbox e responsividade.

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema