Responsive Homepage with video Background

A responsive website is a web page designed for viewing on any device such as smartphones, tablets, and laptops. A responsive website looks great on every device and is viewable from anywhere at any time. In this blog, we're going to cover building a responsive website Homepage that has a video background. If you haven't seen the video tutorial yet, you can watch it below. We have over a thousand videos on front-end development on our Youtube channel. Subscribe to the youtube channel if you find the videos useful.

I hope you have watched the entire tutorial and fully grasped the idea of the project. What Is Responsive Design? Responsive design is a type of web development that helps your site or app to look the same on all devices and platforms, regardless of screen size. It’s not a new concept but it has taken on a new meaning in the last few years. We’re now seeing more and more websites adopting responsive design principles, as it is considered to be a more user-friendly approach. What is the website homepage? The homepage of a website is the first thing that a visitor sees when they arrive on the website. The homepage typically includes the website's logo, navigation bar, and a brief description of the website.

In this project, we have built a homepage layout with a logo on the left and a menu on the right. there is banner text and a call-to-action button also. We have used a background video from Pixabay to give our page a fresh look. In CSS media queries, we specified the breakpoints at which the site should change its appearance. We made some tweaks with all the elements and make them fit for the small devices.

You may also like:

Responsive Homepage design with video background [ Source Code ]:

For this project, you will create an HTML file with a .html extension and a CSS file with a .css extension. Add the external CSS file into the HTML file. After that copy the code below and paste them into your project. If you’re having issues, you can download a fully-working copy of this project from the download button.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>How to make Responsive Website with video background</title>
    <link rel="stylesheet" href="style.css">    
</head>
<body>
    <header>
		<h2><a href="#">Yougik</a></h2> 
		<ul class="nav">  
			<li><a href="#">Home</a></li>
			<li><a href="#about">About</a></li> 
			<li><a href="#services">Services</a></li>
			<li><a href="#contact">Contact</a></li> 
		</ul>
	</header>
	
	<section class="box">  
		<video src="4.mp4" autoplay muted loop></video>
		<h1>Yoga Center</h1> 
		<h3>Find your own path in yoga</h3>
		<a href="#" class="boxBtn">Contact Us</a>   
	</section>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	font-family: nexa;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
section {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 110px 100px;
}
@media (max-width: 1000px) {
	section {
		padding: 100px 50px;
	}
}
@media (max-width: 600px) {
	section {
		padding: 125px 30px;
	}
}
header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	padding: 35px 100px 0;
}
header a {
	text-transform: capitalize;
	font-weight: 900;
}
header h2 {
	text-transform: uppercase;
}
header .nav {
	display: flex;
}
header .nav li {
	margin: 0 15px;
}
header .nav li:first-child {
	margin-left: 0;
}
header .nav li:last-child {
	margin-right: 0;
}
@media (max-width: 1000px) {
	header {
		padding: 20px 50px;
	}
}
@media (max-width: 700px) {
	header {
		flex-direction: column;
	}
	header h2 {
		margin-bottom: 15px;
	}
	header .nav li {
		margin: 0 7px;
	}
}
.box {
	position: relative;
	justify-content: center;
	min-height: 100vh;
	color: #fff;
	text-align: center;
}
.box video {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}
.box h1 {
	margin-bottom: 15px;
	font-size: 65px;
	text-transform: uppercase;
	text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.box h3 {
	margin-bottom: 40px;
	font-size: 25px;
}
.box a.boxBtn {
	padding: 15px 35px;
	background: transparent;
	border-radius: 50px;
	color: #fff;
	text-transform: uppercase;
	border: 4px solid #fff;
	transition: all .5s;
}
.box a.boxBtn:hover {
	background: #fff;
	color: #000;
}
@media (max-width: 800px) {
	.box {
		min-height: 600px;
	}
	.box h1 {
		font-size: 32px;
	}
	.box h3 {
		font-size: 20px;
	}
	.box a.boxBtn {
		padding: 15px 40px;
	}
}

I hope you've successfully implemented the code. We regularly share source code snippets on this blog on different front-end related subjects. So please visit our website more often. Please share the articles on this site so that others can learn as well. Learning is about teaching, and teaching is about sharing. Thanks for visiting our blog! We hope you enjoy it and return often.

DOWNLOAD CODE

Responsive Homepage design with video background [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Responsive Homepage with video Background

Responsive Homepage design with video background [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form