<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 ---------->
<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="widget no-padding blank">
<div class="timeline-sec">
<ul>
<li>
<div class="timeline">
<div class="user-timeline">
<span><img src="http://www.foreclosure-support.com/images/johnny-depp.jpg" alt=""></span>
</div>
<div class="timeline-detail">
<div class="timeline-head">
<h3>Mohsin Irshad<span><i class="fa fa-clock-o"></i> 2 min ago</span><i class="red">Admin</i></h3>
</div>
<div class="timeline-content">
<p>Set it as the font <a href="#" title="">John Doe</a> in your applition, and copy and paste the icons. Print this page.</p>
<div class="progress w-tooltip">
<div style="width: 70%;" aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="purple progress-bar">
<span><i>uploading</i>70%</span>
</div>
</div>
<div data-toggle="buttons" class="btn-group btn-group-sm">
<label class="btn btn-default">
<input type="radio" checked="" name="options"><i class="fa fa-comments"></i> Reply
</label>
<label class="btn btn-default">
<input type="radio" name="options"> <i class="fa fa-thumbs-o-up"></i> Like
</label>
</div>
<form class="post-reply ng-pristine ng-valid">
<textarea placeholder="Write your comment"></textarea>
<i class="fa fa-comments"></i>
</form>
</div>
</div>
</div>
</li>
<li>
<div class="timeline">
<div class="user-timeline">
<span><img src="http://www.foreclosure-support.com/images/johnny-depp.jpg" alt=""></span>
</div>
<div class="timeline-detail">
<div class="timeline-head">
<h3>Haseeb Iftikhar<span><i class="fa fa-clock-o"></i> 2 hours ago</span><i class="purple">Mod</i></h3>
<div class="social-share">
<a title=""><i class="ti-sharethis"></i></a>
<ul class="social-btns">
<li><a title="Facebook" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-facebook"></i></a></li>
<li><a title="Google" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-google"></i></a></li>
<li><a title="Twitter" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-twitter"></i></a></li>
</ul>
</div>
</div>
<div class="timeline-content">
<p>at <a href="#" title="">Khana Zidi</a> Jonathan DOe Uploaded 4 new photos.</p>
<div class="timeline-gallery">
<ul>
<li><a title="Gallery Image" class="lightbox" href="javascript:"><i class="fa fa-search-plus"></i><img src="http://www.foreclosure-support.com/images/johnny-depp.jpg" alt=""></a></li>
<li><a title="Gallery Image" class="lightbox" href="javascript:"><i class="fa fa-search-plus"></i><img src="http://images.starpulse.com/pictures/2013/08/08/previews/Matt%20Damon-MTO-009587.jpg" alt=""></a></li>
<li><a title="Gallery Image" class="lightbox" href="javascript:"><i class="fa fa-search-plus"></i><img src="http://images.boomsbeat.com/data/images/full/32034/422817_original-jpg.jpg" alt=""></a></li>
<li><a title="Gallery Image" class="lightbox" href="javascript:"><i class="fa fa-search-plus"></i><img src="http://img2.timeinc.net/people/i/2006/celebdatabase/denzelwashington/denzel_washington1_300_400.jpg" alt=""></a></li>
</ul>
</div>
<div data-toggle="buttons" class="btn-group btn-group-sm">
<label class="btn btn-default">
<input type="radio" checked="" name="options"><i class="fa fa-comments"></i> Reply
</label>
<label class="btn btn-default">
<input type="radio" name="options"> <i class="fa fa-thumbs-o-up"></i> Like
</label>
</div>
<form class="post-reply ng-pristine ng-valid">
<textarea placeholder="Write your comment"></textarea>
<i class="fa fa-comments"></i>
</form>
</div>
</div>
</div>
</li>
<li>
<div class="timeline">
<div class="user-timeline">
<span><img src="http://www.foreclosure-support.com/images/johnny-depp.jpg" alt=""></span>
</div>
<div class="timeline-detail">
<div class="timeline-head">
<h3>Hussain Zaidi<span><i class="fa fa-clock-o"></i> 4 min ago</span><i class="green">User</i></h3>
<div class="social-share">
<a title=""><i class="ti-sharethis"></i></a>
<ul class="social-btns">
<li><a title="Facebook" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-facebook"></i></a></li>
<li><a title="Google" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-google"></i></a></li>
<li><a title="Twitter" data-toggle="tooltip" data-placement="left" href="#"><i class="ti-twitter"></i></a></li>
</ul>
</div>
</div>
<div class="timeline-content">
<p>Set it as the font <a href="#" title="">John Doe</a> in your applition, and copy and paste the icons. Print this page to PDF for te completet of vectors. Or to use othe the Font Aweo Awesome</p>
<div data-toggle="buttons" class="btn-group btn-group-sm">
<label class="btn btn-default">
<input type="radio" checked="" name="options"><i class="fa fa-comments"></i> Reply
</label>
<label class="btn btn-default">
<input type="radio" name="options"> <i class="fa fa-thumbs-o-up"></i> Like
</label>
</div>
<form class="post-reply ng-pristine ng-valid">
<textarea placeholder="Write your comment"></textarea>
<i class="fa fa-comments"></i>
</form>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
body {
background: none repeat scroll 0 0 #e6e9ee;
margin: 0;
overflow-x: hidden;
padding: 0;
}
body .no-padding {
padding: 0;
}
.widget {
float: left;
margin-top: 30px;
padding: 25px 30px;
width: 100%;
}
.timeline-sec {
float: left;
width: 100%;
}
.timeline-sec > ul {
float: left;
list-style: none outside none;
margin: 0;
padding: 0;
position: relative;
width: 100%;
}
.timeline-sec > ul:before {
background: none repeat scroll 0 0 #fafafa;
content: "";
height: 100%;
left: 22px;
position: absolute;
top: 0;
width: 2px;
}
.timeline-sec > ul > li {
float: left;
margin-bottom: 30px;
position: relative;
width: 100%;
}
.timeline {
float: left;
padding-left: 70px;
position: relative;
width: 100%;
}
.user-timeline {
left: 0;
position: absolute;
top: 0;
width: 70px;
}
.user-timeline > span {
float: left;
position: relative;
width: 100%;
}
.user-timeline > span > img {
border: 3px solid #f5f5f5;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
float: left;
height: 45px;
overflow: hidden;
width: 45px;
}
.timeline-detail {
background: none repeat scroll 0 0 #f5f5f5;
float: left;
position: relative;
width: 100%;
}
.timeline-detail:before {
border-bottom: 8px solid transparent;
border-right: 8px solid #fafafa;
border-top: 8px solid transparent;
content: "";
left: -7px;
position: absolute;
top: 12px;
}
.timeline-head {
background: none repeat scroll 0 0 #fafafa;
float: left;
width: 100%;
}
.timeline-head > h3 {
color: #333333;
float: left;
font-family: Roboto;
font-size: 14px;
font-weight: normal;
letter-spacing: 0.3px;
line-height: 22px;
margin: 0;
padding: 9px 0 9px 20px;
}
.timeline-head > h3 > span {
color: #999999;
font-size: 11px;
letter-spacing: 0.3px;
margin-left: 20px;
margin-right: 12px;
}
.timeline-head > h3 > i {
font-family: Lato;
font-size: 11px;
font-style: normal;
letter-spacing: 0.3px;
padding: 2px 6px;
}
.red, .support-ticket .removed, .edit-remove > li > .remove, .friend-list li > span.offline:before {
background: -moz-linear-gradient(top, #ff5959 0%, #ff3b3b 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3b3b), color-stop(100%,#f9f9f9));
background: -webkit-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: -o-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: -ms-linear-gradient(top, #ff5959 0%,#ff3b3b 100%);
background: linear-gradient(to bottom, #ff5959 0%,#ff3b3b 100%);
color: #fff;
}
.social-share {
float: right;
padding: 8px;
position: relative;
}
.social-share > a {
background: none repeat scroll 0 0 #fff;
color: #777777;
cursor: pointer;
float: right;
height: 25px;
line-height: 25px;
text-align: center;
width: 25px;
position: relative;
}
.social-btns {
float: right;
list-style: outside none none;
margin: -35px 0 0;
padding: 0;
}
.social-share > .social-btns {
margin: 0;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transform: rotateY(90deg);
-moz-transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-o-transform: rotateY(90deg);
transform: rotateY(90deg);
width: 25px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.social-share > .social-btns > li {
float: left;
margin: 0 0 2px;
width: 100%;
}
.social-btns > li {
float: right;
list-style: outside none none;
margin-left: 6px;
}
.social-btns > li > a {
float: left;
}
.social-share > .social-btns > li > a > i {
font-size: 13px;
height: 25px;
line-height: 25px;
width: 25px;
}
.social-btns > li > a > i.ti-facebook {
background: none repeat scroll 0 0 #3b5998;
}
.social-btns > li > a > i {
color: #fff;
float: left;
font-size: 16px;
height: 31px;
line-height: 31px;
text-align: center;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
width: 31px;
}
.timeline-content {
float: left;
padding: 15px 20px;
width: 100%;
}
.post-reply > textarea {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
color: #888888;
float: left;
font-family: Roboto;
font-size: 13px;
height: 36px;
letter-spacing: 0.3px;
padding: 7px 45px 7px 19px;
resize: vertical;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
width: 100%;
}
.progress.w-tooltip > .progress-bar {
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
position: relative;
}
.purple, .menu ul li:hover > a, .support-ticket .new, .toggle-switch span:before, .actionBar > a.buttonFinish, .error-sec ul > li:before {
background: -moz-linear-gradient(top, #8a7aff 0%, #715eff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#715eff), color-stop(100%,#f9f9f9));
background: -webkit-linear-gradient(top, #8a7aff 0%,#715eff 100%);
background: -o-linear-gradient(top, #8a7aff 0%,#715eff 100%);
background: -ms-linear-gradient(top, #8a7aff 0%,#715eff 100%);
background: linear-gradient(to bottom, #8a7aff 0%,#715eff 100%);
color: #fff;
}
.progress-bar {
float: left;
width: 0;
height: 100%;
font-size: 12px;
line-height: 20px;
color: #fff;
text-align: center;
background-color: #337ab7;
box-shadow: none;
-webkit-transition: width .6s ease;
-o-transition: width .6s ease;
transition: width .6s ease;
}
.timeline-gallery {
float: left;
margin-top: 15px;
width: 100%;
}
.timeline-gallery > ul {
float: left;
list-style: none outside none;
margin: -10px 0 0;
padding: 0;
width: 100%;
}
.timeline-gallery > ul > li {
float: left;
margin-right: 10px;
margin-top: 10px;
}
.timeline-gallery > ul > li > a {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
float: left;
overflow: hidden;
position: relative;
width: 100%;
}
.timeline-gallery > ul > li > a:before {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: "";
height: 90%;
left: 5%;
opacity: 0;
position: absolute;
top: 5%;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
width: 90%;
}
.timeline-gallery > ul > li > a i {
color: #fff;
left: 0;
margin-top: -5px;
opacity: 0;
position: absolute;
text-align: center;
top: 50%;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-ms-transform: scale(2);
-o-transform: scale(2);
transform: scale(2);
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
width: 100%;
z-index: 9;
}
.timeline-gallery > ul > li > a > img {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
float: left;
width: 70px;
height:70px;
}
.post-reply {
background: none repeat scroll 0 0 #ffffff;
float: left;
margin-top: 11px;
position: relative;
width: 100%;
}
.timeline-content > .btn-group {
float: left;
margin-top: 15px;
width: 100%;
}
.green, .support-ticket .done, .edit-remove > li > .edit, .toggle-switch *:checked + span:before, .friend-list li > span.online:before {
background: -moz-linear-gradient(top, #0fce33 0%, #07bf29 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#07bf29), color-stop(100%,#f9f9f9));
background: -webkit-linear-gradient(top, #0fce33 0%,#07bf29 100%);
background: -o-linear-gradient(top, #0fce33 0%,#07bf29 100%);
background: -ms-linear-gradient(top, #0fce33 0%,#07bf29 100%);
background: linear-gradient(to bottom, #0fce33 0%,#07bf29 100%);
color: #fff;
}
.timeline-content > .btn-group > label {
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
-ms-border-radius: 0 !important;
-o-border-radius: 0 !important;
border-radius: 0 !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
font-family: Roboto;
font-size: 11px;
letter-spacing: 0.3px;
padding: 2px 8px;
}
.post-reply > i {
color: #999999;
font-size: 14px;
margin-top: -7px;
position: absolute;
right: 13px;
top: 50%;
}
.timeline-gallery > ul > li > a:hover:before {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
.timeline-gallery > ul > li > a:before {
background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
content: "";
height: 90%;
left: 5%;
opacity: 0;
position: absolute;
top: 5%;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
width: 90%;
}
