<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Dashboard UI #2</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<aside>
<header>
<div><img class="profile-picture" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_10.png"/>
<p>Jane Doe</p>
</div>
</header>
<nav class="side-navigation">
<ul>
<li class="active"><a href="#"><i class="fa fa-dashboard"></i>Dashboard</a></li>
<li><a href="#"><i class="fa fa-ship"></i>Projects</a></li>
<li><a href="#"><i class="fa fa-users"></i>Users</a></li>
<li><a href="#"><i class="fa fa-comments"></i>Comments</a></li>
<li><a href="#"><i class="fa fa-area-chart"></i>Stats</a></li>
</ul>
</nav>
</aside>
<main>
<header class="main-head">
<div class="icons"><i class="fa fa-user-md"></i><i class="fa fa-comments-o"></i><i class="fa fa-bell-o"><span class="number-alert">3</span></i></div>
<div class="logo"><i class="fa fa-rocket"></i></div>
<div class="search">
<input type="text" name="search" placeholder="Type here to search..." autocomplete="off"/><i class="fa fa-search"></i>
</div>
</header>
<div class="container user">
<div class="user-card">
<figure><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/584938/people_10.png"/></figure>
<div class="user-info">
<div class="name"> <span>Jane Doe </span><i class="fa fa-star on"></i><i class="fa fa-star on"></i><i class="fa fa-star on"></i><i class="fa fa-star on"></i><i class="fa fa-star off"></i></div>
<div class="user-role">
Student •<a href="#">Learn more</a>
</div>
<div class="experience-points"><i class="fa fa-coffee"></i>8,977 exp</div>
</div>
</div>
<div class="action-links">
<ul>
<li><a href="#" data-title="Edit profile"><i class="fa fa-pencil"></i></a></li>
<li><a href="#" data-title="Sign out"><i class="fa fa-sign-out"></i></a></li>
</ul>
</div>
</div>
<!-- main content-->
<div class="wrapper">
<ul class="category-navigation">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Admins</a></li>
<li><a href="#">Knowledge board</a></li>
<li><a href="#">Forum</a></li>
<li><a href="#">Q&A</a></li>
</ul>
<div class="container">
<div class="card orange">
<ul class="tabs">
<li class="active" data-tab="1"><span>32</span>Tabs</li>
<li data-tab="2"><span>4</span>Tabs</li>
</ul>
<div class="content visible" data-content="1">
<ul>
<li>Tab content 0</li>
<li>Tab content 1</li>
<li>Tab content 2</li>
<li>Tab content 3</li>
<li>Tab content 4</li>
<li>Tab content 5</li>
<ul class="hidden-content">
<li>More content</li>
<li>More content</li>
<li>More content</li>
<li>More content</li>
</ul>
<li class="show-more" data-less="Show less" data-more="Show more"> <span>Show more</span><i class="fa fa-chevron-down"></i></li>
</ul>
</div>
<div class="content" data-content="2">
<ul>
<li>Tab content 5</li>
<li>Tab content 4</li>
<li>Tab content 3</li>
<li>Tab content 2</li>
<li>Tab content 1</li>
<li>Tab content 0</li>
<ul class="hidden-content">
<li>More content</li>
<li>More content</li>
<li>More content</li>
<li>More content</li>
</ul>
<li class="show-more" data-less="Show less" data-more="Show more"> <span>Show more</span><i class="fa fa-chevron-down"></i></li>
</ul>
</div>
</div>
<div class="card purple">
<ul class="tabs">
<li class="active" data-tab="3"><span>21</span>Tabs</li>
<li data-tab="4"><span>4</span>Tabs</li>
</ul>
<div class="content visible" data-content="3">
<ul class="has-icon">
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>11</span></div>Tab content 0
</li>
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>1</span></div>Tab content 0
</li>
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>9</span></div>Tab content 0
</li>
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>5</span></div>Tab content 0
</li>
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>1</span></div>Tab content 0
</li>
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>9</span></div>Tab content 0
</li>
<ul class="hidden-content">
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>9</span></div>Tab content 0
</li>
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>1</span></div>Tab content 0
</li>
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>0</span></div>Tab content 0
</li>
<li>
<div class="icon"><i class="fa fa-comment-o"></i><span>0</span></div>Tab content 0
</li>
</ul>
<li class="show-more" data-less="Show less" data-more="Show more"> <span>Show more</span><i class="fa fa-chevron-down"></i></li>
</ul>
</div>
<div class="content" data-content="4">
<ul>
<li>Tab content 5</li>
<li>Tab content 4</li>
<li>Tab content 3</li>
<li>Tab content 2</li>
<li>Tab content 1</li>
<li>Tab content 0</li>
<ul class="hidden-content">
<li>More content</li>
<li>More content</li>
<li>More content</li>
<li>More content</li>
</ul>
<li class="show-more" data-less="Show less" data-more="Show more"> <span>Show more</span><i class="fa fa-chevron-down"></i></li>
</ul>
</div>
</div>
<div class="card green">
<ul class="tabs">
<li class="active" data-tab="5"><span>8</span>Tabs</li>
<li data-tab="6"><span>4</span>Tabs</li>
</ul>
<div class="content visible" data-content="5">
<ul class="has-icon">
<li>
<div class="graph" data-text="100%" data-value="100"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<li>
<div class="graph" data-text="83%" data-value="83"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<li>
<div class="graph" data-text="100%" data-value="100"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<li>
<div class="graph" data-text="65%" data-value="65"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<li>
<div class="graph" data-text="25%" data-value="25"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<li>
<div class="graph" data-text="40%" data-value="40"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<ul class="hidden-content">
<li>
<div class="graph" data-text="100%" data-value="100"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<li>
<div class="graph" data-text="100%" data-value="100"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<li>
<div class="graph" data-text="100%" data-value="100"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
<li>
<div class="graph" data-text="100%" data-value="100"><span class="value"></span><span class="bar"></span></div>Tab Content 3
</li>
</ul>
<li class="show-more" data-less="Show less" data-more="Show more"> <span>Show more</span><i class="fa fa-chevron-down"></i></li>
</ul>
</div>
<div class="content" data-content="6">
<ul>
<li>Tab content 5</li>
<li>Tab content 4</li>
<li>Tab content 3</li>
<li>Tab content 2</li>
<li>Tab content 1</li>
<li>Tab content 0</li>
<ul class="hidden-content">
<li>More content</li>
<li>More content</li>
<li>More content</li>
<li>More content</li>
</ul>
<li class="show-more" data-less="Show less" data-more="Show more"> <span>Show more</span><i class="fa fa-chevron-down"></i></li>
</ul>
</div>
</div>
</div>
</div>
</main>
<!-- partial -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
.text-tracked {
letterspacing: 0.1em;
}
.text-size-2 {
font-size: 2.25rem;
}
.text-size-3 {
font-size: 1.5rem;
}
.z-index-1 {
z-index: 1;
}
.z-index-2 {
z-index: 2;
}
.decorative-icon {
position: absolute;
top: -0.2em;
right: -0.2em;
}
.h-100vh {
height: 100vh;
}
.overflow-hidden {
overflow: hidden;
}
.overflow-auto {
overflow: auto;
}
.opacity-25 {
opacity: 0.25;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-75 {
opacity: 0.75;
}
.delay-1 {
animation-delay: 0.4s;
}
.delay-2 {
animation-delay: 0.5s;
}
.delay-3 {
animation-delay: 0.6s;
}
.delay-4 {
animation-delay: 0.7s;
}
.delay-5 {
animation-delay: 0.8s;
}
.delay-6 {
animation-delay: 0.9s;
}
.delay-7 {
animation-delay: 1s;
}
.delay-8 {
animation-delay: 1.1s;
}
.delay-9 {
animation-delay: 1.2s;
}
.delay-10 {
animation-delay: 1.3s;
}
.delay-11 {
animation-delay: 1.4s;
}