Skip to content

Instantly share code, notes, and snippets.

@dasdachs

dasdachs/index.html

Last active September 26, 2017 18:09
Show Gist options
  • Save dasdachs/a91355f5831541e8dbb9cb7cd34f206e to your computer and use it in GitHub Desktop.
Save dasdachs/a91355f5831541e8dbb9cb7cd34f206e to your computer and use it in GitHub Desktop.
Download ZIP
SM_2: HTML + CSS
Raw
index.html
<!DOCTYPE html>
<html>
<head lang="sl">
<meta charset="UTF-8">
<meta name="description" content="Janis Fakebook profile">
<meta name="keywords" content="me, about, interests, fakebook">
<meta name="author" content="Jani Šumak">
<title>Jani Šumak | Fakebook</title>
<!-- css -->
<link rel="stylesheet" href="style.css" type="text/css" />
<!-- FontAwesome -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
type="text/css"/>
</head>
<body>
<main>
<header class="header">
<span class="fa fa-handshake-o"></span>
<h1 class="header-text"><strong>FAKEBOOK</strong></h1>
<input type="text" class="header-search"
placeholder="Search by name" id="search">
</header>
<article>
<header class="profile">
<h2 class="profile-text">Jani Šumak</h2>
<h6 class="profile-text">@dasdachs</h6>
<button type="button" class="btn">Add to friends</button>
</header>
<img src="http://www.mediaspeed.net/fotografije/medium/610214.jpg?p=1"
class="profile-img" alt="Jani Šumak running">
<div class="about">
<h3>About me:</h3>
<p><strong>City:</strong> Maribor</p>
<p><strong>Age:</strong>30ish</p>
<p><strong>Education:</strong> law degree</p>
<p><strong>FB friends:</strong> over 9000</p>
<p><strong>Favorite language:</strong> Python</p>
</div>
</article>
<footer class="footer">
<div class="middle">
<ul class="contact">
<li><a href="mailto:jani.sumak@gmail.com"><span
class="fa fa-envelope"></span></a></li>
<li><a href="https://github.com/dasdachs"
target="_blank"><span class="fa fa-github"></span></a>
</li>
<li><a href="https://twitter.com/dasdachs"
target="_blank"><span
class="fa fa-twitter"></span></a></li>
</ul>
<p>&copy; Jani Šumak 2017</p>
</div>
</footer>
</main>
</body>
</html>
Raw
style.css
body{
margin:0;
padding:0;
}
a:link {
text-decoration: none;
}
input[type="text"]:focus {
border: solid .3px #FFF;
}
.header {
background-color: blue;
min-height: 40px;
padding:1px;
}
.header-text {
margin: 5px 0 0 1px;
padding: 0;
display: inline-block;
}
.header-search{
border-radius: 20px;
border: 0;
float: right;
margin: 10px;
min-width: 20%;
padding-right: 10px;
}
.profile {
padding: 10px;
}
.profile-text {
display: inline-block;
}
.profile-img {
float:left;
margin-right:10px;
}
.btn {
background-color: #008CBA;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
float: right;
}
.btn:active {
box-shadow: inset 0px 1px 3px 2px rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.middle {
margin: auto;
text-align:center;
}
.footer {
clear: left;
color: #555;
font-size:14px;
margin-top:20px;
}
.contact {
list-style-type: none;
margin: 0;
padding: 0;
}
footer li {
display: inline;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment