<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <header class="site-header"></header> <div class="cover-photo"></div> <div class="body"> <section class="left-col user-info"> <div class="profile-avatar"> <div class="inner"></div> </div> <h1>Willabelle Ong</h1> <h2>Enthusiast</h2> <div class="meta"> <p><i class="fa fa-fw fa-map-marker"></i> Australia</p> <p><i class="fa fa-fw fa-link"></i> paledivision.com</p> <p><i class="fa fa-fw fa-clock-o"></i> Joined Dec 26, 2008</p> </div> </section> <section class="section center-col content"> <!-- Nav --> <nav class="profile-nav"> <ul> <li class="active">Activity</li> <li>Looks</li> <li>Hyped</li> <li>Loved</li> <li>Collections</li> </ul> </nav> <!-- Wil hyped X--> <div class="unit user-hyped"> <h3><a href="http://lookbook.nu/user/17530-Willabelle-O">Willabelle</a> hyped <a href="#more-looks-url">13 looks</a></h3> <p class="time">12 hours ago</p> <ul class="image-grid col-3"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <a href="#more-looks-url" class="more">View 7 more looks <i class="fa fa-angle-down"></i></a> </div> <!-- Wil fanned X--> <div class="unit user-hyped"> <h3><a href="http://lookbook.nu/user/17530-Willabelle-O">Willabelle</a> fanned <a href="#user-profile-url">Mizuho K</a></h3> <p class="time">16 hours ago</p> <ul class="image-grid col-3"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <a href="#more-looks-url" class="more">View 7 more looks <i class="fa fa-angle-down"></i></a> </div> </section> <section class="right-col"> </section> </div> <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67239/masonry.pkgd.min.js"></script> <script type="text/javascript" src="//use.typekit.net/psm0wvc.js"></script> <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

html { font-family: "proxima-nova",sans-serif; } /* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html, html a { -webkit-font-smoothing: antialiased !important; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); } a { text-decoration: none; color: inherit; } /* ==== */ .site-header { height: 44px; width: 100%; border-bottom: 1px solid #E1e1e1; } .cover-photo { width: 980px; height: 250px; margin: 0 auto; background-color: #f5f5f5; position: relative; z-index: 1; background-image: url(http://placekitten.com/980/250); } .body { width: 980px; margin: 0 auto; z-index: 4; position: relative; } .left-col, .right-col { width: 226px; float: left; min-height: 400px; position: relative; } .left-col { margin-right: 24px; position: relative; top: -150px; left: 8px; } .center-col { float: left; width: 480px; margin-right: 24px; min-height: 400px; } .right-col { background-color: blue; } /* LEFT COL */ .user-info h1 { font-size: 24px; font-weight: 600; line-height: 1.2; padding-top: 4px; } .user-info h2 { color: #666; font-size: 16px; } .user-info .meta { padding: 8px 0; font-size: 14px; } .user-info .meta p { line-height: 1.6; } .user-info .meta i { font-size: 0.95em; padding-right: 2px; } .profile-avatar { width: 218px; height: 218px; border: 1px solid #e1e1e1; background-color: #fff; right: 0; } .profile-avatar .inner { width: 206px; height: 206px; margin: 5px; background-image: url(http://placekitten.com/220/220); } /* CENTER */ .image-grid { width: 100%; } .image-grid li { float: left; background-color: #EFEFEF; } .image-grid.col-3 li { width: 32%; margin-right: 2%; margin-bottom: 2%; height: 0; padding-bottom: 30%; background-image: url(http://placekitten.com/200/200); -webkit-background-size: 100%; background-size: 100%; } .image-grid.col-3 li:nth-child(3n) { margin-right: 0; } .profile-nav { height: 46px; background-color: white; border-bottom: 2px solid #E1E1E1; margin-bottom: 8px; } .profile-nav ul > li { color: #999; font-size: 14px; float: left; line-height: 44px; font-weight: 600; padding: 0 22px; cursor: pointer; } .profile-nav li.active { color: #1E1E1E; } .content .unit { padding: 8px 0 10px 0; border-bottom: 2px solid #E1E1E1; margin-bottom: 8px; } .content .unit:last-child { margin-bottom: 16px; } .content .unit h3 { margin-bottom: 4px; color: #777; } .content .unit h3 a { color: #1e1e1e; font-weight: 600; } .content .unit p.time { color: #777; font-size: 14px; margin-bottom: 8px; } .content .unit .more { font-size: 14px; color: #777; } .content .unit .more a { color: #777; }