"comment"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/kamil/pen/yIroq?limit=all&page=2&q=comment" /> <style class="cp-pen-styles">@charset "UTF-8"; * { border: 0; margin: 0; padding: 0; outline: 0; } html { background-color: #34373e; font-family: 'Helvetica Neue', HelveticaNeue-Light, sans-serif; letter-spacing: 0.5px; } hr { width: 130px; height: 1px; background-color: #d4d4d4; margin: 0 auto; } h2 { font-size: 18px; } /* @group Mixins */ /* @end */ /* @group Main */ body section { width: 376px; margin: 15px auto; padding-bottom: 18px; background-color: #f4f4f4; -webkit-border-radius: 7px 7px 5px 5px; -moz-border-radius: 7px 7px 5px 5px; -ms-border-radius: 7px 7px 5px 5px; -o-border-radius: 7px 7px 5px 5px; border-radius: 7px 7px 5px 5px; /* @group Poster */ /* @end */ /* @group Add Comment */ /* @end */ /* @group Comments */ /* @end */ } body section #poster { width: 376px; height: 258px; position: relative; border-bottom: 5px solid #e53b39; } body section #poster img { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -ms-border-radius: 5px 5px 0 0; -o-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; } body section #poster #love { width: 54px; height: 54px; text-decoration: none; text-align: center; font-size: 20px; color: #fff; display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 2px solid #fff; position: absolute; top: 27px; right: 21px; -webkit-transition: background-color 0.3s ease-in-out; -moz-transition: background-color 0.3s ease-in-out; -ms-transition: background-color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } body section #poster #love:after { content: '♥'; position: relative; top: 14px; } body section #poster #love:hover, body section #poster #love.act { background-color: #e53b39; } body section #add { height: 85px; position: relative; } body section #add p { color: #34373c; font-size: 30px; font-weight: 600; position: absolute; top: 27px; left: 27px; } body section #add p span { font-size: 15px; font-weight: 300; } body section #add #comment { width: 125px; height: 40px; background-color: #1fc19a; position: absolute; top: 18px; right: 20px; text-align: center; color: #fff; font-weight: 500; font-size: 16px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -ms-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } body section #add #comment:after { content: 'Add Comment'; display: inline-block; margin-top: 9px; } body section #add #comment:hover { opacity: .8; } body section #comments { height: 100%; max-height: 126px; overflow: auto; -webkit-overflow-scrolling: touch; } body section #comments section { max-width: 340px; margin: 18px 0 0 18px; } body section #comments section img { width: 75px; height: 75px; float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; margin: 0 18px 0 0; } body section #comments section article { max-width: 240px; display: inline-block; margin-bottom: 18px; } body section #comments section article:last-child { margin-bottom: 0; } body section #comments section article p { margin-top: 5px; color: #82868f; font-size: 14px; } /* @end */ </style></head><body> <section> <div id="poster"> <!-- Poster image --> <img src="http://www.codepen.kamilczujowski.de/images/picture.jpg" alt="© Kamil Czujowski // @kamilczujowski " /> <!-- Love button --> <a href="#" id="love"></a> </div> <!-- Add Comment --> <div id="add"> <p> 2 <span> Comments </span> </p> <a href="#" id="comment"></a> </div> <!-- Break line --> <hr /> <!-- Comments --> <div id="comments"> <section> <!-- 1--> <img src="http://www.codepen.kamilczujowski.de/images/person1.jpg" alt="© Kamil Czujowski // @kamilczujowski " /> <article> <h1> Jannik Paare </h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </article> <!-- 2--> <img src="http://www.codepen.kamilczujowski.de/images/person2.jpg" alt="© Kamil Czujowski // @kamilczujowski " /> <article> <h1> Kamil Czujowski </h1> <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p> </article> </section> </div> </section> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script >/** *** A simple places comments widget with single finger scrolling for inner contents (made with CSS3) *** Author: Kamil Czujowski *** Made with ♥ *** https://github.com/kamilczujowski *** Twitter: @kamilczujowski *** Inspiration: http://dribbble.com/shots/1093954-Places-comments **/ $(function() { $('a', '#poster').on( 'click', function(e){ $(this).toggleClass('act'); e.preventDefault(); } ); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Rotating CSS Card
Bootstrap 4 User Rating Form / Comment Form
Comment Box
User Comment Example

Questions / Comments: