How to make or create a Free Professional Website using HTML CSS Bootstrap

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;
 }

One thought on “How to make or create a Free Professional Website using HTML CSS Bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *