"Material Design Blog Post"
Bootstrap 3.0.0 Snippet by NaszvadiG

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-6"> <section class="blog-post"> <div class="panel panel-default"> <img src="http://lorempixel.com/800/400/" class="img-responsive"> <div class="panel-body"> <div class="blog-post-meta"> <span class="label label-light">News</span> <p class="blog-post-date pull-right">February 16, 2016</p> </div> <div class="blog-post-content"> <a href="https://peexaweb.com" target="_blank"> <h2 class="blog-post-title">Materialize Tutorial for Beginners</h2> </a> <p>Materialize is a responsive front-end development framework based on Google’s Material Design Language and built with HTML, CSS and JavaScript. In this tutorial I will explain what material design is and then we will build a responsive website using Materialize.</p> <a class="btn btn-more" href="https://peexaweb.com">Read more</a> <a class="blog-post-share pull-right" href="#"> <i class="material-icons"></i> </a> </div> </div> </div> </section><!-- /.blog-post --> </div> </div> </div> </body> </html>
.blog-post{ margin-bottom: 30px; } .blog-post .panel{ border: none; } .blog-post .blog-post-title{ margin-bottom: 5px; font-size: 24px; font-weight: 400; color: #333; text-decoration: none; } .blog-post .blog-post-meta { padding: 16px 22px; color: #999; display: block; border-bottom: 1px solid #EDEDED; } .blog-post .label-light{ background-color: #F44336; } .blog-post .blog-post-content { padding: 16px 22px; } .blog-post .blog-post-content a{ text-decoration: none; } .blog-post .blog-post-content p{ color: #666; } .blog-post .blog-post-content .btn-more, .blog-post .blog-post-content .blog-post-share{ color: #F44336; } .blog-post .blog-post-content .btn-more{ padding: 0; text-transform: uppercase; }

Related: See More

Questions / Comments: