HTML:
<!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">
</head>
<body>
<header>
<h1>Olá, sou Isabella</h1>
</header>
<main>
<div>
<p>
Olá! Me chamo <strong>Isabella</strong>, sou uma <strong>artista 2D</strong> e <strong>game developer</strong> e
agora estou descobrindo que <strong>HTML e CSS</strong> são coisas interessantes de se aprender. Espero que eu possa estar sempre
evoluindo meus aprendizados.
</p>
</div>
<img src="imagem.png" alt="Foto da Isabella">
</main>
<footer>
<div>
<p>
Veja meu perfil no
<span><a href="https://www.linkedin.com/in/isabella-falanque-a945902b9/" target="_blank">LinkedIn</a></span>
</p>
</div>
<div>
<p>
Siga minha página no
<span><a href="https://www.instagram.com/mikamoori/" target="_blank">Instagram</a></span>
para acompanhar meu jogo.
</p>
</div>
</footer>
</body>
</html>
css:
<title>Olá, sou Isabella</title>
<style>
body {
background-color: #1a001f;
color: #fff;
max-width: 70%;
width: 100%;
margin: 0 auto;
font-family: Arial, Helvetica, sans-serif;
}
h1 {
letter-spacing: 5px;
padding-top: 50px;
color: #ff005c;
}
span {
font-size: 20px;
color: #ff005c;
border: solid 1px;
border-radius: 10px;
padding: 5px;
}
strong {
color: #ff005c;
}
img {
width: 20%;
height: 20%;
border-radius: 40px;
border: solid 1px;
padding: 2%;
}
main {
display: flex;
flex-direction: column;
align-items: flex-start;
font-size: 16px;
padding-bottom: 3%;
}
main p {
max-width: 90%;
letter-spacing: 1.5px;
font-weight: 400;
line-height: 1.6;
}
footer {
background-color: #ff005c;
padding: 5px;
text-align: center;
border-radius: 0 0 5px 5px;
font-size: 12px;
}
h2 {
letter-spacing: 2px;
padding-top: 10px;
max-width: 45%;
color: #fff;
}
a {
text-decoration: none;
color: #000;
}
</style>
