Hello viewers, Today in this video we will learn how to create a video background website using HTML and CSS. You easily create this website using HTML by follow these tutorials and steps. You will Build This Awesome video background Website By Just Following This Video Tutorial Or These Steps Which I Given Bellow. In addition, common HTML and CSS programming codes have been used. It is designed in a completely modern way.
Some information about this website
This website, which uses beautiful gradient colors and video, with modern programming code, has gained the best of beauty. On this site, background add with video. there is a navigation bar with a logo on the left side, navigation links are right side. last step, middle of the hero section show content. there are title, heading, paragraph and beautiful button.
Watch the video tutorial to create a video background website
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made this design step by step completely beautifully. So you can learn how to make this website beautiful. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this video background website. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- E-commerce Product Card UI Design Using HTML & CSS
- Responsive Login Form Create using HTML & CSS
- How To Make Portfolio Website Using HTML & CSS
Vdieo Background Website | Source Codes
You have to create HTML and CSS File For this Site. After creating these files just paste the following codes into your file.
First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension and the images that are used on this website won’t appear. You’ve to download files from the given download button to use images also.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Agency Website Create</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="hero">
<video playsinline autoplay muted loop src="./image/dabble.mp4"></video>
<div class="overlay"></div>
<nav>
<img src="./image/logo2.png" class="logo">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Service</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="content">
<span class="title">We wre Digeco digital company</span>
<h1>We turn <span>creative</span> ideas<br> into your business.</h1>
<p>Design studio founded in London and expanded our services, and become<br>
a multinational firm, offering services and solutions.</p>
<a href="#" class="btn">About Us</a>
</div>
</div>
</body>
</html>Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
@import url('https://fonts.googleapis.com/css2?family=Poppins:[email protected];500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero{
width: 100%;
height: 100vh;
}
.hero video{
object-fit: cover;
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
}
.overlay{
width: 100%;
height: 100vh;
background-image: linear-gradient(180deg, #0a2236 0%, #0a2236 100%);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}
nav{
display: flex;
align-items: center;
justify-content: space-between;
padding: 30px 100px;
}
.logo{
max-height: 50px;
z-index: 99;
}
nav ul{
z-index: 99;
}
nav ul li{
list-style: none;
display: inline-block;
padding: 10px 20px;
}
nav ul li a{
color: #fff;
position: relative;
padding: 5px 0;
text-decoration: none;
transition: .3s;
}
nav ul li a:hover{
color: #078dff;
}
nav ul li a:after{
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 2px;
background: #078dff;
transition: .3s;
}
nav ul li a:hover:after{
width: 100%;
}
.content{
position: absolute;
width: 100%;
top: 55%;
transform: translateY(-50%);
text-align: center;
}
.content .title{
color: #fff;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
margin-bottom: 20px;
}
.content h1{
color: #fff;
font-size: 50px;
font-weight: 900;
line-height: 55px;
width: 100%;
}
.content h1 span{
background-image: linear-gradient(135deg, #00fcff, #078dff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.content p{
width: 100%;
color: #dcd9d9;
margin-top: 25px;
margin-bottom: 30px;
}
.btn{
color: #fff;
font-size: 16px;
text-transform: uppercase;
padding: 12px 25px;
border-radius: 6px;
display: inline-block;
font-weight: 500;
transition: all .4s ease-in-out;
background-size: 152% 100%;
background-image: linear-gradient(135deg, #00fcff, #078dff);
text-decoration: none;
}
.btn:hover{
background-image: linear-gradient(135deg, #078dff, #00fcff);
}now you’ve successfully created a video background Website using HTML and CSS. If your code does not work or faced any error/problem then to comment down or contact us through the contact page.
