Created
July 18, 2025 10:12
-
-
Save Aestheticsuraj234/6ebd8c3742c107851d297013c0756625 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>Commercial Coming Soon</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| html, body { | |
| height: 100%; | |
| font-family: 'Segoe UI', sans-serif; | |
| background: #000; | |
| } | |
| .coming-soon { | |
| position: relative; | |
| height: 100vh; | |
| overflow: hidden; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-align: center; | |
| color: white; | |
| } | |
| .video-bg { | |
| position: absolute; | |
| inset: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| z-index: 0; | |
| } | |
| .overlay { | |
| position: absolute; | |
| inset: 0; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| z-index: 1; | |
| } | |
| .content { | |
| position: relative; | |
| z-index: 10; | |
| padding: 1rem; | |
| } | |
| .content h1 { | |
| font-size: 4rem; | |
| font-weight: bold; | |
| margin-bottom: 1rem; | |
| } | |
| .cursor { | |
| color: #60a5fa; | |
| animation: blink 1s infinite; | |
| } | |
| .content p { | |
| font-size: 1.5rem; | |
| font-weight: 300; | |
| color: rgba(255, 255, 255, 0.8); | |
| } | |
| .status { | |
| position: absolute; | |
| top: 1rem; | |
| right: 1rem; | |
| background: rgba(0,0,0,0.5); | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 4px; | |
| font-size: 0.875rem; | |
| color: white; | |
| z-index: 20; | |
| } | |
| @keyframes blink { | |
| 0%, 50%, 100% { opacity: 1; } | |
| 25%, 75% { opacity: 0; } | |
| } | |
| @media (min-width: 640px) { | |
| .content h1 { | |
| font-size: 5rem; | |
| } | |
| .content p { | |
| font-size: 1.75rem; | |
| } | |
| } | |
| @media (min-width: 1024px) { | |
| .content h1 { | |
| font-size: 6rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <section class="coming-soon"> | |
| <!-- Background Video --> | |
| <video class="video-bg" id="bgVideo" muted loop autoplay playsinline preload="auto"> | |
| <source src="commercial.mp4" type="video/mp4" /> | |
| </video> | |
| <div class="overlay"></div> | |
| <!-- Content --> | |
| <div class="content"> | |
| <h1 id="typing"></h1> | |
| <p>Premium Commercial Properties</p> | |
| </div> | |
| <!-- Video Loading Status --> | |
| <div class="status" id="videoStatus">Loading video...</div> | |
| </section> | |
| <script> | |
| const video = document.getElementById('bgVideo'); | |
| const status = document.getElementById('videoStatus'); | |
| const typingElement = document.getElementById('typing'); | |
| // Handle video loading | |
| video.addEventListener('loadeddata', () => { | |
| status.style.display = 'none'; | |
| }); | |
| video.addEventListener('play', () => { | |
| status.style.display = 'none'; | |
| }); | |
| video.addEventListener('error', () => { | |
| status.textContent = 'Video failed. Background disabled.'; | |
| video.style.display = 'none'; | |
| }); | |
| // Autoplay fallback for browsers | |
| video.play().catch(() => { | |
| document.addEventListener('click', () => video.play(), { once: true }); | |
| }); | |
| // Typing effect | |
| const text = "Coming Soon"; | |
| let index = 0; | |
| const cursor = document.createElement('span'); | |
| cursor.classList.add('cursor'); | |
| cursor.textContent = '|'; | |
| typingElement.appendChild(cursor); | |
| const typeInterval = setInterval(() => { | |
| if (index < text.length) { | |
| cursor.before(text[index]); | |
| index++; | |
| } else { | |
| clearInterval(typeInterval); | |
| } | |
| }, 150); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment