Created
July 17, 2025 12:46
-
-
Save Aestheticsuraj234/12eb352a7dbceb94a619ee6395b85089 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Hero Section</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body, html { | |
| height: 100%; | |
| font-family: 'Segoe UI', sans-serif; | |
| } | |
| .hero { | |
| position: relative; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .video-bg, .fallback-bg { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .overlay { | |
| position: absolute; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| } | |
| .content { | |
| position: relative; | |
| z-index: 10; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| padding: 0 1rem; | |
| text-align: center; | |
| color: white; | |
| } | |
| .content h1 { | |
| font-size: 3rem; | |
| line-height: 1.2; | |
| font-weight: 700; | |
| animation: fadeInUp 1s ease-out 0.3s both; | |
| } | |
| .content h1 span:last-child { | |
| background: linear-gradient(to right, #60a5fa, #2563eb); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| animation-delay: 0.6s; | |
| } | |
| .content p { | |
| font-size: 1.25rem; | |
| margin-top: 1rem; | |
| font-weight: 300; | |
| max-width: 700px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| animation: fadeInUp 1s ease-out 0.9s both; | |
| } | |
| .buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| justify-content: center; | |
| align-items: center; | |
| margin-top: 3rem; | |
| animation: fadeInUp 1s ease-out 1.2s both; | |
| } | |
| .buttons button { | |
| padding: 1rem 2.5rem; | |
| font-size: 1.1rem; | |
| font-weight: 600; | |
| border-radius: 9999px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| } | |
| .btn-primary { | |
| background-color: #2563eb; | |
| color: white; | |
| border: none; | |
| } | |
| .btn-primary:hover { | |
| background-color: #1d4ed8; | |
| transform: scale(1.05); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.3); | |
| } | |
| .btn-outline { | |
| background: rgba(255, 255, 255, 0.05); | |
| border: 2px solid white; | |
| color: white; | |
| backdrop-filter: blur(5px); | |
| } | |
| .btn-outline:hover { | |
| background: white; | |
| color: #111; | |
| transform: scale(1.05); | |
| } | |
| .status { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: rgba(0, 0, 0, 0.5); | |
| color: white; | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.875rem; | |
| z-index: 20; | |
| } | |
| @keyframes fadeInUp { | |
| from { | |
| opacity: 0; | |
| transform: translateY(30px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| @media (min-width: 640px) { | |
| .buttons { | |
| flex-direction: row; | |
| } | |
| .content h1 { | |
| font-size: 4rem; | |
| } | |
| .content p { | |
| font-size: 1.5rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .content h1 { | |
| font-size: 5rem; | |
| } | |
| .content p { | |
| font-size: 1.75rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="hero"> | |
| <!-- Video Background --> | |
| <video class="video-bg" id="heroVideo" muted loop autoplay playsinline preload="auto"> | |
| <source src="https://videos.pexels.com/video-files/4431695/4431695-hd_1920_1080_30fps.mp4" type="video/mp4"> | |
| <source src="https://videos.pexels.com/video-files/4431695/4431695-sd_640_360_30fps.mp4" type="video/mp4"> | |
| </video> | |
| <div class="overlay"></div> | |
| <!-- Fallback Image (if video fails) --> | |
| <div class="fallback-bg" id="fallbackImage" style="background-image: url('https://images.pexels.com/photos/323780/pexels-photo-323780.jpeg?auto=compress&cs=tinysrgb&w=1920&h=1080&fit=crop'); background-size: cover; background-position: center; display: none;"> | |
| <div class="overlay"></div> | |
| </div> | |
| <!-- Content --> | |
| <div class="content"> | |
| <div> | |
| <h1> | |
| <span>Find Your</span><br/> | |
| <span>Dream Home</span> | |
| </h1> | |
| <p> | |
| Discover premium properties in the most desirable locations with unmatched luxury and comfort. | |
| </p> | |
| <div class="buttons"> | |
| <button class="btn-primary"> | |
| Explore Properties → | |
| </button> | |
| <button class="btn-outline"> | |
| ▶ Watch Tour | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading Indicator --> | |
| <div class="status" id="videoStatus">Loading video...</div> | |
| </section> | |
| <script> | |
| const video = document.getElementById('heroVideo'); | |
| const fallback = document.getElementById('fallbackImage'); | |
| const status = document.getElementById('videoStatus'); | |
| video.addEventListener('loadeddata', () => { | |
| status.style.display = 'none'; | |
| }); | |
| video.addEventListener('error', () => { | |
| fallback.style.display = 'block'; | |
| status.textContent = 'Fallback image shown'; | |
| }); | |
| // Safari/Chrome autoplay fallback | |
| window.addEventListener('load', () => { | |
| video.play().then(() => { | |
| status.style.display = 'none'; | |
| }).catch(() => { | |
| document.addEventListener('click', () => { | |
| video.play(); | |
| status.style.display = 'none'; | |
| }, { once: true }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment