index.html
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portifólio Helena</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<strong>H M</strong>
<button><a href="helenarfmarcomini@gmail.com">E-mail</a></button>
<button><a href="https://www.linkedin.com/in/helena-marcomini-21707b145/">LinkedIn</a></button>
<button><a href="https://github.com/HelenaMarcomini22">GitHub</a></button>
</header>
<img src="./foto.jpg" alt="foto">
<h1>Helena Marcomini</h1>
<h2>Desenvolvedora Front-end</h2>
<p>Olá! Meu nome é Helena Marcomini, tenho 31 anos e sou uma desenvolvedora front-end apaixonada por criar experiências digitais incríveis. Com um olhar atento para o design e uma mente curiosa para a tecnologia, estou sempre em busca de novas maneiras de aprimorar minhas habilidades e entregar projetos de alta qualidade.</p>
<p>Minha jornada no desenvolvimento front-end começou há alguns anos, quando descobri minha paixão por transformar ideias em realidade através do código. Desde então, tenho me dedicado a aprender e dominar as tecnologias mais recentes, como HTML e CSS.</p>
<p>Se você está procurando uma desenvolvedora front-end dedicada, criativa e comprometida, adoraria conversar com você! Vamos juntos transformar suas ideias em experiências digitais incríveis.</p>
<footer>© 2025 Helena. Todos os direitos reservados.</footer>
</body>
</html>
style.css
header {
background-color: darkred;
color: black;
padding: 10px;
text-align: center;
border-bottom: 4px solid black;
font-family: 'Arial', sans-serif;
font-size: 24px;
font-weight: bold;
font-weight: bolder;
text-transform: uppercase;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s, color 0.3s;
}
button {
background-color: black;
color: red;
border: 2px solid darkblue;
border-radius: 12px;
padding: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s, color 0.3s;
}
a {
color: blueviolet;
text-decoration: none;
font-weight: bold;
}
body {
background-color: black;
color: thistle;
}
img {
border: 4px solid black;
border-radius: 12px;
padding: 5px;
max-width: 25%;
height: auto;
display: block;
margin: 20px auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
transition: transform 0.3s, box-shadow 0.3s;
}
h1 {
color: red;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
font-family: 'Verdana', sans-serif;
font-size: 36px;
margin-bottom: 10px;
text-align: center;
}
h2 {
color: darkblue;
font-family: 'Verdana', sans-serif;
font-size: 28px;
margin-bottom: 8px;
text-align: center;
}
p {
color: lightblue;
font-family: 'Georgia', serif;
font-size: 18px;
line-height: 1.6;
text-align: justify;
margin: 0 20px 20px 20px;
}
footer {
background-color: darkred;
color: black;
padding: 10px;
text-align: center;
border-top: 4px solid black;
font-family: 'Arial', sans-serif;
font-size: 14px;
position: table-footer-group;
width: 100%;
bottom: 0;
font-weight: bolder;
text-transform: uppercase;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s, color 0.3s;
}
