Projeto Final | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Captura de tela

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>Portfolio de Joana Santos</title>
    <link rel="stylesheet" href="style.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=Krona+One&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
</head>
<body>
    <header>
        <h1>Portfolio</h1>
    </header>
    <main>
        <div id="main-left">
            <h1 id="title">Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong></h1>
            <p>Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em <strong>React, HTML e CSS</strong>. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
            <div id="main-links">
                <a href="https://www.instagram.com">Instagram</a>
                <a href="https://www.github.com">Github</a>
            </div>
        </div>
        <img src="./Imagem.png" alt="Imagem de Joana programando" width="440px" height="550px">
    </main>
</body>
</html>

CSS:

body{
    display: flex;
    flex: 1;
    flex-direction: column;
    color: white;
    background-color: #141301;
    align-items: center;
    justify-content: center;
}

main{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    background-color: #006989;
    max-width: 1280px;
    justify-content: space-around;
    padding: 60px;
    border-radius: 30px;
    align-self: center;
}

#main-left{
    display: flex;
    flex: 1;
    flex-direction: column;
    max-width: 600px;
    margin-bottom: 30px;
    margin-right: 60px;
}

#main-links{
    display: flex;
    flex: 1;
    margin-top: 30px;
    max-width: 600px;
    max-height: 50px;
    gap: 10px
}

#title{
    font-family: "Krona One", sans-serif;
    font-weight: 400;
    font-size: 36px;
    line-height: 56px;
}

strong{
    color: #22D4FD;
}

p{
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    line-height: 36px;
    font-weight: 300;
}

a{
    font-family: "Montserrat", sans-serif;
    background-color: #22D4FD;
    padding: 15px;
    border-radius: 15px;
}

a:link, a:visited{
    color: #141301;
    font-weight: 600;
    text-decoration: none;
}

img{
    align-self: center;
}

PRORROGAMOS O DESCONTO!