<aside class="love-text"> Inspired from <a href="https://dribbble.com/shots/5538143-Project-management-tool-Projects-Card-view" target="_blank"> this </a> Dribbble Shot. <br/> <br/> <span class="desc">With <i class="fa fa-heart" aria-hidden="true"></i> from </span><br/> Nathan5x <br/>
</aside>
<div class="container">
<div class="content">
<section class="sidebar">
<div class="logo">
<i class="fa fa-instagram icon" aria-hidden="true"></i>
</div>
<nav>
<ul class="menu-options">
<li> <i class="fa fa-home icon" aria-hidden="true"></i> </li>
<li class="selected"> <i class="fa fa-th-large icon" aria-hidden="true"></i> </li>
<li> <i class="fa fa-calendar icon" aria-hidden="true"></i> </li>
<li> <i class="fa fa-comment-o icon" aria-hidden="true"></i> </li>
<li> <i class="fa fa-clock-o icon" aria-hidden="true"></i> </li>
<li> <i class="fa fa-user-o icon" aria-hidden="true"></i> </li>
<li> <i class="fa fa-wrench icon" aria-hidden="true"></i> </li>
</ul>
</nav>
<div class="more-options">
<i class="fa fa-ellipsis-h icon" aria-hidden="true"></i>
</div>
</section>
<section class="main-content">
<div class="app">
<div class="fab-icon"> + </div>
<header class="sub-menu">
<div class="title"> Projects </div>
<ul class="menu">
<li> All
<div class="badge"> 87 </div>
</li>
<li class="selected"> Current
<div class="badge"> 6 </div>
</li>
<li> Pending
<div class="badge"> 2 </div>
</li>
<li> Completed
<div class="badge"> 79 </div>
</li>
<li> Failed </li>
</ul>
<div class="user-options">
<div class="icon"> <i class="fa fa-search" aria-hidden="true"></i> </div>
<div class="icon"> <i class="fa fa-bell-o" aria-hidden="true"></i>
<div class="badge"> 3 </div>
</div>
<div class="icon user-img"> <img src="https://source.unsplash.com/36x36/?human" alt="Image 001" /> </div>
</div>
</header>
<section class="app-content">
<header>
<div class="searchbox">
<div class="icon"> <i class="fa fa-search" aria-hidden="true"></i> </div>
<input type="text" name="search" placeholder="Search a project" class="search-text"> </input>
</div>
<div class="app-list-options">
<div class="sort-dropdown"> Sort by <span class="by"> Project progress </span> <i class="fa fa-sort-amount-desc" aria-hidden="true"></i>
<div class="drop"> <i class="fa fa-caret-down" aria-hidden="true"></i> </div>
</div>
<div class="icon"> <i class="fa fa-filter" aria-hidden="true"></i> </div>
<div class="display-group">
<div class="icon"> <i class="fa fa-bars" aria-hidden="true"></i> </div>
<div class="icon selected"> <i class="fa fa-th" aria-hidden="true"></i> </div>
</div>
</div>
</header>
<ul class="projects">
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?brands" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Sports Interactive </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> sportsinteractive.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:94%" data-value="94"></p>
<progress max="100" value="94" data-value="94"> 94% </progress>
</div>
<div class="footer-row">
<div class="days danger"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 2 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?brand" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Homechoice </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> homchoice.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:64%" data-value="64"></p>
<progress max="100" value="64" data-value="64"> 64% </progress>
</div>
<div class="footer-row">
<div class="days warning"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 4 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?icon" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Big Money Real Estate </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> bigmoneyrealestate.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:59%" data-value="59"></p>
<progress max="100" value="59" data-value="59"> 59% </progress>
</div>
<div class="footer-row">
<div class="days warning"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 5 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?adventure" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Springfield media </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> springfieldmedia.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:94%" data-value="94"></p>
<progress max="100" value="94" data-value="94"> 94% </progress>
</div>
<div class="footer-row">
<div class="days"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 7 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?flower" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Regular Logistics </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> regularlogistics.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:44%" data-value="44"></p>
<progress max="100" value="44" data-value="44"> 94% </progress>
</div>
<div class="footer-row">
<div class="days"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 9 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?brands" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Foursquare Agency </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> foursquareagency.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:39%" data-value="39"></p>
<progress max="100" value="39" data-value="39"> 39% </progress>
</div>
<div class="footer-row">
<div class="days danger"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 11 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?r" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Piece Studio </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> piecestudio.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:34%" data-value="34"></p>
<progress max="100" value="34" data-value="34" class="low"> 34% </progress>
</div>
<div class="footer-row">
<div class="days"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 12 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?sanfrancisco" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Legacy Foundation </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> legacyfoundation.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:32%" data-value="32"></p>
<progress max="100" value="32" data-value="94"> 32% </progress>
</div>
<div class="footer-row">
<div class="days"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 12 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?brands" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Sports Interactive </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> sportsinteractive.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:94%" data-value="94"></p>
<progress max="100" value="94" data-value="94"> 94% </progress>
</div>
<div class="footer-row">
<div class="days danger"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 2 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?brands" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Sports Interactive </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> sportsinteractive.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:94%" data-value="94"></p>
<progress max="100" value="94" data-value="94"> 94% </progress>
</div>
<div class="footer-row">
<div class="days danger"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 2 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
<li class="project-item">
<div class="logo-row"> <img src="https://source.unsplash.com/48x48/?brands" alt="Image 001" />
<div class="icon"> <i class="fa fa-ellipsis-h icon" aria-hidden="true"></i> </div>
</div>
<div class="title-row">
<h3> Legacy Foundation </h3>
<div class="links"> <i class="fa fa-external-link icon" aria-hidden="true"></i> <a href="#"> legacyfoundation.com </a> </div>
</div>
<div class="desc-row">
<p> Web resource which contains all about transfer in the world of sports. </div>
<div class="progress-row">
<p class="value-label" style="width:32%" data-value="32"></p>
<progress max="100" value="32" data-value="32"> 32% </progress>
</div>
<div class="footer-row">
<div class="days danger"> <i class="fa fa-clock-o icon" aria-hidden="true"></i> 2 days left </div>
<div class="users">
<img src="https://source.unsplash.com/24x24/?human" alt="Image 001" />
<img src="https://source.unsplash.com/24x24/?humans" alt="Image 001" />
</div>
</div>
</li>
</ul>
</section>
</div>
</section>
</div>
</div>@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
$colorWhite: #fafbfb;
$colorLiteGrey: #9199a5;
$colorDarkGrey: #565d68;
$colorBlack: #1e2026;
$colorLite: #bbc3c9;
$colorBlue: #0068ff;
$colorBrown: #b17e4c;
$colorBG: #f8f9fb;
$colorRed: #ec407a;
$colorGreen: #17c993;
$colorDanger: #d32f2f;
$colorWarning: #fb8c00;
$colorGood: #4caf50;
$layoutWidth: 1406px;
$layoutHeight: 852px;
$layoutBorder: 35px;
$sidebarWidth: 65px;
$sidebarHeight: 100%;
$sizeXSmall: 0.5em;
$sizeSmall: 0.625em;
$sizeMedium: 0.75em;
$sizeLarge: 1em;
$sizeXLarge: 1.5em;
$sizeXXLarge: 3em;
body {
font-family: "Open Sans", sans-serif;
background: $colorLite;
text-align: center;
}
.love-text {
margin-top: 20px;
color: $colorWhite;
line-height: 1.2em;
.desc {
font-size: 0.75em;
color: $colorDanger
}
}
.container {
border: 4px solid $colorLiteGrey;
border-radius: $layoutBorder;
margin: 0 auto;
margin-top: 20px;
margin-bottom: 20px;
height: $layoutHeight;
width: $layoutWidth;
position: relative;
z-index: 100;
.content {
background: $colorWhite;
display: flex;
border: 23px solid $colorBlack;
border-radius: $layoutBorder - 3px;
height: $layoutHeight - 46px;
width: $layoutWidth - 46px;
}
}
.sidebar {
background: $colorBlue;
position: relative;
border-top-left-radius: $layoutBorder - 26px;
border-bottom-left-radius: $layoutBorder - 26px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: $sidebarWidth;
height: $sidebarHeight;
.logo .icon {
font-size: $sizeXXLarge;
color: $colorWhite;
top: 16px;
left: 12px;
position: absolute;
z-index: 100;
}
nav {
position: relative;
.menu-options {
color: $colorLite;
font-size: 1.25em;
list-style: none;
li {
border-radius: 5px;
padding: 8px;
box-sizing: border-box;
margin: 10px;
&.selected,
&:hover {
background: darken($colorBlue, 20%);
color: $colorWhite;
}
&:hover {
cursor: pointer;
}
}
.icon {
font-size: inherit;
}
}
}
.more-options {
position: absolute;
bottom: 16px;
color: $colorLite;
font-size: $sizeXLarge;
}
}
.main-content {
width: 100%;
height: 100%;
background: lighten($colorLiteGrey, 30%);
border-top-right-radius: $layoutBorder - 26px;
border-bottom-right-radius: $layoutBorder - 26px;
.app {
display: flex;
flex-direction: column;
header.sub-menu {
display: flex;
justify-content: space-between;
align-items: center;
background: $colorWhite;
box-shadow: 0px 1px 1px 1px rgba(181, 181, 181, 0.38);
border-top-right-radius: $layoutBorder - 26px;
height: 70px;
.title {
font-weight: bold;
margin-left: 20px;
}
.menu {
display: flex;
list-style: none;
height: 100%;
li {
margin: 0 10px;
text-transform: uppercase;
font-weight: bold;
font-size: 0.75em;
color: lighten($colorDarkGrey, 10%);
display: flex;
align-items: center;
&.selected, &:hover {
color: $colorBlue;
position: relative;
&::after {
content: "";
border-bottom: 5px solid $colorBlue;
position: absolute;
bottom: 0;
width: 100%;
}
.badge {
background: $colorBlue;
color: $colorWhite;
}
}
&:hover {
cursor: pointer;
}
.badge {
border-radius: 8px;
padding: 4px 5px;
margin: 0 5px;
background: $colorLite;
color: lighten($colorDarkGrey, 25%);
font-size: 12px;
height: 12px;
width: 15px;
}
}
}
.user-options {
display: flex;
margin-right: 16px;
.icon {
margin: 0 8px;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 1px 1px 1px rgba(181, 181, 181, 0.38);
position: relative;
&.user-img {
padding: 0;
border: none;
img {
border-radius: 5px;
}
}
.badge {
position: absolute;
top: -10px;
right: -8px;
border-radius: 50%;
background: $colorRed;
color: $colorWhite;
font-size: 12px;
padding-top: 5px;
width: 20px;
height: 15px;
}
}
}
}
.app-content {
margin: 20px;
background: $colorWhite;
border-radius: 5px;
height: 716px;
header {
margin: 20px;
display: flex;
justify-content: space-between;
.searchbox {
display: flex;
padding: 10px;
background: lighten($colorLiteGrey, 33%);
border-radius: 5px;
width: 200px;
.icon {
color: $colorLiteGrey;
margin: 0 5px;
}
input.search-text {
border: none;
background: inherit;
font-size: $sizeMedium;
font-weight: 600;
outline: none;
}
}
}
}
}
}
.app-content {
header .app-list-options {
display: flex;
justify-items: center;
align-items: center;
.sort-dropdown {
display: flex;
border: 1px solid $colorLite;
border-radius: 5px;
padding: 12px;
color: $colorLite;
font-size: $sizeMedium;
font-weight: 600;
.by,
i {
color: $colorBlack;
margin-left: 5px;
}
.drop {
border-left: 1px solid $colorLite;
margin-left: 10px;
}
}
.icon {
margin: 0 10px;
padding: 10px;
border-radius: 5px;
box-shadow: 0px 1px 1px 1px rgba(181, 181, 181, 0.38);
position: relative;
color: $colorLite;
&:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
&:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&.selected {
background: lighten($colorDarkGrey, 50%);
color: lighten($colorDarkGrey, 20%);
}
}
.display-group {
display: flex;
.icon {
margin-right:0;
margin-left: 0;
}
}
}
}
.projects {
list-style: none;
display: flex;
flex-wrap: wrap;
margin: 10px;
height: 630px;
overflow-y: scroll;
.project-item {
padding: 16px;
margin: 12px;
box-sizing: border-box;
display: flex;
flex-direction: column;
text-align: left;
border-radius: 5px;
box-shadow: 0px 1px 1px 1px rgba(181, 181, 181, 0.38);
user-select: none;
width: 285px;
.logo-row {
display: flex;
justify-content: space-between;
align-items: center;
img {
border-radius: 8px;
display: block;
}
.icon {
color: $colorLite;
}
}
.title-row {
display: flex;
flex-direction: column;
justify-content: flex-start;
margin: 20px 0 10px;
h3 {
font-weight: bold;
}
.links {
display: flex;
align-content: center;
padding: 8px 0;
color: lighten($colorDarkGrey, 20%);
font-size: $sizeMedium;
.icon {
margin-right: 5px;
}
a {
color: lighten($colorDarkGrey, 20%);
text-decoration: none;
}
}
}
.desc-row {
color: lighten($colorDarkGrey, 20%);
font-size: 12px;
font-weight: 400;
line-height: 18px;
}
.progress-row {
display: flex;
flex-direction: column;
margin: 20px 0;
p.value-label {
display: block;
}
p[data-value] {
position: relative;
}
p[data-value]:after {
content: attr(data-value) "%";
color: lighten($colorDarkGrey, 20%);
font-size: 12px;
position: absolute;
display: block;
right: -10px;
}
progress {
display: block;
position: relative;
width: 100%;
margin-top: 20px;
-webkit-appearance: none;
height: 6px;
}
progress::-webkit-progress-bar {
background-color: lighten($colorLite, 10%);
border-radius: 5px;
}
::-webkit-progress-value {
background-color: $colorGreen;
border-radius: 5px;
}
.low::-webkit-progress-value {
background-color: $colorRed;
}
}
.footer-row {
display: flex;
justify-content: space-between;
align-items: center;
.days {
padding: 8px 5px;
border-radius: 4px;
background: $colorLite;
font-size: 12px;
color: $colorDarkGrey;
background: lighten($colorDarkGrey, 50%);
&.good {
color: $colorGood;
background: lighten($colorGood, 50%);
}
&.warning {
color: $colorWarning;
background: lighten($colorWarning, 40%);
}
&.danger {
color: $colorDanger;
background: lighten($colorDanger, 40%);
}
}
.users {
img {
border-radius: 3px;
margin: 0 2px;
}
}
}
}
}
.fab-icon {
position: absolute;
z-index: 1000;
bottom: 50px;
right: 50px;
color: $colorWhite;
background: $colorBlue;
border-radius: 50%;
text-align: center;
padding-top: 5px;
font-size: $sizeXXLarge;
box-sizing: border-box;
box-shadow: 10px 10px 73px 12px rgba(0, 104, 255, 0.35);
width: 60px;
height: 60px;
&:hover {
cursor: pointer;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.