<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="EI-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Meu Portfolio</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">hardSkill</a></li>
<li><a href="#">softSkill</a></li>
<li><a href="#">projetos</a></li>
</ul>
</nav>
</header>
<main>
<div>
<h1>Eleve seu negócio digital a outro nível <strong style="color: #fcf7d1;">com um Front-end de qualidade!</strong></h1>
<p>Olá! Sou Victoria Ponciano, desenvolvedora Front-end com especialidade em HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?</p>
</div>
<div class="buttons">
<a href="https://www.linkedin.com/in/victoria-ponciano/" target="_blank"><button href="">Linkedin</button></a>
<a href="https://github.com/poncianovictoria" target="_blank"><button>GitHub</button></a>
</div>
<div class="foto">
<img src="/foto.jpg" alt="desenvolvedora">
</div>
</main>
<footer>
<p>Desenvolvido por Victoria Ponciano</p>
<p>© 2025 Todos os direitos reservados. </p>
</footer>
</body>
</html>
body{
background-color: #a2ca8e;
font-family: 'Arial', sans-serif;
}
h1{
color: #ffffff;
text-align: center;
font-size: 2em;
}
p{
color: #dde3ca;
font-size: 1em;
text-align: center;
}
button{
background-color: #ffffff;
color: #7c8071;
border: none;
padding: 10px 20px;
font-size: 1em;
}
button:hover{
background-color: #dde3ca;
color: #000000;
}
img{
width: 350px;
border-radius: 50%;
}
div{
item-align: center;
display: block;
margin: 20px auto;
}
nav ul{
list-style-type: none;
padding: 10px;
text-align: center;
display: flex;
justify-content: center;
gap: 40px;
}
nav a{
text-decoration: none;
color: #ffffff;
font-size: 1.2em;
}
nav a:hover{
color: #dde3ca;
text-decoration: underline;
transition: color 0.3s ease;
}
.foto{
display: flex;
justify-content: center;
item-align: center;
}
.buttons{
display: flex;
justify-content: center;
gap: 20px;
}
footer{
padding-top: 20px;
}
