<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/chakachuk/pen/gxNyYN?limit=all&page=15&q=comment" />
<style class="cp-pen-styles">#commentsystem {
margin-top: 50px;
margin-left: 20px;
width: 577px;
}
#comment {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
background: rgba(0, 0, 0, 0);
overflow: hidden;
resize: none;
padding: 13px 17px;
position: relative;
z-index: 100;
width: 471px;
font-weight: 500;
font-size: 15px;
margin-left: 60px;
display: block;
border-radius: 25px;
outline: none;
border: 1px solid #bec2c9;
}
#comment:focus {
outline: none;
}
#profpicture {
position: absolute;
overflow: hidden;
width: 48px;
height: 48px;
border-radius: 50%;
}
#send {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: rgba(0, 0, 0, 0);
box-shadow: 0 0 0 2px #4267b2;
border: 0;
height: 30px;
width: 80px;
line-height: 20px;
font-weight: 700;
font-size: 15px;
color: #4267b2;
position: relative;
margin-left: 460px;
margin-top: 10px;
margin-bottom: 5px;
border-radius: 30px;
transition: all 0.15s ease;
cursor: pointer;
outline: none;
}
#send:hover {
background: #4267b2;
color: #fff;
}
#send.pro {
pointer-events:none;
background-color: #b5b5b5;
background-image: url("http://svgshare.com/i/3WU.svg");
background-repeat: no-repeat;
background-position: center center;
box-shadow: 0 0 0 2px #b5b5b5 !important;
color: #fff;
cursor: default;
transition: background-color 0.2s ease;
}
#send.finish {
pointer-events:none;
background: #4cd964;
box-shadow: 0 0 0 2px #4cd964 !important;
transition: background-color, border-color 0.2s ease;
}
#send.finish:after {
content: "";
pointer-events:none;
display: block;
position: absolute;
width: 14px;
height: 6px;
border-bottom: 4px #fff solid;
border-left: 4px #fff solid;
z-index: 9999;
transform: rotate(-45deg);
margin: -7px 0px 0px 26px;
animation: fade 0.8s ease forwards;
}
#send[disabled=disabled], #send:disabled {
pointer-events:none;
color: #bec2c9;
box-shadow: 0 0 0 2px #bec2c9;
}
#alsopost {
position: absolute;
margin-left: 120px;
font-family: sans-serif;
font-size: 12px;
margin-top: 19px;
}
#count {
position: absolute;
margin-left: 375px;
font-family: sans-serif;
font-size: 18px;
margin-top: 15px;
}
#commenttext {
width: 80%;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
}
#commentbubble {
padding-left: 0;
list-style: none;
margin-top: 45px;
}
#commentwrap {
display: flex;
flex-direction: row;
margin: 20px;
}
#commentself {
justify-content: flex-start;
display: flex;
align-items: center;
width: 100%;
}
#messenger-bulle {
background: #3375da;
text-shadow: 0 0 2px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
border-radius: 10px;
padding-left: 10px;
padding-bottom: 7px;
padding-top: 4px;
padding-right: 7px;
color: #fff;
font-size: .8em;
display: inline-block;
margin: 0px 5px;
max-width: 100%;
position: relative;
word-wrap: break-word;
}
#reply-button {
width: 27px;
height: 27px;
border-radius: 30px !important;
padding: 0px;
line-height: 27px;
font-size: .75em;
text-align: center;
vertical-align: middle;
cursor: pointer;
position: relative;
display: table;
border: 1px solid #999;
}
#reply-button:hover {
background-color: #e5e5e5;
background-image: none;
border-color: #adadad;
}
#reply-button:active {
transform: perspective(1px) translateZ(-.04px);
}
#bullemeta {
display: block;
position: absolute;
width: 100%;
height: 20px;
color: grey;
text-align: center;
bottom: -25px;
font-weight: 600;
font-size: .8em;
margin-left: -11px;
}
.switch {
position: absolute;
margin-left: 60px;
margin-top: 5px;
display: inline-block;
width: 72px;
height: 40px;
cursor: pointer;
transform: scale(0.4);
-ms-transform: scale(0.4);
-webkit-transform: scale(0.4);
}
.switch .switch-toggle {
cursor: pointer;
-webkit-transition: background-color .25s ease;
-moz-transition: background-color .25s ease;
transition: background-color .25s ease;
padding: 1px;
border-radius: 30px;
background-color: #bec2c9;
}
.switch a {
cursor: pointer;
}
.switch input[type=checkbox], .switch input[type=radio] {
margin-right: 4px;
box-sizing: border-box;
padding: 0;
}
.switch .switch-control {
opacity: 0;
visibility: hidden;
}
.switch .switch-control:checked + .switch-toggle .switch-handle {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
background-color: #fff;
}
.switch .switch-control:checked {
pointer-events: none;
}
.switch .switch-control, .switch .switch-toggle {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
.switch label {
display: inline-block;
margin-left: 5px;
font-size: 14px;
}
.switch .switch-handle {
-webkit-transition: -webkit-transform .25s ease;
-moz-transition: -moz-transform .25s ease;
transition: transform .25s ease;
position: absolute;
top: 4px;
left: 4px;
display: inline-block;
width: 33px;
height: 33px;
margin: 0;
border-radius: 100%;
background-color: #fff;
cursor: pointer;
}
.switch .switch-handle span {
position: absolute;
width: 100%;
height: 100%;
font-size: 16px;
line-height: 33px;
color: #43547d;
text-align: center;
}
.switch .fa {
display: inline-block;
font: normal normal normal 20px/1 FontAwesome;
margin-top: 7px;
margin-right: 1px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.switch-facebook .switch-control:checked + .switch-toggle {
background-color: #3b5998;
}
.tooltiptext {
visibility: hidden;
width: 50px;
background-color: #343436;
color: #fff;
text-align: center;
border-radius: 4px;
position: absolute;
left: 130%;
z-index: 1;
opacity: 0;
transition: opacity .8s;
}
.tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent #343436 transparent transparent;
}
#reply-button:hover .tooltiptext {
visibility: visible;
opacity: 1;
pointer-events: none;
}
#like-holder {
border: 2px solid #fff;
box-shadow: 0px 3px 6px 0px rgba(102, 102, 102, 0.88);
border-radius: 30px;
cursor: pointer;
background: #fff;
display: block;
color: #343436;
text-shadow: none;
text-decoration: none;
font-size: 15px;
line-height: 20px;
font-weight: 600;
padding: 0;
margin: 0;
right: 0;
position: absolute;
text-align: center;
vertical-align: middle;
transform: scale(0.9);
}
.like-main-emo {
left: 7px;
top: 1px;
position: absolute;
background-image: url(https://s1.postimg.org/38dem8ikhr/YMI6h_VALym_Y.png);
background-repeat: no-repeat;
background-position: 0px -193px;
width: 19px;
height: 19px;
}
.like-main {
position: relative;
}
.like {
font-weight: 600;
font-size: 14px;
margin: 0 5px 0 29px;
cursor: pointer;
color: #4b4f56;
}
.like-text-like {
color: rgb(88, 144, 255);
}
.like-main-like {
left: 7px;
top: 1px;
position: absolute;
background-image: url(https://s1.postimg.org/38dem8ikhr/YMI6h_VALym_Y.png);
background-repeat: no-repeat;
background-position: 0 -174px;
width: 19px;
height: 19px;
}
#like-holder:active {
transform: perspective(1px) translateZ(-.04px);
}
#like-holder .likecount {
visibility: hidden;
background-color: rgba(17, 17, 17, 0.66);
color: #fff;
text-align: center;
vertical-align: middle;
font-weight: 600;
border-radius: 5px;
padding: 5px 5px;
position: absolute;
z-index: 1;
bottom: 150%;
right: 0;
left: 0;
margin: auto;
opacity: 0;
transition: opacity .6s;
}
#like-holder .likecount::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: rgba(17, 17, 17, 0.66) transparent transparent transparent;
}
#like-holder:hover .likecount {
visibility: visible;
opacity: 1;
pointer-events: none;
}
#replytext {
width: 85%;
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
margin-left: 7px;
}
#replybubble {
padding-left: 0;
list-style: none;
margin-top: 27px;
}
#reply-messenger-bulle {
background: rgba(204, 204, 204, 0.7);
border-radius: 10px;
padding-left: 10px;
padding-bottom: 7px;
padding-top: 4px;
padding-right: 7px;
color: #222;
font-size: .8em;
display: inline-block;
margin: 0px 2px;
max-width: 100%;
position: relative;
word-wrap: break-word;
}
#reply-comment {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
background: rgba(0, 0, 0, 0);
overflow: hidden;
resize: none;
padding: 6px 15px;
width: 315px;
font-size: 15px;
margin-top: 27px;
margin-left: 70px;
display: block;
border-radius: 25px;
outline: none;
border: 1px solid #bec2c9;
}
#reply-profpicture {
position: absolute;
margin-left: 19px;
margin-top: -7px;
overflow: hidden;
width: 48px;
height: 48px;
border-radius: 50%;
transform: scale(0.75);
}
#reply-send {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background: rgba(0, 0, 0, 0);
border: 0;
width: 30px;
height: 30px;
background-image: url(https://s1.postimg.org/61nh2tvfvz/sendbtn.png);
background-repeat: no-repeat;
position: absolute;
margin-left: 385px;
margin-top: -32px;
border-radius: 30px;
transition: all 0.25s ease;
cursor: pointer;
outline: none;
opacity: 0.85;
transition: opacity .6s;
}
#reply-send:hover {
opacity: 1;
}
#reply-send[disabled=disabled], #reply-send:disabled {
pointer-events:none;
display:none;
}
#reply {
display: none;
}
#logintopost {
position: relative;
background: rgba(0, 0, 0, 0);
color: #365899;
width: 300px;
-webkit-transition: all .15s;
transition: all .15s;
overflow: hidden;
margin-top: 0px;
margin-left: 160px;
display: none;
}
#loginbtn {
position: relative;
display:flex;
align-items: center;
justify-content: center;
margin: 10px auto;
width: 150px;
height: 35px;
background: #0084ff;
border-radius: 5px;
cursor:pointer;
transition: all 0.7s ease;
}
#loginbtn::before {
position: absolute;
display: block;
content: '';
top: 0;
left: 0;
width: 150px;
height: 35px;
border-radius: 5px;
background: #0084ff;
z-index: -1;
animation: pulse 1.2s ease infinite;
}
@keyframes pulse {
0% {
transform: scale(1, 1);
}
50% {
opacity: 0.3;
}
100% {
transform: scale(1.5);
opacity: 0;
}
}
#loginbtn:hover {
background: #365899;
}
#loginbtn:hover::before {
background: #365899;
}
#logintext {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #fff;
font-size: 16px;
font-weight: 600;
}
#reply-logintopost {
position: relative;
background: rgba(0, 0, 0, 0);
color: #365899;
width: 300px;
-webkit-transition: all .15s;
transition: all .15s;
overflow: hidden;
margin-top: 0px;
margin-left: 85px;
display: none;
-ms-transform: scale(0.8); /* IE 9 */
-webkit-transform: scale(0.8); /* Safari */
transform: scale(0.8);
}
#reply-loginbtn {
position: relative;
display:flex;
align-items: center;
justify-content: center;
margin: 10px auto;
width: 150px;
height: 35px;
background: #0084ff;
border-radius: 5px;
cursor:pointer;
transition: all 0.7s ease;
}
#reply-loginbtn::before {
position: absolute;
display: block;
content: '';
top: 0;
left: 0;
width: 150px;
height: 35px;
border-radius: 5px;
background: #0084ff;
z-index: -1;
animation: pulse 1.2s ease infinite;
}
#reply-loginbtn:hover {
background: #365899;
}
#reply-loginbtn:hover::before {
background: #365899;
}
#reply-logintext {
font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #fff;
font-size: 16px;
font-weight: 600;
}</style></head><body>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<div id="commentsystem">
<div id="profpicture">
<iframe src="https://www.facebook.com/plugins/feedback.php?api_key=113869198637480&href=codepen.io&numposts=5&sdk=joey&version=v2.10&width=500" frameborder="0" style="position: absolute; width: 500px; height: 118px; margin-left: -8px; margin-top: -67px;" allowtransparency="true"></iframe>
</div>
<textarea minlenght="10" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="comment" name="comment" rows='1' placeholder='Write a comment...'></textarea>
<div id="logintopost">
<div id="loginbtn">
<span class="fa-stack" style="font-size:16px;">
<i class="fa fa-circle-thin fa-stack-2x fa-inverse"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
<p id="logintext">Log in to post</p>
</div>
</div>
<div class="switch switch-facebook">
<input id="fb-toggle" class="switch-control" type="checkbox">
<label class="switch-toggle" for="fb-toggle">
<div class="switch-handle">
<span><i class="fa fa-facebook"></i></span>
</div>
</label>
</div>
<span id="alsopost">Also post on Facebook</span>
<span id="count"></span>
<button id="send" disabled><i class="fa fa-commenting-o" style="font-size: 18px;"></i> POST</button>
<ul id="commenttext">
<li id="commentbubble">
<div style="position: absolute; margin-left: -28px; overflow: hidden; width: 48px; height: 48px; border-radius: 50%; background-image:url('https://s1.postimg.org/39esn2s5lr/j_U1nlt4_J_normal.jpg')"></div>
<div id="commentwrap">
<div id="commentself">
<p id="messenger-bulle">I do like this comment system as it is very modern and beautiful. Complitely Facebook Messenger style!
<span id="bullemeta">Just Now</span>
<span id="like-holder">
<span class=" like-main"="">
<span class="like-main-emo"></span>
<span class="like">Like</span>
<span class="likecount">1.2k</span>
</span>
</p>
<div id="reply-button"><i class="fa fa-reply" style="color: #797c82;"></i>
<span class="tooltiptext">Reply</span>
</div>
</li>
<div id="reply">
<div id="reply-profpicture">
<iframe src="https://www.facebook.com/plugins/feedback.php?api_key=113869198637480&href=codepen.io&numposts=5&sdk=joey&version=v2.10&width=500" frameborder="0" style="position: absolute; width: 500px; height: 118px; margin-left: -8px; margin-top: -67px;" allowtransparency="true"></iframe>
</div>
<textarea minlenght="10" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" id="reply-comment" name="comment" rows='1' placeholder='Write a reply...' ></textarea>
<button id="reply-send" disabled></button>
<div id="reply-logintopost">
<div id="reply-loginbtn">
<span class="fa-stack" style="font-size:16px;">
<i class="fa fa-circle-thin fa-stack-2x fa-inverse"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
<p id="reply-logintext">Log in to post</p>
</div>
</div>
</div>
<li id="commentbubble">
<div style="position: absolute; margin-left: -28px; overflow: hidden; width: 48px; height: 48px; border-radius: 50%; background-image:url('https://s1.postimg.org/5bulb4qixb/image.jpg')"></div>
<div id="commentwrap">
<div id="commentself">
<p id="messenger-bulle">Wow. Very good comment system. Easy and beautiful
<span id="bullemeta">2 hour ago</span>
<span id="like-holder">
<span class=" like-main"="">
<span class="like-main-emo"></span>
<span class="like">Like</span>
<span class="likecount">972</span>
</span>
</p>
<div id="reply-button"><i class="fa fa-reply" style="color: #797c82;"></i>
<span class="tooltiptext">Reply</span>
</div>
</li>
<ul id="replytext">
<li id="replybubble">
<div style="position: absolute; margin-left: -28px; margin-top: -6px; overflow: hidden; width: 48px; height: 48px; border-radius: 50%; transform: scale(0.75); background-image:url('https://s1.postimg.org/833nj7c7jj/image.jpg')"></div>
<div id="commentwrap">
<div id="commentself">
<p id="reply-messenger-bulle">You are true. It is very easy to use
<span id="bullemeta">39 minute ago</span>
<span id="like-holder">
<span class="like-main" =""="">
<span class="like-main-emo"></span>
<span class="like">Like</span>
<span class="likecount">511</span>
</span>
</span>
</p>
</div>
</div>
</li>
<li id="replybubble">
<div style="position: absolute; margin-left: -28px; margin-top: -6px; overflow: hidden; width: 48px; height: 48px; border-radius: 50%; transform: scale(0.75); background-image:url('https://s1.postimg.org/5bulb4qixb/image.jpg')"></div>
<div id="commentwrap">
<div id="commentself">
<p id="reply-messenger-bulle">Yeah. I think this way too dear
