Hugging Face's logo

Spaces:
ltom2120
/
Real
Running

App Files Community
ltom2120 commited on
Commit
5260fe6
·
verified ·
1 Parent(s): 3bd93c8

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +300 -18
index.html CHANGED
@@ -1,19 +1,301 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Apex Horizon Realty | Luxury Estates</title>
7
+ <style>
8
+ :root {
9
+ --bg-color: #0f172a;
10
+ --card-bg: #1e293b;
11
+ --accent-color: #38bdf8;
12
+ --text-main: #f8fafc;
13
+ --text-muted: #94a3b8;
14
+ }
15
+
16
+ * {
17
+ box-sizing: border-box;
18
+ margin: 0;
19
+ padding: 0;
20
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
21
+ }
22
+
23
+ body {
24
+ background-color: var(--bg-color);
25
+ color: var(--text-main);
26
+ line-height: 1.6;
27
+ }
28
+
29
+ /* Navbar */
30
+ nav {
31
+ display: flex;
32
+ justify-content: space-between;
33
+ align-items: center;
34
+ padding: 1.5rem 5%;
35
+ background-color: rgba(15, 23, 42, 0.9);
36
+ position: sticky;
37
+ top: 0;
38
+ z-index: 100;
39
+ border-bottom: 1px solid #334155;
40
+ }
41
+
42
+ .logo {
43
+ font-size: 1.5rem;
44
+ font-weight: 700;
45
+ color: var(--text-main);
46
+ }
47
+
48
+ .logo span {
49
+ color: var(--accent-color);
50
+ }
51
+
52
+ .nav-links a {
53
+ color: var(--text-main);
54
+ text-decoration: none;
55
+ margin-left: 2rem;
56
+ transition: color 0.3s;
57
+ }
58
+
59
+ .nav-links a:hover {
60
+ color: var(--accent-color);
61
+ }
62
+
63
+ /* Hero Section */
64
+ .hero {
65
+ padding: 6rem 5% 4rem 5%;
66
+ text-align: center;
67
+ background: linear-gradient(to bottom, rgba(15, 23, 42, 0.5), var(--bg-color)), url('https://unsplash.com') center/cover;
68
+ }
69
+
70
+ .hero h1 {
71
+ font-size: 3rem;
72
+ margin-bottom: 1rem;
73
+ }
74
+
75
+ .hero p {
76
+ color: var(--text-muted);
77
+ font-size: 1.2rem;
78
+ max-width: 600px;
79
+ margin: 0 auto 2rem auto;
80
+ }
81
+
82
+ /* Listings Section */
83
+ .listings-container {
84
+ padding: 4rem 5%;
85
+ }
86
+
87
+ .section-title {
88
+ font-size: 2rem;
89
+ margin-bottom: 2rem;
90
+ text-align: center;
91
+ }
92
+
93
+ .grid {
94
+ display: grid;
95
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
96
+ gap: 2rem;
97
+ }
98
+
99
+ .card {
100
+ background-color: var(--card-bg);
101
+ border-radius: 12px;
102
+ overflow: hidden;
103
+ border: 1px solid #334155;
104
+ transition: transform 0.3s;
105
+ }
106
+
107
+ .card:hover {
108
+ transform: translateY(-5px);
109
+ }
110
+
111
+ .card-img {
112
+ width: 100%;
113
+ height: 220px;
114
+ object-fit: cover;
115
+ }
116
+
117
+ .card-content {
118
+ padding: 1.5rem;
119
+ }
120
+
121
+ .price {
122
+ font-size: 1.4rem;
123
+ color: var(--accent-color);
124
+ font-weight: 700;
125
+ margin-bottom: 0.5rem;
126
+ }
127
+
128
+ .address {
129
+ font-size: 1.1rem;
130
+ margin-bottom: 0.5rem;
131
+ }
132
+
133
+ .details {
134
+ color: var(--text-muted);
135
+ font-size: 0.9rem;
136
+ display: flex;
137
+ gap: 1rem;
138
+ }
139
+
140
+ /* Contact Section */
141
+ .contact {
142
+ padding: 4rem 5%;
143
+ background-color: #0b0f19;
144
+ display: flex;
145
+ flex-wrap: wrap;
146
+ gap: 4rem;
147
+ justify-content: center;
148
+ }
149
+
150
+ .contact-info {
151
+ flex: 1;
152
+ min-width: 300px;
153
+ max-width: 500px;
154
+ }
155
+
156
+ .contact-info h2 {
157
+ margin-bottom: 1rem;
158
+ }
159
+
160
+ .contact-info p {
161
+ color: var(--text-muted);
162
+ margin-bottom: 1.5rem;
163
+ }
164
+
165
+ form {
166
+ flex: 1;
167
+ min-width: 300px;
168
+ max-width: 500px;
169
+ display: flex;
170
+ flex-direction: column;
171
+ gap: 1rem;
172
+ }
173
+
174
+ input, textarea {
175
+ background-color: var(--card-bg);
176
+ border: 1px solid #334155;
177
+ padding: 1rem;
178
+ color: var(--text-main);
179
+ border-radius: 6px;
180
+ font-size: 1rem;
181
+ }
182
+
183
+ input:focus, textarea:focus {
184
+ outline: none;
185
+ border-color: var(--accent-color);
186
+ }
187
+
188
+ button {
189
+ background-color: var(--accent-color);
190
+ color: #0f172a;
191
+ border: none;
192
+ padding: 1rem;
193
+ font-weight: 700;
194
+ border-radius: 6px;
195
+ cursor: pointer;
196
+ font-size: 1rem;
197
+ transition: opacity 0.3s;
198
+ }
199
+
200
+ button:hover {
201
+ opacity: 0.9;
202
+ }
203
+
204
+ footer {
205
+ text-align: center;
206
+ padding: 2rem;
207
+ border-top: 1px solid #334155;
208
+ color: var(--text-muted);
209
+ font-size: 0.9rem;
210
+ }
211
+ </style>
212
+ </head>
213
+ <body>
214
+
215
+ <!-- Header Navigation -->
216
+ <nav>
217
+ <div class="logo">Apex<span>Horizon</span></div>
218
+ <div class="nav-links">
219
+ <a href="#listings">Properties</a>
220
+ <a href="#contact">Contact</a>
221
+ </div>
222
+ </nav>
223
+
224
+ <!-- Main Banner Area -->
225
+ <section class="hero">
226
+ <h1>Find Your Dream Space</h1>
227
+ <p>Discover hand-picked premium residential properties and architectural marvels across prime city locations.</p>
228
+ </section>
229
+
230
+ <!-- Featured Properties Grid -->
231
+ <section class="listings-container" id="listings">
232
+ <h2 class="section-title">Current Exclusive Listings</h2>
233
+ <div class="grid">
234
+
235
+ <!-- House 1 -->
236
+ <div class="card">
237
+ <img src="https://unsplash.com" alt="Luxury Villa" class="card-img">
238
+ <div class="card-content">
239
+ <div class="price">$2,450,000</div>
240
+ <div class="address">42 Shadow Ridge Way</div>
241
+ <div class="details">
242
+ <span>4 Beds</span> | <span>4.5 Baths</span> | <span>4,200 sqft</span>
243
+ </div>
244
+ </div>
245
+ </div>
246
+
247
+ <!-- House 2 -->
248
+ <div class="card">
249
+ <img src="https://unsplash.com" alt="Modern Minimalist House" class="card-img">
250
+ <div class="card-content">
251
+ <div class="price">$1,895,000</div>
252
+ <div class="address">187 Coastal Crest Blvd</div>
253
+ <div class="details">
254
+ <span>3 Beds</span> | <span>3 Baths</span> | <span>2,950 sqft</span>
255
+ </div>
256
+ </div>
257
+ </div>
258
+
259
+ <!-- House 3 -->
260
+ <div class="card">
261
+ <img src="https://unsplash.com" alt="Urban Penthouse" class="card-img">
262
+ <div class="card-content">
263
+ <div class="price">$920,000</div>
264
+ <div class="address">704 Skyview Plaza, Apt 12C</div>
265
+ <div class="details">
266
+ <span>2 Beds</span> | <span>2 Baths</span> | <span>1,400 sqft</span>
267
+ </div>
268
+ </div>
269
+ </div>
270
+
271
+ </div>
272
+ </section>
273
+
274
+ <!-- Contact & Agent Information -->
275
+ <section class="contact" id="contact">
276
+ <div class="contact-info">
277
+ <h2>Get In Touch</h2>
278
+ <p>Ready to view a property or list your home with us? Leave a message and our expert team will contact you within 24 hours.</p>
279
+ <div style="margin-top: 2rem;">
280
+ <p><strong>📍 Head Office:</strong> 500 Financial District, Level 14</p>
281
+ <p><strong>📞 Phone:</strong> +1 (555) 839-2001</p>
282
+ <p><strong>✉️ Email:</strong> inquiries@apexhorizonrealty.com</p>
283
+ </div>
284
+ </div>
285
+
286
+ <form onsubmit="alert('Thank you! Your property inquiry has been received.'); return false;">
287
+ <input type="text" placeholder="Your Full Name" required>
288
+ <input type="email" placeholder="Your Email Address" required>
289
+ <input type="text" placeholder="Property Address of Interest (Optional)">
290
+ <textarea rows="5" placeholder="How can we help you?" required></textarea>
291
+ <button type="submit">Send Inquiry</button>
292
+ </form>
293
+ </section>
294
+
295
+ <!-- Footer Copyright -->
296
+ <footer>
297
+ <p>&copy; 2026 Apex Horizon Realty. All rights reserved.</p>
298
+ </footer>
299
+
300
+ </body>
301
  </html>