<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pagina teste</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header></header>
<main>
<h1>Transforme suas ideias em experiências digitais incríveis!</h1>
<div class="alinhamento">
<p class="texto">
Olá! Sou Sayonara. Tenho conhecimento em mapeamento de fluxos de
navegação, design de interfaces (UX/UI) e utilizo ferramentas como
Figma e Bizagi para criar soluções digitais eficientes e intuitivas.
Juntos, podemos transformar ideias em projetos que realmente fazem a
diferença. Vamos conversar sobre como podemos criar algo incrível?
</p>
<img src="foto-sayona.jpeg" alt="foto amigo secreto" class="imagem" />
</div>
<div class="botoes">
<a
href="https://www.linkedin.com/in/sayonara-fran%C3%A7a/"
target="_blank"
class="botao linkedin"
>
LinkedIn
</a>
<a
href="https://github.com/Sayonarakeroll"
target="_blank"
class="botao github"
>
GitHub
</a>
</div>
</main>
<footer></footer>
</body>
</html>
background-color: black;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
text-align: left;
color: white;
}
main {
text-align: center;
}
.alinhamento {
display: flex;
align-items: center;
gap: 20px;
}
.imagem {
width: 200px;
height: auto;
}
.texto {
max-width: 400px;
font-size: 18px;
line-height: 1.5;
color: #9b9999;
}
.botoes {
margin-top: 20px;
display: flex;
justify-content: center;
gap: 10px;
}
.botao {
display: inline-block;
padding: 10px 20px;
text-decoration: none;
color: white;
font-size: 16px;
font-weight: bold;
border-radius: 5px;
}
.linkedin {
background-color: #0077b5;
}
.github {
background-color: #333;
}
.botao:hover {
opacity: 0.8;
}
```
