Responsive Website Design: Responsive website design

index.html

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Responsive Design</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div class="wrapper">
  <div class="header1">
    <div class="left-side">
      <div class="logo">
        <h3>LOGO</h3>
      </div>
      
    </div>
    
    <div class="left-side">
      <div class="menu">
        <ul>
          <li><a href="#" class="active">Home</a></li>
          <li><a href="#">Test1</a></li>
          <li><a href="#">Test2</a></li>
          <li><a href="#">Test3</a></li>
          <li><a href="#">Test4</a></li>
        </ul>
      </div>
      
    </div>
    
  </div>
  
  <div class="header2">
    <h3>Responsive web design</h3>
    <p>Responsive web design (RWD) is an approach to web design aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones).
      
      A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries,an extension of the @media rule, in the following ways:</p>
  </div>
  
  <div class="container">
    
    <div class="block"> <img src="http://curdweb.com/navin/fullwidthlider.com/images/slider2.png">
      <h3>heading</h3>
      <p>information</p>
    </div>
    
    
    <div class="block"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_2-1024x512.jpg">
      <h3>heading</h3>
      <p>information</p>
    </div>
    
    
    <div class="block"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/templatemo_header_1-1024x512.jpg">
      <h3>heading</h3>
      <p>information</p>
    </div>
    
    
    <div class="block"> <img src="http://www.curdweb.com/wp-content/uploads/2014/08/about_1.jpg">
      <h3>heading</h3>
      <p>information</p>
    </div>
    
  </div>
  
  <div class="article-block">
    <h3>Blog</h3>
    <p>One of the hottest issues in web developer circles this year is accessibility of websites on various devices other than the standard desktop or laptop screens. While the subject is not new, it has taken on a relatively new approach with respect to how to deal with the opportunities ahead.
      
      With mobile devices, tablets, and similar gadgets gaining ground faster than most can keep up, it behooves organizational stakeholders to address the issues encompassing user interactions and acceptance of their websites on the latest diminutive gizmos. Oh, and don't forget other devices acquiring web-enabled screens such as refrigerators, washing machine,s and other everyday appliances.
      
      Users who access your websites through their mobile devices or other display screens really do not care what method you use, just as long as that they can effectively navigate your website on whatever device they happen to be using. For that reason, the two methods described in this article have been devised for web developers to meet the challenge, and while responsive (RWD) and adaptive (AWD) design methods are both addressing the issue for rendering websites on mobile devices, there are subtle differences between them that I will attempt to explain.</p>
  </div>
  
  <div class="article-block">
    <h3>Blog</h3>
    <p>The phrase Responsive Web Design was coined several years ago by Ethan Marcotte and first introduced in his A List Apart article, "Responsive Web Design" and later, his book, A Book Apart - Responsive Web Design. Marcotte's key points of RWD are listed below. In my post on the subject, "How to get started with Responsive Web Design," I described how a responsive website design starts with the primary task of incorporating CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. These key points, as well as the use of EMs, flexible images, flexible videos, and fluid type, allow the responsive website to adapt its layout to the viewing device, user agent, and environment.
      
      The distilled definition of a responsive web design is that it will fluidly change and respond to fit any screen or device size.</p>
  </div>
  
</div>

<footer>
  <p>© All Right Reserved</p>
</footer>
</body>
</html>

style.css

@charset "utf-8";
body {
 background:#333333;
}
.wrapper {
 padding:20px;
 margin:auto;
 background:#CCCCCC;
}
.header1 {
 padding:10px;
 background: rgb(222,239,255); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(222, 239, 255, 1) 0%, rgba(152, 190, 222, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(222, 239, 255, 1)), color-stop(100%, rgba(152, 190, 222, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(222, 239, 255, 1) 100%, rgba(152, 190, 222, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(222, 239, 255, 1) 100%, rgba(152, 190, 222, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(222, 239, 255, 1) 100%, rgba(152, 190, 222, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(222, 239, 255, 1) 100%, rgba(152, 190, 222, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#deefff', endColorstr='#98bede', GradientType=0 ); /* IE6-9 */
 margin:auto;
 min-height: 42px;
}
.logo {
 float:left;
 /*height:100px;*/
width:200px;
}
.logo h3 {
 margin:0px;
 color:#009900;
}
.header2 {
 padding:10px;
 background: rgb(255,252,252); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(255, 252, 252, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(255, 255, 255, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 252, 252, 1)), color-stop(50%, rgba(41, 184, 229, 1)), color-stop(100%, rgba(255, 255, 255, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(255, 252, 252, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(255, 255, 255, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(255, 252, 252, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(255, 255, 255, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(255, 252, 252, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(255, 255, 255, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(255, 252, 252, 1) 0%, rgba(41, 184, 229, 1) 50%, rgba(255, 255, 255, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fffcfc', endColorstr='#ffffff', GradientType=0 ); /* IE6-9 */
 margin:auto;
}
.header2 p {
 color: #000;
 font-family: georgia;
 font-weight: bold;
 line-height: 24px;
 text-align: justify;
}
.header2 h3 {
 color: #009900;
 font-family: georgia;
 text-align: center;
}
.left-side {
 float:left;
 width: 48%;
}
.menu {
 float: right;/*background:#003300;*/

}
.menu ul {
 padding:0px;
 margin:0px;
}
.menu ul li {
 display: inline;
 line-height: 48px;
 list-style-type: none;
 margin: 0 20px;
}
.menu ul li a {
 color: #009900;
 padding: 8px 8px 31px;
 text-decoration: none;
}
.menu ul li a:hover {
 text-decoration:none;
 color:#999900;
 box-shadow: 0 -15px 1px 3px #ccc;
 /*border-bottom: 1px ridge #FF0000;*/
padding: 8px 8px 31px;
}
menu ul li a:active {
 text-decoration:none;
 color:#999900;
 box-shadow: 0 -15px 1px 3px #9FC3E1;
 border-bottom: 1px ridge #FF0000;
 padding: 8px 8px 31px;
}
.container {
 padding:10px;
 background: rgb(238,238,238); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238, 238, 238, 1)), color-stop(100%, rgba(204, 204, 204, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0 ); /* IE6-9 */
 margin:auto;
 overflow:auto;
}
.article-block {
 padding:10px;
 background: rgb(238,238,238); /* Old browsers */
 background: -moz-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(238, 238, 238, 1)), color-stop(100%, rgba(204, 204, 204, 1))); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* IE10+ */
 background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(204, 204, 204, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0 ); /* IE6-9 */
 margin:auto;
 overflow:auto;
}
.article-block h3 {
 color:#009900;
}
.block {
 float: left;
 margin: 3px;
 padding: 10px;
 width: 270px;
 box-shadow: 3px 4px 5px 1px #333;
}
.block img {
 width:100%;
 margin:auto;
}
.block h3 {
 color:#009900;
}
.block p {
 color:#000000;
}
footer {
 padding:10px;
 background: #a7cfdf; /* Old browsers */
 background: -moz-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #a7cfdf), color-stop(100%, #23538a)); /* Chrome,Safari4+ */
 background: -webkit-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* Chrome10+,Safari5.1+ */
 background: -o-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* Opera 11.10+ */
 background: -ms-linear-gradient(top, #a7cfdf 0%, #23538a 100%); /* IE10+ */
 background: linear-gradient(to bottom, #a7cfdf 0%, #23538a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a', GradientType=0 ); /* IE6-9 */
}
footer p {
 text-align:center;
}

/*for responsive code starts here*/
 @media screen and (min-device-width: 320px) and (max-device-width: 756px) {
 .block {
 box-shadow: 3px 4px 5px 1px #ccc;
 float: none!important;
 margin:0px;
 padding: 0px;
 width: 100%;
}
.logo {
 float: none!important;
 text-align: center;
 width: 100%;
}
.left-side {
 float: none;
 width: 100%;
}
.menu {
 float: none;
 margin: auto;
 text-align: center;
}
.menu ul li {
 display: block;
 line-height: 48px;
 list-style-type: none;
 margin: 0 20px;
}
.menu ul li a {
 color: #333333;
 display: inline-block;
 padding:0px;
 text-align: center;
 text-decoration: none;
}
.logo h3 {
}
}

Thursday 14 May 2015

Responsive website design

index.html

style.css

No comments:

Post a Comment