Boa noite, apliquei as coisas aprendidas durante esse e o curso anterior de HTML+CSS, tive muita dificuldade quanto a box, sistema de herança da box pai pra filho, infelizmente o texto principal acaba saindo de dentro da box quando dou zoom in and out na pagina, mas acredito que seja questão de prática, segue resolução, Tags HTML e CSS:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="desafio1.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercicios</title>
</head>
<body >
<section class="quadrado">
<header class="header__classe">
<h1 class="h1__header">PORTIFÓLIO SIMPLES <strong class="bold__titulo">HTML & CSS</strong></h1>
<section class="menu">
<nav>
<img class="imagem__header" src="person-icon-blue-18.png" alt="pequeno icone">
<a class="menu_links" href="#">HOME</a>
<a class="menu_links" href="#">ABOUT</a>
<a class="menu_links" href="#">SERVICES</a>
<a class="menu_links" href="#">BLOG</a>
<a class="menu_links" href="#">MORE</a>
<a class="menu_links" class="contact" href="#">CONTACT</a>
</nav>
</section>
</header>
<main>
<section class="conteudo__principal">
<img class="imagem" src="IMG-20260404-WA0116.png" alt="eu">
<div class="texto__principal">
<h2>Alex Gomes</h2>
<h3>Estagiario de <strong class="bold__texto">Web Development.</strong></h3>
<p>Desenvolvedor front-end focado em criar interfaces modernas, responsivas e eficientes. Estudando constantemente novas tecnologias como React, JavaScript e CSS para construir experiências digitais cada vez melhores e funcionais.</p>
<a class="download" href="#">DOWNLOAD CV</a>
</div>
</section>
</main>
</section>
</body>
</html>
CSS:
*{
margin:0;
padding:0;
}
.h1__header{
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: black;
background-color: #22D4FD;
font-weight: 200;
border: white;
border-radius: 16px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.bold__titulo{
font-weight: 1000;
color: #006177;
}
.menu{
display: flex;
width: 100%;
display: block;
padding-top: 30px;
padding-bottom: 20px;
}
nav{
padding: 0 40px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 70%;
margin-left: 4%;
}
.imagem__header{
width: 40px;
padding-right: 40px;
}
.menu_links{
text-decoration: none;
color: white;
font-size: 14px;
transition: 0.3s;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.menu_links:hover{
color: #22D4FD;
cursor: pointer;
}
body{
background-color: rgb(54, 54, 54);
color: white;
align-items: center;
}
main {
display: flex;
justify-content: left;
align-items: center;
min-height: 30vh;
width: 100%;
}
.conteudo__principal{
display: flex;
align-items: top;
width: 700px;
min-height: 200px;
padding: 0 4px 3px 0;
margin-left: 75px;
justify-content: space-between;
margin-top: 2%;
padding-top: 15px;
}
.imagem{
width: 200px;
}
.texto__principal{
text-justify:auto;
width: 400px;
margin-top: 10px;
margin-left: 50px;
display: flex;
flex-direction: column;
}
.quadrado{
display: flex;
flex-direction: column;
background-color: rgb(0, 0, 0);
min-height: 70vh;
width: 50%;
margin: 50px auto;
align-self: center;
border-radius: 16px;
box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
}
p{
text-align: justify;
}
.download{
color: white;
margin-top: 100px;
text-decoration: none;
width: 127px;
padding: 10px;
border: 2px solid #22D4FD;
border-radius: 2%;
transition: 0.3s;
}
.download:hover{
color: #22D4FD;
cursor: pointer;
}
h2{
color: #22D4FD;
margin-bottom: 10px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.bold__texto{
color: #22D4FD;
}
.contact{
margin-left: auto;
}
h3{
margin-bottom: 10px;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
