Hugging Face's logo

Spaces:
ltom2120
/
Real
Running

App Files Community
ltom2120 commited on
Commit
a77f9fe
·
verified ·
1 Parent(s): debc07b

Create index.html

Browse files
Files changed (1) hide show
  1. index.html +209 -208
index.html CHANGED
@@ -3,347 +3,348 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Apex Horizon Realty | Client-First Real Estate</title>
 
 
 
 
 
7
  <style>
8
  :root {
9
- --bg-color: #f8fafc;
10
  --card-bg: #ffffff;
11
- --accent-color: #0284c7;
12
- --accent-light: #e0f2fe;
13
- --text-main: #1e293b;
14
- --text-muted: #64748b;
15
- --border-color: #e2e8f0;
 
16
  }
17
 
18
  * {
19
  box-sizing: border-box;
20
  margin: 0;
21
  padding: 0;
22
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
  }
24
 
25
  body {
26
  background-color: var(--bg-color);
27
  color: var(--text-main);
28
- line-height: 1.6;
 
 
 
 
 
 
 
 
29
  }
30
 
31
- /* Navbar */
32
  nav {
33
  display: flex;
34
  justify-content: space-between;
35
  align-items: center;
36
- padding: 1.2rem 8%;
37
- background-color: rgba(255, 255, 255, 0.95);
38
  position: sticky;
39
  top: 0;
40
  z-index: 100;
41
  border-bottom: 1px solid var(--border-color);
42
- backdrop-filter: blur(10px);
43
  }
44
 
45
  .logo {
46
- font-size: 1.4rem;
47
- font-weight: 700;
48
- letter-spacing: -0.5px;
 
 
 
49
  }
50
 
51
  .logo span {
52
- color: var(--accent-color);
 
 
 
 
53
  }
54
 
55
  .nav-links a {
56
- color: var(--text-main);
57
  text-decoration: none;
58
- margin-left: 2rem;
59
  font-weight: 500;
60
- transition: color 0.2s;
 
 
 
61
  }
62
 
63
  .nav-links a:hover {
64
- color: var(--accent-color);
65
  }
66
 
67
- /* Hero Section */
68
  .hero {
69
- padding: 8rem 8% 6rem 8%;
 
 
 
 
70
  text-align: center;
71
- background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
72
- border-bottom: 1px solid var(--border-color);
 
 
 
 
 
 
 
 
 
 
73
  }
74
 
75
  .hero h1 {
76
- font-size: 3.5rem;
77
- font-weight: 800;
78
- letter-spacing: -1px;
79
  margin-bottom: 1.5rem;
80
- color: #0f172a;
81
  }
82
 
83
  .hero p {
84
  color: var(--text-muted);
85
- font-size: 1.25rem;
86
- max-width: 700px;
87
  margin: 0 auto 2.5rem auto;
 
88
  }
89
 
90
  .cta-btn {
91
- background-color: var(--accent-color);
92
- color: white;
93
  text-decoration: none;
94
- padding: 0.8rem 2rem;
95
- border-radius: 50px;
96
  font-weight: 600;
97
- box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.2);
98
- transition: transform 0.2s, background-color 0.2s;
 
 
 
 
99
  }
100
 
101
  .cta-btn:hover {
102
- background-color: #0369a1;
103
- transform: translateY(-2px);
 
104
  }
105
 
106
- /* Relationship & Philosophy Section */
107
  .philosophy {
108
- padding: 6rem 8%;
109
- background-color: var(--card-bg);
110
  text-align: center;
111
  border-bottom: 1px solid var(--border-color);
112
  }
113
 
114
  .section-tag {
115
- color: var(--accent-color);
116
  text-transform: uppercase;
117
- font-weight: 700;
118
  font-size: 0.85rem;
119
- letter-spacing: 1px;
120
- margin-bottom: 0.5rem;
121
  display: block;
122
  }
123
 
124
  .philosophy h2 {
125
- font-size: 2.2rem;
126
- margin-bottom: 1.5rem;
127
- color: #0f172a;
128
  }
129
 
130
  .philosophy p {
131
- max-width: 800px;
132
- margin: 0 auto 3rem auto;
133
- font-size: 1.15rem;
134
  color: var(--text-muted);
 
 
135
  }
136
 
137
  .features-grid {
138
  display: grid;
139
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
140
- gap: 2.5rem;
141
- max-width: 1100px;
142
  margin: 0 auto;
143
  }
144
 
145
  .feature-card {
146
- padding: 2rem;
147
- background-color: #f8fafc;
148
- border-radius: 16px;
149
- border: 1px solid var(--border-color);
 
 
 
 
 
150
  }
151
 
152
  .feature-card h3 {
153
- margin-bottom: 0.75rem;
154
- font-size: 1.3rem;
155
- color: #0f172a;
156
  }
157
 
158
- /* Listings Section */
159
- .listings-container {
160
- padding: 6rem 8%;
 
 
 
 
161
  }
162
 
163
- .grid {
 
 
 
 
 
 
 
164
  display: grid;
165
- grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
166
- gap: 2.5rem;
167
- margin-top: 3rem;
 
168
  }
169
 
170
- .card {
171
  background-color: var(--card-bg);
172
- border-radius: 16px;
173
- overflow: hidden;
174
  border: 1px solid var(--border-color);
175
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
176
- transition: transform 0.3s, box-shadow 0.3s;
 
 
177
  }
178
 
179
- .card:hover {
180
- transform: translateY(-5px);
181
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
182
  }
183
 
184
- .card-img {
185
  width: 100%;
186
- height: 240px;
187
- object-fit: cover;
188
- }
189
-
190
- .card-content {
191
- padding: 1.75rem;
192
  }
193
 
194
- .price {
195
- font-size: 1.5rem;
196
- color: var(--accent-color);
197
- font-weight: 700;
198
- margin-bottom: 0.5rem;
 
199
  }
200
 
201
- .address {
202
- font-size: 1.1rem;
203
- font-weight: 600;
204
- margin-bottom: 0.5rem;
205
- color: #0f172a;
206
  }
207
 
208
- .details {
209
- color: var(--text-muted);
210
- font-size: 0.95rem;
211
- display: flex;
212
- gap: 1rem;
213
- }
214
-
215
- /* Connect / Contact Section */
216
- .contact {
217
- padding: 6rem 8%;
218
- background-color: #f1f5f9;
219
  display: flex;
220
- flex-wrap: wrap;
221
- gap: 4rem;
222
- justify-content: center;
223
  }
224
 
225
- .contact-info {
226
- flex: 1;
227
- min-width: 320px;
228
- max-width: 500px;
229
  }
230
 
231
- .contact-info h2 {
232
- font-size: 2.2rem;
 
 
 
 
233
  margin-bottom: 1rem;
234
- color: #0f172a;
235
  }
236
 
237
- .contact-info p {
 
238
  color: var(--text-muted);
239
- font-size: 1.1rem;
240
- margin-bottom: 2rem;
241
  }
242
 
243
- .info-block {
244
- margin-bottom: 1rem;
245
- font-size: 1.05rem;
 
 
246
  }
247
 
248
- form {
249
- flex: 1;
250
- min-width: 320px;
251
- max-width: 500px;
252
- display: flex;
253
- flex-direction: column;
254
- gap: 1.25rem;
255
- background-color: var(--card-bg);
256
- padding: 2.5rem;
257
- border-radius: 16px;
258
- border: 1px solid var(--border-color);
259
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
260
  }
261
 
262
- form h3 {
263
- font-size: 1.4rem;
264
- margin-bottom: 0.5rem;
265
  }
266
 
267
- input, textarea {
268
- background-color: #f8fafc;
269
- border: 1px solid var(--border-color);
270
- padding: 0.85rem 1rem;
271
- color: var(--text-main);
272
- border-radius: 8px;
273
- font-size: 1rem;
274
- transition: border-color 0.2s, background-color 0.2s;
275
  }
276
 
277
- input:focus, textarea:focus {
278
- outline: none;
279
- border-color: var(--accent-color);
280
  background-color: #ffffff;
 
281
  }
282
 
283
- button {
284
- background-color: var(--accent-color);
285
- color: white;
286
- border: none;
287
- padding: 1rem;
288
- font-weight: 600;
289
- border-radius: 8px;
290
- cursor: pointer;
291
- font-size: 1rem;
292
- transition: background-color 0.2s;
 
 
 
293
  }
294
 
295
- button:hover {
296
- background-color: #0369a1;
 
 
297
  }
298
 
299
- footer {
300
- text-align: center;
301
- padding: 2.5rem;
302
- background-color: #ffffff;
303
- border-top: 1px solid var(--border-color);
304
- color: var(--text-muted);
305
- font-size: 0.95rem;
306
  }
307
- </style>
308
- </head>
309
- <body>
310
-
311
- <!-- Navigation -->
312
- <nav>
313
- <div class="logo">Apex<span>Horizon</span></div>
314
- <div class="nav-links">
315
- <a href="#about">Our Approach</a>
316
- <a href="#listings">Properties</a>
317
- <a href="#contact">Connect With Us</a>
318
- </div>
319
- </nav>
320
-
321
- <!-- Light & Open Hero Area -->
322
- <section class="hero">
323
- <h1>Your Journey Home Begins with a Conversation</h1>
324
- <p>We don’t just handle properties; we manage relationships. Experience a transparent, stress-free path to finding your next perfect space.</p>
325
- <a href="#contact" class="cta-btn">Let's Connect</a>
326
- </section>
327
-
328
- <!-- Client Relationship Philosophy Section -->
329
- <section class="philosophy" id="about">
330
- <span class="section-tag">Our Philosophy</span>
331
- <h2>We are here for you, every step of the way</h2>
332
- <p>Real estate is deeply personal. We believe our relationship with you matters more than any single transaction. Our core focus is listening closely to your lifestyle goals, protecting your long-term interests, and making sure you feel fully supported from day one.</p>
333
-
334
- <div class="features-grid">
335
- <div class="feature-card">
336
- <h3>🤝 Built on Trust</h3>
337
- <p style="color: var(--text-muted); font-size: 0.95rem;">Clear transparency, honest valuations, and open communication throughout your entire journey.</p>
338
- </div>
339
- <div class="feature-card">
340
- <h3>💡 Tailored For You</h3>
341
- <p style="color: var(--text-muted); font-size: 0.95rem;">No cookie-cutter solutions. We adapt our strategies to fit your personal budget and exact needs.</p>
342
- </div>
343
- <div class="feature-card">
344
- <h3>🛡️ Constant Support</h3>
345
- <p style="color: var(--text-muted); font-size: 0.95rem;">From initial viewing to key handover, our dedicated advisory team is always a quick text away.</p>
346
- </div>
347
- </div>
348
- </section>
349
 
 
 
 
 
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Apex Horizon | Premium Luxury Real Estate</title>
7
+ <!-- Premium Google Fonts Integration -->
8
+ <link rel="preconnect" href="https://googleapis.com">
9
+ <link rel="preconnect" href="https://gstatic.com" crossorigin>
10
+ <link href="https://googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
11
+
12
  <style>
13
  :root {
14
+ --bg-color: #faf9f6; /* Premium alabaster warm white */
15
  --card-bg: #ffffff;
16
+ --primary-luxury: #1a2421; /* Deep high-end editorial green-black */
17
+ --gold-accent: #c5a880; /* Refined champagne gold */
18
+ --gold-hover: #b3956d;
19
+ --text-main: #2b3331;
20
+ --text-muted: #6e7875;
21
+ --border-color: #e5e2dc;
22
  }
23
 
24
  * {
25
  box-sizing: border-box;
26
  margin: 0;
27
  padding: 0;
 
28
  }
29
 
30
  body {
31
  background-color: var(--bg-color);
32
  color: var(--text-main);
33
+ font-family: 'Plus Jakarta Sans', sans-serif;
34
+ line-height: 1.7;
35
+ letter-spacing: -0.01em;
36
+ }
37
+
38
+ h1, h2, h3, h4, .logo {
39
+ font-family: 'Cormorant Garamond', serif;
40
+ font-weight: 500;
41
+ color: var(--primary-luxury);
42
  }
43
 
44
+ /* Luxury Minimalist Navbar */
45
  nav {
46
  display: flex;
47
  justify-content: space-between;
48
  align-items: center;
49
+ padding: 1.8rem 8%;
50
+ background-color: rgba(250, 249, 246, 0.85);
51
  position: sticky;
52
  top: 0;
53
  z-index: 100;
54
  border-bottom: 1px solid var(--border-color);
55
+ backdrop-filter: blur(20px);
56
  }
57
 
58
  .logo {
59
+ font-size: 2rem;
60
+ font-weight: 600;
61
+ letter-spacing: 0.05em;
62
+ text-transform: uppercase;
63
+ text-decoration: none;
64
+ color: var(--primary-luxury);
65
  }
66
 
67
  .logo span {
68
+ color: var(--gold-accent);
69
+ font-family: 'Plus Jakarta Sans', sans-serif;
70
+ font-size: 0.8rem;
71
+ vertical-align: super;
72
+ margin-left: 2px;
73
  }
74
 
75
  .nav-links a {
76
+ color: var(--primary-luxury);
77
  text-decoration: none;
78
+ margin-left: 3rem;
79
  font-weight: 500;
80
+ font-size: 0.95rem;
81
+ letter-spacing: 0.05em;
82
+ text-transform: uppercase;
83
+ transition: color 0.3s;
84
  }
85
 
86
  .nav-links a:hover {
87
+ color: var(--gold-accent);
88
  }
89
 
90
+ /* High-End Architecture Hero Section */
91
  .hero {
92
+ position: relative;
93
+ min-height: 85vh;
94
+ display: flex;
95
+ align-items: center;
96
+ justify-content: center;
97
  text-align: center;
98
+ padding: 4rem 8%;
99
+ background: linear-gradient(rgba(26, 36, 33, 0.4), rgba(26, 36, 33, 0.2)),
100
+ url('https://unsplash.com') center/cover no-repeat fixed;
101
+ }
102
+
103
+ .hero-content {
104
+ background-color: rgba(255, 255, 255, 0.92);
105
+ padding: 4.5rem 4rem;
106
+ max-width: 850px;
107
+ border-radius: 4px;
108
+ box-shadow: 0 30px 60px rgba(26, 36, 33, 0.08);
109
+ border: 1px solid rgba(197, 168, 128, 0.3);
110
  }
111
 
112
  .hero h1 {
113
+ font-size: 4rem;
114
+ line-height: 1.1;
 
115
  margin-bottom: 1.5rem;
 
116
  }
117
 
118
  .hero p {
119
  color: var(--text-muted);
120
+ font-size: 1.2rem;
121
+ max-width: 600px;
122
  margin: 0 auto 2.5rem auto;
123
+ font-weight: 300;
124
  }
125
 
126
  .cta-btn {
127
+ background-color: var(--primary-luxury);
128
+ color: #ffffff;
129
  text-decoration: none;
130
+ padding: 1.1rem 2.8rem;
131
+ border-radius: 0px; /* Sophisticated sharp edges */
132
  font-weight: 600;
133
+ font-size: 0.9rem;
134
+ letter-spacing: 0.15em;
135
+ text-transform: uppercase;
136
+ transition: all 0.3s ease;
137
+ border: 1px solid var(--primary-luxury);
138
+ display: inline-block;
139
  }
140
 
141
  .cta-btn:hover {
142
+ background-color: transparent;
143
+ color: var(--primary-luxury);
144
+ border: 1px solid var(--primary-luxury);
145
  }
146
 
147
+ /* Relationship Boutique Section */
148
  .philosophy {
149
+ padding: 8rem 8%;
150
+ background-color: #ffffff;
151
  text-align: center;
152
  border-bottom: 1px solid var(--border-color);
153
  }
154
 
155
  .section-tag {
156
+ color: var(--gold-accent);
157
  text-transform: uppercase;
158
+ font-weight: 600;
159
  font-size: 0.85rem;
160
+ letter-spacing: 0.2rem;
161
+ margin-bottom: 1rem;
162
  display: block;
163
  }
164
 
165
  .philosophy h2 {
166
+ font-size: 3.2rem;
167
+ margin-bottom: 2rem;
168
+ line-height: 1.2;
169
  }
170
 
171
  .philosophy p {
172
+ max-width: 750px;
173
+ margin: 0 auto 5rem auto;
174
+ font-size: 1.25rem;
175
  color: var(--text-muted);
176
+ font-family: 'Cormorant Garamond', serif;
177
+ font-style: italic;
178
  }
179
 
180
  .features-grid {
181
  display: grid;
182
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
183
+ gap: 3.5rem;
184
+ max-width: 1200px;
185
  margin: 0 auto;
186
  }
187
 
188
  .feature-card {
189
+ padding: 3rem 2rem;
190
+ background-color: var(--bg-color);
191
+ border-radius: 0px;
192
+ border-top: 2px solid var(--gold-accent);
193
+ transition: transform 0.4s ease;
194
+ }
195
+
196
+ .feature-card:hover {
197
+ transform: translateY(-5px);
198
  }
199
 
200
  .feature-card h3 {
201
+ margin-bottom: 1rem;
202
+ font-size: 1.6rem;
203
+ letter-spacing: 0.02em;
204
  }
205
 
206
+ .feature-card p {
207
+ font-family: 'Plus Jakarta Sans', sans-serif;
208
+ font-style: normal;
209
+ font-size: 0.95rem;
210
+ color: var(--text-muted);
211
+ line-height: 1.6;
212
+ margin-bottom: 0;
213
  }
214
 
215
+ /* Team / Workers Section */
216
+ .team-section {
217
+ padding: 8rem 8%;
218
+ background-color: var(--bg-color);
219
+ border-bottom: 1px solid var(--border-color);
220
+ }
221
+
222
+ .team-grid {
223
  display: grid;
224
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
225
+ gap: 3rem;
226
+ max-width: 1200px;
227
+ margin: 4rem auto 0 auto;
228
  }
229
 
230
+ .team-card {
231
  background-color: var(--card-bg);
 
 
232
  border: 1px solid var(--border-color);
233
+ overflow: hidden;
234
+ transition: border-color 0.3s ease;
235
+ display: flex;
236
+ flex-direction: column;
237
  }
238
 
239
+ .team-card:hover {
240
+ border-color: var(--gold-accent);
 
241
  }
242
 
243
+ .team-img-wrapper {
244
  width: 100%;
245
+ height: 340px;
246
+ overflow: hidden;
 
 
 
 
247
  }
248
 
249
+ .team-img {
250
+ width: 100%;
251
+ height: 100%;
252
+ object-fit: cover;
253
+ filter: grayscale(20%);
254
+ transition: transform 0.4s ease;
255
  }
256
 
257
+ .team-card:hover .team-img {
258
+ transform: scale(1.03);
259
+ filter: grayscale(0%);
 
 
260
  }
261
 
262
+ .team-info {
263
+ padding: 2rem;
264
+ flex-grow: 1;
 
 
 
 
 
 
 
 
265
  display: flex;
266
+ flex-direction: column;
 
 
267
  }
268
 
269
+ .team-info h4 {
270
+ font-size: 1.7rem;
271
+ margin-bottom: 0.25rem;
 
272
  }
273
 
274
+ .team-role {
275
+ font-size: 0.8rem;
276
+ text-transform: uppercase;
277
+ letter-spacing: 0.1em;
278
+ color: var(--gold-accent);
279
+ font-weight: 600;
280
  margin-bottom: 1rem;
 
281
  }
282
 
283
+ .team-bio {
284
+ font-size: 0.95rem;
285
  color: var(--text-muted);
286
+ line-height: 1.6;
287
+ margin-bottom: 1.5rem;
288
  }
289
 
290
+ .team-contact {
291
+ border-top: 1px solid var(--border-color);
292
+ padding-top: 1.2rem;
293
+ margin-top: auto;
294
+ font-size: 0.85rem;
295
  }
296
 
297
+ .team-contact a {
298
+ color: var(--primary-luxury);
299
+ text-decoration: none;
300
+ display: block;
301
+ margin-bottom: 0.4rem;
302
+ transition: color 0.2s;
 
 
 
 
 
 
303
  }
304
 
305
+ .team-contact a:hover {
306
+ color: var(--gold-accent);
 
307
  }
308
 
309
+ .team-contact span {
310
+ color: var(--gold-accent);
311
+ margin-right: 6px;
 
 
 
 
 
312
  }
313
 
314
+ /* Premium Curated Properties Grid */
315
+ .listings-container {
316
+ padding: 8rem 8%;
317
  background-color: #ffffff;
318
+ border-bottom: 1px solid var(--border-color);
319
  }
320
 
321
+ .grid {
322
+ display: grid;
323
+ grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
324
+ gap: 3rem;
325
+ margin-top: 4rem;
326
+ }
327
+
328
+ .card {
329
+ background-color: var(--card-bg);
330
+ border-radius: 0px;
331
+ overflow: hidden;
332
+ border: 1px solid var(--border-color);
333
+ transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
334
  }
335
 
336
+ .card:hover {
337
+ transform: translateY(-8px);
338
+ box-shadow: 0 20px 40px rgba(26, 36, 33, 0.04);
339
+ border-color: var(--gold-accent);
340
  }
341
 
342
+ .img-wrapper {
343
+ overflow: hidden;
344
+ position: relative;
 
 
 
 
345
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
346
 
347
+ .card-img {
348
+ width: 100%;
349
+ height: 280px;
350
+ object-fit: cover;