Tentei pesquisar e implementar coisas novas, esse foi o resultado.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - Victor Santos</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Extracting the best from <strong> web development.</strong></h1>
<img src="imgalura.jpeg" alt="Foto de Victor Santos, desenvolvedor front-end">
</header>
<main>
<div class="p1">
<p>Hello, my name is <strong>Victor Santos</strong>, and I am a front-end developer.
<br>My main goal is to create user-friendly platforms and tangible solutions for complex problems,<br>
<strong>utilizing web development in the best possible way.</strong>
I am currently developing my skills in <strong>HTML</strong>, <strong>CSS</strong>, and <strong>JavaScript</strong>.</p></div>
</main>
<footer>
<section>
<p>To Find me</p>
<a href="https://github.com/spacevvars" target="_blank"><button class="g1">GitHub</button></a>
<a href="https://www.instagram.com/spacevvars/" target="_blank"><button class="g2">Instagram</button></a>
<a href="https://cursos.alura.com.br/user/VictorRSantos" target="_blank"><button class="g3">Alura</button></a>
</section>
</footer>
</body>
</html>
CSS
body{
background-color: #000000;
color: #E6E8E6;
font-family:Ar;
font-size: 12px;
margin: 0;
padding: 0;
line-height:1.2;}
img {
width: 326px;
height: 250px;
padding: 25px 10px;
border: none;
border-radius: 50px;
justify-content:baseline;}
section {
margin:3;
font-family:Courier;
font-size: 12px;
margin: 0;
padding: 0;
line-height: 1.6;
text-align: center;}
header {
color: #E6E8E6;
text-align: center;
font-size: 32px;}
.p1 {
font-family: Arial;}
strong {
color: #348888;}
main {
text-align: center;
display:flow-root;
padding:0;}
.g1 {
background-color:#E6E8E6;
font-size: 10px;
font-family: Arial;
height: 8em;
width: 8em;
color: #348888;
border-radius: 55px;
padding: 25px 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease-in-out, color 0.3s ease;
border: none;
cursor: pointer; }
.g1:hover {
background-color: #CED0CE;
color: #524d4d; }
.g2 { background-color:#E6E8E6;
font-size: 10px;
font-family: Arial;
height: 8em;
width: 8em;
color: #348888;
border-radius: 55px;
padding: 25px 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease-in-out, color 0.3s ease;
border: none;
cursor: pointer; }
.g2:hover:hover {
background-color: #CED0CE;
color: #524d4d; }
.g3 {
background-color:#E6E8E6;
font-size: 10px;
font-family: Arial;
height: 8em;
width: 8em;
color: #348888;
border-radius: 55px;
padding: 25px 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
transition: background-color 0.3s ease-in-out, color 0.3s ease;
border: none;
cursor: pointer; }
.g3:hover:hover {
background-color: #CED0CE;
color: #524d4d; }
