1
resposta

[Sugestão] Do jeito que eu fiz está correto?

HTML

<body>
 <main>
    <section>
     <h1>Eleve seu negócio digital <br>a outro  nível 
     <strong class="Titulo_Destaque">com um <br> Front-end de  qualidade!</strong></h1>
     
         
              <p>Olá! Sou Joana Santos, desenvolvedora Front-end <br> com especialidade em React, HTML e CSS. Ajudo <br> pequenos negócios e designers a colocarem em <br> prática boas ideias. Vamos conversar?</p>
            <div>
             <a href="">Instagram</a>
              <a href="">Google</a>
            </div>
     </section>
            <img src="Joana Santos (2).png" alt="Joana Santos"  >
        



 </main>
    
</body>

** CSS**

 * {
    margin:0;
    padding:0;
   }

/* conteudo no eixo principal no centro e para ficar no centro da pagina foi usado align-items: center; para ficar no eixo cross */
   body {
     height: 100vh; 
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
     background-color: black;
     color: #F6F6F6;
    }

    .Titulo_Destaque {

        color: #22D4FD;
    }

/* conteudo total em uma linha */
    main {
        display: flex;
        flex-direction: wrap; 
    }
/* conteudo está nessa section */
    section { 
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
/* teg ancora está nessa div */
    div {
        display: flex;
        flex-direction: wrap;
        justify-content: space-around;
    }

    p {
        font-size: 1.5rem;
    }
    h1{
        font-size: 3rem;  
        letter-spacing: 1.5px;
    }

Aqui eu já coloquei no centro da tela, coloquei o conteudo em coluna separado da img e ajeitei teg ancora para fica separado

1 resposta

Fala Gabriel! Cara me parece que está tudo certinho sim, posso deixar como dica para você não utilizar letras maiusculas nas classes, não está errado a utilização, mas é uma convenção utilizamos somente letras minúsculas. Outra coisa é que você poderia investir em algumas classes para formatar a imagem de forma que ela não acabe ficando distorcida. Dá uma olhada em propriedades do CSS como: object-fit, aspect-ratio e outras relaciondas.

Bons estudos!