Depois de receber alguns feed back refiz o projeto e estou repostando. https://cursos.alura.com.br/forum/topico-projeto-desafio-curriculo-461456
HTML:
<title>Curriculo Tairone Rocha</title>
<link rel="stylesheet" href="styles/styles.css">
<body>
<main class="main-content">
<section class="main-content">
<div class="main-content-top-down">
<div>
<h1 class="main-content-title">Sobre Mim</h1>
<p class="main-content-txt">Meu nome é Tairone Rocha, sou um estudante de programação. Escolhi esta área de trabalho porque, desde criança, fico encantado pelos personagens de HQ que entendiam tudo de tecnologia. Estou estudando agora na Alura, front-end e back-end</p>
</div>
<img class="main-content-img" src="assets/tairone - com fundo.png.jpg" alt="Tairone sorrindo com o mar e arvores no fundo.">
</div>
<div class="main-content-top-down">
<div class="main-content-links-courses">
<h2 class="main-content-links-courses-title">Minhas redes</h2>
<a class="main-content-links-styles" href="https://www.instagram.com/silvarume/" target="_blank" rel="noopener noreferrer"><img src="assets/instagram.png" alt="Icone do Instagram">Instagram</a>
<a class="main-content-links-styles" href="https://www.threads.net/@silvarume" target="_blank" rel="noopener noreferrer"> <img src="assets/threads.png" alt="Icone do Threads">Threads</a>
<a class="main-content-links-styles" href="https://www.linkedin.com/in/tairone-rocha-21a1b9331/" target="_blank" rel="noopener noreferrer"> <img src="assets/linkedin.png" alt="Icone do Linkedin"> Linkedin</a>
<a class="main-content-links-styles" href="https://github.com/TrSilvao" target="_blank" rel="noopener noreferrer"> <img src="assets/github.png" alt="Icone do Github">Github</a>
</div>
<div class="main-content-links-courses">
<h2 class="main-content-links-courses-title">Meus Certificados</h2>
<ul class="main-content-courses-list" title="Alura">
<li><a href="https://cursos.alura.com.br/certificate/1d435f68-690f-4072-b307-9aed47c86f8d?lang=pt_BR">HTML e CSS: Classes</a></li>
<li><a href="https://cursos.alura.com.br/certificate/8181b81d-d685-40d0-94bb-8ed8a0550b9d?lang=pt_BR">HTML e CSS: ambientes de desenvolvimento</a></li>
<li><a href="https://cursos.alura.com.br/certificate/85c7874c-f1f4-4ab7-9385-980ea45ecd3c?lang=pt_BR">Pipeline de dados: Python e orientação a objeto</a></li>
</ul>
</div>
</div>
</section>
</main>
</body>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #000000;
color: #F6F6F6;
}
a {
text-decoration: none;
color: #F6F6F6;
}
.main-content {
display: flex;
flex-direction: column;
align-items: center;
padding: 5% 15% ;
justify-content: baseline;
gap: 100px;
}
.main-content-top-down {
display: flex;
gap: 40px;
}
.main-content-title {
font-size: 36px;
padding: 21.5px 0;
font-family: "Krona One", sans-serif;
color: #22D4FD;
}
.main-content-txt {
font-size: 24px;
font-family: "Montserrat", sans-serif;
}
.main-content-img {
width: 400px;
}
.main-content-links-courses {
display: flex;
justify-content: space-between;
flex-direction: column;
gap: 16px;
border: 2px solid #22D4FD;
width: 378px;
text-align: center;
color: #fff;
border-radius: 18px;
font-size: 30px;
font-family: "Montserrat", sans-serif;
font-weight: 600;
padding: 21.5px 0;
}
.main-content-links-courses-title {
font-size: 25px;
padding: 21.5px 0;
font-family: "Krona One", sans-serif;
color: #22D4FD;
}
.main-content-links-styles {
display: flex;
justify-content: center;
text-align: center;
font-size: 20px;
color: #fff;
gap: 16px;
}
.main-content-courses-list {
display: flex;
flex-direction: column;
text-align: left;
font-size: 20px;
color: #fff;
gap: 16px;
padding: 0px 50px;
}
Como ficou:
