<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="actionbar-appforum-main">
<ul>
<li class="thread-item">
<div class="actionbar-thread-main">
<div class="thread-bookmark">
<div class="pos-relative fillout">
<div class="thread-bookmark-icon">
<i class=" fa fa-check"></i>
</div>
</div>
</div>
<div class="thread-tag">
<i class="fa fa-file-o"></i><span> 12 | 4b</span>
</div>
<div class="thread-title thread-title-collapsed">
Angular 2 service call function in component Angular 2 service call function in
</div>
</div>
</li>
<li class="thread-item">
<div class="actionbar-thread-main">
<div class="thread-bookmark">
<div class="pos-relative fillout">
<div class="thread-bookmark-icon">
<i class=" fa fa-check"></i>
</div>
</div>
</div>
<div class="thread-tag">
<i class="fa fa-file-o"></i><span> 12 | 4b</span>
</div>
<div class="thread-title thread-title-collapsed">
Angular 2 service call function in component Angular 2 service call function in
</div>
</div>
</li>
<li class="thread-item">
<div class="actionbar-thread-main">
<div class="thread-bookmark">
<div class="pos-relative fillout">
<div class="thread-bookmark-icon">
<i class=" fa fa-check"></i>
</div>
</div>
</div>
<div class="thread-tag">
<i class="fa fa-file-o"></i><span> 12 | 4b</span>
</div>
<div class="thread-title thread-title-collapsed">
Angular 2 service call function in component Angular 2 service call function in
</div>
</div>
</li>
<li class="thread-item">
<div class="actionbar-thread-main">
<div class="thread-bookmark">
<div class="pos-relative fillout">
<div class="thread-bookmark-icon">
<i class=" fa fa-check"></i>
</div>
</div>
</div>
<div class="thread-tag">
<i class="fa fa-file-o"></i><span> 12 | 4b</span>
</div>
<div class="thread-title thread-title-collapsed">
Angular 2 service call function in component Angular 2 service call function in
</div>
</div>
</li>
<li class="thread-item">
<div class="actionbar-thread-main">
<div class="thread-bookmark">
<div class="pos-relative fillout">
<div class="thread-bookmark-icon">
<i class=" fa fa-check"></i>
</div>
</div>
</div>
<div class="thread-tag">
<i class="fa fa-file-o"></i><span> 12 | 4b</span>
</div>
<div class="thread-title thread-title-collapsed">
Angular 2 service call function in component Angular 2 service call function in
</div>
</div>
</li>
<li class="thread-item">
<div class="actionbar-thread-main">
<div class="thread-bookmark">
<div class="pos-relative fillout">
<div class="thread-bookmark-icon">
<i class=" fa fa-check"></i>
</div>
</div>
</div>
<div class="thread-tag">
<i class="fa fa-file-o"></i><span> 12 | 4b</span>
</div>
<div class="thread-title thread-title-collapsed">
Angular 2 service call function in component Angular 2 service call function in
</div>
</div>
</li>
<li class="thread-item">
<div class="actionbar-thread-main">
<div class="thread-bookmark">
<div class="pos-relative fillout">
<div class="thread-bookmark-icon">
<i class=" fa fa-check"></i>
</div>
</div>
</div>
<div class="thread-tag">
<i class="fa fa-file-o"></i><span> 12 | 4b</span>
</div>
<div class="thread-title thread-title-collapsed">
Angular 2 service call function in component Angular 2 service call function in
</div>
</div>
</li>
<li class="thread-item">
<div class="actionbar-thread-main">
<div class="thread-bookmark">
<div class="pos-relative fillout">
<div class="thread-bookmark-icon">
<i class=" fa fa-check"></i>
</div>
</div>
</div>
<div class="thread-tag">
<i class="fa fa-file-o"></i><span> 12 | 4b</span>
</div>
<div class="thread-title thread-title-collapsed">
Angular 2 service call function in component Angular 2 service call function in
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
// Code goes here
/* Styles go here */
.actionbar-appforum-main{
width: 100%;
padding: 20px;
overflow-x:auto;
overflow-y: hidden;
white-space: nowrap;
}
.thread-item {
display: inline-block;
margin-right:20px;
vertical-align:top;
}
.actionbar-thread-main {
position: relative;
height: 130px;
background-color: #fff;
box-shadow: 0 2px 3px 2px rgba(0, 0, 0, 0.2);
padding: 40px 10px 10px 10px;
width: 200px;
max-width: 800px;
-webkit-transition: width 500ms ease-in-out,padding 500ms ease-in-out,opacity 500ms ease-in-out;
-moz-transition: width 500ms ease-in-out,padding 500ms ease-in-out,opacity 500ms ease-in-out;
-ms-transition: width 500ms ease-in-out,padding 500ms ease-in-out,opacity 500ms ease-in-out;
-o-transition: width 500ms ease-in-out,padding 500ms ease-in-out,opacity 500ms ease-in-out;
transition: width 500ms ease-in-out,padding 500ms ease-in-out,opacity 500ms ease-in-out; }
.actionbar-thread-main .thread-bookmark {
background-color: #337AB7;
width: 30px;
height: 40px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 75%, 0 100%);
position: absolute;
z-index: 1;
top: -2px;
right: 15px; }
.actionbar-thread-main .thread-bookmark .thread-bookmark-icon {
position: absolute;
width: 100%;
z-index: 2;
text-align: center;
padding-top: 15%;
color: #fff;
font-size: 15px; }
.actionbar-thread-main .thread-tag {
background-color: #337AB7;
position: absolute;
left: -2px;
top: 4%;
width: 100px;
padding: 5px 10px;
text-align: center;
color: #fff; }
.actionbar-thread-main .thread-title {
font-size: 16px;
font-weight: 600;
color: #666;
white-space: normal; }
.actionbar-thread-main:hover{
width: 100%;
padding: 10px 55px 10px 120px; }
.test .thread-title {
white-space: normal; }
/*# sourceMappingURL=actionbar-thread-main.css.map */