<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/nerios/pen/MKNgQO?limit=all&page=24&q=mobile" />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: linear-gradient(90deg, #312b47 0%, #4e4d5d 100%);
}
h2 {
margin: 0;
padding: 0;
font-size: 13px;
line-height: 13px;
font-family: 'Open Sans';
color: #3c3256;
font-weight: 700;
}
h3 {
margin: 4px 0 0 0;
padding: 0;
font-size: 14px;
line-height: 14px;
font-family: 'Open Sans';
color: #7affec;
font-weight: 700;
}
h4 {
margin: 4px 0 0 0;
padding: 0;
font-size: 15px;
line-height: 15px;
font-family: 'Open Sans';
color: #3c3256;
font-weight: 700;
}
.screen {
background-color: #160e23;
padding: 40px 20px 30px 20px;
height: 650px;
width: 366px;
position: absolute;
left: 50%;
top: 0px;
transform: translate(-50%, 0);
box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
margin: 60px 0;
}
.header {
display: inline-flex;
margin: 0 0 40px 0;
}
.title,
.fa {
width: 122px;
color: #7e6e9e;
padding: 0;
margin: 0;
}
.fa:hover {
color: #8c7dab;
}
.title {
font-family: 'Open Sans';
font-weight: 400;
text-align: center;
font-size: 22px;
line-height: 22px;
margin-top: -4px;
}
.fa-repeat {
text-align: right;
}
.header2 {
display: inline-flex;
}
.section {
color: #5d506c;
width: 122px;
font-family: 'Open Sans';
font-weight: 600;
text-align: center;
font-size: 13px;
line-height: 13px;
border-bottom: 2px solid #5d506c;
padding-bottom: 14px;
margin-bottom: 24px;
}
.active.section {
color: #7affec;
border-bottom: 2px solid #7affec;
}
.bodychart {
padding: 0;
margin-left: -17px;
height: 320px;
width: 383px;
}
.chart {
height: 320px;
width: 100%;
padding: 0;
margin: 0;
}
.pies {
display: inline-table;
margin: 15px 0 0 0;
padding: 20px 0 0 0;
border-top: 1px solid #201531;
border-bottom: 1px solid #201531;
}
.pie1,
.pie2,
.pie3,
.pie4 {
height: 108px;
width: 91.5px;
margin: 0;
padding: 0;
text-align: center;
display: inline-table;
}
#doug3,
#doug1,
#doug2,
#doug4 {
padding: 0;
margin: 0 0 12px 0;
height: 40px;
}
.footer {
display: inline table;
text-align: left;
margin: 25px 0 0 0;
text-indent: 6px;
}
.counter1,
.counter2,
.fa-sign-out {
display: inline-table;
}
.counter1 {
width: 150px;
font-size: 30px;
line-height: 30px;
font-family: 'Open Sans';
font-weight: 200;
color: #7affec;
}
.counter2 {
width: 150px;
font-size: 30px;
line-height: 30px;
font-family: 'Open Sans';
font-weight: 200;
color: #f95084;
}
.fa-sign-out {
position: relative;
top: 11px;
left: -7px;
width: 40px;
color: #3c3256;
}</style></head><body>
<!--UI Designed by Vasjen Katro - "https://dribbble.com/KATRO"-->
<article class="screen">
<div class="header">
<i class="fa fa-reorder fa-lg"></i>
<p class="title">Insights</p>
<i class="fa fa-repeat fa-lg"></i>
</div>
<div class="header2">
<div class="active section">NEW</div>
<div class="section">5H AGO</div>
<div class="section">MORNING</div>
</div>
<div class="bodychart">
<canvas class="chart" id="chart"></canvas>
</div>
<div class="pies">
<div class="pie1">
<canvas id="doug1"></canvas>
<h2>ORGANIC</h2>
<h3>17%</h3>
</div>
<div class="pie2">
<canvas id="doug2"></canvas>
<h2>SOCIAL</h2>
<h3>43%</h3>
</div>
<div class="pie3">
<canvas id="doug3"></canvas>
<h2>RETURN</h2>
<h3>24%</h3>
</div>
<div class="pie3">
<canvas id="doug4"></canvas>
<h2>KEYWORD</h2>
<h3>68%</h3>
</div>
</div>
<div class="footer">
<div class="counter1">28 674
<h4>REAL TIME</h4></div>
<div class="counter2">83 763
<h4>ALL TIME</h4></div>
<i class="fa fa-sign-out fa-2x"></i>
</div>
</article>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js'></script>
<script >Chart.defaults.global.animationEasing = 'easeInOutQuad',
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleOverride = true;
Chart.defaults.global.scaleShowLabels = false;
Chart.defaults.global.ShowToolTipTitle = false;
Chart.defaults.global.scaleSteps = 18;
Chart.defaults.global.scaleStepWidth = 10;
Chart.defaults.global.scaleStartValue = 0;
Chart.defaults.global.tooltipFontFamily = 'Open Sans';
Chart.defaults.global.tooltipFillColor = '#35274b';
Chart.defaults.global.tooltipFontColor = '#7e6e9e';
Chart.defaults.global.tooltipCaretSize = 1;
Chart.defaults.global.maintainAspectRatio = true;
Chart.defaults.Line.scaleShowHorizontalLines = false;
Chart.defaults.Line.scaleGridLineColor = '#1b1129';
Chart.defaults.Line.scaleLineColor = '#1b1129';
Chart.defaults.Line.bezierCurve = false;
Chart.defaults.Line.scaleFontColor = "#35274b";
Chart.defaults.Doughnut.segmentShowStroke = false;
var randomScalingFactor = function() {
return Math.round(Math.random() * 100)
};
var lineChartData = {
labels: ["1PM", "", "2PM", "", "3PM", "", "4PM", "", "5PM", "", "6PM", "", "7PM"],
datasets: [
{
label: "My Second dataset",
fillColor: "#180e26",
strokeColor: "#503e7a",
pointColor: "#503e7a",
pointStrokeColor: "#503e7a",
pointHighlightFill: "#503e7a",
pointHighlightStroke: "#503e7a",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}, {
label: "My Second dataset",
fillColor: "rgba(80,80,105,0.2)",
strokeColor: "#7affec",
pointColor: "#7affec",
pointStrokeColor: "#7affec",
pointHighlightFill: "#fff",
pointHighlightStroke: "#fff",
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
}
]
}
window.onload = function() {
var ctx = document.getElementById("chart").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData);
}
var pieData = [{
value: randomScalingFactor(),
color: "#f95084",
}, {
value: randomScalingFactor(),
color: "#342652",
}];
var context = document.getElementById('doug1').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData);
var pieData = [{
value: randomScalingFactor(),
color: "#7affec",
}, {
value: randomScalingFactor(),
color: "#342652",
}];
var context = document.getElementById('doug2').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData);
var pieData = [{
value: randomScalingFactor(),
color: "#7affec",
}, {
value: randomScalingFactor(),
color: "#342652",
}];
var context = document.getElementById('doug3').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData);
var pieData = [{
value: randomScalingFactor(),
color: "#f95084",
}, {
value: randomScalingFactor(),
color: "#342652",
}];
var context = document.getElementById('doug4').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData);
//# sourceURL=pen.js
</script>
</body></html>
