Skip to content

Instantly share code, notes, and snippets.

@Aestheticsuraj234

Aestheticsuraj234/gist:26fd3c0572f9dac97a24b67b258df317

Created July 17, 2025 12:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Aestheticsuraj234/26fd3c0572f9dac97a24b67b258df317 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Aestheticsuraj234/26fd3c0572f9dac97a24b67b258df317 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>EliteRealty</title>
<style>
/* RESET */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: 'Segoe UI', sans-serif;
}
a {
text-decoration: none;
}
button {
cursor: pointer;
}
/* NAVBAR */
nav {
position: fixed;
width: 100%;
z-index: 50;
transition: all 0.5s ease-out;
}
nav.scrolled {
background-color: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.nav-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 1rem;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-logo h1 {
font-size: 1.75rem;
font-weight: bold;
transition: all 0.5s ease;
}
.nav-links {
display: none;
}
.nav-links a {
margin-left: 2rem;
font-size: 1rem;
transition: all 0.3s;
}
.nav-contact {
display: none;
align-items: center;
gap: 1rem;
}
.nav-btn {
padding: 0.5rem 1.25rem;
border-radius: 9999px;
font-weight: 600;
transition: all 0.3s ease;
}
.mobile-toggle {
display: block;
background: transparent;
border: none;
font-size: 1.5rem;
}
.mobile-menu {
display: none;
background-color: rgba(255, 255, 255, 0.95);
padding: 1rem;
border-top: 1px solid #ddd;
animation: slideDown 0.3s ease-out;
}
.mobile-menu a {
display: block;
padding: 0.75rem 0;
color: #333;
font-weight: 500;
}
@media(min-width: 768px) {
.nav-links {
display: flex;
}
.mobile-toggle {
display: none;
}
}
@media(min-width: 1024px) {
.nav-contact {
display: flex;
}
}
/* HERO SECTION */
.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);
}
.hero-content {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 1rem;
text-align: center;
color: white;
}
.hero-content h1 {
font-size: 3rem;
font-weight: 700;
animation: fadeInUp 1s ease-out 0.3s both;
}
.hero-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;
}
.hero-content p {
font-size: 1.25rem;
margin-top: 1rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
animation: fadeInUp 1s ease-out 0.9s both;
}
.hero-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;
}
.hero-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);
}
/* Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>
</head>
<body>
<!-- NAVBAR -->
<nav id="navbar">
<div class="nav-container">
<div class="nav-logo">
<h1 id="logo">Elite<span style="color: #2563eb">Realty</span></h1>
</div>
<div class="nav-links" id="desktopNav">
<a href="#">Home</a>
<a href="#properties">Properties</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</div>
<div class="nav-contact">
<div class="phone" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: gray;">
📞 +919999010101
</div>
<button class="nav-btn btn-primary">Get Started</button>
</div>
<button class="mobile-toggle" id="menuToggle">☰</button>
</div>
<div class="mobile-menu" id="mobileMenu">
<a href="#">Home</a>
<a href="#properties">Properties</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
<div style="margin-top: 1rem;">
<div style="color: #555; font-size: 0.9rem;">📞 +919999010101</div>
<button class="nav-btn btn-primary" style="width: 100%; margin-top: 0.5rem;">Get Started</button>
</div>
</div>
</nav>
<!-- HERO -->
<section class="hero">
<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">
</video>
<div class="overlay"></div>
<!-- fallback image -->
<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'); display: none;"></div>
<div class="hero-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="hero-buttons">
<button class="btn-primary">Explore Properties →</button>
<button class="btn-outline">▶ Watch Tour</button>
</div>
</div>
</div>
</section>
<!-- SCRIPT -->
<script>
const navbar = document.getElementById('navbar');
const menuToggle = document.getElementById('menuToggle');
const mobileMenu = document.getElementById('mobileMenu');
const video = document.getElementById('heroVideo');
const fallback = document.getElementById('fallbackImage');
// Scroll effect
window.addEventListener('scroll', () => {
navbar.classList.toggle('scrolled', window.scrollY > 20);
});
// Mobile menu toggle
menuToggle.addEventListener('click', () => {
mobileMenu.style.display = mobileMenu.style.display === 'block' ? 'none' : 'block';
menuToggle.textContent = mobileMenu.style.display === 'block' ? '✖' : '☰';
});
// Fallback if video fails
video.addEventListener('error', () => {
fallback.style.display = 'block';
video.style.display = 'none';
});
// Autoplay fallback for mobile
video.play().catch(() => {
document.addEventListener('click', () => video.play(), { once: true });
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment