"mobile"
Bootstrap 4.0.0 Snippet by evarevirus

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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>

Related: See More


Questions / Comments: