Reference Websites
How To Create A Responsive Website
  Start Coding
 Basic Structure
  HTML Code
<html>
<head>
<title>Basic Responsive Website</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>

<div id="wrapper">


</div>

</body>
</html>
  CSS Code
*{
	margin-left:auto;
	margin-right:auto;
}
body{
	font-family:Arial, Helvetica, sans-serif;
	background:#FFF;
	margin:0px;
	}
.clearfix{ clear:both;}
#wrapper{ 
	width:1022px; 
	margin:0px auto; 
	background:#FFF; 
	border:1px solid #CCC;
}
@media only screen and (min-width:320px) and (max-width:480px){ #wrapper{ width:375px;} }
@media only screen and (min-width:600px) and (max-width:768px){#wrapper{ width:768px;} }
 Step 1 : Header Top
Reference Image
  HTML Code
<div class="header-top" align="right">
	<button type="button" class="header-top-btn" name="">Sign In</button>
    <button type="button"class="header-top-btn" name="">Sign Up</button>
</div>
  CSS Code
.header-top{ width:980px; padding:5px 22px; float:left;	background:#d85600;	}
.header-top-btn{ 
	background:#993d00; color:#FFF; padding:5px 15px; border-radius:2px; font-size:13px;
	cursor:pointer; border:1px solid #993d00; text-decoration:none;
}	
.header-top-btn:hover{background: #6B2727;color:#FFF;}	

@media only screen and (min-width:320px) and (max-width:480px){
	.header-top{ width:345px; background:#069; float:left; padding:5px 15px;}
	}

@media only screen and (min-width:600px) and (max-width:768px){
	.header-top{ width:738px; background:#069; float:left; padding:5px 15px;}
	}
 Step 2 : Header Bottom
Reference Image
  HTML Code
<div class="header-bottom">
	<div class="header-bottom-left"><img src="images/Logo.png" width="160" height="108" /></div>
    <div class="header-bottom-center">
   	  <div class="search">
        	<input type="text" class="search_form" placeholder="Search" name="search" />
            <span><a href="#"><img src="images/Search.jpg" width="35" height="34" /></a></span>
        </div>
    </div>
    <div class="header-bottom-right">
    	<div class="social-links">
        	<ul>
            	<li><a href="https://www.facebook.com/" target="_blank"><img src="images/fb.png" width="35" height="33" /></a></li>
                <li><a href="https://twitter.com/" target="_blank"><img src="images/tw.png" width="35" height="33" /></a></li>
                <li><a href="https://www.linkedin.com/m/login/" target="_blank"><img src="images/in.png" width="35" height="33" /></a></li>
            </ul>
        </div>
    </div>
</div>
  CSS Code
.header-bottom{width:980px; padding:10px 22px; background:#fff0e5; float:left;}
.header-bottom-left{width:280px; padding-left:10px; float:left;}

.header-bottom-center{width:400px; padding-left:10px; float:left;}
.header-bottom-center .search{width:400px; float:left; padding:40px 0px 0px;}
.search_form{ 
	border:1px solid #CCC; height:33px; float:left; width:300px; 
	padding:2px 20px; font-size:16px; margin-top:1px; color:#000;
}

.header-bottom-right{width:270px;padding-left:10px;float:left;}	
.social-links{float:left; padding-top:40px; padding-left:20px;}
.social-links ul{ list-style:none;}
.social-links ul li{ float:left; padding:0px 15px;}
@media only screen and (min-width:320px) and (max-width:480px){
	.header-bottom{ width:355px; float:left; clear:both; padding:5px 10px;}
	.header-bottom-left{ width:175px; padding:0px 90px;}
	.header-bottom-center{ width:355px;}
	.header-bottom-center .search{width:355px; padding:5px 0px 0px;}
	.header-bottom-right{ width:355px; padding:0px;}
	.social-links{ padding-top:10px;}
}
@media only screen and (min-width:600px) and (max-width:768px){
	.header-bottom{ width:768px; float:left; clear:both; padding:5px 0px;}
	.header-bottom-left{ width:170px; padding:0px 20px;}
	.header-bottom-center{ width:300px;}
	.header-bottom-center .search{width:300px; padding:35px 0px 0px;}
	.search_form{ width:240px;}
	.header-bottom-right{ width:200px;}
	.social-links{ padding-top:35px;}
	.social-links ul li{ float:left; padding:0px 5px;}
}
 Step 3 : Menu (or) Navbar
Reference Image
  HTML Code
<div class="nav">
    <ul>
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="services.html">Servises</a></li>
        <li><a href="gallery">Gallery</a></li>
        <li><a href="blog.html">Blog</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>
  CSS Code
.nav{ width:1024px; float:left; background:#CCC; }
.nav ul{ list-style:none; }
.nav ul li{list-style:none; font-size:14px;	text-transform:uppercase; padding:15px 0px 15px 0px;
	margin:0px auto; float:left;font-weight:bold; }
.nav ul li a{ padding:15px 45px 15px 50px; margin:0px; text-decoration:none; color:#000;}
.nav ul li a:hover{ color:#FFF; background:#d85600; }
.active a{ background:#d85600; color:#FFF !important;} 

@media only screen and (min-width:320px) and (max-width:480px){
	.nav{ width:375px; background:#069; position:relative;clear:both;}
	.nav ul{list-style:none; padding:5px 0px; border-bottom:none;}
	.nav ul li{ width:100%; text-align:center; padding:5px 0px 8px;}	
	.nav ul li a{ color:#FFF; font-size:12px; background:#069; padding:0px 0px !important;}
	.active a{ background:#069 !important; color:#FFF !important; border-bottom:none !important;} 
}

@media only screen and (min-width:600px) and (max-width:768px){
	.nav{ width:768px; background:#09C;}
	.nav ul{list-style:none; padding:0px; }
	.nav ul li{text-align:center; padding:8px 0px;}
	.nav ul li a{ padding:8px 30px; color:#FFF;}
	.active a{ background:#069 !important; color:#FFF !important; border-bottom:none !important;} 
	}
 Step 4 : Slider (or) Banner
Reference Image
  HTML Code
<div class="banner">
   	<img src="images/banner.jpg" alt="Banner Image" width="100%;" /> 
</div>
  CSS Code
.banner{ 
	width:1024px;
	height:auto;
}
@media only screen and (min-width:320px) and (max-width:480px){
	.banner{ width:375px; margin:0px; clear:both;}
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.banner{ width:768px; margin:0px; clear:both;}
	}
 Step 5 : Content Part
Reference Image
  HTML Code
<div class="content">
<div class="header-font">Lorem Ipsum</div>
<div class="header-font-border"></div>

<p style="line-height:24px;" align="center">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's 
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries</p>

<div class="content-part" align="center">
	<div><i><img src="images/icons/1.png" width="60" height="57" /></i></div>
    <div class="font-17">Lorem Ipsum</div>
    <div class="margin-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</div>
    <div class="p15_0">
    	<a href="#!" class="header-top-btn">Read More</a>
    </div>
</div>
<div class="content-part" align="center">
	<div><i><img src="images/icons/2.png" width="60" height="57" /></i></div>
    <div class="font-17">Lorem Ipsum</div>
    <div class="margin-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</div>
    <div class="p15_0">
    	<a href="#!" class="header-top-btn">Read More</a>
    </div>
</div>
<div class="content-part" align="center">
	<div><i><img src="images/icons/3.png" width="60" height="57" /></i></div>
    <div class="font-17">Lorem Ipsum</div>
    <div class="margin-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</div>
    <div class="p15_0">
    	<a href="#!" class="header-top-btn">Read More</a>
    </div>
</div>
<div class="content-part" align="center">
	<div><i><img src="images/icons/4.png" width="60" height="57" /></i></div>
    <div class="font-17">Lorem Ipsum</div>
    <div class="margin-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's...</div>
    <div class="p15_0">
    	<a href="#!" class="header-top-btn">Read More</a>
    </div>
</div>
</div>
  CSS Code
.content{ width:1024px; float:left;}
.header-font{ font-size:24px; color:#000; text-align:center; padding:40px 0px 5px; font-weight:600;}
.header-font-border{ border-bottom:2px solid #333; text-align:center; width:100px; margin-bottom:20px;}

.content-part{ width:250px; float:left; padding:25px 3px;}
.content-part .font-17{ font-size:17px; font-weight:600; color:#000; padding:10px 0px;}
.margin-text{ width:90%; margin:10x auto !important; font-size:11pt; color:#666; line-height:24px;}

@media only screen and (min-width:320px) and (max-width:480px){
	.content{ width:375px;}
	.header-font{ font-size:18px;}
	.content p{ text-align:justify; font-size:13px; padding:0px 15px;}
	.content-part{ width:250px; padding:20px 60px;}
}
@media only screen and (min-width:600px) and (max-width:768px){
	.content{ width:768px;}
	.header-font{ font-size:20px;}
	.content p{ text-align:justify; font-size:13px; padding:0px 15px;}
	.content-part{ width:300px; padding:20px 35px; margin:5px;}
}
 Step 6 : Testimonials
Reference Image
  HTML Code
<div class="testimonials">

	<div class="header-font">Testimonials</div>
	<div class="header-font-border"></div>
    <div class="testimonials-parts">
    	<div class="testimonials-parts-left" align="center">
        	<img src="images/user.png" width="144" height="139" />
         </div>
        <div class="testimonials-parts-right">
        	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
        </div>
    </div>
    
    <div class="testimonials-parts">
    	<div class="testimonials-parts-left" align="center">
        	<img src="images/user.png" width="144" height="139" />
        </div>
        <div class="testimonials-parts-right">
        	Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...
        </div>
    </div>
    
</div>
  CSS Code
.testimonials{ width:1024px; background:#eeeeee; padding:0px 0px 40px; float:left; margin-bottom:10px;}
.testimonials-parts{width:460px; margin:15px 20px 5px; float:left; padding:15px 6px; background:#fff0e5; color:#000;}
.testimonials-parts-left{ width:160px; float:left;}
.testimonials-parts-right{ width:280px; float:left; color:#000; text-align:justify; font-size:14px; line-height:24px; padding: 20px 20px 0px 0px;}
@media only screen and (min-width:320px) and (max-width:480px){
	.testimonials{ width:375px; clear:both;}
	.testimonials-parts{ width:315px; padding:5px 10px;}
	.testimonials-parts-left{ padding:0px 70px;}
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.testimonials{ width:768px; clear:both;}
	.testimonials-parts{ width:315px; padding:5px 10px;}
	.testimonials-parts-left{ width:375px;}
	.testimonials-parts-right{ width:300px; padding:5px;}
	}
 Step 7 : Our Clients
Reference Image
  HTML Code
<div class="our-clients">
    <div class="header-font">Our Clients</div>
     <div class="header-font-border"></div>
  	<div class="clearfix"></div>
    <div class="our-clients-list">
     <ul>
     	<li><a href="https://www.microsoft.com/en-in" target="_blank">
        	<img src="images/clients/client-1.png" width="160" height="70" />
        </a></li>
        <li><a href="https://www.google.co.in" target="_blank">
        	<img src="images/clients/client-2.png" width="160" height="70" />
        </a></li>
        <li><a href="https://www.amazon.in/" target="_blank">
        	<img src="images/clients/client-3.png" width="160" height="70" />
        </a></li>
        <li><a href="https://www.facebook.com/" target="_blank">
        	<img src="images/clients/client-4.png" width="160" height="70" />
        </a></li>
        <li><a href="https://www.oracle.com/in/index.html" target="_blank">
        	<img src="images/clients/client-5.png" width="160" height="70" />
        </a></li>
     </ul>
    </div>
</div>
  CSS Code
.our-clients{ width:1024px; padding:0px 0px 5px; float:left; margin-bottom:10px;}
.our-clients-list{ list-style:none; float:left;}
.our-clients-list ul{ list-style:none;}
.our-clients-list ul li{ float:left; padding:0px 16px;}
@media only screen and (min-width:320px) and (max-width:480px){
	.our-clients{ width:375px; clear:both;}
	.our-clients-list ul li{ padding:0px 70px;}
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.our-clients{ width:768px; clear:both;}
	.our-clients-list ul li{ padding:0px 90px;}
	}
 Step 8 : Footer
Reference Image
  HTML Code
<div class="footer">
	<div class="footer-left">
    	<div class="footer-heading">About Company</div>
        <p align="justify" style="line-height:24px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text..Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
    </div>
    <div class="footer-right">
    	<div class="footer-heading">Company Links</div>
        <ul>
        	<li><a href="#">Blog</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Terms and Conditions</a></li>
            <li><a href="#">Privacy Policy</a></li>
        </ul>
    </div>
    <div class="footer-right">
    	<div class="p_left_30">
    	<div class="footer-heading">Social Links</div>
            &nbsp; <a href=""><img src="images/fb.png" width="35" height="33" /></a> &nbsp; &nbsp;
            <a href=""><img src="images/tw.png" width="35" height="33" /></a> &nbsp; &nbsp;
            <a href=""><img src="images/in.png" width="35" height="33" /></a>
        </div>
    </div>
    <div class="clearfix"></div>
    <div class="footer-bottom">
    	<div class="footer-bottom-left">
        	&copy; Copy 2018.  All rights reserved by  Free Time Learning &nbsp; (<a href="http://www.freetimelearning.com" class="footer-link" target="_blank">www.freetimelearning.com</a>)
        </div>
        <div class="footer-bottom-right">
        	Designed By  -  <a href="http://www.freetimelearning.com" class="footer-link" target="_blank">F T L</a>
        </div>
    </div>
</div>
  CSS Code
.footer{ width:1024px; color:#FFF; float:left; background:#d85600; padding:20px 0px 10px; margin-top:20px;}
.footer-heading{ font-size:16px; font-weight:600; padding:5px 0px 15px;}
.footer-left{ width:414px; float:left; padding:10px 30px;} 
.footer-right{ width:221px; float:left; padding:10px 2px;} 
.footer-right ul{ list-style:none; padding:0px;}
.footer-right ul li{ font-size:14px; padding:5px 0px;}
.footer-right ul li a{ text-decoration:none; color:#FFF;}
.footer-right ul li a:hover{ color:#999;} 
.footer-bottom{ width:974px; color:#FFF; font-size:12px; padding:8px 25px 2px;}
.footer-bottom-left{ width:774px; float:left;}
.footer-bottom-right{ width:200px; float:left; text-align:right;}
.footer-link{ color:#FFF; text-decoration:none;}
.p_left_30{ padding-left:30px;}
@media only screen and (min-width:320px) and (max-width:480px){
	.footer{ width:375px; clear:both;}
	.footer-left{ width:355px; padding:5px 10px; margin-bottom:20px;}
	.footer-heading{ width:355px;}
	.footer-right{ width:355px; padding:5px 10px; margin-bottom:20px;}
	.p_left_30{ padding-left:1px;}
	.footer-bottom{ width:355px; padding:5px 10px;}
	.footer-bottom-left{ width:355px; text-align:center; margin-bottom:10px;}
	.footer-bottom-right{ width:355px; text-align:center;}
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.footer{ width:768px; clear:both;}
	.footer-left{ width:350px; padding:5px 10px; margin-bottom:20px;}
	.footer-heading{ width:100%;}
	.footer-right{ width:170px; padding:5px 10px; margin-bottom:20px;}
	.p_left_30{ padding-left:1px;}
	.footer-bottom{ width:758px; padding:5px 10px;}
	.footer-bottom-left{ width:555px;}
	.footer-bottom-right{ width:203px; text-align:center;}
	}