Solucionado
Boa noite Eu seguir o que os professores fizeram, porém mesmo assim eu fiquei com uma margem superior na página e parece que esta afetando o meu projeto, eu não sei como funciona um reset css. Eu gostaria de saber se alguém pode me ajudar, por favor.
Claro, ficarei feliz em ajudar. Por favor, forneça mais detalhes sobre o seu código e projeto. Se possível, compartilhe o trecho relevante do código HTML e CSS para que eu possa entender melhor a situação e oferecer uma solução mais precisa.
No meu projeto,eu acredito, as dimensões dos links estão ficando defeituosas,não consigo deixa-los em coluna ou afastalos, por exemplo.Até já diminuir a imagem mas mesmo assim, nada,Acredito que seja por causa dessa margem em cima da página.
)
Segue o link do meu código.
https://github.com/viana-manoel/Portfolio
sua class não estão sendo reconhecida devido a um erro de digitação, 'aprensentacao' e outras estão 'apresentacao' então não esta pegando a class que esta no css, fiz uma revisão e ja ajustei ele e adicionei um hover que fica bem interessante por se tratar de um botão de ação, verifique tbm seu link do linkedin que esta possivelmente errado
)
HTML ABAIXO
<!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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header></header>
<main class="apresentacao">
<section class="apresentacao__conteudo">
<h1 class="apresentacao__conteudo__titulo">Eleve seu negócio digital a outro nível <strong class="titulo-destaque">com um Front-end de qualidade!</strong></h1>
<p class="apresentacao__conteudo__texto">Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
<div class="apresentacao__links">
<h2>Acesse minhas redes:</h2>
<div class="apresentacao__links__botoes">
<a class="apresentacao__links__link" href="https://instagram/viana.manoel">Instagram</a>
<a class="apresentacao__links__link" href="https://github.com/viana-manoel">Github</a>
</div>
</div>
</section>
<img src="Imagem 2.0.png" alt="imagem da joana santos">
</main>
<footer></footer>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:wght@400;600&display=swap');
* {
margin: 0;
padding: 0;
}
img {
max-width: 420px;
}
body {
height: 100vh;
box-sizing: border-box;
background-color: #000000;
color: #F6F6F6;
}
.titulo-destaque {
color: #22D4FD;
}
.apresentacao {
margin: 10% 20%;
display: flex;
align-items: center;
justify-content: space-between;
}
.apresentacao__conteudo {
width: 500px;
display: flex;
flex-direction: column;
gap: 60px;
}
.apresentacao__conteudo__titulo {
font-size: 30px;
font-family: 'Krona One', sans-serif;
}
.apresentacao__conteudo__texto {
font-size: 20px;
font-family: 'Montserrat', sans-serif;
}
.apresentacao__links {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 32px;
}
.apresentacao__links__botoes {
display: flex;
gap: 16px;
}
.apresentacao__links__link {
background-color: #22D4FD;
text-align: center;
width: 242px;
border-radius: 16px;
font-size: 24px;
padding: 21.5px 0;
font-weight: 600;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
color: #000000;
}
.apresentacao__links__link:hover {
background-color: #0b8eac;
color: #FFFFFF;
}Bom dia, Eduardo . Muito obrigado,como eu estou começando nessa área, eu escorrego em algumas coisas. Novamente, obrigado !