How to Make a Website with FullPage slider using HTML CSS and JavaScript | fullScreen slider website

HTML Templates | December 2, 2020

This is a tutorial blog for creating HTML template with full screen slider using HTML CSS and Vanilla JavaScript. You can easy to learn with this blog.

Video Tutorial for "Make a Website with FullPage slider using HTML CSS and JavaScript | fullScreen slider website"

This is a tutorial video for creating HTML template with full screen slider using HTML CSS and Vanilla JavaScript. You can easy to learn with this video.

Make a Website with FullPage slider using HTML CSS and JavaScript [Source Code]

This source code can help you to create Full-Page slider Website. 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" type="text/css" 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">
</head>
<body>

<header class="header">
	<div class="container-fluid">
		<div class="row d-flex align-items-center">
			<div class="col-auto">
				<a href="#" class="logo"><img src="images/logo.png" alt="logo"></a>
			</div>
			<div class="col text-right">
				<a class="nav_icon" id="nav_icon" href="#!">
					<i class="fa fa-bars"></i>
				</a>
			</div>
		</div>
	</div>
</header>	

<div class="main_container">
	<div class="slide_transform" id="slide_transform">
		<div class="block-row d-flex align-items-center" style="background-image: url(images/bg1.jpg); ">
			<div class="container">
				<div class="row">
					<div class="col-md-7">
						<h2>Website Design</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.</p>
					</div>
				</div>
			</div>	
		</div>
		<div class="block-row d-flex align-items-center" style="background-image: url(images/bg2.jpg); ">
			<div class="container">
				<div class="row">
					<div class="col-md-7">
						<h2>Logo Design</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.</p>
					</div>
				</div>
			</div>	
		</div>
		
		<div class="block-row d-flex align-items-center" style="background-image: url(images/bg3.jpg); ">
			<div class="container">
				<div class="row">
					<div class="col-md-7">
						<h2>Website Development</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.</p>
					</div>
				</div>
			</div>	
		</div>
		<div class="block-row d-flex align-items-center" style="background-image: url(images/bg4.jpg); ">
			<div class="container">
				<div class="row">
					<div class="col-md-7">
						<h2>Digital Marketing</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.</p>
					</div>
				</div>
			</div>	
		</div>
	</div>
</div>

<div class="img_trigger">
	<ul>
		<li><img src="images/bg1.jpg"></li>
		<li><img src="images/bg2.jpg"></li>
		<li><img src="images/bg3.jpg"></li>
		<li><img src="images/bg4.jpg"></li>
	</ul>
</div>
			
<footer class="footer">
	<div class="container">
		<ul class="social_links">
			<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
			<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
			<li><a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a></li>
			<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
		</ul>
	</div>
</footer>
<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*::before,*::after {
  box-sizing: border-box;
}
body{
	margin: 0;
	font-family: arial;
	background:#fff;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
}
img{
	max-width: 100%;
}

/*header*/
.header{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 1000;
	padding: 15px 30px;
	background:rgba(17, 21, 49, 0.80);
}
.nav_icon{
	font-size: 40px;
	color: #fff;
}

.block-row{
	min-height: 100vh;
	background-size: cover;
	background-position: center center;
	background-blend-mode: darken;
	background-color: rgba(48,64,166,0.8);
	font-size: 20px;
	color: #fff;
}
.block-row h2{
	font-size: 60px;
	font-weight: 700
}

.img_trigger{
	position: fixed;
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 100
}
.img_trigger ul{
	padding: 0;
	margin: 0;
	list-style: none;
}
.img_trigger ul li{
	width: 100px;
	margin:20px 0;
	cursor: pointer;
	transition: all 0.3s ease-out;
	position: relative;
}
.img_trigger ul li:hover{
	transform: scale(1.1);
}

.main_container{
	height: 100vh;
	overflow: hidden;
}
.slide_transform{
	transition: all 0.5s ease-out;
}

.footer{
	padding: 7px 0;
	text-align: center;
	color: #fff;
	background:rgb(29 36 84);
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 100;
}
.social_links{
	text-align: center;
	padding: 0;
	margin: 0;
	list-style: none;
}
.social_links li{
	display: inline-block;
	margin:0 20px;
	font-size: 24px;
}
.social_links li a i{
	color: #fff;
	transition: all 0.3s ease-out;
}
.social_links li a:hover i.fa-facebook{
	color: #3b5998 
}
.social_links li a:hover i.fa-twitter{
	color: #00acee 
}
.social_links li a:hover i.fa-linkedin{
	color: #0e76a8;
}
.social_links li a:hover i.fa-instagram{
	color: #3f729b 
}

JavaScript Code

Copy

slide_transform = document.getElementById('slide_transform');
img_trigger = document.querySelectorAll('.img_trigger ul li');
img_trigger.forEach(function(eachElement,index) {
  eachElement.addEventListener('click',function(){
    if(index == 0){
      slide_transform.style.transform = "translateY(0)"; 
    }else if(index == 1){
      slide_transform.style.transform = "translateY(-100vh)"; 
    }else if(index == 2){
      slide_transform.style.transform = "translateY(-200vh)"; 
    }else if(index == 3){
      slide_transform.style.transform = "translateY(-300vh)"; 
    }
  });
});

How to Make a Website with FullPage slider using HTML CSS and JavaScript | fullScreen slider website

Video Tutorial for "Make a Website with FullPage slider using HTML CSS and JavaScript | fullScreen slider website"

Make a Website with FullPage slider using HTML CSS and JavaScript [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