<!-- Instructions Box -->
<div class="instructions" id="instructions">
<button class="close-instructions" onclick="closeInstructions()">×</button>
<h3>📹 How to Add Your Video</h3>
<p><strong>To use your own background video:</strong></p>
<ol>
<li>Replace the <code><video></code> tag's <code>src</code> attribute</li>
<li>Use MP4 format for best compatibility</li>
<li>Recommended size: 1920x1080 or smaller</li>
<li>Keep file size under 10MB for faster loading</li>
</ol>
<p style="margin-top: 15px;"><strong>Example code:</strong></p>
<code style="display: block; padding: 10px; margin-top: 5px;">
<video class="bg-video" autoplay muted loop><br>
<source src="your-video.mp4"><br>
</video>
</code>
<p style="margin-top: 15px; font-size: 0.8rem; color: #999;">
Currently showing animated gradient as placeholder
</p>
</div>
<!-- Navigation Dots -->
<div class="page-nav">
<div class="nav-dot active" onclick="scrollToSection(0)"></div>
<div class="nav-dot" onclick="scrollToSection(1)"></div>
<div class="nav-dot" onclick="scrollToSection(2)"></div>
</div>
<!-- Section 1: Purple Gradient Background -->
<section class="video-section">
<!--
TO ADD YOUR VIDEO: Replace the animated-bg div with:
<video class="bg-video" autoplay muted loop playsinline>
<source src="your-video.mp4" type="video/mp4">
</video>
-->
<div class="animated-bg"></div>
<div class="video-overlay"></div>
<div class="content">
<h1>🎬 Background Video Hero</h1>
<p>This template is ready for your video! Simply replace the animated background with your own video file. The structure is all set up for you.</p>
<div class="btn-group">
<button class="btn btn-primary">Get Started</button>
<button class="btn btn-outline">Learn More</button>
</div>
<div class="features">
<div class="feature-card">
<div class="feature-icon">🚀</div>
<div class="feature-title">Ready to Use</div>
<div class="feature-desc">Just add your video URL and you're done</div>
</div>
<div class="feature-card">
<div class="feature-icon">🎨</div>
<div class="feature-title">Customizable</div>
<div class="feature-desc">Change colors, overlays, and content</div>
</div>
<div class="feature-card">
<div class="feature-icon">📱</div>
<div class="feature-title">Responsive</div>
<div class="feature-desc">Works perfectly on all devices</div>
</div>
</div>
</div>
<div class="video-controls">
<button class="control-btn" title="Play/Pause">⏸️</button>
<button class="control-btn" title="Mute/Unmute">🔇</button>
</div>
</section>
<!-- Section 2: Blue Gradient Background -->
<section class="video-section">
<div class="animated-bg animated-bg-2"></div>
<div class="video-overlay"></div>
<div class="content">
<h1>🌊 Ocean of Possibilities</h1>
<p>Each section can have its own video background. Create stunning landing pages, portfolios, or presentations with full-screen video backgrounds.</p>
<div class="btn-group">
<button class="btn btn-primary">Explore Now</button>
<button class="btn btn-outline">View Demo</button>
</div>
<div class="features">
<div class="feature-card">
<div class="feature-icon">⚡</div>
<div class="feature-title">Fast Loading</div>
<div class="feature-desc">Optimized for performance</div>
</div>
<div class="feature-card">
<div class="feature-icon">🔒</div>
<div class="feature-title">Secure</div>
<div class="feature-desc">Built with best practices</div>
</div>
<div class="feature-card">
<div class="feature-icon">💯</div>
<div class="feature-title">Quality</div>
<div class="feature-desc">Professional grade code</div>
</div>
</div>
</div>
<div class="video-controls">
<button class="control-btn" title="Play/Pause">⏸️</button>
<button class="control-btn" title="Mute/Unmute">🔇</button>
</div>
</section>
<!-- Section 3: Pink Gradient Background -->
<section class="video-section">
<div class="animated-bg animated-bg-3"></div>
<div class="video-overlay"></div>
<div class="content">
<h1>✨ Easy Implementation</h1>
<p>The video background is positioned absolutely, covers the entire section, and content sits on top with a semi-transparent overlay. Perfect for hero sections!</p>
<div class="btn-group">
<button class="btn btn-primary">Start Now</button>
<button class="btn btn-outline">Contact Us</button>
</div>
<div class="features">
<div class="feature-card">
<div class="feature-icon">🎯</div>
<div class="feature-title">Targeted</div>
<div class="feature-desc">Focused on results</div>
</div>
<div class="feature-card">
<div class="feature-icon">🌟</div>
<div class="feature-title">Beautiful</div>
<div class="feature-desc">Stunning aesthetics</div>
</div>
<div class="feature-card">
<div class="feature-icon">💪</div>
<div class="feature-title">Powerful</div>
<div class="feature-desc">Feature-rich solution</div>
</div>
</div>
</div>
<div class="video-controls">
<button class="control-btn" title="Play/Pause">⏸️</button>
<button class="control-btn" title="Mute/Unmute">🔇</button>
</div>
</section>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
overflow-x: hidden;
}
/* Video Background Container */
.video-section {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Background Video - IMPORTANT: This is where your video goes */
.bg-video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
}
/* Animated Background Placeholder (shows while video loads or as fallback) */
.animated-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #667eea, #764ba2, #f093fb, #667eea);
background-size: 400% 400%;
animation: gradientMove 15s ease infinite;
z-index: 0;
}
@keyframes gradientMove {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.animated-bg-2 {
background: linear-gradient(135deg, #4facfe, #00f2fe, #43e97b, #4facfe);
background-size: 400% 400%;
animation: gradientMove 20s ease infinite;
}
.animated-bg-3 {
background: linear-gradient(225deg, #fa709a, #fee140, #f093fb, #fa709a);
background-size: 400% 400%;
animation: gradientMove 18s ease infinite;
}
/* Video Overlay */
.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.4);
z-index: 1;
}
/* Content Container */
.content {
position: relative;
z-index: 10;
text-align: center;
color: white;
padding: 40px;
max-width: 900px;
}
.content h1 {
font-size: 4rem;
font-weight: 700;
margin-bottom: 20px;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
animation: fadeInDown 1s ease;
}
.content p {
font-size: 1.5rem;
margin-bottom: 40px;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
animation: fadeInUp 1s ease 0.3s backwards;
line-height: 1.6;
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(50px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Buttons */
.btn-group {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease 0.6s backwards;
}
.btn {
padding: 16px 40px;
font-size: 1.1rem;
font-weight: 700;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
display: inline-block;
text-transform: uppercase;
letter-spacing: 1px;
}
.btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(102, 126, 234, 0.6);
}
.btn-outline {
background: transparent;
color: white;
border: 3px solid white;
}
.btn-outline:hover {
background: white;
color: #667eea;
transform: translateY(-3px);
}
/* Video Controls */
.video-controls {
position: absolute;
bottom: 40px;
right: 40px;
z-index: 20;
display: flex;
gap: 15px;
}
.control-btn {
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.control-btn:hover {
background: white;
transform: scale(1.1);
}
/* Instructions Box */
.instructions {
position: fixed;
top: 20px;
left: 20px;
background: white;
padding: 20px;
border-radius: 12px;
max-width: 350px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
z-index: 1000;
animation: slideInLeft 1s ease;
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-100px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.instructions h3 {
color: #667eea;
margin-bottom: 15px;
font-size: 1.2rem;
}
.instructions p {
color: #555;
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 10px;
text-shadow: none;
}
.instructions code {
background: #f5f5f5;
padding: 2px 6px;
border-radius: 4px;
font-family: 'Courier New', monospace;
color: #e74c3c;
font-size: 0.85rem;
}
.instructions ul {
margin-left: 20px;
margin-top: 10px;
}
.instructions li {
margin-bottom: 5px;
color: #555;
font-size: 0.85rem;
}
.close-instructions {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #999;
transition: color 0.3s;
}
.close-instructions:hover {
color: #e74c3c;
}
/* Navigation Dots */
.page-nav {
position: fixed;
top: 50%;
right: 30px;
transform: translateY(-50%);
z-index: 1000;
display: flex;
flex-direction: column;
gap: 15px;
}
.nav-dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s;
border: 2px solid white;
}
.nav-dot:hover,
.nav-dot.active {
transform: scale(1.5);
background: white;
}
/* Feature Cards */
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 50px;
animation: fadeInUp 1s ease 0.9s backwards;
}
.feature-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
padding: 30px;
border-radius: 20px;
border: 2px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.feature-card:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-10px);
}
.feature-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.feature-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.feature-desc {
font-size: 1rem;
opacity: 0.9;
}
@media (max-width: 768px) {
.content h1 {
font-size: 2.5rem;
}
.content p {
font-size: 1.2rem;
}
.btn-group {
flex-direction: column;
}
.btn {
width: 100%;
}
.video-controls {
bottom: 20px;
right: 20px;
}
.instructions {
left: 10px;
right: 10px;
max-width: none;
}
.page-nav {
right: 15px;
}
.features {
grid-template-columns: 1fr;
}
}
function scrollToSection(index) {
const sections = document.querySelectorAll('.video-section');
sections[index].scrollIntoView({ behavior: 'smooth' });
document.querySelectorAll('.nav-dot').forEach((dot, i) => {
dot.classList.toggle('active', i === index);
});
}
function closeInstructions() {
document.getElementById('instructions').style.display = 'none';
}
// Update active dot on scroll
window.addEventListener('scroll', () => {
const sections = document.querySelectorAll('.video-section');
const dots = document.querySelectorAll('.nav-dot');
let current = 0;
sections.forEach((section, index) => {
const rect = section.getBoundingClientRect();
if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
current = index;
}
});
dots.forEach((dot, index) => {
dot.classList.toggle('active', index === current);
});
});
No comments yet. Be the first!