Google News
logo
Interior Design Website
  Start Coding
 Basic Structure
  HTML Code
<html>
<head>
<title>INTERIOR DESIGN WEBSITE</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
</head>
<body>

<div class="main">


</div>

</body>
</html>
  CSS Code
body{ font-family:Arial, Helvetica, sans-serif; background:#f3f3f3; margin:0px auto !important;}
.main{ 
	width:1300px; margin:0px auto 20px;
	-webkit-box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important; 
	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.3) !important;
}
.p10_0{ padding:10px 0px;}.p20_0{ padding:20px 0px;}.p30_0{ padding:30px 0px;} 
.p40_0{ padding:40px 0px;} .p50_0{ padding:50px 0px;}
.clearfix{ clear:both;}
 Step 1 : Menu Bar
Reference Image
  HTML Code
<div class="navbar">
	<ul>
    	<li><a href="#!">Home</a></li>
        <li><a href="#!">About Us</a></li>
        <li><a href="#!">Services</a></li>
        <li><a href="#!">Products</a></li>
        <li><a href="#!">Gallery</a></li>
        <li><a href="#!">Contact Us</a></li>
    </ul>
</div>
  CSS Code
.navbar{width:1200px; float:left; background:#000; padding:0px 50px;}
.navbar ul{ list-style:none; float:left; padding:0px;}
.navbar ul li{ text-transform:uppercase; text-align:center; float:left; padding:0px 20px;}
.navbar ul li a{ text-decoration:none; font-size:14px; color:#FFF;}
.navbar ul li a:hover{color:#CCC;}
 Step 2 : Header
Reference Image
  HTML Code
<div class="header">
	<div class="header-left"><a href="index.html"><img src="images/logo.png" width="388" height="90"></a></div>
    <div class="header-center">
    	<p>CALL US : <span class="green"><a href="#">(+91)9963XXXX68</a></span></p>
        <p>EMAIL ID : <span class="green"><a href="mailto:freetimelearn@gmail.com">freetimelearn@gmail.com</a></span></p>
    </div>
    <div class="header-right" align="right">
    	<button type="submit" name="submit" class="black-btn">CALL US NOW</button>
    </div>
</div>
  CSS Code
.header{ width:1200px; float:left; background:#FFF; padding:10px 50px;}
.header-left{ width:500px; float:left; padding:0px;}
.header-center{ width:400px; float:left; padding:0px 0px; color:#000; text-decoration:none; font-size:16px; font-weight:600;}
.header-right{ width:180px; float:left; padding:30px 0px 0px 120px;}
.black-btn{ padding:8px 30px; background:#000; color:#FFF; border-radius:2px; border:#000 1px solid; cursor:pointer;} 
.black-btn:hover{ background:#333; text-decoration:none;}
.green{ color:#72ac00; text-decoration:none;} .green a{ color:#72ac00; text-decoration:none;} .green a:hover{ color:#4E9B00;}
 Step 3 : Slider
Reference Image
  HTML Code
<div class="slider">
	<div class="slider-h3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
    <div class="p30_0" align="center"><a href="#" class="btn">Click Here!</a></div>
</div>
  CSS Code
.slider{ width:1300px; background:url(../images/slider.png); height:430px; float:left; }
.slider-h3{ font-size:30px; padding:200px 0px 10px; color:#000; text-align:center; text-shadow:1px 0.5px #CCC;}
.btn{ background:#72ac00; color:#FFF; padding:9px 20px; font-size:16px; 
text-decoration:none; border-radius:3px; text-shadow:none;}
.btn:hover{ background:#4E9B00;}
 Step 4 : Content
Reference Image
  HTML Code
<div class="content">
	<div class="content-h1">Design Experts</div>
    <div class="content-h4">BRINGING BEAUTY To YOUR WORLD</div>
    
    <div class="content-parts">
    	<div align="center"><img src="images/icon-1.png" width="226" height="226"></div>
        <div class="content-parts-h4">Lorem Ipsum</div>
        <div class="content-parts-p">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 1500.</div>
    </div>
    <div class="content-parts">
    	<div align="center"><img src="images/icon-2.png" width="226" height="226"></div>
        <div class="content-parts-h4">Lorem Ipsum</div>
        <div class="content-parts-p">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 1500.</div>
    </div>
    <div class="content-parts">
    	<div align="center"><img src="images/icon-3.png" width="226" height="226"></div>
        <div class="content-parts-h4">Lorem Ipsum</div>
        <div class="content-parts-p">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 1500.</div>
    </div>
    <div class="content-parts">
    	<div align="center"><img src="images/icon-4.png" width="226" height="226"></div>
        <div class="content-parts-h4">Lorem Ipsum</div>
        <div class="content-parts-p">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 1500.</div>
    </div>
</div>
  CSS Code
.content{ width:1200px; padding:0px 50px; float:left; background:#FFF;}
.content-h1{ font-size:60px; text-align:center !important; padding:30px 0px 5px; color:#000; text-transform:uppercase;}
.content-h4{ font-size:22px; text-align:center !important; padding:0px 0px 35px; color:#000; text-transform:uppercase;}
.content-parts{ width:300px; float:left; padding:10px 0px;}
.content-parts-h4{ font-size:20px; text-transform:uppercase; color:#72ac00; text-align:center; padding:15px 0px; font-weight:500;}
.content-parts-p{ color:#000; line-height:26px; padding:5px 20px; text-align:justify;}
 Step 5 : Content Bottom
Reference Image
  HTML Code
<div class="content-bottom">
	<div class="content-bottom-parts"><img src="images/aboutus.png" width="300" height="200"></div>
    <div class="content-bottom-parts"><img src="images/services.png" width="300" height="200"></div>
    <div class="content-bottom-parts"><img src="images/estimates.png" width="300" height="200"></div>
    
    <div class="content-bottom-parts-h3">Top Most Interior Designs</div>
    <div class="content-bottom-parts-p">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, but also 
    the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="p50_0" align="center">
    	<a href="#!" class="content-bottom-btn">3D Projects</a>&nbsp;<a href="#!" class="content-bottom-btn">New  Projects</a>
    </div>
</div>
  CSS Code
.content-bottom{ width:1200px; padding:50px; float:left;}
.content-bottom-parts{ width:300px; padding:20px 50px 60px; float:left;}
.content-bottom-parts-h3{ font-size:30px; text-align:center; color:#72ac00; text-transform:uppercase; padding:20px 0px;}
.content-bottom-parts-p{ color:#000; line-height:26px; padding:5px 50px; text-align:center;}
.content-bottom-btn{ background:#72ac00; color:#FFF; padding:10px 100px; font-size:16px; 
text-decoration:none; margin:50px;}
.content-bottom-btn:hover{ background:#4E9B00;}
 Step 6 : Footer
Reference Image
  HTML Code
<div class="footer">
	<div class="footer-left">
    	<ul>
        	<li><a href="#!">Home</a></li>
            <li><a href="#!">About Us</a></li>
            <li><a href="#!">Blog</a></li>
            <li><a href="#!">Services</a></li>
            <li><a href="#!">Contact Us</a></li>
        </ul>
    </div>
    <div class="footer-right">
    	<div class="footer-right-p">
        &copy; <script language="javascript" type="text/javascript">document.write(new Date().getFullYear());</script>. All rights reserved by <a href="http://www.freetimelearning.com" target="_blank" class="green">Free Time Learning.</a>
        </div>
    </div>
</div>
  CSS Code
.footer{ width:1200px; background:url(../images/footer.jpg) no-repeat; padding:90px 50px 10px; float:left; height:65px;}
.footer-left{width:700px; padding:0px 0px; float:left;}
.footer-left ul{ list-style:none; padding:0px;}
.footer-left ul li{ padding:0px; float:left;}
.footer-left ul li a{ color:#000; padding:0px 20px; font-size:13px; text-decoration:none;}
.footer-left ul li a:hover{ color:#666;}

.footer-right{width:500px; padding:0px 0px; float:left;}
.footer-right-p{ font-size:13px; color:#000; padding:20px 0px 10px; text-align:right;}