-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
131 lines (118 loc) · 6.15 KB
/
Copy pathindex.html
File metadata and controls
131 lines (118 loc) · 6.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aurelius | Private Estates</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,600;1,400&family=Plus+Jakarta+Sans:wght@300;400&display=swap" rel="stylesheet">
<style>
:root {
--gold-primary: #c5a358;
--obsidian: #0a0a0a;
}
body {
background-color: var(--obsidian);
color: #ffffff;
font-family: 'Plus Jakarta Sans', sans-serif;
scroll-behavior: smooth;
}
.serif { font-family: 'Cormorant Garamond', serif; }
/* Gold Gradient Text */
.text-gold {
background: linear-gradient(135deg, #f3e7ad 0%, #c5a358 50%, #8a6e2f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* Smooth Parallax Effect Mockup */
.parallax-section {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.gold-border {
border: 1px solid rgba(197, 163, 88, 0.3);
}
.btn-luxury {
border: 1px solid var(--gold-primary);
position: relative;
overflow: hidden;
transition: all 0.5s ease;
}
.btn-luxury:hover {
background: var(--gold-primary);
color: black;
box-shadow: 0 0 30px rgba(197, 163, 88, 0.4);
}
</style>
</head>
<body class="antialiased">
<nav class="fixed top-0 w-full z-50 flex justify-between items-center px-8 lg:px-20 py-10 bg-gradient-to-b from-black/80 to-transparent">
<div class="serif text-2xl font-semibold tracking-widest uppercase text-gold">Aurelius</div>
<div class="hidden md:flex gap-12 text-[10px] tracking-[0.4em] uppercase font-light text-zinc-400">
<a href="#" class="hover:text-gold transition">The Collection</a>
<a href="#" class="hover:text-gold transition">Our Heritage</a>
<a href="#" class="hover:text-gold transition">Private Office</a>
</div>
<button class="text-[10px] tracking-[0.3em] uppercase border-b border-gold-primary pb-1 text-gold">Inquire</button>
</nav>
<section class="h-screen flex items-center justify-center relative overflow-hidden">
<div class="absolute inset-0 z-0 scale-110">
<div class="absolute inset-0 bg-black/50 z-10"></div>
<img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=2000" class="w-full h-full object-cover" alt="Luxury Mansion">
</div>
<div class="relative z-20 text-center px-6">
<p class="serif italic text-2xl text-gold mb-6 tracking-wide">Exclusively Curated</p>
<h1 class="serif text-7xl md:text-9xl font-light tracking-tighter leading-none mb-10">
The Zenith <br> <span class="italic">Residence.</span>
</h1>
<div class="w-[1px] h-24 bg-gold-primary mx-auto opacity-50"></div>
</div>
</section>
<section class="py-32 lg:py-60 px-8 lg:px-20 bg-[#0c0c0c]">
<div class="max-w-7xl mx-auto grid lg:grid-cols-2 gap-24 items-center">
<div class="space-y-12">
<span class="text-[10px] tracking-[0.6em] text-zinc-500 uppercase">Location // Beverly Hills</span>
<h2 class="serif text-5xl md:text-7xl leading-tight font-light">
Where Architecture <br> Meets <span class="text-gold italic">Pure Art.</span>
</h2>
<p class="text-zinc-400 text-lg font-light leading-relaxed max-w-lg">
এই ম্যানশনটি শুধু একটি বসবাসের জায়গা নয়, এটি একটি আধুনিক ভাস্কর্য। ৩৬০ ডিগ্রি ভিউ এবং প্রাইভেট হেলিপ্যাড সহ এই প্রপার্টিটি আভিজাত্যের শেষ কথা।
</p>
<div class="pt-6">
<button class="btn-luxury serif italic text-xl px-12 py-4">Explore the Interior</button>
</div>
</div>
<div class="relative">
<div class="gold-border p-4">
<img src="https://images.unsplash.com/photo-1600607687940-4e2a09695d51?q=80&w=1200" class="w-full grayscale hover:grayscale-0 transition duration-1000" alt="Interior">
</div>
<div class="absolute -bottom-10 -left-10 bg-[#111] p-10 gold-border hidden md:block">
<p class="serif text-4xl text-gold mb-2">$42,500,000</p>
<p class="text-[9px] tracking-[0.3em] uppercase text-zinc-500">Private Listing</p>
</div>
</div>
</div>
</section>
<section class="py-32 bg-black overflow-hidden">
<div class="text-center mb-24">
<h3 class="serif text-4xl font-light mb-4">The Blueprint</h3>
<div class="w-12 h-[1px] bg-gold-primary mx-auto"></div>
</div>
<div class="flex justify-center px-8">
<div class="max-w-5xl w-full opacity-30 hover:opacity-100 transition duration-1000 cursor-crosshair">
</div>
</div>
</section>
<footer class="py-20 border-t border-zinc-900 text-center">
<p class="serif italic text-xl text-zinc-500 mb-8">Discretion is our hallmark.</p>
<div class="flex justify-center gap-10 opacity-30 grayscale mb-12">
<span class="text-xs uppercase tracking-[0.5em]">London</span>
<span class="text-xs uppercase tracking-[0.5em]">New York</span>
<span class="text-xs uppercase tracking-[0.5em]">Dubai</span>
</div>
<p class="text-[9px] tracking-widest text-zinc-700 uppercase">© 2026 Aurelius Private Office. All Rights Reserved.</p>
</footer>
</body>
</html>