<div class="card" id="card-visitors">
<input type="checkbox" id="card-visitors-indicator" />
<div class="header">
<label class="indicator" for="card-visitors-indicator">
<svg class="open" width="18" height="27">
<line x1="1.5" y1="12" x2="2" y2="25" stroke-linecap="round" style="stroke: #FFFFFF; stroke-width: 3;" />
<line x1="9" y1="7" x2="9" y2="25" stroke-linecap="round" style="stroke: #FFFFFF; stroke-width: 3;" />
<line x1="16.5" y1="2" x2="16.5" y2="25" stroke-linecap="round" style="stroke: #FFFFFF; stroke-width: 3;" />
</svg>
<svg class="close" width="15" height="25">
<line x1="1.5" y1="13.5" x2="15" y2="0" style="stroke: #FFFFFF; stroke-width: 3" />
<line x1="1.5" y1="11.5" x2="15" y2="25" style="stroke: #FFFFFF; stroke-width: 3" />
</svg>
</label>
<div class="content">
<div class="data">
<div class="top">
<p class="title">Visitors</p>
<p class="date">01 Sep 2016 - 15 Sep 2016</p>
</div>
<div class="graph">
<div class="horizontal">
<div>
<hr>
<p>200</p>
</div>
<div>
<hr>
</div>
<div>
<hr>
<p>100</p>
</div>
<div>
<hr>
</div>
<div>
<hr>
<p>0</p>
</div>
</div>
<div class="vertical">
<div class="day">
<div class="line-container">
<div class="line" style="height: 12%"></div>
</div>
<p>01</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 19%"></div>
</div>
<p class="hidden">02</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 8%"></div>
</div>
<p>03</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 15%"></div>
</div>
<p class="hidden">04</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 28%"></div>
</div>
<p>05</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 45%"></div>
</div>
<p class="hidden">06</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 61%"></div>
</div>
<p>07</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 46%"></div>
</div>
<p class="hidden">08</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 39%"></div>
</div>
<p>09</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 52%"></div>
</div>
<p class="hidden">10</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 32%"></div>
</div>
<p>11</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 9.5%"></div>
</div>
<p class="hidden">12</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 41%"></div>
</div>
<p>13</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 79%"></div>
</div>
<p class="hidden">14</p>
</div>
<div class="day">
<div class="line-container">
<div class="line" style="height: 15%"></div>
</div>
<p>15</p>
</div>
</div>
</div>
</div>
<p class="title">Today</p>
<p class="date">15 Sep 2016</p>
<div class="float"></div>
</div>
</div>
<div class="info">
<p>Total Visitors of the<br>Public Website</p>
<p class="counter">30<span class="unit"> VIS</span></p>
</div>
</div>@import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500&subset=latin-ext';
* {
z-index: 0;
margin: 0;
padding: 0;
overflow: hidden;
}
html {
width: 100%;
height: 100%;
}
body {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #212121;
background-color: #212121;
}
.indicator {
cursor: pointer;
}
.card {
background-color: #FFFFFF;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
border-radius: 5px;
}
.card#card-visitors {
position: relative;
width: 300px;
height: 400px;
margin: calc((100vh - 400px) / 2) auto;
}
.card#card-visitors input[type="checkbox"]#card-visitors-indicator {
display: none;
}
.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header label.indicator {
top: 30%;
right: calc(50% - 25px);
margin: calc(-30% - 25px) calc(50% - 25px) 0 0;
background-color: transparent;
-webkit-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-moz-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-o-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-ms-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, background-color 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s, margin 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
}
.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header label.indicator .open {
opacity: 0;
-webkit-transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
-moz-transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
-o-transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
-ms-transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0.2s;
}
.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header label.indicator .close {
transform: scale(1);
-webkit-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-moz-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-o-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-ms-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
}
.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header .content .data {
opacity: 1;
-webkit-transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
-moz-transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
-o-transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
-ms-transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
transition: opacity 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) 0.45s;
}
.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header .content .data .graph .vertical .day .line-container {
max-height: 80%;
-webkit-transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-moz-transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-o-transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
-ms-transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
transition: max-height 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0.9s;
}
.card#card-visitors input[type="checkbox"]#card-visitors-indicator:checked + .header .content .float {
opacity: 1;
transform: scale(10);
-webkit-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
-moz-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
-o-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
-ms-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
}
.card#card-visitors .header {
width: 100%;
height: 60%;
background-color: #E91E63;
}
.card#card-visitors .header label.indicator {
position: absolute;
z-index: 1;
width: 50px;
height: 50px;
top: calc(60% - 25px);
right: 20px;
margin: 0;
border-radius: 100%;
background-color: #FF9800;
-webkit-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
-moz-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
-o-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
-ms-transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
transition: top 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, right 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s, background-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, margin 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.3s;
}
.card#card-visitors .header label.indicator .open {
position: absolute;
margin: 11.5px 16px;
opacity: 1;
-webkit-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
-moz-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
-o-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
-ms-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0.6s;
}
.card#card-visitors .header label.indicator .close {
margin: 12.5px 17.5px;
transform: scale(0);
-webkit-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-moz-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-o-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-ms-transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}
.card#card-visitors .header .content {
position: relative;
width: 100%;
height: 100%;
}
.card#card-visitors .header .content > * {
color: #FFFFFF;
font-weight: 500;
}
.card#card-visitors .header .content .data {
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
background-color: #FF9800;
-webkit-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-moz-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-o-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-ms-transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
transition: opacity 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}
.card#card-visitors .header .content .data .top {
width: 100%;
height: 40%;
}
.card#card-visitors .header .content .data .top .title {
width: 100%;
}
.card#card-visitors .header .content .data .graph {
position: relative;
width: calc(100% - 40px);
height: 60%;
margin: 0 20px 20px 20px;
}
.card#card-visitors .header .content .data .graph .horizontal {
width: 100%;
height: 100%;
}
.card#card-visitors .header .content .data .graph .horizontal div {
height: 20%;
}
.card#card-visitors .header .content .data .graph .horizontal div hr {
border: 1px solid #FFFFFF;
opacity: .25;
}
.card#card-visitors .header .content .data .graph .horizontal div p {
margin-top: 1px;
opacity: .7;
font-size: 13px;
}
.card#card-visitors .header .content .data .graph .vertical {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
position: absolute;
width: 90%;
height: 100%;
top: 0;
margin-left: 10%;
}
.card#card-visitors .header .content .data .graph .vertical .day {
position: relative;
width: calc(100% / 14);
height: 100%;
}
.card#card-visitors .header .content .data .graph .vertical .day .line-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
justify-content: flex-end;
position: absolute;
width: 2px;
height: 80%;
max-height: 0;
bottom: 20%;
margin: 0 calc((100% - 2px) / 2);
-webkit-transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-moz-transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-o-transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-ms-transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
transition: max-height 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}
.card#card-visitors .header .content .data .graph .vertical .day .line-container .line {
width: 100%;
background-color: #FFFFFF;
}
.card#card-visitors .header .content .data .graph .vertical .day p {
position: absolute;
height: 20%;
bottom: 0;
margin-bottom: -3px;
opacity: .7;
font-size: 13px;
}
.card#card-visitors .header .content .data .graph .vertical .day .hidden {
opacity: 0;
}
.card#card-visitors .header .content .title {
margin-top: 15px;
font-size: 25px;
line-height: 30px;
text-align: center;
}
.card#card-visitors .header .content .date {
width: 100%;
opacity: .7;
text-align: center;
}
.card#card-visitors .header .content .float {
position: absolute;
width: 50px;
height: 50px;
top: 50%;
right: calc(50% - 25px);
opacity: 0;
border-radius: 100%;
background-color: #FF9800;
-webkit-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-moz-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-o-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
-ms-transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, opacity 0s cubic-bezier(0.4, 0.0, 0.2, 1) 0s;
}
.card#card-visitors .info {
width: calc(100% - 40px);
height: calc(40% - 80px);
padding: 40px 20px;
color: #9E9E9E;
}
.card#card-visitors .info .counter {
margin-top: 8px;
color: #212121;
font-size: 45px;
font-weight: 400;
line-height: 40px;
}
.card#card-visitors .info .counter .unit {
font-size: 15px;
}
/* click on the orange circle to show up the diagrammatic overview */
// Design concept by Kingyo: https://bit.ly/2caqNDZ
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.