Spaces:

ltom2120
/

Real

Running

App Files Files Community

ltom2120 commited on Jun 15

Commit

debc07b

verified ·

1 Parent(s): 5260fe6

Create index.html

Browse files

Files changed (1) hide show

index.html +172 -124

index.html CHANGED Viewed

@@ -3,14 +3,16 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Apex Horizon Realty | Luxury Estates</title>
     <style>
         :root {
-            --bg-color: #0f172a;
-            --card-bg: #1e293b;
-            --accent-color: #38bdf8;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
         }
         * {
@@ -31,18 +33,19 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            padding: 1.5rem 5%;
-            background-color: rgba(15, 23, 42, 0.9);
             position: sticky;
             top: 0;
             z-index: 100;
-            border-bottom: 1px solid #334155;
         }
         .logo {
-            font-size: 1.5rem;
             font-weight: 700;
-            color: var(--text-main);
         }
         .logo span {
@@ -53,7 +56,8 @@
             color: var(--text-main);
             text-decoration: none;
             margin-left: 2rem;
-            transition: color 0.3s;
         }
         .nav-links a:hover {
@@ -62,64 +66,133 @@
         /* Hero Section */
         .hero {
-            padding: 6rem 5% 4rem 5%;
             text-align: center;
-            background: linear-gradient(to bottom, rgba(15, 23, 42, 0.5), var(--bg-color)), url('https://unsplash.com') center/cover;
         }
         .hero h1 {
-            font-size: 3rem;
-            margin-bottom: 1rem;
         }
         .hero p {
             color: var(--text-muted);
-            font-size: 1.2rem;
-            max-width: 600px;
-            margin: 0 auto 2rem auto;
         }
-        /* Listings Section */
-        .listings-container {
-            padding: 4rem 5%;
         }
-        .section-title {
-            font-size: 2rem;
-            margin-bottom: 2rem;
             text-align: center;
         }
         .grid {
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-            gap: 2rem;
         }
         .card {
             background-color: var(--card-bg);
-            border-radius: 12px;
             overflow: hidden;
-            border: 1px solid #334155;
-            transition: transform 0.3s;
         }
         .card:hover {
             transform: translateY(-5px);
         }
         .card-img {
             width: 100%;
-            height: 220px;
             object-fit: cover;
         }
         .card-content {
-            padding: 1.5rem;
         }
         .price {
-            font-size: 1.4rem;
             color: var(--accent-color);
             font-weight: 700;
             margin-bottom: 0.5rem;
@@ -127,20 +200,22 @@
         .address {
             font-size: 1.1rem;
             margin-bottom: 0.5rem;
         }
         .details {
             color: var(--text-muted);
-            font-size: 0.9rem;
             display: flex;
             gap: 1rem;
         }
-        /* Contact Section */
         .contact {
-            padding: 4rem 5%;
-            background-color: #0b0f19;
             display: flex;
             flex-wrap: wrap;
             gap: 4rem;
@@ -149,153 +224,126 @@
         .contact-info {
             flex: 1;
-            min-width: 300px;
             max-width: 500px;
         }
         .contact-info h2 {
             margin-bottom: 1rem;
         }
         .contact-info p {
             color: var(--text-muted);
-            margin-bottom: 1.5rem;
         }
         form {
             flex: 1;
-            min-width: 300px;
             max-width: 500px;
             display: flex;
             flex-direction: column;
-            gap: 1rem;
         }
         input, textarea {
-            background-color: var(--card-bg);
-            border: 1px solid #334155;
-            padding: 1rem;
             color: var(--text-main);
-            border-radius: 6px;
             font-size: 1rem;
         }
         input:focus, textarea:focus {
             outline: none;
             border-color: var(--accent-color);
         }
         button {
             background-color: var(--accent-color);
-            color: #0f172a;
             border: none;
             padding: 1rem;
-            font-weight: 700;
-            border-radius: 6px;
             cursor: pointer;
             font-size: 1rem;
-            transition: opacity 0.3s;
         }
         button:hover {
-            opacity: 0.9;
         }
         footer {
             text-align: center;
-            padding: 2rem;
-            border-top: 1px solid #334155;
             color: var(--text-muted);
-            font-size: 0.9rem;
         }
     </style>
 </head>
 <body>
-    <!-- Header Navigation -->
     <nav>
         <div class="logo">Apex<span>Horizon</span></div>
         <div class="nav-links">
             <a href="#listings">Properties</a>
-            <a href="#contact">Contact</a>
         </div>
     </nav>
-    <!-- Main Banner Area -->
     <section class="hero">
-        <h1>Find Your Dream Space</h1>
-        <p>Discover hand-picked premium residential properties and architectural marvels across prime city locations.</p>
     </section>
-    <!-- Featured Properties Grid -->
-    <section class="listings-container" id="listings">
-        <h2 class="section-title">Current Exclusive Listings</h2>
-        <div class="grid">
-            <!-- House 1 -->
-            <div class="card">
-                <img src="https://unsplash.com" alt="Luxury Villa" class="card-img">
-                <div class="card-content">
-                    <div class="price">$2,450,000</div>
-                    <div class="address">42 Shadow Ridge Way</div>
-                    <div class="details">
-                        <span>4 Beds</span> | <span>4.5 Baths</span> | <span>4,200 sqft</span>
-                    </div>
-                </div>
             </div>
-            <!-- House 2 -->
-            <div class="card">
-                <img src="https://unsplash.com" alt="Modern Minimalist House" class="card-img">
-                <div class="card-content">
-                    <div class="price">$1,895,000</div>
-                    <div class="address">187 Coastal Crest Blvd</div>
-                    <div class="details">
-                        <span>3 Beds</span> | <span>3 Baths</span> | <span>2,950 sqft</span>
-                    </div>
-                </div>
             </div>
-            <!-- House 3 -->
-            <div class="card">
-                <img src="https://unsplash.com" alt="Urban Penthouse" class="card-img">
-                <div class="card-content">
-                    <div class="price">$920,000</div>
-                    <div class="address">704 Skyview Plaza, Apt 12C</div>
-                    <div class="details">
-                        <span>2 Beds</span> | <span>2 Baths</span> | <span>1,400 sqft</span>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Contact & Agent Information -->
-    <section class="contact" id="contact">
-        <div class="contact-info">
-            <h2>Get In Touch</h2>
-            <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>
-            <div style="margin-top: 2rem;">
-                <p><strong>📍 Head Office:</strong> 500 Financial District, Level 14</p>
-                <p><strong>📞 Phone:</strong> +1 (555) 839-2001</p>
-                <p><strong>✉️ Email:</strong> inquiries@apexhorizonrealty.com</p>
             </div>
         </div>
-        <form onsubmit="alert('Thank you! Your property inquiry has been received.'); return false;">
-            <input type="text" placeholder="Your Full Name" required>
-            <input type="email" placeholder="Your Email Address" required>
-            <input type="text" placeholder="Property Address of Interest (Optional)">
-            <textarea rows="5" placeholder="How can we help you?" required></textarea>
-            <button type="submit">Send Inquiry</button>
-        </form>
     </section>
-    <!-- Footer Copyright -->
-    <footer>
-        <p>&copy; 2026 Apex Horizon Realty. All rights reserved.</p>
-    </footer>
-</body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Apex Horizon Realty | Client-First Real Estate</title>
     <style>
         :root {
+            --bg-color: #f8fafc;
+            --card-bg: #ffffff;
+            --accent-color: #0284c7;
+            --accent-light: #e0f2fe;
+            --text-main: #1e293b;
+            --text-muted: #64748b;
+            --border-color: #e2e8f0;
         }
         * {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            padding: 1.2rem 8%;
+            background-color: rgba(255, 255, 255, 0.95);
             position: sticky;
             top: 0;
             z-index: 100;
+            border-bottom: 1px solid var(--border-color);
+            backdrop-filter: blur(10px);
         }
         .logo {
+            font-size: 1.4rem;
             font-weight: 700;
+            letter-spacing: -0.5px;
         }
         .logo span {
             color: var(--text-main);
             text-decoration: none;
             margin-left: 2rem;
+            font-weight: 500;
+            transition: color 0.2s;
         }
         .nav-links a:hover {
         /* Hero Section */
         .hero {
+            padding: 8rem 8% 6rem 8%;
             text-align: center;
+            background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
+            border-bottom: 1px solid var(--border-color);
         }
         .hero h1 {
+            font-size: 3.5rem;
+            font-weight: 800;
+            letter-spacing: -1px;
+            margin-bottom: 1.5rem;
+            color: #0f172a;
         }
         .hero p {
             color: var(--text-muted);
+            font-size: 1.25rem;
+            max-width: 700px;
+            margin: 0 auto 2.5rem auto;
         }
+        .cta-btn {
+            background-color: var(--accent-color);
+            color: white;
+            text-decoration: none;
+            padding: 0.8rem 2rem;
+            border-radius: 50px;
+            font-weight: 600;
+            box-shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.2);
+            transition: transform 0.2s, background-color 0.2s;
         }
+        .cta-btn:hover {
+            background-color: #0369a1;
+            transform: translateY(-2px);
+        }
+        /* Relationship & Philosophy Section */
+        .philosophy {
+            padding: 6rem 8%;
+            background-color: var(--card-bg);
             text-align: center;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .section-tag {
+            color: var(--accent-color);
+            text-transform: uppercase;
+            font-weight: 700;
+            font-size: 0.85rem;
+            letter-spacing: 1px;
+            margin-bottom: 0.5rem;
+            display: block;
+        }
+        .philosophy h2 {
+            font-size: 2.2rem;
+            margin-bottom: 1.5rem;
+            color: #0f172a;
+        }
+        .philosophy p {
+            max-width: 800px;
+            margin: 0 auto 3rem auto;
+            font-size: 1.15rem;
+            color: var(--text-muted);
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+            gap: 2.5rem;
+            max-width: 1100px;
+            margin: 0 auto;
+        }
+        .feature-card {
+            padding: 2rem;
+            background-color: #f8fafc;
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+        }
+        .feature-card h3 {
+            margin-bottom: 0.75rem;
+            font-size: 1.3rem;
+            color: #0f172a;
+        }
+        /* Listings Section */
+        .listings-container {
+            padding: 6rem 8%;
         }
         .grid {
             display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+            gap: 2.5rem;
+            margin-top: 3rem;
         }
         .card {
             background-color: var(--card-bg);
+            border-radius: 16px;
             overflow: hidden;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s, box-shadow 0.3s;
         }
         .card:hover {
             transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
         }
         .card-img {
             width: 100%;
+            height: 240px;
             object-fit: cover;
         }
         .card-content {
+            padding: 1.75rem;
         }
         .price {
+            font-size: 1.5rem;
             color: var(--accent-color);
             font-weight: 700;
             margin-bottom: 0.5rem;
         .address {
             font-size: 1.1rem;
+            font-weight: 600;
             margin-bottom: 0.5rem;
+            color: #0f172a;
         }
         .details {
             color: var(--text-muted);
+            font-size: 0.95rem;
             display: flex;
             gap: 1rem;
         }
+        /* Connect / Contact Section */
         .contact {
+            padding: 6rem 8%;
+            background-color: #f1f5f9;
             display: flex;
             flex-wrap: wrap;
             gap: 4rem;
         .contact-info {
             flex: 1;
+            min-width: 320px;
             max-width: 500px;
         }
         .contact-info h2 {
+            font-size: 2.2rem;
             margin-bottom: 1rem;
+            color: #0f172a;
         }
         .contact-info p {
             color: var(--text-muted);
+            font-size: 1.1rem;
+            margin-bottom: 2rem;
+        }
+        .info-block {
+            margin-bottom: 1rem;
+            font-size: 1.05rem;
         }
         form {
             flex: 1;
+            min-width: 320px;
             max-width: 500px;
             display: flex;
             flex-direction: column;
+            gap: 1.25rem;
+            background-color: var(--card-bg);
+            padding: 2.5rem;
+            border-radius: 16px;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
+        }
+        form h3 {
+            font-size: 1.4rem;
+            margin-bottom: 0.5rem;
         }
         input, textarea {
+            background-color: #f8fafc;
+            border: 1px solid var(--border-color);
+            padding: 0.85rem 1rem;
             color: var(--text-main);
+            border-radius: 8px;
             font-size: 1rem;
+            transition: border-color 0.2s, background-color 0.2s;
         }
         input:focus, textarea:focus {
             outline: none;
             border-color: var(--accent-color);
+            background-color: #ffffff;
         }
         button {
             background-color: var(--accent-color);
+            color: white;
             border: none;
             padding: 1rem;
+            font-weight: 600;
+            border-radius: 8px;
             cursor: pointer;
             font-size: 1rem;
+            transition: background-color 0.2s;
         }
         button:hover {
+            background-color: #0369a1;
         }
         footer {
             text-align: center;
+            padding: 2.5rem;
+            background-color: #ffffff;
+            border-top: 1px solid var(--border-color);
             color: var(--text-muted);
+            font-size: 0.95rem;
         }
     </style>
 </head>
 <body>
+    <!-- Navigation -->
     <nav>
         <div class="logo">Apex<span>Horizon</span></div>
         <div class="nav-links">
+            <a href="#about">Our Approach</a>
             <a href="#listings">Properties</a>
+            <a href="#contact">Connect With Us</a>
         </div>
     </nav>
+    <!-- Light & Open Hero Area -->
     <section class="hero">
+        <h1>Your Journey Home Begins with a Conversation</h1>
+        <p>We don’t just handle properties; we manage relationships. Experience a transparent, stress-free path to finding your next perfect space.</p>
+        <a href="#contact" class="cta-btn">Let's Connect</a>
     </section>
+    <!-- Client Relationship Philosophy Section -->
+    <section class="philosophy" id="about">
+        <span class="section-tag">Our Philosophy</span>
+        <h2>We are here for you, every step of the way</h2>
+        <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>
+        <div class="features-grid">
+            <div class="feature-card">
+                <h3>🤝 Built on Trust</h3>
+                <p style="color: var(--text-muted); font-size: 0.95rem;">Clear transparency, honest valuations, and open communication throughout your entire journey.</p>
             </div>
+            <div class="feature-card">
+                <h3>💡 Tailored For You</h3>
+                <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>
             </div>
+            <div class="feature-card">
+                <h3>🛡️ Constant Support</h3>
+                <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>
             </div>
         </div>
     </section>