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 &copy; 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>