"quote card"
Bootstrap 3.3.0 Snippet by aswanik11

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>A Better Blockquote - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <style type="text/css"> blockquote{ border-left:none } .quote-badge{ background-color: rgba(0, 0, 0, 0.2); } .quote-box{ overflow: hidden; margin-top: -50px; padding-top: -100px; border-radius: 17px; background-color: #4ADFCC; margin-top: 25px; color:white; width: 325px; box-shadow: 2px 2px 2px 2px #E0E0E0; } .quotation-mark{ margin-top: -10px; font-weight: bold; font-size:100px; color:white; font-family: "Times New Roman", Georgia, Serif; } .quote-text{ font-size: 19px; margin-top: -65px; } </style> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <blockquote class="quote-box"> <p class="quotation-mark"> “ </p> <p class="quote-text"> Don't believe anything that you read on the internet, it may be fake. </p> <hr> <div class="blog-post-actions"> <p class="blog-post-bottom pull-left"> Abraham Lincoln </p> <p class="blog-post-bottom pull-right"> <span class="badge quote-badge">896</span>  ❤ </p> </div> </blockquote> </div> <script type="text/javascript"> </script> </body> </html>
.quote-badge{ background-color: rgba(0, 0, 0, 0.2); } .quote-box{ overflow: hidden; margin-top: -50px; padding-top: -100px; border-radius: 17px; background-color: #4ADFCC; margin-top: 25px; color:white; width: 325px; box-shadow: 2px 2px 2px 2px #E0E0E0; } .quotation-mark{ margin-top: -10px; font-weight: bold; font-size:100px; color:white; font-family: "Times New Roman", Georgia, Serif; } .quote-text{ font-size: 19px; margin-top: -65px; }

Questions / Comments: