design-wip/index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class=""> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Coderwall</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site-header">
<div class="container">
<div class="main-nav">
<div class="logo">
<a href="index.html"><img src="img/logo.png"></a>
</div>
<ul class="inline menu">
<li><a href="index.html" class="active">Protips</a></li>
<li><a href="#">Job Board</a></li>
</ul>
<a href="#" class="user-block">
<img src="img/user-avatar.png" class="user-block__img"> <span class="user-block__user">tranhelen</span>
</a>
</div>
</div>
</header>
<nav class="secondary-menu">
<div class="container">
<div class="grid">
<div class="grid__item small--hide medium--two-thirds large--three-quarters">
<ul class="inline">
<li class="active"><a href="#">Latest</a></li>
<li><a href="#">Popular</a></li>
</ul>
</div>
<div class="grid__item medium--one-third large--one-quarter">
<a href="#" class="btn addprotip">
<span class="icon icon-plus"></span> New Protip
</a>
</div>
</div>
</div>
</nav>
<div class="page-body">
<div class="container">
<div class="secondary-menu--mobile">
<select>
<option>Fresh</option>
<option>Trend</option>
<option>Popular</option>
<option>Liked</option>
</select>
</div>
<div class="protip">
<div class="grid">
<div class="grid__item large--one-tenth">
<div class="grid grid--narrow">
<div class="grid__item small--one-quarter medium--one-sixth">
<a class="upvote--popular">
<span class="icon icon-arrow-up-upload"></span> 2
</a>
</div>
<div class="grid__item small--three-quarters medium--five-sixths large--hide relative">
<div class="author-block">
<img src="img/avatar1.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Maverick</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item large--nine-tenths">
<div class="grid grid--narrow relative">
<div class="grid__item large--six-eighths">
<p class="protip__content">
<a href="protip.html">
Super sweet Vim split manipulation on mac
<span class="protip__comments">
<span class="icon-comment"></span> 2 comments
</span>
</a>
</p>
</div>
<div class="grid__item small--hide medium--hide large--show large--two-eighths relative">
<div class="author-block">
<img src="img/avatar1.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Maverick</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="protip">
<div class="grid">
<div class="grid__item large--one-tenth">
<div class="grid grid--narrow">
<div class="grid__item small--one-quarter medium--one-sixth">
<a class="upvote--popular">
<span class="icon icon-arrow-up-upload"></span> 1
</a>
</div>
<div class="grid__item small--three-quarters medium--five-sixths large--hide relative">
<div class="author-block">
<img src="img/avatar2.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">irwin</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item large--nine-tenths">
<div class="grid grid--narrow relative">
<div class="grid__item large--six-eighths">
<p class="protip__content">
<a href="protip.html">
Importance of Element Indentation
<span class="protip__comments">
<span class="icon-comment"></span> 1 comment
</span>
</a>
</p>
</div>
<div class="grid__item small--hide medium--hide large--show large--two-eighths relative">
<div class="author-block">
<img src="img/avatar2.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">irwin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="protip">
<div class="grid">
<div class="grid__item large--one-tenth">
<div class="grid grid--narrow">
<div class="grid__item small--one-quarter medium--one-sixth">
<a class="upvote--popular">
<span class="icon icon-arrow-up-upload"></span> 6
</a>
</div>
<div class="grid__item small--three-quarters medium--five-sixths large--hide relative">
<div class="author-block">
<img src="img/avatar3.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Gavin</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item large--nine-tenths">
<div class="grid grid--narrow relative">
<div class="grid__item large--six-eighths">
<p class="protip__content">
<a href="protip.html">
Rubyists! Tap and bang your way to more succinct code.
<span class="protip__comments">
<span class="icon-comment"></span> 1 comment
</span>
</a>
</p>
</div>
<div class="grid__item small--hide medium--hide large--show large--two-eighths relative">
<div class="author-block">
<img src="img/avatar3.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Gavin</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="protip">
<div class="grid">
<div class="grid__item large--one-tenth">
<div class="grid grid--narrow">
<div class="grid__item small--one-quarter medium--one-sixth">
<a class="upvote">
<span class="icon icon-arrow-up-upload"></span> 8
</a>
</div>
<div class="grid__item small--three-quarters medium--five-sixths large--hide relative">
<div class="author-block">
<img src="img/avatar4.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Ryan</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item large--nine-tenths">
<div class="grid grid--narrow relative">
<div class="grid__item large--six-eighths">
<p class="protip__content">
<a href="protip.html">
Best practice: Team workflow for Github
<span class="protip__comments">
<span class="icon-comment"></span> 1 comment
</span>
</a>
</p>
</div>
<div class="grid__item small--hide medium--hide large--show large--two-eighths relative">
<div class="author-block">
<img src="img/avatar4.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Ryan</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="protip">
<div class="grid">
<div class="grid__item large--one-tenth">
<div class="grid grid--narrow">
<div class="grid__item small--one-quarter medium--one-sixth">
<a class="upvote">
<span class="icon icon-arrow-up-upload"></span> 0
</a>
</div>
<div class="grid__item small--three-quarters medium--five-sixths large--hide relative">
<div class="author-block">
<img src="img/avatar5.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">ma2gedev</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item large--nine-tenths">
<div class="grid grid--narrow relative">
<div class="grid__item large--six-eighths">
<p class="protip__content">
<a href="protip.html">
ChronoLogger logging is 1.5x faster than ruby's stdlib Logger
</a>
</p>
</div>
<div class="grid__item small--hide medium--hide large--show large--two-eighths relative">
<div class="author-block">
<img src="img/avatar5.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">ma2gedev</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="protip__job">
<div class="grid">
<div class="grid__item large--one-tenth">
<div class="grid grid--narrow">
<div class="grid__item small--one-quarter medium--one-sixth">
<span class="job__label">Job</span>
</div>
<div class="grid__item small--three-quarters medium--five-sixths large--hide relative">
<div class="author-block">
<img src="img/avatar6.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Speicher 210</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item large--nine-tenths">
<div class="grid grid--narrow relative">
<div class="grid__item large--six-eighths">
<a href="protip.html" class="job__title">PHP Software Engineer (m/f)</a>
<label class="job__loc">Hamburg • Full-time</label>
<p class="job__desc">Speicher 210 is looking for a skilled PHP developer. Your main activities will be application development and implementation of business related applications.</p>
</div>
<div class="grid__item small--hide medium--hide large--show large--two-eighths relative">
<div class="author-block">
<img src="img/avatar6.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Speicher 210</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="protip">
<div class="grid">
<div class="grid__item large--one-tenth">
<div class="grid grid--narrow">
<div class="grid__item small--one-quarter medium--one-sixth">
<a class="upvote">
<span class="icon icon-arrow-up-upload"></span> 1
</a>
</div>
<div class="grid__item small--three-quarters medium--five-sixths large--hide relative">
<div class="author-block">
<img src="img/avatar7.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">David</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item large--nine-tenths">
<div class="grid grid--narrow relative">
<div class="grid__item large--six-eighths">
<p class="protip__content">
<a href="protip.html">
Javascript's getElementsByClass Name Gotcha's
</a>
</p>
</div>
<div class="grid__item small--hide medium--hide large--show large--two-eighths relative">
<div class="author-block">
<img src="img/avatar7.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">David</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="protip">
<div class="grid">
<div class="grid__item large--one-tenth">
<div class="grid grid--narrow">
<div class="grid__item small--one-quarter medium--one-sixth">
<a class="upvote">
<span class="icon icon-arrow-up-upload"></span> 0
</a>
</div>
<div class="grid__item small--three-quarters medium--five-sixths large--hide relative">
<div class="author-block">
<img src="img/avatar8.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Louis</a>
<br><a href="#" class="author-block__company">Caroline's Comedy Club</a>
</div>
</div>
</div>
</div>
</div>
<div class="grid__item large--nine-tenths">
<div class="grid grid--narrow relative">
<div class="grid__item large--six-eighths">
<p class="protip__content">
<a href="protip.html">
CodeIgniter and Hashing
</a>
</p>
</div>
<div class="grid__item small--hide medium--hide large--show large--two-eighths relative">
<div class="author-block">
<img src="img/avatar8.png" class="author-block__img">
<div class="author-block__user">
<a href="#" class="author-block__username">Louis</a>
<br><a href="#" class="author-block__company">Caroline's Comedy Club</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pagination">
<div class="grid">
<div class="grid__item small--one-quarter medium--one-quarter large--one-eighth">
<a href="" class="btn btn--small prev"><span class="icon icon-arrow-left"></span> Prev</a>
</div>
<div class="grid__item push--small--one-half push--medium--one-half push--large--six-eighths small--one-quarter medium--one-quarter large--one-eighth text-right">
<a href="" class="btn btn--small next">Next <span class="icon icon-arrow-right"></span></a>
</div>
</div>
</div>
</div>
</div>
<footer class="site-footer">
<div class="container">
<div class="grid">
<div class="grid__item large--two-quarters small--text-center medium--text-center">
<ul class="inline footer-nav">
<li><a href="">API & Hacks</a></li>
<li><a href="">Privacy</a></li>
<li><a href="">Terms of Service</a></li>
</ul>
<p class="copy">Copyright © 2014 Assembly Made, Inc. All rights reserved.</p>
</div>
<div class="grid__item large--two-quarters small--text-center medium--text-center large--text-right">
<a href="https://twitter.com/coderwall" class="twitter-follow-button" data-show-count="false">Follow @coderwall</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<a href="https://mixpanel.com/f/partner" class="mixpanel"><img src="http://cdn.mxpnl.com/site_media/images/partner/badge_light.png" alt="Mobile Analytics" /></a>
</div>
</div>
</div>
</footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/highlight.js"></script>
<script>
hljs.initHighlightingOnLoad();
$('.upvote').on('click', function() {
$(this).toggleClass('upvote--voted');
});
$('.upvote--popular').on('click', function() {
$(this).toggleClass('upvote--popvoted');
});
</script>
</body>
</html>