HTML
<div class="container">
<div class="rectangle">
<div class="rectangle-heading">
</div>
<div class="rectangle-body">
<div class="article">
<div class="article-image"></div>
<div class="article-title"></div>
</div>
<div class="article">
<div class="article-image"></div>
<div class="article-title"></div>
</div>
<div class="article">
<div class="article-image"></div>
<div class="article-title"></div>
</div>
<div class="article">
<div class="article-image"></div>
<div class="article-title"></div>
</div>
<button class="btn-float btn-float-red btn-left">
i
</button>
</div>
</div>
<div class="rectangle rectangle-red">
<div class="rectangle-body">
<ul class="list">
<li class="list-item list-item-border">Size <span class="badge">8</span></li>
<li class="list-item list-item-border">Color <span class="badge">Red</span></li>
<li class="list-item">Opacity <span class="badge">.5</span></li>
</ul>
<button class="btn-float btn-right">
X
</button>
</div>
</div>
<a href="https://dribbble.com/shots/2804436-Grid" target="_blank" title="Credits" class="credits">
Credits - Oleg Frolov
</a>
</div>
CSS
body{
background-color:#E8FCFD;
}
.container{
width: 680px;
margin: 0 auto;
}
.rectangle{
width: 290px;
height: 516px;
float:left;
margin: 25px;
border-radius: 6px;
-webkit-box-shadow: 0 5px 59px -9px #95A9A3;
-moz-box-shadow: 0 5px 59px -9px #95A9A3;
box-shadow: 0 5px 59px -9px #95A9A3;
background-color: #FFF;
}
.rectangle-heading{
height: 60px;
border-radius: 6px 6px 0 0;
background-color:#4E5056;
-webkit-box-shadow: inset 0 15px 0 0 #43474C;
-moz-box-shadow: inset 0 15px 0 0 #43474C;
box-shadow: inset 0 15px 0 0 #43474C;
}
.rectangle-body{
position: relative;
height: 400px;
width: calc(100% - 40px);
float: left;
padding: 20px;
overflow-y: hidden;
}
.article{
width: calc(250px - 40px);
height: calc(110px - 40px);
float: left;
background-color: #E6E8E8;
border-radius: 6px;
padding: 20px;
margin-bottom: 20px;
}
.article-image,
.article-title{
border-radius: 4px;
background-color: #cbcccc;
}
.article-image{
display: block;
float: left;
width: 70px;
height: 70px;
}
.article-title{
float: right;
width: 120px;
height: 15px;
}
.rectangle-red{
background: #f6525e;
}
.list{
display: table;
width: 210px;
margin: 60% auto;
border-radius: 6px;
list-style: none;
color: #f6525e;
padding: 0;
background-color: #FFF;
font-family: 'Roboto';
-webkit-box-shadow: 0 5px 59px -9px #D13B4A;
-moz-box-shadow: 0 5px 59px -9px #D13B4A;
box-shadow: 0 5px 59px -9px #D13B4A;
}
.list .list-item{
width: calc(240px - 40px);
float: left;
padding: 20px;
font-weight: bold;
}
.list .list-item-border{
border-bottom: 2px solid #FDE9EB;
}
.list .badge{
font-weight: 100;
float: right;
}
.btn-float{
width: 40px;
height: 40px;
border-radius: 100%;
border: none;
color: #F6525E;
position: absolute;
z-index: 999;
outline: none;
font-size: 18px;
background-color: #FFF;
-webkit-box-shadow: 0 6px 20px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 0 6px 20px -4px rgba(0,0,0,0.75);
box-shadow: 0 6px 20px -4px rgba(0,0,0,0.75);
}
.btn-float:hover{
cursor: pointer;
}
.btn-left{
bottom: 15px;
left: 15px;
}
.btn-right{
top: 15px;
right: 15px;
}
.btn-float-red{
color:#FFF;
background-color: #F6525E;
}
.credits{
display:block;
margin: 0 auto;
text-align:center;
font-family:'Roboto';
text-decoration:none;
}
