[Projeto] Estilos de texto e fontes - Exercício 03 | HTML e CSS: Classes, posicionamento e Flexbox

Espaçamento e margens com Flexbox:

.apresentacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10%;
}

Definindo o tamanho da seção de texto | Ajustando tamanhos de títulos e textos:

✦ HTML:

\\código omitido
<body>
        <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 Laís Moraes, Desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Sinta-se a vontade para verificar meus trabalhos acessando os sites abaixo:
                </p>
                <a href="https://instagram.com/imlais" target="_blank"><button>Instagram</button></button></a>
                <a href="https://github.com/moraeslais" target="_blank"><button>Github</button></a>
            </section>
            <img src="_Foto Portfólio.jpg" alt="Desenvolvedora Laís Moraes">
        </main>
    </body>
    </html>

✦ CSS:

\\código omitido
.apresentacao__conteudo {
    width: 615px;
    height: 482px;
}
    
.apresentacao__conteudo__titulo {
    font-size: 36px;
}

 .apresentacao__conteudo__texto {
    font-size: 24px;
}
\\código omitido

Importando e aplicando fontes do Google Fonts | Personalizando fontes de títulos e textos:

✦ 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>Portfólio | Laís Moraes</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <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 Laís Moraes, Desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Sinta-se a vontade para verificar meus trabalhos acessando os sites abaixo:
                </p>
                <a href="https://instagram.com/imlais" target="_blank"><button>Instagram</button></button></a>
                <a href="https://github.com/moraeslais" target="_blank"><button>Github</button></a>
            </section>
            <img src="_Foto Portfólio.jpg" alt="Desenvolvedora Laís Moraes">
        </main>
        <footer> </footer>
    </body>
    </html>

✦ CSS:

    @import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&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;
    height: 482px;
    }

    .apresentacao__conteudo__titulo {
        font-size: 36px;
        font-family: "Krona One", sans-serif;
    }

    .apresentacao__conteudo__texto {
        font-size: 24px;
        font-family: 'Montserrat', sans-serif;
    }