Basic Responsive Website Source Code
HTML Code
<html>
<head>
<title>How To Create A Basic Bootstrap IT Website</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" />
</head>
<body>
<div id="wrapper">
<!-- Start Header Top -->
<div class="row">
<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>
</div>
<!-- End Header Top -->
<!-- Start Header Bottom -->
<div class="row header-bottom">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12" align="center">
<img src="images/Logo.png" width="160" height="108" />
</div>
<div class="col-lg-6 col-md-6 col-sm-5 col-xs-12">
<form action="" method="post">
<div class="input-group">
<input type="text" class="form-control search" placeholder="Search Here">
<span class="input-group-btn">
<button type="button" class="btn search_btn"><i class="glyphicon glyphicon-search"></i></button>
</span>
</div>
</form>
</div>
<div class="col-lg-3 col-md-3 col-sm-4 col-xs-12" align="center">
<div class="social-links">
<ul>
<li><a href="#!"><img src="images/fb.png" width="35" height="33"></a></li>
<li><a href="#!"><img src="images/tw.png" width="35" height="33"></a></li>
<li><a href="#!"><img src="images/in.png" width="35" height="33"></a></li>
</ul>
</div>
</div>
</div>
<!-- End Header Bottom -->
<!----- Start Header (or) Menu ------>
<nav class="navbar navbar-default">
<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="#!">Home</a></li>
<li><a href="#!">About Us</a></li>
<li><a href="#!">Servises</a></li>
<li><a href="#!">Products</a></li>
<li><a href="#!">Gallery</a></li>
<li><a href="#!">Contact Us</a></li>
</ul>
</div>
</nav>
<!----- End Header (or) Menu ------>
<!----- Start Slider (or) Banner ------>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="images/banner.jpg" alt="Slider 1" style="width:100%;">
</div>
<div class="item">
<img src="images/banner.jpg" alt="Slider 2" style="width:100%;">
</div>
<div class="item">
<img src="images/banner.jpg" alt="Slider 3" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!----- End Slider (or) Banner ------>
<!----- Start Content ------>
<div class="row">
<div class="col-md-12">
<div class="header-font">Lorem Ipsum</div>
<div class="header-font-border"></div>
<div class="content-text">
<p style="line-height:24px; color:#000; font-size:17px;" 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>
</div>
</div>
<div class="clearfix m50_0">
<div class="row" align="center">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="row"><img src="images/icons/1.png" width="60" height="57"></div>
<div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's...</div>
<div class="m10_0">
<a href="#!" class="btn header-top-btn">Read More</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="row"><img src="images/icons/2.png" width="60" height="57"></div>
<div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's...</div>
<div class="m10_0">
<a href="#!" class="btn header-top-btn">Read More</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="row"><img src="images/icons/3.png" width="60" height="57"></div>
<div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's...</div>
<div class="m10_0">
<a href="#!" class="btn header-top-btn">Read More</a>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
<div class="row"><img src="images/icons/4.png" width="60" height="57"></div>
<div class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's...</div>
<div class="m10_0">
<a href="#!" class="btn header-top-btn">Read More</a>
</div>
</div>
</div>
</div>
<!------ End Content ------->
<!------ Start Testimonials ------>
<div class="row testimonials">
<div class="header-font">Lorem Ipsum</div>
<div class="header-font-border"></div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row testimonials-parts">
<div class="col-md-4"><img src="images/user.png" width="144" height="139"></div>
<div class="col-md-8">
<p style="padding-top:18px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
</div>
</div>
<div class="col-md-6 col-sm-12 col-xs-12">
<div class="row testimonials-parts">
<div class="col-md-4"><img src="images/user.png" width="144" height="139"></div>
<div class="col-md-8">
<p style="padding-top:18px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
</div>
</div>
</div>
<!------ End Testimonials ------>
<!------ Start Our Clients ------->
<div class="row">
<div class="header-font">Lorem Ipsum</div>
<div class="header-font-border"></div>
<div class="row m20_0">
<div class="our-clients-list" align="center">
<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>
</div>
<!------ End Ourr Clients ------->
<!------ Start Footer ------->
<div class="row footer">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-12">
<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="col-lg-7 col-md-7 col-sm-7 col-xs-12">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="footer-heading">Company Links</div>
<div class="footer-right">
<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>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="footer-heading">Social Links</div>
<a href=""><img src="images/fb.png" width="35" height="33" /></a>
<a href=""><img src="images/tw.png" width="35" height="33" /></a>
<a href=""><img src="images/in.png" width="35" height="33" /></a>
</div>
</div>
<div class="clearfix"></div>
<div class="row footer_bottom">
<div class="col-md-9">
© Copy 2018. All rights reserved by Free Time Learning (<a href="http://www.freetimelearning.com" class="footer-link" target="_blank">www.freetimelearning.com</a>)
</div>
<div class="col-md-3" align="right">
Designed By - <a href="http://www.freetimelearning.com" class="footer-link" target="_blank">F T L</a>
</div>
</div>
</div>
<!------ End Footer ------->
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>
CSS Code
@charset "utf-8"; /**** Developed by http://www.freetimelearning.com/ *****/
/* CSS Document */
/* (#) means ID Based */
/* (.) means class Based */
*{
margin-left:auto;
margin-right:auto;
}
.row{ margin:0px;}
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;
}
.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;}
@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;} }
/********* Start Header Top ***********/
.header-top{padding:5px 22px; 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;}
/********* End Header Top ***********/
/********* Start Header Bottom ***********/
.header-bottom{padding:10px 0; background:#fff0e5;}
.search{ padding:12px 15px; border-radius:2px; height:40px; margin-top:35px;}
.search_btn{ background:#d85600; color:#FFF; padding:12px 15px; border-radius:2px; margin-top:35px;}
.search_btn:active, .search_btn:focus, .search_btn:hover{ background:#6B2727; color:#FFF;}
.btn:focus{ outline:none !important;}
.social-links{float:left; padding-top:40px; padding-left:20px;}
.social-links ul{ list-style:none;}
.social-links ul li{ float:left; padding:0px 10px;}
@media only screen and (min-width:320px) and (max-width:480px){
.search{ margin-top:10px;}
.search_btn{ margin-top:10px;}
.social-links{padding-bottom:10px;}
}
@media only screen and (min-width:600px) and (max-width:768px){.social-links ul li{ padding:0px 7px;} }
/********* Start Header Bottom ***********/
/*********** Start Menu **********/
.navbar-default{
border-radius:2px;
background:#CCC;
margin-bottom:0px;
}
.navbar-default ul{ padding:7px 0px 0px;}
.navbar-default .navbar-nav>li>a{
color:#000;
text-align:center;
padding:7px 47px;
font-size:14px;
font-weight:600;
text-transform:uppercase;
}
.navbar-default .navbar-nav>li>a:hover{ background:#d85600; color:#FFF; border-radius:2px;}
@media only screen and (min-width:600px) and (max-width:768px){
.navbar-default .navbar-nav>li>a{padding:7px 25px; }
}
/*********** End Menu **********/
/****** Start Content **********/
.header-font{ font-size:24px; color:#000; text-align:center; padding:20px 0px 5px; font-weight:600;}
.header-font-border{ border-bottom:2px solid #333; text-align:center; width:100px; margin-bottom:20px;}
.font-17{ font-size:17px; font-weight:600; color:#000; padding:10px 0px;}
.content-text{ width:93%; margin:10x auto !important; font-size:11pt; color:#666; line-height:24px;}
/****** Start Content **********/
/****** Start Testimonials *****/
.testimonials{ background:#EEE; padding:10px 0px 30px;}
.testimonials-parts{background:#fff0e5; color:#000; line-height:26px; font-size:17px; margin-top:30px;}
/****** End Testimonials ********/
/******* Start Our Clients **********/
.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-list ul li{ float:left; padding:0px 22%;}}
/******* End Our Cliets **********/
/****** Start Footer ********/
.footer{color:#FFF; background:#d85600; padding:20px 0px 10px; margin-top:20px;}
.footer-heading{ font-size:16px; font-weight:600; padding:5px 0px 15px;}
.footer-right{padding:0px 2px; margin-top:-7px;}
.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{ color:#FFF;}
.footer_bottom a{ color:#FFF; text-decoration:none;}
.footer_bottom a:hover{ color:#CCC;}
/****** End Footer ********/
