Estrutura HTML
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Portifólio Mariana</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
/>
</head>
<body>
<div class="container">
<div class="left-panel">
<div class="content">
<p class="greeting">HI THERE!</p>
<h1 class="name">I'M <span class="highlight">MARIANA</span></h1>
<p class="title">FULLSTACK DEVELOPER</p>
<p class="bio">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat.
</p>
<button class="btn">MORE ABOUT ME</button>
</div>
</div>
<div class="right-panel">
<img src="mari.jpg" alt="foto" class="profile-photo" />
<nav class="vertical-nav">
<ul>
<li>
<a href="#"><i class="fas fa-home"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-user-circle"></i></a>
</li>
<li>
<a href="#"><i class="fas fa-briefcase"></i></a>
</li>
</ul>
</nav>
</div>
</div>
</body>
</html>
