"tests"
Bootstrap 3.2.0 Snippet by dotpot

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <div class="container"> <div class="row"> <section class='articles'> <article> <h2 class='article__title'>Responsive Anti-Patterns</h2> <div class="article__date">Oct 22, 2013</div> <p>You know, sometimes I just want to zoom out. I like the bird's eye view from time to time. Now that the web's gone all kinds of flexy, my poor little thumb just has to keep scrolling.</p> <p>Your hamburger menu doesn't impress me much either. If there's space for some navigation items, why not just put them there?</p> <p>Here's some code that might help you:</p> <pre class='highlight'> <code>* { display:block; }</code></pre> </article> </section> <section class='articles'> <article> <h2 class='article__title'>The title</h2> <div class="article__date">Oct 12, 2013</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque vel fugit quam necessitatibus quos eum laborum blanditiis consequatur enim aut. Sunt odit magnam vero odio tempore voluptatem animi facere culpa.</p> </article> </section> <section class='articles'> <article> <h2 class='article__title'>The title</h2> <div class="article__date">Sep 20, 2013</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque vel fugit quam necessitatibus quos eum laborum blanditiis consequatur enim aut. Sunt odit magnam vero odio tempore voluptatem animi facere culpa.</p> </article> </section> <section class='articles'> <article> <h2 class='article__title'>The title</h2> <div class="article__date">Sep 20, 2013</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque vel fugit quam necessitatibus quos eum laborum blanditiis consequatur enim aut. Sunt odit magnam vero odio tempore voluptatem animi facere culpa.</p> </article> </section> <section class='articles'> <article> <h2 class='article__title'>The title</h2> <div class="article__date">Sep 20, 2013</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque vel fugit quam necessitatibus quos eum laborum blanditiis consequatur enim aut. Sunt odit magnam vero odio tempore voluptatem animi facere culpa.</p> </article> </section> <section class='articles'> <article class='article'> <h2 class='article__title'>The title</h2> <div class="article__date">Sep 20, 2013</div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque vel fugit quam necessitatibus quos eum laborum blanditiis consequatur enim aut. Sunt odit magnam vero odio tempore voluptatem animi facere culpa.</p> </article> </section> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono); @import url(http://fonts.googleapis.com/css?family=Ubuntu:300,400); body{ margin-top:3em; font-family:'Ubuntu'; font-weight:300; background: '#ffffff'; } .articles { border-left:10px solid #eee; margin-left:140px; padding-left:1em; } article{ padding:0em 1em 4em 1em; position:relative; } .article__title{ margin-top:0; font-weight:300; font-size:2em; position:relative; top:-.25em; font-family:'Ubuntu' } .article__date{ position:absolute; font-family:'Ubuntu Mono'; top:7px; left:-142px; color:#666; transition:all .2s ease; &:after{ content:''; display:block; height:20px; width:20px; background:#fff; border:5px solid #eee; position:absolute; border-radius:100%; right:-40px; top:-10px; transition:all .2s ease; } } h2:hover + .article__date:after, .article__date:hover:after{ transform:scale(1.45) translateZ(0); transition:all .2s ease; } .highlight{ border:1px solid #ddd; background:#eee; padding:1em; border-radius:5px; color:#272727; code{font-family:'Ubuntu Mono';} } @media all and (max-width:35em){ .articles { margin-left:0px; border-left:0px solid #fff; } .article__date{ left:0; position:relative; &:after{display:none;} } .article__title{ top:0; margin-bottom:0; } .articles{ padding-left:0; } }

Related: See More


Questions / Comments: