Create Responsive Website using HTML CSS and JavaScript | Bootstrap Website

Bootstrap Templates | December 2, 2020

This tutorial blog to learn how to create responsive website using HTML CSS JavaScript and Bootstrap framework.

Video Tutorial for Create "Responsive Website using HTML CSS and JavaScript | Bootstrap Website"

This tutorial video to learn how to create responsive website using HTML CSS JavaScript and Bootstrap framework.

Create Responsive Website using HTML CSS and JavaScript | Bootstrap Website [Source Code]

This source code can help you to create responsive website with Bootstrap. You can use your own images for this project.

Bootstrap CSS Source

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
</head>
<body>

<header class="header">
	<div class="container-fluid">
		<div class="row d-flex justify-content-between">
			<div class="col-md-auto">
				<a href="#!" class="logo"><img src="images/logo.png" alt="logo"></a>
			</div>
			<div class="col-md-auto">
				<nav class="main_nav">
					<ul>
						<li><a href="#home">Home</a></li>
						<li><a href="#about">About Us</a></li>
						<li><a href="#portfolio">Portfolio</a></li>
						<li><a href="#contact">Contact Us</a></li>
					</ul>
				</nav>
			</div>
		</div>		
	</div>
</header>	

<div class="banner d-flex align-items-center" style="background-image: url('images/banner.jpg');" id="home">
	<ul class="socila_links">
		<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
		<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
		<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
	</ul>	
	<div class="container">
		<div class="row">
			<div class="col-md-5">
				<div class="banner_cont">
					<h1>John Doe</h1>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod </p>
				</div>
			</div>
		</div>
	</div>
</div>			

<div class="about-section" id="about">
	<div class="container-fluid">
		<div class="row">
			<div class="col-md-5 text-justify">
				<h2 class="bdr-btm">More About John Doe</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				<a href="#contact" class="btn1">Contact Us</a>	
			</div>
			<div class="col-md">
				<div class="about-box">
					<h3 class="bdr-btm">Education</h3>
					<ul>
						<li><strong>Lorem ipsum dolor</strong> <br> sit amet, consectetur adipisicing</li>
						<li><strong>Lorem ipsum dolor</strong> <br> sit amet, consectetur adipisicing</li>
						<li><strong>Lorem ipsum dolor</strong> <br> sit amet, consectetur adipisicing</li>
					</ul>
				</div>
			</div>
			<div class="col-md">
				<div class="about-box">
					<h3 class="bdr-btm">Experience</h3>
					<ul>
						<li><strong>Lorem ipsum dolor</strong> <br> sit amet, consectetur adipisicing</li>
						<li><strong>Lorem ipsum dolor</strong> <br> sit amet, consectetur adipisicing</li>
						<li><strong>Lorem ipsum dolor</strong> <br> sit amet, consectetur adipisicing</li>
					</ul>
				</div>
			</div>
		</div>	
	</div>
</div>

<div class="portfolio-section" id="portfolio">
	<div id="port_pop_pic_bg"></div>
	<div id="port_pop_pic"></div>
	<div class="container-fluid">
		<h2 class="text-center bdr-btm bdr-btm-center">Portfolio</h2>
		<div class="row">
			<div class="col-md-4">
				<div class="portfolio-box" style="background-image: url('images/port1.jpeg');">
					<h3>Portfolio ipsum dolor</h3>
				</div>		
			</div>
			<div class="col-md-4">
				<div class="portfolio-box" style="background-image: url('images/port2.jpeg');">
					<h3>Portfolio ipsum dolor</h3>
				</div>		
			</div>
			<div class="col-md-4">
				<div class="portfolio-box" style="background-image: url('images/port3.jpeg');">
					<h3>Portfolio ipsum dolor</h3>
				</div>		
			</div>
			<div class="col-md-4">
				<div class="portfolio-box" style="background-image: url('images/port4.jpeg');">
					<h3>Portfolio ipsum dolor</h3>
				</div>		
			</div>
			<div class="col-md-4">
				<div class="portfolio-box" style="background-image: url('images/port5.jpeg');">
					<h3>Portfolio ipsum dolor</h3>
				</div>		
			</div>
			<div class="col-md-4">
				<div class="portfolio-box" style="background-image: url('images/port6.jpeg');">
					<h3>Portfolio ipsum dolor</h3>
				</div>		
			</div>
		</div>
	</div>
</div>

<div class="contact-section d-md-flex" id="contact">
  <div class="col-md-6 col-12 contact_section_left">
    <div class="contact_box">
      <i class="fa fa-phone"></i>
      <h3>Phone</h3>
      <p>512-421-3940</p>
    </div>
    <div class="contact_box">
      <i class="fa fa-envelope"></i>
      <h3>Email</h3>
      <p>support@yourdomain.com</p>
    </div>
    <div class="contact_box">
      <i class="fa fa-map-marker"></i>
      <h3>Address</h3>
      <p>1234 Lorem ipsum dolor</p>
    </div>
  </div>
  <div class="col-md-6 col-12 contact_section_right d-flex align-items-center">
    <div class="contact_box">
      <h2 class="bdr-btm">Get In Touch</h2>
      <form>
        <div>
          <input type="text" name="" placeholder="Name">
          <input type="text" name="" placeholder="Email">
          <input type="text" name="" placeholder="Subject">
          <textarea placeholder="Message">
          <input type="submit" class="inline-block" name="" value="Send Message">

        </div>
      </form>
    </div>
  </div>
</div>

<script type="text/javascript">
	portfolioList = document.querySelectorAll('.portfolio-box');
	portfolioList.forEach(function(portfolioPic) {
		portfolioPic.addEventListener('click',function(){
			bg = this.style.backgroundImage;
			document.getElementById('port_pop_pic_bg').classList.add("active")
			document.getElementById('port_pop_pic').style.backgroundImage = bg
			document.getElementById('port_pop_pic').classList.add("active")
		});	
	})
	document.getElementById('port_pop_pic_bg').addEventListener('click',function(){
			document.getElementById('port_pop_pic_bg').classList.remove("active")
			document.getElementById('port_pop_pic').classList.remove("active")
	})
</script>

</body>
</html>

CSS Code

Copy

*,*::before,*::after {
  box-sizing: border-box;
}
body{
	margin: 0;
	font-family: arial;
	background:#fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
}
img{
	max-width: 100%;
}
body,html{
	scroll-behavior: smooth;
}
.header{
	position: fixed;
	left: 0;
	top:0;
	width: 100%;
	z-index: 100;
	padding: 20px;
}
.main_nav{}
.main_nav ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.main_nav ul li{
	display: inline-block;
	margin: 0 0 0 20px;
	font-size: 16px;
}
.main_nav ul li a{
	color: #fff;
	transition: all 0.3s ease-out;
	text-decoration:none;
}
.main_nav ul li:hover a{
	color: #f12626;
}

/*banner*/
.banner{
	background-color:#0021a7;
	background-blend-mode: darken;
	min-height: 100vh;
	position: relative;
	background-size: cover;
	color: #fff;
	padding: 100px 50px 100px 0;
}
.banner h1{
	font-size: 60px;
	color: #fff;
	font-weight: 700;
}
.socila_links{
	position: absolute;
	right: 20px;
	top:50%;
	transform: translateY(-50%);
	padding: 0;
	margin: 0;
	list-style: none;
	font-size:22px;
}
.socila_links li{
	margin: 10px 0;
}
.socila_links li a{
	color: #fff
}
.socila_links li a:hover{
	color: #f12626
}
.banner_cont{
	padding: 30px;
	background:rgba(0,0,0,.6);
	transform: scaleY(0);
	animation:1s scaleAnim 1s;
	opacity: 0;
	animation-fill-mode: forwards;
}
@keyframes scaleAnim{
	0%{transform: scaleY(0); opacity: 0;}
	100%{transform: scaleY(1); opacity: 1; }
}

/*about-section*/
.about-section{
	background-color: #010519;
	padding: 80px 20px;
	color: #fff;		
}
.about-section h2{
	font-size: 40px;
	color: #fff;
	margin: 0 0 30px;
}
.bdr-btm{
	position: relative;
	padding-bottom: 15px;
}
.bdr-btm:after{
	content: "";
	width: 50px;
	height: 3px;
	background-color: #f12626;
	position: absolute;
	left: 0;
	top: 100%;
}
.bdr-btm.bdr-btm-center:after{
	left: 50%;
	margin-left: -25px;
}
.btn1{
	border: 0px;
	display: inline-block;
  color: white;
  background: #020f46;
  padding: 11px 25px;
  margin: 0 0 15px 0;
  font: 14px/20px "Open Sans", sans-serif;
  height: 42px;
  outline: none;
  width: auto;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
}
.about-box{
	background: #020f46;
	padding: 30px;
}
.about-box ul{
	padding-left: 15px;
}
.about-box ul li{
	margin-bottom: 20px;
}
.about-box h3{
	margin-bottom: 20px;
}


/*portfolio-section*/
.portfolio-section{
	padding: 80px 0;
	background-color: #000
}
.portfolio-section h2{
	font-size: 40px;
	color: #fff;
	margin: 0 0 30px;
}
.portfolio-box{
	padding-bottom: 70%;
	background-size: cover;
	background-position: center center;
	margin:30px 15px 30px;
	transition: all 0.3s ease-out;
	background-blend-mode: darken;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
.portfolio-box:hover{
	background-color:#0021a7;
}
.portfolio-box h3 {
	position: absolute;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 25px;
	color: #fff;
	transition: all 0.3s ease-out;
	transform: scale(5);
	opacity: 0;
	pointer-events: none;
}
.portfolio-box:hover h3{
	transform: scale(1);
	opacity: 1;
}
#port_pop_pic_bg{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: rgba(0,0,0,0.8);
	opacity: 0;
	transition: all 0.3s ease-out; 
	pointer-events: none;
}
#port_pop_pic_bg.active{
	opacity: 1;
	pointer-events: auto;
}
#port_pop_pic{
	position: fixed;
	left: 100px;
	top: 100px; 
	width: calc(100% - 200px);
	height: calc(100% - 200px);
	z-index: 1000;
	transform: scale(0);
	transition: all 0.3s ease-out; 
	background-size: cover;
	background-position: center center;
}
#port_pop_pic.active{
	transform: scale(1);
}

/*contact-section*/
.contact-section {
  background:#010519;
  color: #fff; 
}
.contact_section_left {
  padding: 40px 0; 
}
.contact_box{
  padding: 0 50px;
  margin-bottom: 30px;
}
.contact_box:last-child {
  margin-bottom: 0px;
}
.contact_box h3 {
  color: #fff;
  margin-bottom: 10px;
}
.contact_box i.fa {
  color: #fff;
  font-size: 30px;
  display: block;
  padding: 0 0 15px;
  margin-bottom: 15px;
  border-bottom: 1px solid #fff; 
}
.contact_section_right {
	padding: 40px 0; 
	background-color:  #020f46
}
.contact_section_right h2 {
  color: #fff; 
  margin-bottom: 30px;
}
input:not([type="submit"]),
textarea{
	border: 1px solid #abb3c0;
	color: #667080;
	padding: 10px 16px;
	margin: 0 0 15px 0;
	font: 14px/22px "Open Sans", sans-serif;
	background-color: white;
	height: 42px;
	outline: none;
	width: 100%;
	text-align: left;
	border-radius: 4px;
}
textarea{
	height: 80px
}
input[type="submit"]{
	border: 0px;
  color: white;
  background: #010519;
  padding: 11px 25px;
  margin: 0 0 15px 0;
  font: 14px/20px "Open Sans", sans-serif;
  height: 42px;
  outline: none;
  width: auto;
  border-radius: 4px;
  text-transform: uppercase;
  text-align: center;
}



/*This Media Query use for Mobile View*/
@media screen and (max-width: 767px){
	.header{
		padding: 20px 0;
	}
	.logo{
		display: block;
		margin: 0 auto;
		width: 100px;
	} 
	.main_nav{
		text-align: center;
		margin-bottom: 30px;
	} 
	.main_nav ul li{
		margin: 0 3px;
	}	

	.banner{
		background-size: 200%;
		background-position: top center;
    background-repeat: no-repeat;
	}
	.banner h1{ font-size: 40px; }
	.about-section h2{
		font-size: 30px;
	}
	.about-box{
		margin: 15px 0;
	}
	#port_pop_pic{
		left: 30px;
		top: 30px;
		width: calc(100% - 60px);
		height: calc(100% - 60px)
	}

}

Create Responsive Website using HTML CSS and JavaScript | Bootstrap Website

Video Tutorial for Create "Responsive Website using HTML CSS and JavaScript | Bootstrap Website"

Create Responsive Website using HTML CSS and JavaScript | Bootstrap Website [Source Code]

Build a Stop-Watch Web App Using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery

Best way to create animated loaders using CSS