<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio de Paulo - Exercício 01</title>
</head>
<body>
<header>
</header>
<main>
<h1 color: >Eleve seu negócio digital a outro nível<strong>com um Front-end de qualidade!</strong></h1>
<p>Olá! Sou o Paulo, estou aprendendo e desenvolvendo em Javascript, HTML e CSS.
Ajudo pequenos negócios e designers a
colocarem em prática boas ideias. Vamos conversar?</p>
<button class="linkedin"><a href="https://www.linkedin.com/in/paulo-brito-73a65834a/">Linkedin</a></button>
<button class="github"><a href="https://github.com/PauloPeu">Github</a></button>
<img src="programando.png" alt="foto do programador">
</main>
<footer></footer>
</body>
</html>
<style>
h1 {
color: white;
position: absolute;
top: 28px;
left: 530px;
width: 593px;
height: 168px;
/* H1 */
font-family: 'Krona One';
font-style: normal;
font-weight: 400;
font-size: 36px;
line-height: 56px;
/* or 156% */
color: #F6F6F6;
/* Inside auto layout */
flex: none;
order: 0;
flex-grow: 0;
align-items: flex-start;
strong{color: rgba(34, 212, 253, 1)};
}
p {
color: white;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0px;
gap: 40px;
position: absolute;
width: 593px;
height: 352px;
left: 530px;
top: 200px;
}
button {
background-color: rgba(34, 212, 253, 1);
color: white;
border: none;
width:280px;height:79px;
font: "Montserrat";
font-size:24px;
align-items: flex-start;
}
.linkedin {
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 16px;
gap: 16px;
position: absolute;
width: 260px;
height: 79px;
left: 540px;
top: 320px;
background: #22D4FD;
border-radius: 16px;
}
.github{
/* Auto layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 16px;
gap: 16px;
position: absolute;
width: 260px;
height: 79px;
left: 840px;
top: 320px;
background: #22D4FD;
border-radius: 16px;
}
img {
width: 467,71px;
height: 510px;
}
main{
background-color: black;
background-position-x: 960px;
background-position-y: 575px;
width: 1920px;
height: 1151;
}
</style>
Finalizada!!
