Scribd
Upload
2 views2 pages

CMD

This document is an HTML template that features a full-screen video background with overlaid animated text. It includes a welcome message and additional content that appears upon scrolling. The design is responsive and utilizes CSS for styling and animations.

Uploaded by

thisaravidumina189
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views2 pages

CMD

This document is an HTML template that features a full-screen video background with overlaid animated text. It includes a welcome message and additional content that appears upon scrolling. The design is responsive and utilizes CSS for styling and animations.

Uploaded by

thisaravidumina189
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">
<head>

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body, html {
height: 100%;
overflow: hidden;
}

.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: -1;
}

.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: white;
}

.animated-text {
font-size: 4rem;
font-weight: bold;
animation: fadeInOut 5s infinite;
}

@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}

.content {
position: absolute;
top: 100%;
width: 100%;
color: white;
font-size: 2rem;
padding: 20px;
text-align: center;
background: rgba(0, 0, 0, 0.6);
}

.scrollable-content {
margin-top: 100vh;
padding: 50px;
font-size: 1.5rem;
color: white;
background: rgba(0, 0, 0, 0.6);
}

</style>
</head>
<body>

<video class="video-background" autoplay muted loop>


<source
src="https://dm0qx8t0i9gc9.cloudfront.net/watermarks/video/NIHmZbghlilb1qj7b/513z-
16angkor51-btqi0fqk28__604fb803912dd8aa7e4b669939eaa919__P360.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>

<div class="container">
<div class="animated-text">Welcome to the Creative World</div>
</div>

<div class="content">
<h2>Explore More</h2>
<p>This is a full-screen video background with animated text overlaid.</p>
</div>

<div class="scrollable-content">
<h3>Scroll down for more content</h3>
<p>This content appears after scrolling down, and you can add more
information here. It's responsive and adjusts with the screen size.</p>
</div>

</body>
</html>

You might also like