[DESAFIO] Compartilhe seu projeto com o mundo | HTML e CSS: ambientes de desenvolvimento, estrutura de arquivos e tags

Insira aqui a descrição dessa imagem para ajudar na acessibilidade Oie, estou começando no mundo de front-end e estou muito animada! Vou deixar aqui embaixo como ficou meu código (me guiei pelo W3S e um pouco de chat gpt). Toda opinião é bem-vinda!

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exercício 2 - Portfólio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main>
        <div class="wrapper">
            <div class="left-content">
                <h1>Hello, world!</h1>
                <p>Oie! Meu nome é Yngrid Souza, tenho 23 anos e sou formada em Publicidade e Propaganda. Atualmente atuo como Diretora de Arte na iD\TBWA. Sempre fui fascinada por tecnologia e, unindo essa curiosidade ao meu background criativo, decidi mergulhar no estudo de HTML e CSS para expandir minhas habilidades e explorar novas possibilidades profissionais.</p>
                <div class="buttons">
                    <a href="https://www.instagram.com/ymgds_" class="btn" target="_blank">Instagram</a>
                    <a href="https://www.linkedin.com/in/yngrydy/" class="btn" target="_blank">Linkedin</a>
                </div>
            </div>
            <div class="right-image">
                <img src="yngrid.png" alt="foto da yngrid">
            </div>
        </div>
    </main>
    <footer></footer>
</body>
</html>

CSS

* {
    box-sizing: border-box;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
}

body {
    background-color: #141414;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 100px;
    max-width: 1000px;
    padding: 20px;
}

.left-content h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: #d81313;
}

.left-content p {
    font-size: 1.3rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

.buttons {
    display: flex;
    gap: 20px;
    margin-top: 50px;
}

.btn {
    padding: 10px 25px;
    background-color: #d81313;
    color: white;
    text-decoration: none;
    border-radius: 100px;
    transition: background-color 0.5s;
}

.btn:hover {
    background-color: #ffffff;
    color: #d81313;
}

.right-image {
    max-width: 400px;
    width: 100%;
    border-radius: 10px;
}

.right-image img {
    max-width: 300;
    margin-top: 100px;
}