Responsive Website Design: Responsive Dashboard Design

index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Template</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<header> Header </header>
<div class="main-wrapper">
  <div class="sidebar">
    <ul>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
      <li><a href="#">Menu1</a></li>
    </ul>
  </div>
  
  <div class="main-container">
    <div class="main-container-padding">
      <div class="title-head">
        <h3 style="color:#3399FF">Dashboard</h3>
      </div>
      <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery1.png"> </div>
      
      <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery2.png"> </div>
      
      <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery3.png"> </div>
      
      <div class="block"> <img src="http://curdweb.com/navin/click.com/images/gallery4.png"> </div>
      
      <div class="container ex3">
        <h3>Modernizr</h3>
        <p>Modernizr is a JavaScript library which is designed to detect HTML5 and CSS3 features in various browsers. Since the specifications for both HTML5 and CSS3 are only partially implemented or nonexistent in many browsers, it can be difficult to determine which techniques are available for use in rendering a page, and when it is necessary to avoid using a feature or to load a workaround such as a shim to emulate the feature. Modernizr aims to provide this feature detection in a complete and standardized manner</p>
        <p>Modernizr uses feature detection, rather than checking the browser's property, to discern what a browser can and cannot do. It considers feature detection more reliable since the same rendering engine may not necessarily support the same things in two different browsers using that engine. In addition, some users change their user agent string to get around websites that block features for browsers with specific user agent settings, despite their browsers having the necessary capabilities.
          
          Modernizr offers tests for over 150 next-generation features, then creates a JavaScript object (named "Modernizr") that contains the results of these tests as boolean properties. It also adds classes to the HTML element based on what features are and are not natively supported.</p>
      </div>
      <div class="container">
        <h3>JQuery Mobile</h3>
        <p>jQuery Mobile is a touch-optimized web framework (also known as a mobile framework), more specifically a JavaScript library, currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight and more.</p>
        <p>
        <li>Compatible with all major desktop browsers as well as all major mobile platforms, including Android, iOS, Windows Phone, Blackberry, WebOS, Symbian.</li>
        <li>Built on top of jQuery core so it has a minimal learning curve for people already familiar with jQuery syntax.</li>
        <li>Theming framework that allows creation of custom themes.</li>
        <li>Limited dependencies and lightweight to optimize speed.</li>
        <li>The same underlying codebase will automatically scale to any screen.</li>
        <li>HTML5-driven configuration for laying out pages with minimal scripting.</li>
        <li>AJAX-powered navigation with animated page transitions that provides ability to create semantic URLs through pushState.</li>
        <li>UI widgets that are touch-optimized and platform-agnostic.</li>
        </p>
      </div>
      <div class="myimg"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg"> </div>
      <p> Responsive web design (RWD)</p>
    </div>
    
  </div>
  
</div>

<footer> Footer </footer>
</body>
</html>

style.css

@charset "utf-8";
body {
 background:#333;
}
.main-wrapper {
 margin:auto;
 background:#ddd;
 padding:15px;
 overflow:auto;
}
header {
 padding:10px;
 background: #7abcff; /* Old browsers */
 background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* IE10+ */
 background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
 margin:auto;
}
.sidebar {
 float:left;
 width:20%;
 background: #7abcff; /* Old browsers */
 background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* IE10+ */
 background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
}
.sidebar ul {
 padding:0px;
 margin:0px;
}
.sidebar ul li {
 display: block;
}
.sidebar ul li a {
 background: #333;
 color: #fff;
 display: block;
 margin: 2px;
 padding: 10px;
 text-align: center;
 text-decoration: none;
}
.sidebar ul li a:hover {
 box-shadow: 1px 2px 1px 2px #fcc;
}
.main-container {
 width:80%;
 background: rgb(254,255,255); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(254, 255, 255, 1)), color-stop(100%, rgba(210, 235, 249, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(254, 255, 255, 1) 0%, rgba(210, 235, 249, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9', GradientType=0 ); /* IE6-9 */
 margin:auto;
 overflow:auto;
}
.main-container-padding {
 padding:10px;
}
footer {
 padding:10px;
 background: #7abcff; /* Old browsers */
 background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* IE10+ */
 background: linear-gradient(to bottom, #7abcff 0%, #60abf8 44%, #4096ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee', GradientType=0 ); /* IE6-9 */
 margin:auto;
}
.block {
 float:left;
 padding:10px;
 width:200px;
 height:150px;
 margin:9px;
 background:#0082ff;
}
.block img {
 width:100%;
 height:100%;
 margin:auto;
}
.container {
 float:left;
 padding:10px;
 width:435px;
 height:200px;
 margin: 3px 3px 10px;
 background: #7abcff;
 overflow:scroll;
 overflow-x:hidden;
 border: 6px solid #0082ff;
 border-radius: 10px;
}
.title-head {
 margin:auto;
 padding:10px;
 background: rgb(59,103,158); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(59, 103, 158, 1)), color-stop(50%, rgba(43, 136, 217, 1)), color-stop(97%, rgba(32, 124, 202, 1)), color-stop(97%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(59, 103, 158, 1) 0%, rgba(43, 136, 217, 1) 50%, rgba(32, 124, 202, 1) 97%, rgba(32, 124, 202, 1) 97%, rgba(125, 185, 232, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8', GradientType=0 ); /* IE6-9 */
 box-shadow: 2px 5px 7px #333;
}
.myimg {
 height: 200px !important;
 margin: 10px auto auto;
 overflow: hidden;
 width: 100%;
}
.myimg img {
 width:100%;
 margin:auto;
 height:100%;
}

/*for responsive css starts here*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .sidebar {
 margin:auto;
 width:100%;
}
 .main-container {
 width:100%;
 margin:auto;
}
 .container {
float: none;
 margin: 10px auto auto;
 padding: 2%;
 width: 92%;
}
 .block {
 float: none;
 height: 150px;
 margin: 10px auto auto;
 padding: 10px;
 width: 200px;
}
}

Friday 5 June 2015

Responsive Dashboard Design

index.html

style.css

No comments:

Post a Comment