Bootstrap snippet: Blog post with image

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: blog,post,image

<div class="container bootstrap snippet"> <div class="posts"> <article class="post"> <div class="banner-image"> <a href="" title="Welcome to Jekyll!"> <img src="" alt="Welcome to Jekyll! "> </a> </div> <h1 class="post-title"> <a href=""> Welcome to Jekyll! </a> </h1> <p class="post-meta"> <span class="categories"> jekyll and update </span> | <span class="post-date"> Jan 1, 2015 </span> </p> <p>You will find this post in your <code>_posts</code> directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run <code>jekyll serve</code>, which launches a web server and auto-regenerates your site when a file is updated.</p> </article> </div> </div>
.post, .page { margin-bottom: 2em; padding: 1em; background: #fff; -webkit-border-radius: 0.2em; -moz-border-radius: 0.2em; -ms-border-radius: 0.2em; -o-border-radius: 0.2em; border-radius: 0.2em; box-shadow: 0 0 10px rgba(0,0,0,0.1); overflow: hidden; } .post .banner-image, .page .banner-image, .post .banner_video, .page .banner_video { margin: -1em -1em 0 -1em; padding-bottom: 1em; } a, .post-title a { color: #205081; } h1, .h1 { font-size: 41px; } h1, .h1, h2, .h2, h3, .h3 { margin-top: 22px; margin-bottom: 11px; } h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: inherit; font-weight: 500; line-height: 1.3; color: #333; } .post-meta { color: #777; padding: 1.5em 0 2em 0; letter-spacing: 1px; } p { margin: 0 0 11px; line-height: 1.6; font-size: 20px; } .container { width: 90%; max-width: 768px; margin: 0 auto; }

Blog post with image

  Mar 20th 2015, 08:26