Claro, tive muita dificuldade em organizar a página. E, com certeza, fiz muita coisa errada. Para tentar estilizar um pouco mais, busquei por trabalhos de outros alunos que haviam feito algo semelhante ao meu objetivo. Não é querendo fazer cópia de ninguém, mas com a pouca noção que tenho precisei ter algum parâmetro. Talvez tenha muita estilização que nem precise, que esteja duplicada ou errada mesmo, mas na falta de experiência, as vezes alguma coisinha que você troca acaba mexendo muito. Então, modifiquei o que precisei e no final das contas cheguei em um resultado. Com certeza tenho muito que aprender e com mais certeza ainda, falta muito mais conhecimento! Vou em busca!
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Portfólio de Lisiane Ribeiro</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
</header>
<main>
<h1>
Elevando o conhecimento e migrando de carreira com a Alura que apresenta <strong>cursos de Front-end de qualidade!</strong>
</h1>
<p>
Olá! Sou Lisiane Ribeiro, aluna na Alura e aspirante ao curso de Analise e Desenvolvimento de Sistemas. Atualmente, busco evolução do conhecimento para iniciar uma nova carreira. Estou iniciando os estudos pela Alura me aventurando e tentando definir uma área de interesse. Por enquanto, passeio pelo Front-end. Vamos conversar?
</p>
<a href="https://www.instagram.com" class="botao">Instagram </a>
<a href="http://www.github.com" class="botao">Github</a>
<img src="imagemperfil.jpg" class="imagemperfil" id="imagemperfil" alt="Foto de Lisiane Ribeiro">
<br><br>
</main>
<footer>
<p> (xx)xxxxx-xxxx <br>
xxxxxxxxxxx@email.com
</p>
</footer>
</body>
</html>
```body {
background-color: steelblue;
color: white
}
h1 {
font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-size: 30px;
width: 35%;
margin-top: 100px;
margin-left: 200px;
margin-right: 10px;
float: center;
text-align: justify;
}
strong {
color: #061B4A;
}
p {
font-family:'Times New Roman', Times, serif;
font-size: 15px;
width: 35%;
margin-left: 200px;
text-align: justify;
}
a {
font-family:'Times New Roman', Times, serif;
font-size: 15px;
width: 8.5%;
margin-top: 50px;
margin-left: 200px;
margin-right: 10px;
float: left;
}
.botao {
display: inline-block;
padding: 5px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 0px;
font-size: 16;
text-align: center;
text-decoration: none;
color: black;
background-color: white;
border: 15px solid black;
border-radius: 10px;
border-width: 1px;
transition: background-color 0.3s, transform 0.2s;
}
.botao:hover {
background-color: #061B4A;
color: white;
}
.botao:active {
background-color: #09296E;
transform: translateY(2px);
}
#imagemperfil {
width: 250px;
margin-left: 50px;
margin-top: -250px;
align-items: right;
border-radius: 13px;
}
footer {
margin-left: 150px;
margin-top: 10px;
}
