<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="frame">
<div class="window">
<div class="menu">
<ul>
<li id="m1" class="active" onclick="changeTab('Dashboard')"><span><i class="fas fa-tachometer-alt fa-fw"></i></span></li>
<li id="m2" onclick="changeTab('View')"><span><i class="far fa-eye fa-fw"></i></span></li>
<li id="m3" onclick="changeTab('Details')"><span><i class="far fa-sticky-note fa-fw"></i></span></li>
<li id="m4" onclick="changeTab('Settings')"><span><i class="fas fa-cogs"></i></span></li>
<li id="search"><span><i class="fas fa-search fa-fw"></i></span></li>
</ul>
</div>
<div class="body" id="windowbody">
<h1 id="title">
Dashboard
</h1>
<p id="p1">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</p>
<p id="p2">
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
@color-background: #2b3642;
@color-window: #ffffff;
@color-menu: #3d4d5e;
@color-primary: #5da2ed;
// use only the availablspace inside the 400x400 frame
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: @color-background;
color: #415868;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.window {
position: absolute;
width: 320px;
height: 240px;
top: 80px;
left: 40px;
background: @color-window;
box-shadow: 4px 8px 12px 0 rgba(0, 0, 0, 0.3);
}
.menu {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 40px;
background: @color-menu;
ul {
margin: 0; padding: 0;
width: 100%;
height: 40px;
list-style: none;
color: #aaa;
li {
position: relative;
display: inline-block;
height: 40px;
width: 40px;
cursor: pointer;
&:hover {
color: #fff;
}
&#search {
float: right;
}
&.active {
color: #ffff;
background-color: @color-primary;
}
span {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
.body {
opacity: 0;
margin-top: 60px;
padding: 20px;
h1 {
margin: 0px 0px;
font-size: 18px;
font-weight: 200;
}
p {
margin: 20px 0px;
width: 100%;
span {
display: block;
margin: 5px 0px;
height: 5px;
border-radius: 5px;
background-color: #ededed;
}
&#p1 {
span:nth-child(1) {
width: 100%;
}
span:nth-child(2) {
width: 90%;
}
span:nth-child(3) {
width: 95%;
}
span:nth-child(4) {
width: 88%;
}
span:nth-child(5) {
width: 30%;
}
}
&#p2 {
span:nth-child(1) {
width: 100%;
}
span:nth-child(2) {
width: 94%;
}
span:nth-child(3) {
width: 97%;
}
span:nth-child(4) {
width: 70%;
}
}
}
}
@keyframes appear {
0% {
opacity: 0;
margin-top: 60px;
}
100% {
opacity: 1;
margin-top: 40px;
}
}
@keyframes disappear {
100% {
opacity: 0;
margin-top: 60px;
}
}
View Compiled
document.getElementById("windowbody").style.animation = "appear 0.5s forwards";
function changeTab(name) {
document.getElementById("title").innerHTML = name;
document.getElementById("windowbody").style.animation = "none";
document.getElementById("windowbody").style.opacity = "0";
document.getElementById("windowbody").style.marginTop = "60px";
setTimeout(function(){
document.getElementById("windowbody").style.animation = "appear 0.5s forwards";
}, 10);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.