Web/comming.html at main · Navik16/Web · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Boat Rides - Leisure</title>
    <link rel="stylesheet" href="comming.css">
</head>
<script src="comming.js"></script>
<body>
    <nav>
        <h1>Upcomming Activities</h1>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="#boat-options">Options</a></li>
            <li><a href="#gallery">Gallery</a></li>

            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>

    <header id="home" class="hero">
        <button class="prev-btn">&#10094;</button> <!-- Left Arrow -->
        <button class="next-btn">&#10095;</button> <!-- Right Arrow -->

        <div class="slideshow-container">

                <img src="res1.jpg" class="slide active">
                <img src="res2.jpg" class="slide">
                <img src="res3.jpg" class="slide">

        </div>

        <h2>Authentic Indian Dining Experience</h2>
        <p>Delight in the flavors of India with our exquisite menu, cozy ambiance, and exceptional service.</p>
    </header>

    <section id="boat-options">
        <h2>Available Boat Rides</h2>
        <div class="boat-container">
            <div class="boat-item">
                <img src="res6.jpg" alt="Couple Swan Boat">
                <h3>Couple Swan Boat</h3>
                <p>Perfect for couples who want a romantic ride.</p>
            </div>

            <div class="boat-item">
                <img src="res7.jpg" alt="Family Boat">
                <h3>Family Boat</h3>
                <p>Spacious boat for families to enjoy a ride together.</p>
            </div>

            <div class="boat-item">
                <img src="res8.jpg" alt="Electric Boat">
                <h3>Electric Boat</h3>
                <p>A smooth and effortless ride powered by electricity.</p>
            </div>

            <div class="boat-item">
                <img src="caf1.jpg" alt="2-Person Paddle Boat">
                <h3>2-Person Paddle Boat</h3>
                <p>A fun ride for two people with paddle control.</p>
            </div>

            <div class="boat-item">
                <img src="caf.jpg" alt="Speed Boat">
                <h3>Speed Boat</h3>
                <p>For thrill-seekers who love high-speed lake adventures.</p>
            </div>
        </div>
    </section>


    <section id="gallery" class="gallery">
        <h2>Gallery</h2>
        <div class="gallery-container">
            <img src="res4.jpg" data-src="res4.jpg" alt="Gallery Image 1" >
            <img src="res3.jpg" data-src="res3.jpg" alt="Gallery Image 2" >
            <img src="res5.jpg" data-src="res5.jpg" alt="Gallery Image 3" >
            <img src="res6.jpg" data-src="res6.jpg" alt="Gallery Image 4" >
            <img src="res7.jpg" data-src="res7.jpg" alt="Gallery Image 5" >
            <img src="res8.jpg" data-src="res8.jpg" alt="Gallery Image 5" >
        </div>

        <!-- Lightbox Modal -->
        <div id="lightbox" class="lightbox">
            <span class="close">&times;</span>
            <span class="prev">&#10094;</span> <!-- Previous Button -->
            <img class="lightbox-content" id="lightbox-img">
            <span class="next">&#10095;</span> <!-- Next Button -->

            <!-- Dots Indicator -->
            <div class="dots-container"></div>
        </div>
    </section>


    </section>


    <section id="contact">
        <h2>Contact Us</h2>
        <p>Have questions? Get in touch with us!</p>

        <div class="contact-container">
            <form action="https://formspree.io/f/mvgzwdav" method="POST">
                <label for="name">Name</label>
                <input type="text" id="name" name="name" placeholder="Your Name" required>

                <label for="email">Email</label>
                <input type="email" id="email" name="email" placeholder="Your Email" required>

                <label for="message">Message</label>
                <textarea id="message" name="message" placeholder="Your Message" rows="5" required></textarea>

                <button type="submit">Send Message</button>
            </form>

            <div class="contact-info">
                <h3>Our Location</h3>
                <p>Lake Drive Leisure Park, South Lake round, Kurunegala, Sri Lanka</p>
                <a href="https://www.google.com/maps/dir//F9W4%2B3X6,+S+Lake+Rd,+Kurunegala,+Sri+Lanka/@7.4951524,80.274997,12z/data=!4m8!4m7!1m0!1m5!1m1!1s0x3ae33b714f72af69:0x4eb2d2359552bee2!2m2!1d80.3573989!2d7.4951601?entry=ttu&g_ep=EgoyMDI1MDIxMi4wIKXMDSoASAFQAw%3D%3D" class="map-link" target="_blank">
                    📍 View on Google Maps
                </a>
                <p>Email: lakedriveleisurepark@gmail.com</p>
                <p>Phone: +94 76 915 0150</p>
            </div>
        </div>
    </section>

    <footer>
        <p>&copy; 2025 Delhi Lounge. All Rights Reserved.</p>
    </footer>
</body>
</html>