Skip to content

Instantly share code, notes, and snippets.

@safe1981

safe1981/index.html

Created January 17, 2013 00:29
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save safe1981/4552401 to your computer and use it in GitHub Desktop.
Save safe1981/4552401 to your computer and use it in GitHub Desktop.
Download ZIP
A CodePen by Erhan Başa. Facebook Nerby Concept - Facebook responsive grid and layout system. It's not for money, it's just html practice and fun. Responsive Update: 12.01.2013 Old problem: It's now min-width 600. Max-width 600, other pages and functions coming soon. Author : Erhan Basa http://www.erhanbasa.com/facebooknewconcept.html Desginer :…
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>Facebook Fred Nerby Concept - For Practice</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/custom.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h1 id="logo">
<a href="#"><img src="http://www.erhanbasa.com/files/facebook/img/facebook-logo.png" /></a>
</h1>
<ul id="jewel-container">
<li class="jewel requests">
<a href="#"></a>
</li>
<li class="jewel messages">
<a href="#"></a>
</li>
<li class="jewel notifications">
<a href="#"></a>
</li>
</ul>
<ul id="head-navigation">
<li><a href="#" class="current">News</a></li>
<li><a href="#">Messages</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Find Friends</a></li>
</ul>
<div id="head-search">
<span>Find Friends</span>
<form id="searchform">
<input placeholder="Search">
<input type="button" class="btn">
</form>
</div>
</div>
<div id="timeline-head">
<span class="page-name">Hi Samantha</span>
</div>
<div id="timeline-side">
</div>
<div id="timeline">
<div class="block2x3 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-3.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a> and <a href="#">42 other people</a>
<p>Have commented on your <a href="#">wall post</a></p>
</div>
<div class="feedbacks">
<span class="date">
24 Minutes Ago
</span>
<ul>
<li class="like"><a href="#">Like (15)</a></li>
<li class="comment"><a href="#">Comment (42)</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
<div class="block1x2 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-4.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a>
<p>Have commented on your <a href="#">wall post</a></p>
<p>November 24</a></p>
</div>
</div>
</div>
<div class="block1x2 block">
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Posted on your <a href="#">wall post</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-5.jpg" />
</div>
</div>
<div class="block3x2 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-2.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a> and <a href="#">42 other people</a>
<p>Have commented on your <a href="#">wall post</a></p>
</div>
<div class="feedbacks">
<span class="date">
24 Minutes Ago
</span>
<ul>
<li class="like"><a href="#">Like (15)</a></li>
<li class="comment"><a href="#">Comment (42)</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
<div class="block1x1 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-1.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a> and <a href="#">42 other people</a>
<p>Have commented on your <a href="#">wall post</a></p>
</div>
<div class="feedbacks">
<span class="date">
24 Minutes Ago
</span>
<ul>
<li class="like"><a href="#">Like (15)</a></li>
<li class="comment"><a href="#">Comment (42)</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
<div class="block1x1 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-4.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a> and <a href="#">42 other people</a>
<p>Have commented on your <a href="#">wall post</a></p>
</div>
<div class="feedbacks">
<span class="date">
24 Minutes Ago
</span>
<ul>
<li class="like"><a href="#">Like (15)</a></li>
<li class="comment"><a href="#">Comment (42)</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
<div class="block2x1 block">
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Tagged you in a <a href="#">photo</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-6.jpg" />
</div>
</div>
<div class="block1x1 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-5.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Tagged you in a <a href="#">photo</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
</div>
<div class="block2x2 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-2.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a> and <a href="#">42 other people</a>
<p>Have commented on your <a href="#">wall post</a></p>
</div>
<div class="feedbacks">
<span class="date">
24 Minutes Ago
</span>
<ul>
<li class="like"><a href="#">Like (15)</a></li>
<li class="comment"><a href="#">Comment (42)</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
<div class="block1x2 block">
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Tagged you in a <a href="#">photo</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-6.jpg" />
</div>
</div>
<div class="block2x2 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-2.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a> and <a href="#">42 other people</a>
<p>Have commented on your <a href="#">wall post</a></p>
</div>
<div class="feedbacks">
<span class="date">
24 Minutes Ago
</span>
<ul>
<li class="like"><a href="#">Like (15)</a></li>
<li class="comment"><a href="#">Comment (42)</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
<div class="block1x2 block">
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Tagged you in a <a href="#">photo</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-6.jpg" />
</div>
</div>
<div class="block1x2 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-6.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Tagged you in a <a href="#">photo</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
</div>
<div class="block2x2 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-2.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a> and <a href="#">42 other people</a>
<p>Have commented on your <a href="#">wall post</a></p>
</div>
<div class="feedbacks">
<span class="date">
24 Minutes Ago
</span>
<ul>
<li class="like"><a href="#">Like (15)</a></li>
<li class="comment"><a href="#">Comment (42)</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
<div class="block1x2 block">
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Tagged you in a <a href="#">photo</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-6.jpg" />
</div>
</div>
<div class="block2x2 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-2.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">John Smith</strong></a> and <a href="#">42 other people</a>
<p>Have commented on your <a href="#">wall post</a></p>
</div>
<div class="feedbacks">
<span class="date">
24 Minutes Ago
</span>
<ul>
<li class="like"><a href="#">Like (15)</a></li>
<li class="comment"><a href="#">Comment (42)</a></li>
<li><a href="#">Share</a></li>
</ul>
</div>
</div>
</div>
<div class="block1x2 block">
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Tagged you in a <a href="#">photo</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-6.jpg" />
</div>
</div>
<div class="block1x2 block">
<div class="imgcontainer">
<img src="http://www.erhanbasa.com/files/facebook/img/dummy-6.jpg" />
</div>
<div class="commentcontainer">
<div class="peoples">
<a href="#"><strong class="peoplename">Amelia Ryant</strong></a>
<p>Tagged you in a <a href="#">photo</a></p>
<p><a>22 min ago</a></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Raw
script.js
// Author : Erhan Basa http://www.erhanbasa.com/facebooknewconcept.html
// Desginer : Fred Nerby http://nerby.com/project/facebook/
// If this is against the law just send me mail.
Raw
style.css
/* Author: Erhan Basa */
/* Thanks for design Fred Nerby : http://nerby.com/project/facebook/ */
/* It's not for money, it's just html practice and fun. */
/* Responsive Update: 12.01.2013 */
* {margin: 0; padding: 0;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
}
li {list-style:none;}
a {text-decoration:none;}
img {border:0;}
@import url(http://fonts.googleapis.com/css?family=Strait);
body {padding-top:99px;}
/* Header */
#header {width: 100%; height: 46px; background: #365d98; border-bottom: 1px solid #050b0b; position:fixed; top:0px; z-index:99999;}
#logo {width: 100px; float: left; margin-left: 20px; margin-top: 3px;}
#logo a img {max-width:100%;}
/* Jewels */
#jewel-container {width: 90px; margin-top: 8px; float:left;}
#jewel-container li {float:left;}
#jewel-container li:hover {background:#4b67a1;}
#jewel-container li a {background: url(http://www.erhanbasa.com/files/facebook/img/fb-sprite.png) no-repeat; width:24px; height:31px; display:block;}
#jewel-container li.requests a {background-position: -25px -221px;}
#jewel-container li.messages a {background-position: -56px -85px;}
#jewel-container li.notifications a {background-position: -50px -186px;}
/* Header Navigation */
#head-navigation {width:400px; float:left;}
#head-navigation li {float:left; margin:0 10px;}
#head-navigation li a {color:#fff; opacity: .7; font: normal 16px/46px 'Strait',sans-serif;}
#head-navigation li a:hover,
#head-navigation li a.current {opacity:1;}
/* Header Search */
#head-search {float:right; width:350px;}
#head-search span {float:left; color: #fff; font:normal 12px/46px 'Strait',sans-serif;}
#searchform {float:left; position:relative; margin-right:20px; margin-top:8px; }
#searchform input {width:250px; height:30px; background:#2a4675; border:0; border-radius: 18px; margin-left:10px; text-indent:20px; color:whitesmoke; box-shadow: inset 2px 2px 2px rgba(0,0,0,.15) ;}
#searchform input:focus {outline:0;}
#searchform input.btn {width:11px; height:13px; background: url(http://www.erhanbasa.com/files/facebook/img/fb-sprite.png) no-repeat -31px -350px; right: 15px; top: 10px; z-index:10; position:absolute; cursor:pointer;}
/* Timeline Header */
#timeline-head {height:53px; width: 100%; background: #1d1e23; position:fixed; top:46px; z-index:99999;}
#timeline-head .page-name {background: url(http://www.erhanbasa.com/files/facebook/img/name-icon.png) no-repeat left center; font: normal 20px/53px 'Strait',sans-serif; color:#d8d8d8; padding-left:40px; margin-left: 20px; display: inline-block; float:left; text-shadow: 1px 1px 1px rgba(0,0,0,.5); cursor:pointer;}
#timeline-head .page-name:hover {color:#fff;}
/* Timeline */
/****************/
/* Timeline SideBar */
/* #timeline-side {position: fixed; top: 99px; height: 100%; width: 20%; background: #1D1E23; float: left; left:-20%; z-index:99999;} */
/* #timeline.open {width:80%; box-shadow:-20px 0px 30px rgba(0, 0, 0, .4); float:left; position:relative;} */
/* --- */
/* Timeline layout */
#timeline div[class*="block1x"] {width:14.284%;}
#timeline div[class*="block2x"] {width:28.566%;}
#timeline div[class*="block3x"] {width:42.846%;}
#timeline div[class*="block"][class*="x1"] {height:250px;}
#timeline div[class*="block"][class*="x2"] {height:500px;}
#timeline div[class*="block"][class*="x3"] {height:750px;}
#timeline .block {float:left; overflow:hidden;}
#timeline .block .imgcontainer {height:50%; overflow:hidden;}
#timeline .block .imgcontainer img {width:110%;}
#timeline div[class^="block"][class*="x1"] .imgcontainer {height:100%;}
#timeline div[class^="block2x"][class*="x1"] .imgcontainer {width:50%; float:left; height:100%;}
#timeline div[class^="block2x"][class*="x1"] .commentcontainer {height:100%; width:50%; float:left;}
#timeline .block .commentcontainer {height:50%; position:relative;}
#timeline div[class*="block2x1"] .commentcontainer ,
#timeline div[class*="block1x2"] .commentcontainer {background: #365d98;}
#timeline div[class*="block2x3"] .imgcontainer {height:66.6%;}
#timeline div[class*="block2x3"] .commentcontainer {height: 33.4%;;}
#timeline div[class*="block3x2"] .commentcontainer:before,
#timeline div[class*="block2x3"] .commentcontainer:before {width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-bottom: 20px solid white; position: absolute; content: ''; top: -20px; left: 40px;}
/* Feedbacks */
#timeline .block .commentcontainer .feedbacks {height:38px; background:#ebeef5; position:absolute; bottom:0px; width:100%;}
#timeline .block .commentcontainer .feedbacks .date {font: normal 12px/38px 'Strait',sans-serif; color:#999; margin-left:14px;}
#timeline .block .commentcontainer .feedbacks ul {float:right; padding-right:10px;}
#timeline .block .commentcontainer .feedbacks ul li {float:left;}
#timeline .block .commentcontainer .feedbacks ul li a {color:#6d84b4; font: normal 11px/38px tahoma,sans-serif; margin: 0 5px;}
#timeline .block .commentcontainer .feedbacks ul li.comment a {background: url(http://www.erhanbasa.com/files/facebook/img/comment-icon.jpg) no-repeat left -1px; padding-left: 20px;}
#timeline .block .commentcontainer .feedbacks ul li.like a {background: url(http://www.erhanbasa.com/files/facebook/img/like-icon.jpg) no-repeat left -1px; padding-left: 20px;}
/* Peoples */
#timeline .block .commentcontainer .peoples {padding:40px; color:#999; font-family: 'Strait',sans-serif; font-size:12px;}
#timeline .block .commentcontainer .peoples .peoplename {color:#3b5998; font-size:14px; background: url(http://www.erhanbasa.com/files/facebook/img/white-star.jpg) no-repeat left center; padding-left: 18px;}
#timeline .block .commentcontainer .peoples a {color:#5f729b;}
#timeline .block .commentcontainer .peoples p {padding:10px 0; font-size:16px; background: url(http://www.erhanbasa.com/files/facebook/img/comm-notif-icon.jpg) no-repeat left center; padding-left:20px;}
#timeline div[class*="block2x1"] .commentcontainer .peoples .peoplename ,
#timeline div[class*="block1x2"] .commentcontainer .peoples .peoplename {background: none; color:white; display:block; text-align: center; padding-left: 0; font-size:13px;}
#timeline div[class*="block2x1"] .commentcontainer .peoples p ,
#timeline div[class*="block1x2"] .commentcontainer .peoples p {background: none; color:white; width: 100%; padding: 0; text-align: center; padding-top: 15px; font-size:14px;}
#timeline div[class*="block2x1"] .commentcontainer .peoples a ,
#timeline div[class*="block1x2"] .commentcontainer .peoples a { color:#7bc1f2;}
@media (max-width:1860px) {
#timeline .block .imgcontainer img {width:100%;}
#timeline div[class*="block"][class*="x1"] {height:150px;}
#timeline div[class*="block"][class*="x2"] {height:300px;}
#timeline div[class*="block"][class*="x3"] {height:450px;}
#timeline div[class*="block2x3"] .imgcontainer {height:50%;}
#timeline div[class*="block2x3"] .commentcontainer {height:50%;}
}
@media (max-width:1300px) {
#timeline .block .commentcontainer .peoples {padding:30px;}
#timeline .block .commentcontainer .peoples p {font-size: 10px!important; padding-top:5px;}
#timeline div[class*="block"] {width:33.3%; height:300px!important;}
#timeline div[class*="block2x3"] .imgcontainer {height:50%;}
#timeline div[class*="block2x3"] .commentcontainer {height:50%;}
#timeline div[class^="block2x"][class*="x1"] .commentcontainer {height:50%;}
#timeline div[class^="block2x"][class*="x1"] .imgcontainer img,
#timeline div[class^="block2x"][class*="x1"] .commentcontainer {height:100%;}
}
@media (max-width:1130px) {
#timeline .block .commentcontainer .peoples {padding:15px;}
#timeline .block .commentcontainer .peoples p:last-child {display:none;}
#timeline .block .commentcontainer .feedbacks .date {display:none;}
#head-navigation {width: 300px;}
#head-navigation li a {font: normal 11px/46px 'Strait',sans-serif;}
#head-search {width: 220px;}
#head-search span {display:none;}
#searchform input {width:200px;}
}
@media (max-width:960px) {
#timeline div[class*="block"] {width:33.3%; height:200px!important;}
}
@media (max-width:800px) {
#head-navigation {display:none;}
}
@media (max-width:650px) {
#timeline div[class*="block"] {width:50%; height:180px!important;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment