Features :
- Fully Responsive Design
- Easy to Customize
- Used Font Awesome Icons
- Compatible with all Browsers
- Subscribe Form
- Social Media Following Section
Source Code :
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Makcode Bootstrap Templates</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<section id="nav-bar">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" href="#"><img src="">MAK CODE LOGO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#Top">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#service">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about-us">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#client">Client Says</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#footer">Contact Us</a>
</li>
</ul>
</div>
</nav>
</section>
<!-- Banner Section -->
<section id="banner">
<div class="container">
<div class="row">
<div class="col-md-6">
<p class="text-title">MAK CODE WEBSITE TEMPLATES</p>
<p>Subscribe our channel on Telegram & Youtube For Basic Web development Tutorials</p>
<a href="https://www.youtube.com/channel/UCG5PMU3TIXT1jCWI2PyfYpg/videos"><img class="img-mid-ban" src="images/youtube.png"></a><a href="https://t.me/makcodes"><img class="img-mid-ban" src="images/telegram.png"></a><a href="https://www.instagram.com/makcode.in/?hl=en"><img class="img-mid-ban" src="images/ig.webp"></a><br>
</div>
<div class="col-md-6 text-center">
<img class="right-banner" src="images/right-banner.webp">
</div>
</div>
</div>
<img src="images/wave.svg" class="bottom-image">
</section>
<!-- Services Section -->
<section id="service">
<div class="container text-center">
<h1 class="title">What we DO ?</h1>
<div class="row text-center">
<div class="col-md-4 service">
<img src="images/1.png" class="s-c-image">
<h3>MAK CODE</h3>
<p>Makcode Learn PHP HTML CSS and More learn new thing like speed </p>
</div>
<div class="col-md-4 service">
<img src="images/1.png" class="s-c-image">
<h3>MAK CODE</h3>
<p>Makcode Learn PHP HTML CSS and More learn new thing like speed </p>
</div>
<div class="col-md-4 service">
<img src="images/1.png" class="s-c-image">
<h3>MAK CODE</h3>
<p>Makcode Learn PHP HTML CSS and More learn new thing like speed </p>
</div>
</div>
</div>
</section>
<!-- About Us Section -->
<section id="about-us">
<div class="container">
<h1 class="title text-center">About Us</h1>
<div class="row">
<div class="col-md-6 about-us">
<p class="about-title">Why you use Our Service</p>
<ul>
<li>We work on time</li>
<li>We work on time</li>
<li>We work on time</li>
<li>We work on time</li>
<li>We work on time</li>
</ul>
</div>
<div class="col-md-6">
<img class="image-fluid" src="images/about.png">
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id=client>
<div class="container">
<h1 class="title text-center">What Client Says</h1>
<div class="row offset-1">
<div class="col-md-5 testimonials">
<p>Subscribe our channel on Telegram & Youtube For Basic Web development Tutorials</p>
<img src="images/testimonial-guy.jpg">
<p class="user-line"><b>MAX</b><br>Founder Of Website</p>
</div>
<div class="col-md-5 testimonials">
<p>Subscribe our channel on Telegram & Youtube For Basic Web development Tutorials</p>
<img src="images/testimonial-guy.jpg">
<p class="user-line"><b>MAX</b><br>Founder Of Website</p>
</div>
</div>
</div>
</section>
<!-- Footer Section -->
<center><h1 class="title text-center">Follow Us On Social Media</h1>
<a href="https://www.youtube.com/channel/UCG5PMU3TIXT1jCWI2PyfYpg/videos"><img class="img-mid-ban" src="images/youtube.png"></a><a href="https://t.me/makcodes"><img class="img-mid-ban" src="images/telegram.png"></a><a href="https://www.instagram.com/makcode.in/?hl=en"><img class="img-mid-ban" src="images/ig.webp"></a></center>
<section id="footer">
<img src="images/wave-footer.svg" class="footer-image">
<div class="container">
<div class="row">
<div class="col-md-4 footer-box">
<a href=""><img src="images/logo.png"></a>
<p>Subscribe our channel on Telegram & Youtube For Basic Web development Tutorials</p>
</div>
<div class="col-md-4 footer-box">
<p><b>Contact Us</b></p>
<p><i class="fa fa-map-marker"></i>MAK CODE</p>
<p><i class="fa fa-phone"></i>+1 - 000000000</p>
<p><i class="fa fa-envelope-o"></i>website@gmail.com</p>
</div>
<div class="col-md-4 footer-box">
<p><b>Subscribe Now</b></p>
<input type="email" name="text" class="form-control" placeholder="Your Email id">
<button type="button" class="btn btn-success">Subscribe</button>
</div>
</div>
<hr>
<p class="copyright">Website Template By <a href="https://www.makcode.in/">MAK CODE</p></a>
</div>
</section>
<script>
var scroll = new SmoothScroll('a[href*="#"]');
</script>
</body>
</html>style.css
*
{
margin: 0;
padding: 0;
}
body
{
font-family: sans-serif;
}
#nav-bar
{
position: sticky;
top: 0;
z-index: 10;
}
.navbar
{
background-image: linear-gradient(27deg, #f8f9fa, #f8f9fa);
padding: 20 !important;
}
.navbar-brand img
{
height: 30px;
padding-left: 20px;
}
.navbar-nav li
{
padding: 0 15px;
}
.navbar-nav li a
{
color: #000000 !important;
font-weight: 600;
}
.fa-bars
{
color: #000000;
font-size: 30px !important;
}
.navbar-toggler
{
outline: none !important;
}
/*Banner Section*/
#banner
{
/* background: linear-gradient(170deg, #131530, #23d67d); */
background: linear-gradient(170deg, #131530, #615e5e);
color: #fff;
padding-top: 5%;
}
.text-title
{
font-size: 40px;
font-weight: 600;
margin-top: 100px;
}
.btn-danger
{
padding: 3px;
}
.img-mid-ban
{
width: 100px;
margin: 10px;
}
.right-banner
{
width: 400px;
}
.bottom-image
{
width: 100%;
}
/*Service Section*/
#service
{
padding: 80px 0;
}
.s-c-image
{
width: 100px;
margin-top: 20px;
}
.service
{
padding: 20px;
}
.service h4
{
padding: 5px;
margin-top: 25px;
text-transform: uppercase;
}
.title::before
{
content: '';
background: linear-gradient(170deg, #131530, #23d67d);
height: 5px;
width: 300px;
margin-left: auto;
margin-right: auto;
display: block;
}
.title::after
{
content: '';
background: linear-gradient(170deg, #131530, #23d67d);
height: 5px;
width: 300px;
margin-left: auto;
margin-right: auto;
display: block;
}
/*About us Section*/
#about-us
{
background: #f8f9fa;
padding-bottom: 50px;
padding-top: 50px;
}
.about-title
{
font-size: 30px;
font-weight: 600;
margin-top: 8%;
}
#about-us ul li
{
margin: 10px 0;
}
#about-us ul
{
margin-left: 20px;
}
/*Testimonial Section*/
#client
{
margin: 100px 0;
}
.testimonials
{
border-left: 4px solid #23d67d;
margin-top: 50px;
margin-bottom: 50px;
}
.testimonials img
{
height: 60px;
width: 60px;
border-radius: 50%;
margin: 0 10px;
}
.user-line
{
display: inline-block;
font-size: 12px;
}
/*footer section*/
#footer
{
/* background: linear-gradient(170deg, #131530, #23d67d); */
background: linear-gradient(170deg, #131530, #161619);
color: #fff;
}
.footer-image
{
width: 100%;
}
.footer-logo
{
width: 100%;
}
.footer-box
{
padding: 20px;
}
.footer-box img
{
width: 120px;
margin-bottom: 20px;
}
.footer-box .fa
{
margin-right: 8px;
font-size: 25px;
text-align: center;
width: 40px;
height: 40px;
padding-top: 7px;
border-radius: 2px;
background: linear-gradient(170deg, #131530, #727b77);
}
.footer-box .form-control
{
box-shadow: none;
border: none;
border-radius: 0;
margin-top: 25px;
max-width: 250px;
}
.footer-box .btn-success
{
box-shadow: none !important;
border: none;
border-radius: 0;
margin-top: 20px;
background: linear-gradient(170deg, #131530, #727b77);
}
.copyright
{
margin-bottom: 0;
padding-bottom: 20px;
text-align: center;
}
hr
{
background-color: #fff;
}