Scribd
Upload
11 views

pascal web code

The document is an HTML template for a webpage featuring a video background with animated text. It includes CSS for styling the layout, ensuring responsiveness and visual effects like fading text. The structure allows for additional content to be displayed upon scrolling down the page.

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
11 views

pascal web code

The document is an HTML template for a webpage featuring a video background with animated text. It includes CSS for styling the layout, ensuring responsiveness and visual effects like fading text. The structure allows for additional content to be displayed upon scrolling down the page.

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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Creative Animation with Video Background</title>
<style>
* {
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>

<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