"Google Plus Styled Post"
Bootstrap 3.2.0 Snippet by ahmad19526

<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"> <div class="[ col-xs-12 col-sm-offset-1 col-sm-8 ]"> <div class="[ panel panel-default ] panel-google-plus"> <div class="dropdown"> <span class="dropdown-toggle" type="button" data-toggle="dropdown"> <span class="[ glyphicon glyphicon-chevron-down ]"></span> </span> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Invest</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Message Advisor</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">View history</a></li> </ul> </div> <div class="panel-google-plus-tags"> <ul> <li>#Equity</li> </ul> </div> <div class="panel-heading"> <img class="[ img-circle pull-left ]" src="https://lh3.googleusercontent.com/-CxXg7_7ylq4/AAAAAAAAAAI/AAAAAAAAAQ8/LhCIKQC5Aq4/s46-c-k-no/photo.jpg" alt="Mouse0270" /> <h3>Jim Cramer</h3> <h5><span>Closes in 6 days</span></h5> </div> <div class="panel-body"> <div class="col-sm-8"> <p> This investment is selling at 32% off its true value & offers profit sharing so you are getting paid to wait for a stock price increase. I will be investing $500 in "investment 1." The deadline to invest is October 14th at close of market. Expected holding period is three to six months. This has triple digit potential! </p> </div> <div class="col-sm-4"> <table> <tbody> <tr> <td>Exchange</td><td>NASDAQ</td> </tr> <tr> <td>Sector</td><td>Consumer Goods</td> </tr> <tr> <td>Expected Investment Period</td><td>3 - 6 months</td> </tr> </tbody> </table> </div> </div> <div class="panel-footer"> <button type="button" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-user ]"></span> 107 </button> <button type="button" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-trash ]"></span> </button> <div class="input-placeholder">Add a comment...</div> </div> <div class="panel-google-plus-comment"> <img class="img-circle" src="https://lh3.googleusercontent.com/uFp_tsTJboUY7kue5XAsGA=s46" alt="User Image" /> <div class="panel-google-plus-textarea"> <textarea rows="4"></textarea> <button type="submit" class="[ btn btn-success disabled ]">Post comment</button> <button type="reset" class="[ btn btn-default ]">Cancel</button> </div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="row"> <div class="[ col-xs-12 col-sm-offset-1 col-sm-8 ]"> <div class="[ panel panel-default ] panel-google-plus"> <div class="dropdown"> <span class="dropdown-toggle" type="button" data-toggle="dropdown"> <span class="[ glyphicon glyphicon-chevron-down ]"></span> </span> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Invest</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Message Advisor</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">View history</a></li> </ul> </div> <div class="panel-google-plus-tags"> <ul> <li>#Equity</li> </ul> </div> <div class="panel-heading"> <img class="[ img-circle pull-left ]" src="https://lh3.googleusercontent.com/-CxXg7_7ylq4/AAAAAAAAAAI/AAAAAAAAAQ8/LhCIKQC5Aq4/s46-c-k-no/photo.jpg" alt="Mouse0270" /> <h3>Louis Mario</h3> <h5><span>Closes in 6 days</span></h5> </div> <div class="panel-body"> <div class="col-sm-8"> <p> This investment has only been cheaper than it is today just three times in history. After all three of those times "Investment 1" soared by more than 100%. (Post-1989: Up 150%; Post-1999: Up 100%; Post-2008: Up 100%) Right now, we are able to buy into "Investment 1" at near-crisis prices – without a crisis. </p> </div> <div class="col-sm-4"> <table> <tbody> <tr> <td>Exchange</td><td>NASDAQ</td> </tr> <tr> <td>Sector</td><td>Consumer Goods</td> </tr> <tr> <td>Holding Durartion</td><td>2 years</td> </tr> </tbody> </table> </div> </div> <div class="panel-footer"> <button type="button" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-user ]"></span> 43 </button> <button type="button" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-trash ]"></span> </button> <div class="input-placeholder">Add a comment...</div> </div> <div class="panel-google-plus-comment"> <img class="img-circle" src="https://lh3.googleusercontent.com/uFp_tsTJboUY7kue5XAsGA=s46" alt="User Image" /> <div class="panel-google-plus-textarea"> <textarea rows="4"></textarea> <button type="submit" class="[ btn btn-success disabled ]">Post comment</button> <button type="reset" class="[ btn btn-default ]">Cancel</button> </div> <div class="clearfix"></div> </div> </div> </div> </div> <div class="row"> <div class="[ col-xs-12 col-sm-offset-1 col-sm-8 ]"> <div class="[ panel panel-default ] panel-google-plus"> <div class="dropdown"> <span class="dropdown-toggle" type="button" data-toggle="dropdown"> <span class="[ glyphicon glyphicon-chevron-down ]"></span> </span> <ul class="dropdown-menu" role="menu"> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Invest</a></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Message Advisor</a></li> <li role="presentation" class="divider"></li> <li role="presentation"><a role="menuitem" tabindex="-1" href="#">View history</a></li> </ul> </div> <div class="panel-google-plus-tags"> <ul> <li>#ETF</li> </ul> </div> <div class="panel-heading"> <img class="[ img-circle pull-left ]" src="https://lh3.googleusercontent.com/-CxXg7_7ylq4/AAAAAAAAAAI/AAAAAAAAAQ8/LhCIKQC5Aq4/s46-c-k-no/photo.jpg" alt="Mouse0270" /> <h3>Bill Gates</h3> <h5><span>Closes in 2 hours</span></h5> </div> <div class="panel-body"> <div class="col-sm-8"> <p> This investment is selling at 32% off its true value & offers profit sharing so you are getting paid to wait for a stock price increase. I will be investing $500 in "investment 1." The deadline to invest is October 14th at close of market. Expected holding period is three to six months. This has triple digit potential! </p> </div> <div class="col-sm-4"> <table> <tbody> <tr> <td>Exchange</td><td>NYSEArca</td> </tr> <tr> <td>Sector</td><td>Technology</td> </tr> <tr> <td>Holding Durartion</td><td>3 weeks</td> </tr> </tbody> </table> </div> </div> <div class="panel-footer"> <button type="button" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-user ]"></span> 21 </button> <button type="button" class="[ btn btn-default ]"> <span class="[ glyphicon glyphicon-trash ]"></span> </button> <div class="input-placeholder">Add a comment...</div> </div> <div class="panel-google-plus-comment"> <img class="img-circle" src="https://lh3.googleusercontent.com/uFp_tsTJboUY7kue5XAsGA=s46" alt="User Image" /> <div class="panel-google-plus-textarea"> <textarea rows="4"></textarea> <button type="submit" class="[ btn btn-success disabled ]">Post comment</button> <button type="reset" class="[ btn btn-default ]">Cancel</button> </div> <div class="clearfix"></div> </div> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Roboto:400,700); body { background-color: rgb(229, 229, 229); padding-top: 60px; padding-bottom: 30px; } .panel-google-plus { position: relative; border-radius: 0px; border: 1px solid rgb(216, 216, 216); font-family: 'Roboto', sans-serif; } .panel-google-plus > .dropdown { position: absolute; top: 5px; right: 15px; } .panel-google-plus > .dropdown > span > span { font-size: 10px; } .panel-google-plus > .dropdown > .dropdown-menu { left: initial; right: 0px; border-radius: 2px; } .panel-google-plus > .panel-google-plus-tags { position: absolute; top: 35px; right: -3px; } .panel-google-plus > .panel-google-plus-tags > ul { list-style: none; padding: 0px; margin: 0px; } .panel-google-plus > .panel-google-plus-tags > ul:hover { box-shadow: 0px 0px 3px rgb(0, 0, 0); box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25); } .panel-google-plus > .panel-google-plus-tags > ul > li { display: block; right: 0px; width: 0px; padding: 5px 0px 5px 0px; background-color: rgb(245, 245, 245); font-size: 12px; overflow: hidden; } .panel-google-plus > .panel-google-plus-tags > ul > li::after { content:""; position: absolute; top: 0px; right: 0px; height: 100%; border-right: 3px solid rgb(66, 127, 237); } .panel-google-plus > .panel-google-plus-tags > ul:hover > li, .panel-google-plus > .panel-google-plus-tags > ul > li:first-child { padding: 5px 15px 5px 10px; width: auto; cursor: pointer; margin-left: auto; } .panel-google-plus > .panel-google-plus-tags > ul:hover > li { background-color: rgb(255, 255, 255); } .panel-google-plus > .panel-google-plus-tags > ul > li:hover { background-color: rgb(66, 127, 237); color: rgb(255, 255, 255); } .panel-google-plus > .panel-heading, .panel-google-plus > .panel-footer { background-color: rgb(255, 255, 255); border-width: 0px; } .panel-google-plus > .panel-heading { margin-top: 20px; padding-bottom: 5px; } .panel-google-plus > .panel-heading > img { margin-right: 15px; } .panel-google-plus > .panel-heading > h3 { margin: 0px; font-size: 14px; font-weight: 700; } .panel-google-plus > .panel-heading > h5 { color: rgb(153, 153, 153); font-size: 12px; font-weight: 400; } .panel-google-plus > .panel-body { padding-top: 5px; font-size: 13px; } .panel-google-plus > .panel-body > .panel-google-plus-image { display: block; text-align: center; background-color: rgb(245, 245, 245); border: 1px solid rgb(217, 217, 217); } .panel-google-plus > .panel-body > .panel-google-plus-image > img { max-width: 100%; } .panel-google-plus > .panel-footer { font-size: 14px; font-weight: 700; min-height: 54px; } .panel-google-plus > .panel-footer > .btn { float: left; margin-right: 8px; } .panel-google-plus > .panel-footer > .input-placeholder { display: block; /*margin-left: 98px;*/ margin-left: 123px; color: rgb(153, 153, 153); font-size: 12px; font-weight: 400; padding: 8px 6px 7px; border: 1px solid rgb(217, 217, 217); border-radius: 2px; box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px 0px; } .panel-google-plus.panel-google-plus-show-comment > .panel-footer > .input-placeholder { display: none; } .panel-google-plus > .panel-google-plus-comment { display: none; padding: 10px 20px 15px 15px; border-top: 1px solid rgb(229, 229, 229); background-color: rgb(245, 245, 245); } .panel-google-plus.panel-google-plus-show-comment > .panel-google-plus-comment { display: block; } /*.panel-google-plus > .panel-google-plus-comment > img { float: left; }*/ .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea { float: right; width: calc(100% - 56px); } .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > textarea { display: block; /*margin-left: 60px; width: calc(100% - 56px);*/ width: 100%; background-color: rgb(255, 255, 255); border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px 0px; resize: vertical; } .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > .btn { margin-top: 10px; margin-right: 8px; width: 100%; } @media (min-width: 992px) { .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > .btn { width: auto; } } .panel-google-plus .btn { border-radius: 3px; } .panel-google-plus .btn-default { border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.0470588) 0px 1px 0px 0px; } .panel-google-plus .btn-default:hover, .panel-google-plus .btn-default:focus, .panel-google-plus .btn-default:active { background-color: rgb(255, 255, 255); border-color: rgb(0, 0, 0); } td:nth-child(1) { /* your stuff here */ font-weight: bold; } td:nth-child(2) { /* your stuff here */ padding-left: 6px; }
$(function () { $('.panel-google-plus > .panel-footer > .input-placeholder, .panel-google-plus > .panel-google-plus-comment > .panel-google-plus-textarea > button[type="reset"]').on('click', function(event) { var $panel = $(this).closest('.panel-google-plus'); $comment = $panel.find('.panel-google-plus-comment'); $comment.find('.btn:first-child').addClass('disabled'); $comment.find('textarea').val(''); $panel.toggleClass('panel-google-plus-show-comment'); if ($panel.hasClass('panel-google-plus-show-comment')) { $comment.find('textarea').focus(); } }); $('.panel-google-plus-comment > .panel-google-plus-textarea > textarea').on('keyup', function(event) { var $comment = $(this).closest('.panel-google-plus-comment'); $comment.find('button[type="submit"]').addClass('disabled'); if ($(this).val().length >= 1) { $comment.find('button[type="submit"]').removeClass('disabled'); } }); });

Related: See More


Questions / Comments: