website/index.html at main · digitalasta/website · GitHub

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
132
133
134
135
136
137
138
139
140
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vistora • Real Estate</title>
  <link rel="stylesheet" href="styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
</head>
<body>

  <header class="topbar">
    <div class="nav">
      <div class="brand">Vistora<span class="star">*</span></div>

      <nav class="links">
        <a class="active" href="#">Home</a>
        <a href="about.html">About Us</a>
        <a href="services.html">Services</a>
        <a href="portfolio.html">Portfolio</a>
      </nav>

      <div class="actions">
        <button class="icon-btn" aria-label="Account">👤</button>
        <button class="icon-btn" aria-label="Add">＋</button>
      </div>
    </div>
  </header>

  <main>
    <!-- HERO -->
    <section class="hero">
      <div class="hero-bg"></div>

      <div class="hero-content">
        <h1>Experience living<br/>beyond expectations.</h1>
        <p>
          Embrace a life where luxury meets comfort, creating extraordinary moments
          beyond your wildest expectations.
        </p>
      </div>

      <!-- Hotspots (اختياري) -->
      <div class="pin pin-1" data-label="Main Entrance"></div>
      <div class="pin pin-2" data-label="Living Area"></div>
      <div class="pin pin-3" data-label="Balcony"></div>

      <div class="tooltip" id="tooltip"></div>
    </section>

    <!-- SECOND SECTION -->
    <section class="section white" id="about">
      <div class="container">
        <h2>Shaping spaces around<br/>your vision.</h2>
        <p class="muted">
          We craft unique spaces that seamlessly blend your vision with timeless design,
          ensuring every detail reflects your personality and aspirations.
        </p>

        <div class="btn-row">
          <a class="btn primary" href="#contact">Keep in Touch</a>
          <a class="btn ghost" href="#portfolio">Learn More</a>
        </div>
      </div>
    </section>


    <!-- PORTFOLIO / LISTINGS PREVIEW -->
    <section class="section" id="portfolio">
      <div class="container">
        <div class="section-head">
          <h2>Featured properties</h2>
          <a class="link" href="listings.html">View all →</a>
        </div>
        <div class="home-filters">
      <input id="homeSearch" placeholder="Search by city or title..." />

      <select id="homeStatus">
        <option value="">All</option>
        <option value="sale">Sale</option>
        <option value="rent">Rent</option>
      </select>
    </div>
        <div class="grid3" id="listingsGrid"></div>
        </div>
      </div>
    </section>

    <!-- SERVICES -->
    <section class="section" id="services">
      <div class="container grid3">
        <div class="card">
          <h3>Buy</h3>
          <p class="muted">Find your next home with curated listings and verified properties.</p>
        </div>
        <div class="card">
          <h3>Rent</h3>
          <p class="muted">Flexible rentals, premium locations, and transparent pricing.</p>
        </div>
        <div class="card">
          <h3>Sell</h3>
          <p class="muted">We position your property with great visuals and strong reach.</p>
        </div>
      </div>
    </section>

    <!-- CONTACT -->
    <section class="section white" id="contact">
      <div class="container contact">
        <div>
          <h2>Let’s talk</h2>
          <p class="muted">Tell us what you’re looking for and we’ll get back within 24h.</p>
        </div>

        <form class="form">
          <input placeholder="Full name" />
          <input placeholder="Email" />
          <textarea rows="4" placeholder="Message"></textarea>
          <button class="btn primary" type="button">Send message</button>
        </form>
      </div>
    </section>

    <footer class="footer">
      <div class="container foot">
        <span class="muted">© 2026 Vistora Real Estate</span>
        <div class="footlinks">
          <a href="#" class="muted">Privacy</a>
          <a href="#" class="muted">Terms</a>
        </div>
      </div>
    </footer>
  </main>

  <script src="app.js"></script>
</body>
</html>