Skip to content

Instantly share code, notes, and snippets.

@bedeschiotavia

bedeschiotavia/fakebook-otavia-bedeschi.html

Created March 28, 2021 09:26
Show Gist options
  • Save bedeschiotavia/049ca3de9e615186577a70ca7374a989 to your computer and use it in GitHub Desktop.
Save bedeschiotavia/049ca3de9e615186577a70ca7374a989 to your computer and use it in GitHub Desktop.
Download ZIP
Homework2
Raw
fakebook-otavia-bedeschi.html
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/jpg" href="https://icons.iconarchive.com/icons/sicons/flat-shadow-social/256/facebook-icon.png"/>
<link rel="stylesheet" href="style.css">
<title>Fakebook</title>
</head>
<body>
<header>
<div class="header">
<h1>FAKEBOOK</h1>
<ul id="navlist">
<li id="active"><a href="#" id="current"> Início</a></li>
<li><a href="#">Editar Perfil</a></li>
<li><a href="#">Terminar sessão</a>
</ul>
</div>
</header>
<div class="fundoperfil">
</div>
<div class="imagemperfil"></div>
<h2>Otávia Bedeschi</h2>
<br>
<button>ADICIONAR AMIGO</button>
<p><strong>Cidade:</strong> Coimbra</p>
<p><strong>Aniversário:</strong> 08/10/1985</p>
<p><strong>Interesses:</strong> Crochet, Livros, Filmes e WebDesign</p>
</body>
</html>
Raw
style.css
body {
font-family: Avenir, Roboto, Helvetica, Arial, sans-serif;
text-align: center;
margin:0;
padding:0;
width:100%;
color: rgb(53, 55, 58);
}
.header{
background-color: #3B5998;
height: 40px;
padding: 0.8rem;
}
h1 {
color: #ffffff;
float:left;
margin: 0;
}
#navlist {
float: right;
margin: 0;
}
li {
display: inline;
list-style-type: none;
padding-right: 20px;
color:#ffffff;
}
a:link {
line-height: 75px;
height: 75px;
text-decoration: none;
color: #ffffff;
}
.fundoperfil{
position:relative;
width:100%;
height:200px;
border-bottom: 3px solid #fff;
background-color: #ffffff;
background-position:center;
background-color: #ffffff;
background-image: url("https://img.freepik.com/free-vector/3d-perspective-style-diamond-shape-white-background_1017-27556.jpg?size=626&ext=jpg&ga=GA1.2.2063201518.1607731200");
background-size:cover;
}
.imagemperfil {
z-index:1;
position: relative;
margin: auto;
margin-top: -80px;
width: 200px;
height: 200px;
border-radius: 100%;
border: 4px solid rgba(255, 255, 255, 1);
background: url("https://media-exp1.licdn.com/dms/image/C4D03AQEytmKkSY-QpQ/profile-displayphoto-shrink_200_200/0/1591359911559?e=1622073600&v=beta&t=twSHWqlfDDy3BROfuP8Ppryu9rrOYyyGokR6pA7IMg8");
background-size: cover;
background-position: center;
}
button{
color: #ffffff;
background-color: #3B5998;
margin-top: 1em;
margin-bottom: 1em;
padding: 1em;
border: 2px solid #3B5998;
border-radius: 30px;
}
button:hover{
color: #3B5998;
background:transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment