hotel-reservation-system/index.html at main · Poorna-Raj/hotel-reservation-system · 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
141
142
143
144
145
146
147
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Elephant &amp; Nature Resort — Welcome</title>
        <meta name="description" content="Elephant & Nature Resort – Experience eco-luxury suites, elephant conservation, and tranquil riverscapes in Sri Lanka.">


        <!-- Google Fonts -->
        <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;800&display=swap"
            rel="stylesheet" />
        <link rel="stylesheet" href="indexStyle.css">

    </head>
    <body>
        <script src="indexScript.js"></script>
        <header class="hero">
            <!-- Nature background video with elephants -->
           <video
    src="frontend/Welcome video/126211-735676461.mp4"
    autoplay
    muted
    loop
    playsinline></video>


            <div class="glass">
                <h1>Welcome to Elephant &amp; Nature Resort</h1>
                <p class="tagline">
                    Immerse yourself in lush greenery, gentle giants and eco‑luxury suites along Sri Lanka’s serene
                    riverscapes.
                </p>
                <div class="btn-group">
                    <button class="btn btn-primary">Book&nbsp;Now</button>
                    <button class="btn btn-outline">Log&nbsp;in</button>
                </div>
            </div>
            <div class="mouse"></div>


        </header>

<!-- Services Section -->
<section class="services-section" id="services">
    <div class="services-content">
        <h2>Our Services</h2>
        <p>Experience the best of eco-luxury with our world-class amenities designed to make your stay unforgettable.</p>
        <div class="card-grid">
            <!-- Card 1 -->
            <div class="service-card">
                <img src="https://img.icons8.com/ios-filled/100/money.png" alt="Affordable Rates" />
                <h3>Affordable Rates</h3>
                <p>Enjoy luxurious eco-accommodation at budget-friendly prices with no compromise on quality.</p>
            </div>

            <!-- Card 2 -->
            <div class="service-card">
                <img src="https://img.icons8.com/ios-filled/100/handshake.png" alt="Better Hospitality" />
                <h3>Better Hospitality</h3>
                <p>Our trained staff ensures warm, personalized service that makes you feel at home.</p>
            </div>

            <!-- Card 3 -->
            <div class="service-card">
                <img src="https://img.icons8.com/ios-filled/100/parking.png" alt="Parking & Comfort" />
                <h3>Parking & Comfort</h3>
                <p>Spacious parking and cozy rooms designed for comfort, relaxation, and peaceful sleep.</p>
            </div>
        </div>
    </div>
</section>


<!----------------------------------------- about section-------------------------------------------- -->


       <section class="about-section" id="about">
  <div class="about-container">
    <div class="about-text">
      <h2>About Us</h2>
      <p>
        Nestled in the heart of Sri Lanka, Elephant & Nature Resort blends luxury and sustainability. We offer eco-friendly suites, authentic elephant encounters, and serene natural surroundings to relax and reconnect with nature.
      </p>
      <!-- ------------------------get started butoon-------------------- -->
      <a href="frontend/Auth/REGISTER/Register.php" class="btn">Get Started</a>

      <!---------------------- view more button for about----------------- -->
      <a href="frontend/About us page/aboutuspage.php" class="btn">View more</a>
    </div>
    <div class="about-image">
      <img src="https://img.freepik.com/premium-vector/bubble-house-hotel-nature-people-relaxing-comfortable-luxury-camping-summer-vacation-cozy-premium-outdoor-recreation-area-flat-graphic-vector-illustration-isolated-white-background_198278-22093.jpg" alt="Nature Resort" />
    </div>
  </div>
</section>


<!-- gallery -->
 <section class="gallery-section" id="gallery">
  <h2>Our Gallery</h2>
  <div class="gallery-grid">
    <img src="frontend/Welcome video/49.jpg" alt="Eco suite" />
    <img src="frontend/Welcome video/elephant-and-nature-resort (1).jpg" alt="Elephant walking" />
    <img src="frontend/Welcome video/elephant-and-nature-resort.jpg" alt="Nature view" />
    <img src="frontend/Welcome video/elephant-and-nature-resort (1).jpg" alt="Elephant walking" />
    <img src="frontend/Welcome video/elephant-and-nature-resort.jpg" alt="Nature view" />

    <img src="https://kandy-cabana.kandyhotelsnow.com/data/Photos/OriginalPhoto/7502/750278/750278036/photo-cabana-guest-house-kandy-13.JPEG" alt="Luxury room" />
  </div>
</section>

<!-- location -->

<section class="location-section" id="location">
  <h2>Find Us</h2>
  <iframe src="https://www.google.com/maps?q=Elephant+%26+Nature+Resort+Anuradhapura&output=embed"  width="100%" height="300" style="border:0;" allowfullscreen></iframe>
</section>


<!-- contact section -->
<section class="contact-section" id="contact">
  <h2>Contact Us</h2>
  <p>Email: info@elephantnature.lk | Phone: +94 77 123 4567</p>
  <form id="sendEmail">
    <input type="text" name = "name" placeholder="Your Name" required />
    <input type="email" name = "email" placeholder="Your Email" required />
    <textarea placeholder="Message" name = "message"></textarea>
    <p id="contactResponse" style="color:red; display:none;"></p>
    <button type="submit">Send Message</button>
  </form>
  <!-- Make response to this form -->
</section>


<!-- ----------------------------------------------footer-------------------------------------------------------- -->
<footer>
    <p>&copy; 2025 Elephant & Nature Resort. All rights reserved.</p>
</footer>

    </body>


</html>