Responsive Template Design Tutorial in Bootstrap CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Responsive Template Design Bootstrap</title>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/Responsive_Template_Design_Bootstrap.css">
</head>
<body>
<!--How to make Website Layout with Bootstrap ?-->
<!--3 Bootstrap CSS Classes : Container, Row, Col-->
<!--When use "Col" Class ? Answer: For Equal Width Div Tag-->
<!--Total width of Grid in Every row is 12-->
<!--Col Class for different Break Points-->
<!--Extra Large:col-lg, Large:col-lg, Medium:col-md, Small:col-sm, Extra Small-->
<!--Total width of Column Grid must be maximum 12 in one Row-->
<div id="header">
<div class="container">
<div class="row">
<div class="col-md-4">
<h1 id="logo">Company Name</h1>
</div>
<div class="col-md-8">
<ul id="menu" class="float-md-end">
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">Gallery</a></li>
<li><a href="">Products</a></li>
<li><a href="">Contact Us</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="banner" class="py-5">
<div class="container">
<div class="row">
<div class="col-md-8 col-lg-6">
<div class="banner-title">
<h1 class="title">Some Heading Goes Here</h1>
<p class="lead">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Asperiores ratione cum
ex deserunt
sequi quibusdam atque ipsam adipisci fuga repellat.</p>
</div>
</div>
</div>
</div>
</div>
<div class="container section">
<div class="row">
<div class="col-md-12">
<h2 class="section-head">Some Heading Goes Here</h2>
</div>
<div class="col-sm-6 col-md-4">
<div class="service-box">
<i class="fa fa-anchor"></i>
<h3>Some Heading</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Asperiores, saepe!</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="service-box">
<i class="fa fa-bar-chart"></i>
<h3>Some Heading</h3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Atque, at.</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="service-box">
<i class="fa fa-diamond"></i>
<h3>Some Heading</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium, corrupti.</p>
</div>
</div>
</div>
</div>
<div id="testimonials" class="section">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="section-head text-white">Testimonials</h2>
</div>
<div class="col-md-6">
<div class="testimonial">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsum optio in quisquam corporis
iusto fuga illo aperiam, amet dolore nulla?</p>
<img src="images/bill-gates.jpg" alt="">
<div class="author">Bill Gates</div>
<div class="author-company">Microsoft</div>
</div>
</div>
<div class="col-md-6">
<div class="testimonial">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime necessitatibus consequatur
similique dolorum excepturi, soluta accusamus deserunt qui recusandae vel!</p>
<img src="images/steve-jobs.jpg" alt="">
<div class="author">Steve Jobs</div>
<div class="author-company">Apple</div>
</div>
</div>
</div>
</div>
</div>
<div id="news" class="container section">
<div class="row">
<div class="col-md-12">
<h2 class="section-head">Recent News</h2>
</div>
<div class="col-md-6 col-lg-3">
<div class="news-post">
<img src="images/post-1.jpg" alt="">
<h3><a href="">News Heading Here</a></h3>
<div class="post-date">April 30, 2020</div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, optio.</p>
<a href="" class="readmore">Read More</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="news-post">
<img src="images/post-2.jpg" alt="">
<h3><a href="">News Heading Here</a></h3>
<div class="post-date">April 30, 2020</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, laboriosam!</p>
<a href="" class="readmore">Read More</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="news-post">
<img src="images/post-3.jpg" alt="">
<h3><a href="">News Heading Here</a></h3>
<div class="post-date">April 30, 2020</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, fuga?</p>
<a href="" class="readmore">Read More</a>
</div>
</div>
<div class="col-md-6 col-lg-3">
<div class="news-post">
<img src="images/post-4.jpg" alt="">
<h3><a href="">News Heading Here</a></h3>
<div class="post-date">April 30, 2020</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi, repellat.</p>
<a href="" class="readmore">Read More</a>
</div>
</div>
</div>
</div>
<div id="footer-sidebar">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="footer-widget">
<h4>About Company</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus laudantium placeat
quasi distinctio, animi possimus.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, optio.</p>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-widget">
<h4>Latest News</h4>
<ul class="latest-news">
<li><a href="">Lorem ipsum dolor sit amet consectetur.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur.</a></li>
<li><a href="">Lorem ipsum dolor sit amet consectetur.</a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-4">
<div class="footer-widget">
<h4>Company Address</h4>
<address>
<b>Yahoo Baba, Inc.</b><br>
555 Hill Road, Ambala Cantt<br>
HARYANA, INDIA 133001<br>
P : (123) 456-7890
</address>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container">
<div class="row">
<div class="col-md-6">copyright@2020 company name.</div>
<div class="col-md-6">
<ul id="social-icons" class="float-md-end">
<li><a href="" class="fa fa-facebook-square"></a></li>
<li><a href="" class="fa fa-twitter-square"></a></li>
<li><a href="" class="fa fa-linkedin-square"></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Below File is css/Responsive_Template_Design_Bootstrap.css File.
a:hover {
text-decoration: none;
}
.section {
padding-top: 70px;
padding-bottom: 70px;
}
.section h2.section-head {
color: #000000;
text-align: center;
margin-bottom: 40px;
}
.section h2.section-head:after {
background: #e74c3c;
content: "";
display: block;
width: 100px;
height: 3px;
margin: 20px auto;
}
#header {
color: #ffffff;
background: #e74c3c
}
#logo {
font-size: 2.0rem;
margin-top: 5px;
}
#menu {
list-style: none;
margin: 0;
padding: 0;
}
#menu li {
display: inline-block;
}
#menu li a {
color: #ffffff;
text-decoration: none;
padding: 15px 10px;
display: block;
}
#menu li a:hover {
background: #c0392b;
}
#banner {
background: url("../images/banner.jpg") no-repeat 0 0;
background-size: cover;
}
.banner-title {
padding-top: 5rem;
}
.banner-title h1 {
background: rgba(255, 255, 255, 0.8);
display: inline-block;
padding: 10px;
margin: 0;
}
.banner-title p.lead {
color: #ffffff;
background: rgba(231, 76, 60, 0.7);
padding: 10px;
}
.service-box {
text-align: center;
}
.service-box i.fa {
color: #e74c3c;
font-size: 70px;
margin-bottom: 15px;
}
#testimonials {
color: #ffffff;
background: url("../images/testimonial-bg.jpg") no-repeat 0 0;
background-size: cover;
padding: 50px 0;
position: relative;
}
#testimonials:before {
background: rgba(52, 73, 94, 0.7);
content: "";
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.testimonial img {
border-radius: 50%;
margin-bottom: 5px;
}
.news-post img {
width: 100%;
margin-bottom: 10px;
}
.news-post h3 {
font-size: 1.35rem;
}
.news-post h3 a {
color: #e74c3c;
}
.post-date {
font-size: 13px;
margin-bottom: 2px;
}
.post-date:before {
content: "\f073";
font-family: FontAwesome;
padding-right: 5px;
}
a.readmore {
font-size: 14px;
color: #e74c3c;
}
a.readmore:after {
content: "\f101";
font-family: FontAwesome;
padding-left: 5px;
}
#footer-sidebar {
color: #ffffff;
background: #34495e;
padding: 20px 0;
}
.footer-widget h4:after {
content: "";
background: #ffffff;
display: block;
width: 50px;
height: 2px;
margin: 5px 0;
}
.footer-widget a {
color: #ffffff;
}
.latest-news {
list-style: none;
padding: 0;
margin: 0;
}
.latest-news li {
margin-bottom: 3px;
}
.latest-news li:before {
content: "\f101";
font-family: FontAwesome;
padding-right: 5px;
}
.latest-news li a {
text-decoration: none;
}
#footer {
color: #ffffff;
background: #2c3e50;
padding: 10px 0;
}
#social-icons {
list-style: none;
color: #ffffff;
margin: 0;
padding: 0;
}
#social-icons li {
display: inline-block;
padding-left: 5px;
}
#social-icons li a {
color: #ffffff;
font-size: 23px;
text-decoration: none;
}
@media (max-width: 992px) {
.news-post {
margin-bottom: 30px;
}
}
@media (max-width: 768px) {
#logo {
text-align: center;
margin: 10px 0;
}
#menu {
text-align: center;
}
.banner-title {
padding-top: 0;
}
.banner-title h1 {
font-size: 1.7rem;
}
.section {
padding-top: 40px;
padding-bottom: 40px;
}
.testimonial {
text-align: center;
margin-bottom: 30px;
/* opacity: 1; */
}
.service-box {
margin-bottom: 30px;
}
.footer-widget {
margin-bottom: 20px;
}
#footer {
text-align: center;
}
#social-icons {
margin-top: 10px;
}
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment