 |
| Happy independence day using html and css |
In this article, we given a Happy independence day using html and css as a project with the complete source code. In this project, we have added a background video of flag with the text to celebrate the happy independence day 2024 in html and css.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Happy independence day using html and css. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Happy-independence-day.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Then run the code or check the preview with code preview extension in vs code.
Happy independence day using html and css source code
Here we given a html and css source code of Happy independence day project as given -
HTML
In html, we added a video and text to add it on background for better look. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Independence Day 2024</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<video class="background-video" autoplay muted loop>
<source src="flag.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="hero">
<h1>Happy Independence Day</h1>
<p>Celebrating 78<sup>th</sup> Year of Freedom</p>
</div>
</body>
</html>
CSS
In css, we added video to background and text with transition and responsive. Copy the given css code and paste it into style.css file.
@import url('https://fonts.googleapis.com/css2?family=Oleo+Script+Swash+Caps&display=swap');
body,
html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
font-family: 'Oleo Script Swash Caps', cursive;
}
.background-video {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}
.hero {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #ff4800;
text-shadow: 3px 3px 0px rgb(0, 0, 0);
z-index: 1;
padding: 20px;
}
.hero h1 {
font-size: 60px;
color: #ff0000;
margin-bottom: 0.5rem;
animation: fadeIn 2s ease-in-out;
}
.hero p {
font-size: 40px;
color: #5eff00;
animation: fadeIn 2s ease-in-out 1s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 2;
}
}
@media (max-width:480px) {
.hero h1 {
font-size: 40px;
}
.hero p {
font-size: 25px;
}
}Background video -
Run the code -
To run the code, we given a online compiler where you can paste the code and check the preview.
Click here - HTML CSS JS ONLINE COMPILER
Hope this helps you to know about Flipkart clone using html and css with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects