Reference Websites
Create A Bootstrap Interior Design Website
  Start Coding
 Step 1 : Basic HTML Structure
  HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap Interior Design Website - Free Time Learning</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=yes">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<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="container-fluid">
     <div class="main_shadow">


     </div>
</div>

<script type="text/javascript" src="http://www.freetimelearning.com/js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
  CSS Code
*{
	margin-left:auto;
	margin-right:auto;
}
.row{ margin:0px;}
body{
	font-family:Arial, Helvetica, sans-serif;
	background:#FFF;
	margin:0px;
	}
.main_shadow{
	-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;
	margin-bottom:20px;
	}
.clearfix{ clear:both;}
.m10_0{ margin:10px auto;} .m20_0{ margin:20px auto;} .m30_0{ margin:30px auto;} .m40_0{ margin:40px auto;} .m50_0{ margin:50px auto;}
 Step 2 : Header
Responsive Website
  HTML Code
<nav class="navbar navbar-inverse">
    <div class="navbar-header">
        <button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <!--<a href="#" class="navbar-brand">Logo</a>-->
        </div>
        <div id="navbarCollapse" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li> <a href="http://freetimelearning.com" target="_blank">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>
</nav>
  CSS Code
.navbar-brand {
    float: left;
    height: 65px;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 20px;
}
.navbar-inverse{ 
	border-radius:2px; 
	background:#000; 
	margin-bottom:0px; 
	border:none !important;
}
.navbar-inverse ul{ padding:9px 0px 5px;}
.navbar-inverse .navbar-nav>li>a{ 
	color:#FFF; 
	padding:7px 25px; 
	font-size:14px;
	text-transform:uppercase;
}
.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:focus, .navbar-inverse .navbar-nav>.open>a:hover{
	color:#CCC;
	}
@media only screen and (min-width:600px) and (max-width:768px){
	.navbar-inverse .navbar-nav>li>a{padding:7px 15px; font-size:11px; }
	}
@media only screen and (min-width:1025px) and (max-width:1280px){
	.navbar-inverse .navbar-nav>li>a{ padding:7px 21px; }
   }
@media only screen and (min-width:960px) and (max-width:1024px){
	.navbar-inverse .navbar-nav>li>a{ padding:7px 10px; }
   }
 Step 3 : Menu Bar
Responsive Website
  HTML Code
<div class="row main_header">
	<div class="col-md-4 col-sm-4 col-xs-12 logo" align="center">
    	<a href="http://www.freetimelearning.com/" target="_blank"><img src="images/logo.png" class="img-responsive" alt="Logo"></a></div>
    <div class="col-md-4 col-sm-5 col-xs-12">
    	<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>
    <div class="col-md-4 col-sm-3 col-xs-12 hidden-xs">
    	<div class="header-right pull-right">
        	<button type="submit" name="submit" class="black-btn">CALL US NOW</button>
        </div>
    </div>
</div>
  CSS Code
.header-center{padding:20px 20px 0px 80px; color:#000; text-decoration:none; font-size:16px; font-weight:600;}
.header-right{ padding:25px 30px 0px 0px;}
.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;}
@media only screen and (min-width:600px) and (max-width:768px){
	.logo{ padding-top:10px;}
	.header-center{padding:5px 10px 0px; font-size:14px;}
	.header-right{ padding:12px 10px 0px 0px;}
	.black-btn{ padding:8px 15px;}
	}
@media only screen and (min-width:320px) and (max-width:480px){
	.header-center{padding:5px 10px 0px; font-size:14px; text-align:center;}
	}
 Step 4 : Banner (or) Slider
Responsive Website
  HTML Code
<div class="row">
	<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>
</div>
  CSS Code
.slider{background:url(../images/slider.png); height:450px;}
.slider-h3{ font-size:30px; padding:220px 0px 10px; color:#000; text-align:center; text-shadow:1px 0.5px #CCC;}
.btn{ background:#72ac00; color:#FFF; padding:6px 20px; font-size:16px; 
text-decoration:none; border-radius:3px; text-shadow:none;}
.btn:hover{ background:#4E9B00; color:#FFF;}
@media only screen and (min-width:320px) and (max-width:480px){
.slider{background:url(../images/slider.png); height:250px;} 
.slider-h3{ font-size:22px; padding:40px 0px 20px 30px; color:#FFF;} 
}
 Step 5 : Content
Responsive Website
  HTML Code
<div class="row">
     
     <div class="content-h1">Design Experts</div>
     <div class="content-h4">BRINGING BEAUTY To YOUR WORLD</div>
     
     <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
     	<div align="center"><img src="images/icon-1.png" class="img-responsive" alt=""></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="col-lg-3 col-md-3 col-sm-6 col-xs-12">
     	<div align="center"><img src="images/icon-2.png" class="img-responsive" alt=""></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="col-lg-3 col-md-3 col-sm-6 col-xs-12">
     	<div align="center"><img src="images/icon-3.png" class="img-responsive" alt=""></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="col-lg-3 col-md-3 col-sm-6 col-xs-12">
     	<div align="center"><img src="images/icon-4.png" class="img-responsive" alt=""></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-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-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;}
@media only screen and (min-width:320px) and (max-width:480px){.content-h1{ font-size:30px;}}
 Step 6 : Content Bottom
Responsive Website
  HTML Code
<div class="row">
    <div class="content-bottom">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 content-bottom-parts"><img src="images/aboutus.png" class="img-responsive" alt=""></div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 content-bottom-parts"><img src="images/services.png" class="img-responsive" alt=""></div>
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 content-bottom-parts"><img src="images/estimates.png" class="img-responsive" alt=""></div>
        <div class="clearfix"></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>
</div>
  CSS Code
.content-bottom{ padding:50px; background:#F3F3F3;}
.content-bottom-parts{ padding:20px 0px 60px;}
.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; font-size:16px;}
.p50_0{ padding:50px 0px;}
.content-bottom-btn{ background:#72ac00; color:#FFF; padding:10px 100px; font-size:16px; 
text-decoration:none; margin:50px;}
.content-bottom-btn:hover{ background:#4E9B00;}
@media only screen and (min-width:600px) and (max-width:768px){.content-bottom-btn{ padding:10px 30px;}}
@media only screen and (min-width:320px) and (max-width:480px){
	.content-bottom{ padding:50px 20px;}
	.content-bottom-parts-h3{ font-size:18px;}
	.content-bottom-parts-p{ color:#000; line-height:26px; padding:5px; text-align:justify;}
	.content-bottom-btn{ padding:10px 15px; margin:5px;}
	.p50_0{ padding:30px 0px;}
}
 Step 7 : Footer
Responsive Website
  HTML Code
<div class="row">
	<div class="footer">
    	<div class="col-lg-7 col-md-7 col-sm-6 col-xs-12">
            <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>
        <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
            <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>
    </div>
</div>
  CSS Code
.footer{background:url(../images/footer.jpg) no-repeat; padding:90px 50px 60px; height:65px;}
.footer-left{padding:0px 0px;}
.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{padding:0px 0px;}
.footer-right-p{ font-size:13px; color:#000; padding:10px 0px 15px; text-align:right;}
@media only screen and (min-width:600px) and (max-width:768px){
	.footer{padding:30px 10px 60px; background:#FFF;}
	.footer-left ul li a{ color:#000; padding:0px 10px;}
}
@media only screen and (min-width:320px) and (max-width:480px){
	.footer{padding:10px 10px 30px; background:#FFF; text-align:center;}	
	.footer-left ul li a{ color:#000; padding:0px 5px;}
}