1
resposta

[Projeto] Lista de exercícios

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">
        <h1>Bem-vindo ao meu site</h1>
        <p>Eleve seu negócio digital a outro nível com um <span class="subtitulo">Front-end de qualidade!</span></p>
      </div>
    </header>

    <main class="conteudo">
        <section class="conteudo_apresentação">
            <h2 class="conteudo_apresentação_titulo">Eleve seu negócio digital a outro nível com um <strong>Front-end de qualidade</strong></h2>
            <p class="conteudo_apresentação_texto">Olá! Sou Stephanie, designer e desenvolvedora Front-end com especialidade em React, HTML, CSS e Figma. 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>
            
            <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>
         </section>

         <img src="Imagem.png" alt="Foto profissional figma">
    </main>
    <footer>
        <p><strong>© 2026 - Desenvolvido por Stephanie</strong></p>
    </footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');
* { 
    padding:0;
}
body {
    height: 100vh;
    box-sizing: border-box;
    background-color: rgb(0, 0, 0);
    color: #FFFFFF;   
}
strong {
    color: #22D4FD;
}
p {
    font-weight: bold;
}
.subtitulo {
    color: #ffef3c;
    border: 1px solid#ffef3c;
    padding: 10px;
}
a {
    color: #ffffff;
    background-color: #22D4FD;
    border: 1px solid#005cc5;
    padding: 12px 25px;
    border-radius: 30px;
}
.titulo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.conteudo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 10%;
}
.conteudo_apresentação {
    width: 615px;
}
.conteudo_apresentação_titulo {
    color: #ffffff;
    font-family: "Krona One", sans-serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
}
.conteudo_apresentação_texto {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 400;
    font-style: normal;
}
img {
    width: 40%;
    border-radius: 8px;
}
footer {
    background-color: #585858;
    display: flex;
    flex: 1;
    margin-top: 40px;
}
1 resposta

Olá, Stephanie! Como vai?

Parabéns pela resolução da atividade!

Observei que você utilizou muito bem o CSS para aplicar estilos e organização visual e ainda compreendeu a importância da responsividade para tornar o site acessível e agradável em diferentes dispositivos.

Continue postando as suas soluções, com certeza isso ajudará outros estudantes e tem grande relevância para o fórum.

Sugestão de conteúdo para você mergulhar ainda mais no tema:

Alguns materiais estão em inglês, mas é possível compreendê-los usando o recurso de tradução de páginas do próprio navegador.

Fico à disposição! E se precisar, conte sempre com o apoio do fórum.

Abraço e bons estudos!

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