Created
January 17, 2013 00:29
-
-
Save safe1981/4552401 to your computer and use it in GitHub Desktop.
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 :…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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