index.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">
<link rel="stylesheet" href="style.css">
<title>Protótipo de Portfólio </title>
</head>
<body>
<header>
<a href="https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element" alt="Link da documentação do HTML5">
<img class="logo" src="img/html5-logo.png" alt="Logo do HTML5">
</a>
</header>
<main class="container">
<section>
<h1>
Eleve seu negócio digital a outro nível <strong>com um Front-end de qualidade!</strong>
</h1>
<p>
Olá! Sou Joana Santos, desenvolvedora Front-end com especialidade em React, HTML e CSS. Ajudo pequenos negócios e designers a colocarem em prática boas ideias. Vamos conversar?
</p>
</section>
<section>
<img class="foto" src="img/imagem.png" alt="Foto da Joana Santos programando"/>
</section>
<section class="container__botao">
<a class="botao" href="https://www.intagram.com" alt="Link do Instagram">Instagram</a>
<a class="botao" href="https://www.github.com" alt="Link do Github">Github</a>
</section>
</main>
<hr class="solid">
<footer>
<h2>Contato:</h2>
<section class="rodape-contatos">
<a class="link-contato" href="https://www.intagram.com/" alt="Contato do Instagram">Instagram</a>
<a class="link-contato" href="https://www.linkedin.com/"alt="Contato do Linkedin">Linkedin</a>
<a class="link-contato" href="https://www.facebook.com/" alt="Contato do Facebook">Facebook</a>
<a class="link-contato" href="mailto:exemplo@gmail.com" alt="Contato do E-mail">E-mail</a>
</section>
</footer>
</body>
</html>
style.css
header
{
display: grid;
grid-template-columns: 64px;
grid-template-rows: 64px;
float: none;
align-items: center;
justify-content: center;
}
body
{
background-color:black;
}
h1
{
color: aliceblue;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 38px;
}
strong
{
color: #22D4FD;
}
p
{
color: aliceblue;
font-size: 18px;
}
h2
{
color: #22D4FD;;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-size: 24px;
}
.container
{
max-width: 80%;
margin: 200px auto;
float: none;
display: grid;
grid-template-columns: repeat(2, 2fr);
grid-auto-rows: minmax(0px, auto);
max-width: 960px;
align-items: start;
}
img.logo
{
max-width: 100%;
max-height: 100%;
}
img.foto
{
max-width: 75%;
max-height: 75%;
}
.container__botao
{
display: grid;
grid-template-columns: repeat(2, 2fr);
gap: 1.5rem;
width: 13rem;
font-size: 24px;
font-weight: 700;
border: none;
margin-top: -5rem;
}
a.botao
{
display: inline-flex;
justify-content: center;
color: black;
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
text-decoration: none;
padding: 1.1rem 1.5rem;
min-width: 10.5rem;
border-radius: 1rem;
background-color: #22D4FD;
}
.rodape-contatos
{
display: grid;
grid-template-columns: repeat(4, 2fr);
gap: 1.5rem;
width: 13rem;
font-size: 24px;
font-weight: 700;
border: none;
margin-top: -0.5rem;
}
a.link-contato
{
display: inline-flex;
justify-content: center;
color: aliceblue;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
text-decoration: none;
}
hr.solid
{
border-top: 1px solid #bbb;
}
Tentei fazer o mais próximo possível do que estava no figma.
