Responsive Grid Dashboard

It's not responsive yet.Still working on this. :)Forked from Ritchie's Pen Responsive Grid Dashboard.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Responsive Grid Dashboard</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

* {
  box-sizing: border-box;
}

html {
    height: 100%;
}

body {
  margin: 0px;
  height: 100%;
  --background:url('https://i.imgur.com/z7IKsdA.png') --repeat-y #cc0033;
background:#ccc;
  font: 16px/1 'Open Sans', sans-serif;
  color: #777;
  
 line-height: 55px;
font-size: 18px;
letter-spacing: 1px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

aside {
  width: 212px;
  height: 100%;
  border-right: 2px solid #ffffff;
  background-color: #fff;
  padding: 20px 10px 0 10px;
  float: left;
  position: absolute;
  Z-index: 1;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid #819FF7 ;
  margin: 0px auto;
  overflow: hidden;
 
}

.navigation {
  border-top: 1px solid #819FF7 ;
  margin-top: 20px;
}

.navigation a {
  color: #666;
  text-decoration: none;
  line-height: 55px;
font-size: 18px;
letter-spacing: 1px;
  padding-left: 20px;
}

.navigation li:hover {
  text-decoration: none;
  padding-left: 10px;
  transition: padding 200ms;
  background: #eee;
}

.navigation li:active > a {
  opacity: 0.8;
}

.cover {
  width: 100%;
  height: 100%;
  margin-left: 2px;
  padding: 0px 10px 100px 220px;
  position: absolute;
}

ul, li{
  user-select: none;
  list-style-type: none;
  padding: 0px;
  line-height: 35px;
  color: #FFFFFF;
  transition: padding 200ms;
}

.modal {
  margin: 10px 0px 10px 0;
  	
}
.prodictname {
  padding:10px;
}
.productname h2 {
  text-align:center;
  position:relative;
    font-size: 40px;
  font-weight: 300;
}
.box h3{
  text-align:center;
	position:relative;
	--top:80px;
}

.header {
  background-color:#FFF;
  padding: 10px 0px 2px 20px;
}
.header h2 {
   font-weight: 300;
  color:#013ADF;
}
.box {
  padding:10px;
	--width:70%;
	--height:200px;
	background:#FFF;
	--margin:40px auto;
  background:#FFF;
  --border-width: 1px;
  --border-style:solid;
}
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.modal-head {
  width: 100%;
  padding: 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: linear-gradient(to bottom, #454545 0%,#3e3e3e 100%);
}

.modal-title {
  color: #FFFFFF;
}

.modal-content {
  width: 100%;
  border: 1px solid #e6e6e6;
  padding: 10px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;  
}

.modal-wrap {
  float: left;
  width: 100%;
}

.col-10-10{
  width: 100%;
}

.col-7-10{
  width: 75%;
}

.col-5-10{
  width: 50%;
}

.col-2-10{
  width: 25%;
}

[class*='col-'] {
  float: left;
  padding-right: 10px;
}

[class*='col-']:last-of-type {
  padding-right: -10px;
}

.menu-bar {
  width: 100%;
  background: #cc0033;
  display: none;
}

.menu-bar .title {
  text-align: center;
  display: block;
  color: #ffffff;
  font-size: 1.3em;
  font-weight: normal;
  user-select: none;
  padding: 10px;
}

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px){

  ul, li{
    text-align: center;
  user-select: none;
  list-style-type: none;
  padding: 0px;
  line-height: 80px;
  color: #FFFFFF;
  font-size: 1.4em;
}
  
  .col-10-10{
    width: 100%;
  }
  
  .col-7-10{
    width: 100%;
  }

  .col-5-10{
    width: 100%;
  }

  .col-2-10{
    width: 100%;
  }
}

@media only screen 
and (max-width : 767px){
  .col-10-10{
    width: 100%;
  }
  
  .col-7-10{
    width: 100%;
  }  

  .col-5-10{
    width: 100%;
  }

  .col-2-10{
    width: 100%;
  }  
  
  body {
    background:#ccc;
  }
  
  aside {
    top: 0px;
    display: none;
  }
  .cover {
    padding: 10px 0 0 10px;
  }
  
 .menu-bar {
   width: 100%;
   height: 50px;
   background: #cc0033;
   display: block;
 }  
 
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
<div class="wrapper">
  
  <div class="menu-bar">
    <span class="title">Dashboard</span>
  </div>
  
  <aside>
    <div class="avatar">
      <img src="https://www.cs.umd.edu/sites/default/files/styles/40px_icon/public/default_images/user_icon.png" height="105%" width="95%">
    </div>
    <center>Balaji Natarajan</center>
    <div class="navigation">
      <ul>
        <li><a href="#">Dashboard</a></li>
        <li><a href="#">My Profile</a></li>
        <li><a href="#">Sign Out</a></li>
        <li><a href="#">Help</a></li>        
      </ul>
    </div>
  </aside>
  
  <div class="cover">
     <!--div class="modal-wrap">
        <div class="modal col-10-10"-->

        <div class="header">
          
          <div>
            <h2>The Ultimate Dashboard</h2>
          </div>
          
          </div>
      <!--/div>

  
    </div-->   
    <!--div class="modal-wrap">
        <div class="modal col-10-10">
          <div class="productname">
        
            <h2>The Ultimate Dashboard</h2></div>
      </div>

  
    </div=-->    
<div class="modal-wrap">
        <div class="modal col-7-10">
          <div class="box effect2">
        <!--div class="modal-head">
          <span class="modal-title">75%</span>
        </div>
      
        <div class="modal-content">
          <p></p>
        </div-->
            <div id="canvas-holder" style="float:left;">
			<canvas id="chart-area" width="200" height="300"/>
		</div>
            <div id="canvas-holder" style="float:left;">
			<canvas id="chart-area-nut1" width="200" height="300"/>
		</div>
            <div id="canvas-holder" style="float:left;">
			<canvas id="chart-area2" width="200" height="300"/>
		</div>
            <div id="canvas-holder">
			<canvas id="chart-area-nut2" width="200" height="300"/>
		</div>
            
            </div>
      </div>

        <div class="modal col-2-10">
          <div class="box effect2">
          <div class='chart' id='p1'>
      <canvas id='c1' height="300"></canvas>
    </div>
          </div>
      </div>
  
    </div>    
    
    <div class="modal-wrap">
      <div class="modal col-5-10">
        <div class="box effect2">
           <div style="width:30%">
			<div>
				<canvas id="canvas-line" height="350" width="600"></canvas>
			</div>
		</div>
        </div>
      </div>
      
      <div class="modal col-5-10">
        <div class="box effect2">
       <div style="width: 50%">
			<canvas id="canvas-bar" height="350" width="600"></canvas>
		</div>
        </div>
      </div>      
    </div>
    
    <div class="modal-wrap">
      <div class="modal col-2-10">
        <div class="box effect2">
        <div id="canvas-holder" style="width:30%">
			<canvas id="chart-area-polar" width="250" height="300"/>
		</div>
        </div>
      </div>
      
      <div class="modal col-2-10">
        <div class="box effect2">
       
          <div id="canvas-holder">
			<canvas id="chart-area-nut" width="250" height="300"/>
		</div>
        </div>
      </div> 
      
      <div class="modal col-5-10">
        <div class="box effect2">
       
        <div style="width:30%">
			<canvas id="canvas" height="300" width="400"></canvas>
		</div>
        </div>
      </div> 
           
    </div>   
    
    <div class="modal-wrap">
      
      
      <div class="modal col-10-10">
        <div class="box effect2">
&copy; All Rights Reserved. Copyright 2014.
        </div>
      </div> 
           
    </div>   
    
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js'></script>

    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

* {
  box-sizing: border-box;
}

html {
    height: 100%;
}

body {
  margin: 0px;
  height: 100%;
  --background:url('https://i.imgur.com/z7IKsdA.png') --repeat-y #cc0033;
background:#ccc;
  font: 16px/1 'Open Sans', sans-serif;
  color: #777;
  
 line-height: 55px;
font-size: 18px;
letter-spacing: 1px;
}

.wrapper {
  width: 100%;
  height: 100%;
}

aside {
  width: 212px;
  height: 100%;
  border-right: 2px solid #ffffff;
  background-color: #fff;
  padding: 20px 10px 0 10px;
  float: left;
  position: absolute;
  Z-index: 1;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 5px solid #819FF7 ;
  margin: 0px auto;
  overflow: hidden;
 
}

.navigation {
  border-top: 1px solid #819FF7 ;
  margin-top: 20px;
}

.navigation a {
  color: #666;
  text-decoration: none;
  line-height: 55px;
font-size: 18px;
letter-spacing: 1px;
  padding-left: 20px;
}

.navigation li:hover {
  text-decoration: none;
  padding-left: 10px;
  transition: padding 200ms;
  background: #eee;
}

.navigation li:active > a {
  opacity: 0.8;
}

.cover {
  width: 100%;
  height: 100%;
  margin-left: 2px;
  padding: 0px 10px 100px 220px;
  position: absolute;
}

ul, li{
  user-select: none;
  list-style-type: none;
  padding: 0px;
  line-height: 35px;
  color: #FFFFFF;
  transition: padding 200ms;
}

.modal {
  margin: 10px 0px 10px 0;
  	
}
.prodictname {
  padding:10px;
}
.productname h2 {
  text-align:center;
  position:relative;
    font-size: 40px;
  font-weight: 300;
}
.box h3{
  text-align:center;
	position:relative;
	--top:80px;
}

.header {
  background-color:#FFF;
  padding: 10px 0px 2px 20px;
}
.header h2 {
   font-weight: 300;
  color:#013ADF;
}
.box {
  padding:10px;
	--width:70%;
	--height:200px;
	background:#FFF;
	--margin:40px auto;
  background:#FFF;
  --border-width: 1px;
  --border-style:solid;
}
.effect2
{
  position: relative;
}
.effect2:before, .effect2:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  -moz-transform: rotate(-3deg);
  -o-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}
.effect2:after
{
  -webkit-transform: rotate(3deg);
  -moz-transform: rotate(3deg);
  -o-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.modal-head {
  width: 100%;
  padding: 15px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background: linear-gradient(to bottom, #454545 0%,#3e3e3e 100%);
}

.modal-title {
  color: #FFFFFF;
}

.modal-content {
  width: 100%;
  border: 1px solid #e6e6e6;
  padding: 10px;
  box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;  
}

.modal-wrap {
  float: left;
  width: 100%;
}

.col-10-10{
  width: 100%;
}

.col-7-10{
  width: 75%;
}

.col-5-10{
  width: 50%;
}

.col-2-10{
  width: 25%;
}

[class*='col-'] {
  float: left;
  padding-right: 10px;
}

[class*='col-']:last-of-type {
  padding-right: -10px;
}

.menu-bar {
  width: 100%;
  background: #cc0033;
  display: none;
}

.menu-bar .title {
  text-align: center;
  display: block;
  color: #ffffff;
  font-size: 1.3em;
  font-weight: normal;
  user-select: none;
  padding: 10px;
}

@media only screen 
and (min-width : 768px) 
and (max-width : 1024px){

  ul, li{
    text-align: center;
  user-select: none;
  list-style-type: none;
  padding: 0px;
  line-height: 80px;
  color: #FFFFFF;
  font-size: 1.4em;
}
  
  .col-10-10{
    width: 100%;
  }
  
  .col-7-10{
    width: 100%;
  }

  .col-5-10{
    width: 100%;
  }

  .col-2-10{
    width: 100%;
  }
}

@media only screen 
and (max-width : 767px){
  .col-10-10{
    width: 100%;
  }
  
  .col-7-10{
    width: 100%;
  }  

  .col-5-10{
    width: 100%;
  }

  .col-2-10{
    width: 100%;
  }  
  
  body {
    background:#ccc;
  }
  
  aside {
    top: 0px;
    display: none;
  }
  .cover {
    padding: 10px 0 0 10px;
  }
  
 .menu-bar {
   width: 100%;
   height: 50px;
   background: #cc0033;
   display: block;
 }  
 
}
/* Downloaded from https://www.codeseek.co/ */
$(document).ready(function() {
  $('.link').on('click', function() {
    $('.link').removeClass('active');
    $(this).toggleClass('active');
  });
});

var c1 = document.getElementById("c1");
var parent = document.getElementById("p1");
c1.width = parent.offsetWidth;
c1.height = parent.offsetHeight;

var data1 = {
  labels : ["00","10","20","30","40","50","60"],
  datasets : [
    {
      fillColor : "rgba(200,150,150,0.5)",
				strokeColor : "rgba(100,100,100,0.8)",
				pointColor : "#0af",
      pointStrokeColor : "rgba(255,255,255,1)",
      data : [150,200,235,290,300,350, 450]
    }
  ]
}

var options1 = {
  scaleFontColor : "rgba(100,100,100,1)",
  scaleLineColor : "rgba(120,120,120,1)",
  scaleGridLineColor : "transparent",
  bezierCurve : false,
  scaleOverride : true,
  scaleSteps : 5,
  scaleStepWidth : 100,
  scaleStartValue : 0
}

new Chart(c1.getContext("2d")).Line(data1,options1)


		var pieData = [
				{
					value: 300,
					color:"#F7464A",
					highlight: "#FF5A5E",
					label: "Red"
				},
				{
					value: 50,
					color: "#46BFBD",
					highlight: "#5AD3D1",
					label: "Green"
				},
				{
					value: 100,
					color: "#FDB45C",
					highlight: "#FFC870",
					label: "Yellow"
				},
				{
					value: 40,
					color: "#949FB1",
					highlight: "#A8B3C5",
					label: "Grey"
				},
				{
					value: 120,
					color: "#4D5360",
					highlight: "#616774",
					label: "Dark Grey"
				}

			];



var radarChartData = {
		labels: ["Eating", "Drinking", "Sleeping", "Designing", "Coding", "Cycling", "Running"],
		datasets: [
			{
				label: "My First dataset",
				fillColor: "rgba(220,220,220,0.2)",
				strokeColor: "rgba(220,220,220,1)",
				pointColor: "rgba(220,220,220,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(220,220,220,1)",
				data: [65,59,90,81,56,55,40]
			},
			{
				label: "My Second dataset",
				fillColor: "rgba(151,187,205,0.2)",
				strokeColor: "rgba(151,187,205,1)",
				pointColor: "rgba(151,187,205,1)",
				pointStrokeColor: "#fff",
				pointHighlightFill: "#fff",
				pointHighlightStroke: "rgba(151,187,205,1)",
				data: [28,48,40,19,96,27,100]
			}
		]
	};
var polarData = [
				{
					value: 300,
					color:"#F7464A",
					highlight: "#FF5A5E",
					label: "Red"
				},
				{
					value: 50,
					color: "#46BFBD",
					highlight: "#5AD3D1",
					label: "Green"
				},
				{
					value: 100,
					color: "#FDB45C",
					highlight: "#FFC870",
					label: "Yellow"
				},
				{
					value: 40,
					color: "#949FB1",
					highlight: "#A8B3C5",
					label: "Grey"
				},
				{
					value: 120,
					color: "#4D5360",
					highlight: "#616774",
					label: "Dark Grey"
				}

			];
// Colour variables
	var red = "#bf616a",
		blue = "#5B90BF",
		orange = "#d08770",
		yellow = "#ebcb8b",
		green = "#a3be8c",
		teal = "#96b5b4",
		pale_blue = "#8fa1b3",
		purple = "#b48ead",
		brown = "#ab7967";
var colours = {
				"Core": blue,
				"Line": orange,
				"Bar": teal,
				"Polar Area": purple,
				"Radar": brown,
				"Doughnut": green
			};
function Colour(col, amt) {

		var usePound = false;

		if (col[0] == "#") {
			col = col.slice(1);
			usePound = true;
		}

		var num = parseInt(col,16);

		var r = (num >> 16) + amt;

		if (r > 255) r = 255;
		else if  (r < 0) r = 0;

		var b = ((num >> 8) & 0x00FF) + amt;

		if (b > 255) b = 255;
		else if  (b < 0) b = 0;

		var g = (num & 0x0000FF) + amt;

		if (g > 255) g = 255;
		else if (g < 0) g = 0;

		return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);

	}
var doughnutData = [
				{
				value: 7.57,
				color: colours["Core"],
				highlight: Colour(colours["Core"], 10),
				label: "Core"
			},
		
			{
				value: 1.63,
				color: colours["Bar"],
				highlight: Colour(colours["Bar"], 10),
				label: "Bar"
			},
		
			{
				value: 1.09,
				color: colours["Doughnut"],
				highlight: Colour(colours["Doughnut"], 10),
				label: "Doughnut"
			},
		
			{
				value: 1.71,
				color: colours["Radar"],
				highlight: Colour(colours["Radar"], 10),
				label: "Radar"
			},
		
			{
				value: 1.64,
				color: colours["Line"],
				highlight: Colour(colours["Line"], 10),
				label: "Line"
			},
		
			{
				value: 1.37,
				color: colours["Polar Area"],
				highlight: Colour(colours["Polar Area"], 10),
				label: "Polar Area"
			}
			];
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

	var barChartData = {
		labels : ["January","February","March","April","May","June","July"],
		datasets : [
			{
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,0.8)",
				highlightFill: "rgba(220,220,220,0.75)",
				highlightStroke: "rgba(220,220,220,1)",
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			},
			{
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,0.8)",
				highlightFill : "rgba(151,187,205,0.75)",
				highlightStroke : "rgba(151,187,205,1)",
				data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
			}
		]

	}
  var lineChartData = {
			labels : ["January","February","March","April","May","June","July"],
			datasets : [
				{
					label: "My First dataset",
					fillColor : "rgba(220,220,220,0.2)",
					strokeColor : "rgba(220,220,220,1)",
					pointColor : "rgba(220,220,220,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(220,220,220,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				},
				{
					label: "My Second dataset",
					fillColor : "rgba(151,187,205,0.2)",
					strokeColor : "rgba(151,187,205,1)",
					pointColor : "rgba(151,187,205,1)",
					pointStrokeColor : "#fff",
					pointHighlightFill : "#fff",
					pointHighlightStroke : "rgba(151,187,205,1)",
					data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
				}
			]

		}

	window.onload = function(){
		var ctx = document.getElementById("canvas-line").getContext("2d");
		window.myLine = new Chart(ctx).Line(lineChartData, {
			responsive: true
		});
	
		var ctx = document.getElementById("canvas-bar").getContext("2d");
		window.myBar = new Chart(ctx).Bar(barChartData, {
			responsive : true
		});

				var ctx = document.getElementById("chart-area-nut").getContext("2d");
				window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
    
    var ctx = document.getElementById("chart-area-nut1").getContext("2d");
				window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
    
       var ctx = document.getElementById("chart-area-nut2").getContext("2d");
				window.myDoughnut = new Chart(ctx).Doughnut(doughnutData, {responsive : true});
		
				var ctx = document.getElementById("chart-area-polar").getContext("2d");
				window.myPolarArea = new Chart(ctx).PolarArea(polarData, {
					responsive:true
				});

		window.myRadar = new Chart(document.getElementById("canvas").getContext("2d")).Radar(radarChartData, {
			responsive: true
		});
var ctx = document.getElementById("chart-area2").getContext("2d");
				window.myPie = new Chart(ctx).Pie(pieData);
				var ctx = document.getElementById("chart-area").getContext("2d");
				window.myPie = new Chart(ctx).Pie(pieData);
			};

This awesome code ( Responsive Grid Dashboard ) is write by Balaji Natarajan, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Balaji Natarajan