Responsive Website Design: Responsive Dashboard Design Using Html and Css

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dashboard Design</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="wrapper">
  <div class="header">
    <div class="header-right">
      <input type="button" class="button" value="Logout" />
    </div>
    <div class="header-left1">My Dashboard</div>
    <div class="header-right">User:Administrator</div>
  </div>
  
  <div class="menu">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Clients</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
  </div>
  
  <div class="leftside">
    <div class="logo">
      <p>Dashboard</p>
    </div>
    <fieldset>
    <legend>Advance Search:</legend>
    <p>
      <label class="label">Name</label>
      <input class="input" type="text">
      <input type="button" class="button" value="search" />
    </p>
    <p>
      <label class="label"> Email</label>
      <input class="input"  type="text">
      <input type="button" class="button"  value="search" />
    </p>
    <p>
      <label class="label"> Date</label>
      <input class="input"  type="text">
      <input type="button" class="button"  value="search" />
    </p>
    </fieldset>
    <div class="leftmenu">
      <ul>
        <li><a href="#">Compose</a></li>
        <li><a href="#">Inbox</a></li>
        <li><a href="#">Drafts</a></li>
        <li><a href="#">Sent</a></li>
        <li><a href="#">Post</a></li>
        <li><a href="#">Edit Profile</a></li>
        <li><a href="#">Settings</a></li>
        <li><a href="#">Account Settings</a></li>
        <li><a href="#">Edit Profile</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Others</a></li>
      </ul>
    </div>
    
  </div>
  
  <div class="main-container">
    <h1>Dashboard</h1>
    <div class="alert">
      <p>
      <div class="warning"></div>
      You have <a href="#">200 Post</a> , <a href="#">10 Message</a> , <a href="#">20 Updates</a> and <a href="#">2 Notifications</a>
      </p>
    </div>
    
    <h3>Profile</h3>
    
    <div class="message">
      <p>
      <div class="pad"><span class="re"></span></div>
      <a href="#">Article (223)</a>
      </p>
      <p>this is dashboard theme where you can create use many options</p>
    </div>
    
    
    <div class="message">
      <p>
      <div class="pad"><span class="re"></span></div>
      <a href="#">Account Settings</a>
      </p>
      <p>this is dashboard theme where you can create use many options</p>
    </div>
    
    
    <div class="message">
      <p>
      <div class="pad"><span class="re"></span></div>
      <a href="#">Privacy</a>
      </p>
      <p>this is dashboard theme where you can create use many options</p>
    </div>
    
    
    <div class="message">
      <p>
      <div class="pad"><span class="re"></span></div>
      <a href="#">Your Posts</a>
      </p>
      <p>this is dashboard theme where you can create use many options</p>
    </div>
    
    
    <div class="message">
      <p>
      <div class="pad"><span class="re"></span></div>
      <a href="#">Public Posts</a>
      </p>
      <p>this is dashboard theme where you can create use many options</p>
    </div>
    
    
    <div class="message">
      <p>
      <div class="pad"><span class="re"></span></div>
      <a href="#">Updates</a>
      </p>
      <p>this is dashboard theme where you can create use many options</p>
    </div>
    
    
    <div class="message">
      <p>
      <div class="pad"><span class="re"></span></div>
      <a href="#">Notifications</a>
      </p>
      <p>this is dashboard theme where you can create use many options</p>
    </div>
    
    
    <div class="message">
      <p>
      <div class="pad"><span class="re"></span></div>
      <a href="#">Saved/Folders</a>
      </p>
      <p>this is dashboard theme where you can create use many options</p>
    </div>
    
  </div>
  
</div>

</body>
</html>

style.css

@charset "utf-8";
body {
 background: rgb(246,248,249); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(246, 248, 249, 1)), color-stop(50%, rgba(229, 235, 238, 1)), color-stop(51%, rgba(215, 222, 227, 1)), color-stop(100%, rgba(245, 247, 249, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 50%, rgba(215, 222, 227, 1) 51%, rgba(245, 247, 249, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9', GradientType=0 ); /* IE6-9 */
}
.wrapper {
 padding:10px;
 margin:auto;
 background: #eeeeee; /* Old browsers */
 background: -moz-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #eeeeee 0%, #cccccc 100%); /* IE10+ */
 background: linear-gradient(to bottom, #eeeeee 0%, #cccccc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0 ); /* IE6-9 */
 overflow:auto;
}
.header {
 padding:10px;
 margin:auto;
 background: #959595; /* Old browsers */
 background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #959595), color-stop(7%, #0d0d0d), color-stop(32%, #010101), color-stop(72%, #0a0a0a), color-stop(95%, #4e4e4e), color-stop(98%, #383838), color-stop(100%, #1b1b1b)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* IE10+ */
 background: linear-gradient(to bottom, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b', GradientType=0 ); /* IE6-9 */
 min-height: 23px;
}
.menu {
 padding:8px;
 margin:auto;
 background: #87e0fd; /* Old browsers */
 background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #87e0fd), color-stop(40%, #53cbf1), color-stop(100%, #05abe0)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* IE10+ */
 background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0', GradientType=0 ); /* IE6-9 */
}
.menu ul {
 padding:0px;
 margin:0px;
}
.menu ul li {
 display: inline;
 list-style-type: none;
 text-align: center;
}
.menu ul li a {
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f3f3f3), color-stop(51%, #ededed), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* IE10+ */
 background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 ); /* IE6-9 */
 color: #000000;
 padding: 4px 21px;
 text-align: center;
 text-decoration: none;
 border-color: #238896;
 border-radius: 2px;
 border-style: solid border-width: 0;
 box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
 transition: background-color 300ms ease-out 0s;
}
.menu ul li a:hover {
 text-decoration:none;
 color:#17AAF8;
}
.leftside {
 float:left;
 width:30%;
 padding:10px;
 margin:10px;
 background:#EBEBEB;
}
.main-container {
 float:left;
 margin:10px;
 width: 63%;
 padding:10px;
 background:#FFFFFF;
}
.main-container h1 {
 background: #959595; /* Old browsers */
 background: -moz-linear-gradient(top, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #959595), color-stop(7%, #0d0d0d), color-stop(32%, #010101), color-stop(72%, #0a0a0a), color-stop(95%, #4e4e4e), color-stop(98%, #383838), color-stop(100%, #1b1b1b)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* IE10+ */
 background: linear-gradient(to bottom, #959595 0%, #0d0d0d 7%, #010101 32%, #0a0a0a 72%, #4e4e4e 95%, #383838 98%, #1b1b1b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b', GradientType=0 ); /* IE6-9 */
 border-radius: 10px;
 color: #ffffff;
 font-size: 27px;
 padding: 3px 3px 3px 16px;
 text-align: justify;
}
.logo {
 height: 106px;
 margin: auto;
 width: 100%;
 /*background:#FFFFFF;*/
margin: auto;
}
.logo p {
 border: 2px solid;
 color: #32bde9;
 font-size: 31px;
 padding: 20px;
 text-align: center;
}
.leftmenu {
}
.leftmenu ul {
 padding:0px;
 margin:0px;
}
.leftmenu ul li {
 display:block;
 list-style-type:none;
 text-align: center;
}
.leftmenu ul li a {
 background: #ffffff; /* Old browsers */
 background: -moz-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #f3f3f3), color-stop(51%, #ededed), color-stop(100%, #ffffff)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* IE10+ */
 background: linear-gradient(to bottom, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0 ); /* IE6-9 */
 color: #000000;
 display: block;
 margin: 10px;
 padding: 10px;
 text-decoration: none;
 border-color: #238896;
 border-radius: 2px;
 border-style: solid border-width: 0;
 box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
 transition: background-color 300ms ease-out 0s;
}
.leftmenu ul li a:hover {
 color:#129FEE;
 text-decoration:none;
 box-shadow: 3px 3px 2px;
 display: block;
}
.alert {
 background: #b4e391; /* Old browsers */
 background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #b4e391), color-stop(50%, #61c419), color-stop(100%, #b4e391)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%); /* IE10+ */
 background: linear-gradient(to bottom, #b4e391 0%, #61c419 50%, #b4e391 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4e391', endColorstr='#b4e391', GradientType=0 ); /* IE6-9 */
 border-radius: 10px;
 padding: 1px 3px 3px 12px;
}
.alert p {
 color:#000000;
}
.warning {
 display: inline-block;
 height: 16px;
 width: 20px;
 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhJREFUeNp8U81PE1EQn/1oobABurW2QAkfTdOGtGnaAgYbBYweMBw1Xk3EixiMFzTGaEKCRw5cNPFkYrh65V+gN2s07QmwpUQoSmnpfnW7zixbAqF0k9+893be/N5v3sxj1qD1pyH8Hs+Hw3DYu1Yuv/ieSpVb7ee5Fk4d4Wxvn74Ti71u5zjmT29v7nc+//5foXBlDPsXzVUoAnCjweBKh8PBsLieK5UWkolEtJVC7iGajiawIwZE8el0JPJMr9dNtS5V7VC6uoR0vf6tVCw2VyigaYZOAPdkKPSG5zjQJQnUSgVqhgFT+/uPZsLh+1xbW3PCZj9VhG9gYKnf7R5UZBmYaBSYRAJOcC5Kkm1WUV5FEgmhacpJNCfnQCU0bLYYFuITD2DTUImwugpts7NQ2dgA5fAQnKXSYMnv30sXCikV1V9QSMvzIMLwyMhyt8PhkHCzpihYbrxBTFdFhZKmgV1VYapQeDk+Pj54KWUvmgauIwKC8CDs882dEBkWQ8bL13Z3QcNWkfJ5818V0Z/LjdwThEXP0NBFQp6a0QKDtQgPD7+j3lRQhYpqqBhyJgNyNgvy0RFotRoo+L+OqqOZzJNb8fgNYNnLRakhrrlcC30uV6RKVUVCjQgxsJxKwfHmprluQEKVXXt73ber1aVgNHr2PrgJNMekiGX9k8HgFzvLOkhdDZWQmhoSangApSsdHJitUyNS8iGpUCyG1Hj814+dnZ86xrGN9xrwet/2OByihEVoqGgEKuWyCY3ISTX5aM4wYK9UmLFcbik2NiaaKffR47fbZ0Y9nscSVvEsVQT1oI73E1pfhyi2DCOKoFSrpkp6OToSqthW7mw2Me12z/d4PMBiITif17vMo1O21BGZZhETaXV7G6pbW0A9RyR1i4zunVQCph7KZBZvTkwEmK+dnfMxv/+zTneC0DEVSudsjsR1VGmS4AEGz5tzExa5QcD9mWTyI+9zOp/zVgNTK5hAZ2NODW3gaGAwg+/awAOIAEiZNZpr3ONJp+f4NVlemQkE7hosy1BgnQgwBcOwwk4DzGjjFIxhUVnj6V7DsEmiuPVfgAEA86He8YcfcewAAAAASUVORK5CYII=');
}
.message {
 border: 2px solid;
 float: left;
 margin: 11px;
 padding: 10px;
 width: 44%;
 background: rgb(252,255,244); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(252, 255, 244, 1) 0%, rgba(223, 229, 215, 1) 40%, rgba(179, 190, 173, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(252, 255, 244, 1)), color-stop(40%, rgba(223, 229, 215, 1)), color-stop(100%, rgba(179, 190, 173, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(252, 255, 244, 1) 0%, rgba(223, 229, 215, 1) 40%, rgba(179, 190, 173, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(252, 255, 244, 1) 0%, rgba(223, 229, 215, 1) 40%, rgba(179, 190, 173, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(252, 255, 244, 1) 0%, rgba(223, 229, 215, 1) 40%, rgba(179, 190, 173, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(252, 255, 244, 1) 0%, rgba(223, 229, 215, 1) 40%, rgba(179, 190, 173, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead', GradientType=0 ); /* IE6-9 */
}
.re {
 display: inline-block;
 height: 16px;
 width: 20px;
 margin-right: 10px;
 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAATCAYAAACQjC21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAzZJREFUeNqslEtoE1EUhs+9dx5J0yTWtiam1Tax1SbSioiiqGhpq/iE6sInbtSVuBAUBF2IuCo+FrrrQkFFqEgRRbRSfIDaWsQXxlq1WjWpJrFJpk2mM3NnxjsBoT5axPbAZV7nfPOfc/8ZBL8FJoJYVDZ/WXFgYZ3d6S0HhLCS+d6fjLzojPU+aFOzqTiMEWjkRZF/Ue3sugMnCnxz55qIA8MwwMxlYcDYBEX6kuh7evlsb8e546qcjI2stblK/XZ3SYj8vFGxaNf+eY2nLgoO31RVkYFSFaiugW4tdq5pKiDelTelonaxL9SwVfr6OiynI++sWk50T16w/fwdgjSCrRueytq1ofqDTVSjoKlZQJzAkvKBExzAi04gvJ2pREyxBsPZNPCu8pKFO85f81Y1bEZEtNc0nm4pqlgyi2oZBfE2d8Hy3a1doqtsBtUUBnJA+turT/3hG1czyU89gqPY4w2uaiyYvmC2oatgMqgFx0QEoKmBoYH+mMtXU0U4DnpuHTnJlVav3+IorJwxnB1ksDzo7Wy+0N3etI8VJ36Oo6/r7DFfzaa9VSsOHRXs+XaTgQE0QKxVd0nhZJ3KrBs3ew8CzhdavYFSLddeNHy1Ldx2bCfLVn/ZOtNQos8vHZel6PvqDWcuId4umqbOFFLAiAJhk+Os7bWUuzzBoMEeaEpK67l/+sgfsBGR/HCvtft20+HEIIZYSodEmkJC0iHOjvG0DppuAkc40WYgAb5/uPtwKP720VgeE/I9vkmz1mzExGTKMCDCFDFVOfNhzCzGWjaZ0RAhMBB51jkWzFZQHgisa74ueKqDQLOABZHV4RzQYgp5NsAcAc4wwSDIADkd7RtVmWOKN7CyqYV3eoPm4EcJEzZ+zEC5BbnNACw7DTUzzMlSJGLmzSzKZuRRZ0fVoey7a3u2mLoy/PcMq1mEKVUk7nNPR4fhmzmHfQX5owENLSupbME/BI69uXnFsgDvnOaHCQiciT5sN6QXL4XCOfNhosIVaGis2PY4xTuKS8fLyv1tlGRv9yT/0nowVE2Oh59MiEp7YWXI33C0mZmAG7fCnDXkgThV0gnE3KkrUup/gT8EGAAnZ1DVGmLzXgAAAABJRU5ErkJggg==');
}
.pad {
 display: inline;
 margin: 10px;
 padding: 13px;
 text-align:center;
 border-radius: 50%;
 display: inline;
 margin: 10px;
 padding: 11px 2px 5px 10px;
 text-align: center;
 background:#000000;
}
.label {
 min-width:87px;
 float:left;
}
.input {
 float:left;
 min-width:100px;
 margin-right:10px;
}
.button {
 border-style: solid;
 border-width: 0;
 cursor: pointer;
 font-family: inherit;
 font-weight: bold;
 line-height: normal;
 margin: 2px;
 position: relative;
 text-decoration: none;
 text-align: center;
 display: inline-block;
 font-size: 1em;
 background-color: #2daebf;
 border-color: #238896;
 color: white;
 border-radius: 2px;
 box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
 -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
 transition: background-color 300ms ease-out;
}
.header-left1 {
 float:left;
 color: #129fee;
}
.header-right {
 float:right;
 margin-left: 10px;
 color: #129fee;
}
fieldset {
/*margin-bottom:25px;*/
}

/*-----------------------------Responsive desin code here----------------------------------------*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
.main-container {
 float: none;
 margin: 10px;
 padding: 10;
 width: 90%;
 margin: auto;
 overflow: auto;
}
.message {
 border: 2px solid;
 float: left;
 margin-top:10px;
 margin-left:0px;
 margin-right:0px;
 padding: 10px;
 width: 90%;
}
.leftside {
 float: left;
 margin: 10px;
 padding: 10px;
 width: 90%;
}
.header {
 margin: auto;
 min-height: 23px;
 overflow: auto;
 padding: 10px;
}
 .menu ul li {
 display: block;
 list-style-type: none;
 margin: 10px;
 text-align: center;
}
.leftside {
 float: none;
 margin: 0px;
 padding: 0px;
 width: 100%;
}
.menu ul li a {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #ffffff 0%, #f3f3f3 50%, #ededed 51%, #ffffff 100%) repeat scroll 0 0;
 border-color: #238896;
 border-radius: 2px;
 box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2) inset !important;
 color: #000000;
 display: block;
 margin: 10px;
 padding: 10px;
 text-decoration: none;
 transition: background-color 300ms ease-out 0s;
}
}

Friday 15 May 2015

Responsive Dashboard Design Using Html and Css

index.html

style.css

No comments:

Post a Comment