Skip to content

Instantly share code, notes, and snippets.

@radanovicnikola93
Last active November 26, 2017 19:22
Show Gist options
  • Save radanovicnikola93/bd5e97043df6cc19d5d91abd9be5a4dd to your computer and use it in GitHub Desktop.
Save radanovicnikola93/bd5e97043df6cc19d5d91abd9be5a4dd to your computer and use it in GitHub Desktop.
Nikola Radanovic | Fakebook
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Nikola Radanovic's Fakebook profile">
<meta name="keywords" content="Fakebook, hobby, about me">
<meta name="author" content="Nikola Radanović">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nikola Radanović | Fakebook</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<h1>Nikola Radanović</h1>
<br />
<input class="search-field"
type="text" placeholder="Search by name">
<br />
<img id="profile-picture" src="66.jpg"
width="280" height="400" alt="Profile picture">
<br />
<br />
<button class="friend-request-button">
Send friend request</button>
<br />
<div class="about-me">
<h3>Hometown</h3>
<p><em>Ankaran</em></p>
<h3>Birthday</h3>
<p><em>19.12.1993</em></p>
<h3>Facebook friends</h3>
<p><em>512</em></p>
<h3>Followers</h3>
<p><em>32</em></p>
</div>
<div class="hobbies">
<h3>Hobbies</h3>
<ul>
<li class="li"><a href="https://www.flickr.com/photos/146663683@N04/" target="_blank">Hobby Photographer</a></li>
<li class="li"><a href="https://www.smartninja.org/" target="_blank">Learning programming at Smartninja</a></li>
</ul>
</div>
</body>
</html>
* {
box-sizing: border-box;
}
body {
background-color: rgba(0, 191, 255, 0.6);
text-align: center;
}
h1 {
color: white;
font-family: Helvetica;
font-size: 30px;
font-weight: normal;
border: 2px dotted white;
border-radius: 15px;
padding-top: 2px;
padding-bottom: 2px;
margin: 0px 500px;
}
.search-field:focus {
width: 290px;
}
.search-field {
margin-bottom: 10px;
}
#profile-picture {
display: block;
margin: 0 auto;
-webkit-border-radius: 50%;
}
#profile-picture:hover {
-webkit-border-radius: 0%;
}
.friend-request-button {
width: 295px;
}
.about-me,
.hobbies {
font-family: Helvetica;
font-weight: normal;
color: white;
font-size: 15px;
border: 2px dotted white;
border-radius: 15px;
padding-top: 0px;
padding-bottom: 0px;
margin: 10px 500px;
}
.li {
text-align: left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment