Lista de exercícios

        <h1 class="apresentacao__conteudo__titulo">Hello World! Bem vindo ao meu universo criativo ★ <strong class="titulo-destaque">Onde as ideias ganham vida no mundo digital!</strong></h1>
        <p class="apresentacao__conteudo__texto">Olá! sou Thiuli , Administrador. Ajudo seu negocio a por em prática boas ideias. Vamos conversar?</p>
        <div class="apresentacao__links">
        
            <h2 class="apresentacao__links__subtitulo">Acesse minhas redes:</h2>
        
            <a class="apresentacao__links__link" href="https://github.com/">
            <img src="./assets/github.png">
            GitHunb
        </a>
        <a class="apresentacao__links__link" href="https://linkedin.com/in/">
            <img src="./assets/linkedin.png">
            Linkedin
        </a>
        <a class="apresentacao__links__link" href="https://instagram.com/">
            <img src="./assets/instagram.png">
            Instagram
        </a>
    </div>
 </section>
 <img src="./assets/imagem.png" alt="Foto"> 
</main>
<footer class="rodape">
        <p>Desenvolvido por Thiuli Dias</p>
</footer>

:root{ --cor-primaria: #121212; --cor-secundaria: #f6f6f6; --cor-terciaria: #DEABFF; --cor-hover: #272727;

--fonte-primaria: 'Krona One', 'sans serif';
--fonte-secundaria: "Montserrat", sans-serif;

}

• { margin: 0; padding: 0; }

body { box-sizing: border-box; background-color: var(--cor-primaria); color: var(--cor-secundaria); } .cabecalho{ padding: 2% 0% 0% 10%; } .cabecalho__menu{ display: flex; gap: 80px; } .cabecalho__menu__link{ font-family: var(--fonte-secundaria); font-size: 20px; font-weight: 600; color: var(--cor-terciaria); text-decoration: none; } .cabecalho__menu__link:hover { color: #007bff; cursor: pointer; } .apresentacao{ padding: 5% 17%; display: flex; align-items: center; justify-content: space-between; } .apresentacao__conteudo{ width: 615px; display: flex; flex-direction: column; gap: 40px; } .apresentacao__conteudo__titulo{ font-size: 36px; font-family: var(--fonte-primaria); } .titulo-destaque { color: var(--cor-terciaria); } .apresentacao__conteudo__texto{ font-size: 24px; font-family: var(--fonte-secundaria); } .apresentacao__links{ display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 32px ; } .apresentacao__links__subtitulo{ font-family: var(--fonte-primaria); font-weight: 400; font-size: 24px; } .apresentacao__links__link { display: flex; justify-content: center; gap: 16px; border: 2px solid var(--cor-terciaria); width: 378px; text-align: center; border-radius: 8px; font-size: 24px; font-weight: 600; padding: 21.5px 0; text-decoration: none; color: var(--cor-secundaria); font-family: var(--fonte-secundaria); } .apresentacao__links__link:hover { background-color: var(--cor-hover); cursor: pointer; } .rodape{ color: var(--cor-primaria); background-color: var(--cor-terciaria); padding: 24px; text-align: center; font-family: var(--fonte-secundaria); font-size: 20px; font-weight:400; }