Hugging Face's logo

Spaces:
Json026
/
DSA_Tutorials
Configuration error

App Files Community
Json026 commited on
Commit
b07886f
·
verified ·
1 Parent(s): be7ba9d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +267 -19
index.html CHANGED
@@ -1,19 +1,267 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Amrit Tour & Travels</title>
7
+
8
+ <style>
9
+ :root{
10
+ --blue:#003366;
11
+ --yellow:#FFCC00;
12
+ --light:#f5f7fa;
13
+ }
14
+
15
+ *{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif;}
16
+ html{scroll-behavior:smooth}
17
+
18
+ /* NAV */
19
+ header{
20
+ position:sticky;
21
+ top:0;
22
+ background:var(--blue);
23
+ color:white;
24
+ padding:15px 8%;
25
+ display:flex;
26
+ justify-content:space-between;
27
+ align-items:center;
28
+ z-index:1000;
29
+ }
30
+ .logo{font-weight:bold}
31
+ nav a{color:white;margin-left:20px;text-decoration:none}
32
+
33
+ /* HERO */
34
+ .hero{
35
+ height:90vh;
36
+ background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),
37
+ url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e');
38
+ background-size:cover;
39
+ background-position:center;
40
+ color:white;
41
+ display:flex;
42
+ flex-direction:column;
43
+ justify-content:center;
44
+ align-items:center;
45
+ text-align:center;
46
+ }
47
+ .hero h1{font-size:3rem}
48
+
49
+ .btn{
50
+ background:var(--yellow);
51
+ color:var(--blue);
52
+ padding:12px 25px;
53
+ border:none;
54
+ font-weight:bold;
55
+ cursor:pointer;
56
+ }
57
+
58
+ /* SEARCH */
59
+ .search-box{
60
+ background:white;
61
+ width:85%;
62
+ margin:-50px auto 40px;
63
+ padding:20px;
64
+ display:flex;
65
+ gap:10px;
66
+ box-shadow:0 5px 20px rgba(0,0,0,0.2);
67
+ }
68
+ .search-box input{flex:1;padding:10px;}
69
+ .search-box button{background:var(--blue);color:white;border:none;padding:10px;}
70
+
71
+ /* SECTION */
72
+ .section{padding:60px 8%;text-align:center;}
73
+ .grid{
74
+ display:grid;
75
+ grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
76
+ gap:20px;
77
+ margin-top:30px;
78
+ }
79
+
80
+ /* CARD */
81
+ .card{
82
+ background:white;
83
+ border-radius:10px;
84
+ overflow:hidden;
85
+ box-shadow:0 5px 15px rgba(0,0,0,0.1);
86
+ transition:.3s;
87
+ }
88
+ .card:hover{transform:translateY(-8px)}
89
+ .card img{width:100%;height:180px;object-fit:cover}
90
+ .card p{padding:15px;font-weight:500}
91
+
92
+ /* TESTIMONIAL */
93
+ .testimonials{
94
+ background:var(--blue);
95
+ color:white;
96
+ }
97
+ .slide{display:none}
98
+ .active{display:block}
99
+
100
+ /* CTA */
101
+ .cta{background:var(--yellow);padding:50px;text-align:center}
102
+
103
+ /* FOOTER */
104
+ footer{background:#111;color:white;text-align:center;padding:40px}
105
+ </style>
106
+ </head>
107
+
108
+ <body>
109
+
110
+ <header>
111
+ <div class="logo">AMRIT TOUR & TRAVELS</div>
112
+ <nav>
113
+ <a href="#">Home</a>
114
+ <a href="#services">Services</a>
115
+ <a href="#fleet">Fleet</a>
116
+ <a href="#bus">Buses</a>
117
+ <a href="#contact">Contact</a>
118
+ </nav>
119
+ </header>
120
+
121
+ <section class="hero">
122
+ <h1>Explore India Comfortably</h1>
123
+ <p>Ludhiana to Delhi Airport & Tour Packages</p>
124
+ <a href="https://wa.me/919878145774"><button class="btn">Book Now</button></a>
125
+ </section>
126
+
127
+ <div class="search-box">
128
+ <input placeholder="From">
129
+ <input placeholder="To">
130
+ <input type="date">
131
+ <button onclick="book()">Search</button>
132
+ </div>
133
+
134
+ <!-- SERVICES -->
135
+ <section id="services" class="section">
136
+ <h2>Our Services</h2>
137
+ <div class="grid">
138
+ <div class="card">
139
+ <img src="https://images.unsplash.com/photo-1529070538774-1843cb3265df">
140
+ <p>Airport Transfers</p>
141
+ </div>
142
+
143
+ <div class="card">
144
+ <img src="https://images.unsplash.com/photo-1503376780353-7e6692767b70">
145
+ <p>Cab Rentals</p>
146
+ </div>
147
+
148
+ <div class="card">
149
+ <img src="https://images.unsplash.com/photo-1501785888041-af3ef285b470">
150
+ <p>Tour Packages</p>
151
+ </div>
152
+
153
+ <div class="card">
154
+ <img src="https://images.unsplash.com/photo-1494526585095-c41746248156">
155
+ <p>Group Travel</p>
156
+ </div>
157
+ </div>
158
+ </section>
159
+
160
+ <!-- FLEET -->
161
+ <section id="fleet" class="section">
162
+ <h2>Our Fleet</h2>
163
+ <div class="grid">
164
+ <div class="card">
165
+ <img src="https://images.unsplash.com/photo-1552519507-da3b142c6e3d">
166
+ <p>Sedan Cars</p>
167
+ </div>
168
+
169
+ <div class="card">
170
+ <img src="https://images.unsplash.com/photo-1549924231-f129b911e442">
171
+ <p>SUV Vehicles</p>
172
+ </div>
173
+
174
+ <div class="card">
175
+ <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2">
176
+ <p>Innova / Traveller</p>
177
+ </div>
178
+ </div>
179
+ </section>
180
+
181
+ <!-- BUS -->
182
+ <section id="bus" class="section">
183
+ <h2>AC Bus Services</h2>
184
+ <div class="grid">
185
+ <div class="card">
186
+ <img src="https://images.unsplash.com/photo-1583267746897-2cf415887172">
187
+ <p>Volvo AC Sleeper Bus</p>
188
+ </div>
189
+
190
+ <div class="card">
191
+ <img src="https://images.unsplash.com/photo-1593950315186-76a92975b60c">
192
+ <p>Semi Sleeper AC Bus</p>
193
+ </div>
194
+
195
+ <div class="card">
196
+ <img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be">
197
+ <p>Non AC Bus</p>
198
+ </div>
199
+ </div>
200
+ </section>
201
+
202
+ <!-- DESTINATIONS -->
203
+ <section class="section">
204
+ <h2>Popular Destinations</h2>
205
+ <div class="grid">
206
+ <div class="card">
207
+ <img src="https://images.unsplash.com/photo-1590736969955-71cc94901144">
208
+ <p>Shimla</p>
209
+ </div>
210
+
211
+ <div class="card">
212
+ <img src="https://images.unsplash.com/photo-1626621341517-bbf3d9990a23">
213
+ <p>Manali</p>
214
+ </div>
215
+
216
+ <div class="card">
217
+ <img src="https://images.unsplash.com/photo-1580655653885-65763b2597d0">
218
+ <p>Amritsar</p>
219
+ </div>
220
+
221
+ <div class="card">
222
+ <img src="https://images.unsplash.com/photo-1599661046289-e31897846e41">
223
+ <p>Chandigarh</p>
224
+ </div>
225
+ </div>
226
+ </section>
227
+
228
+ <!-- TESTIMONIAL -->
229
+ <section class="section testimonials">
230
+ <h2>Testimonials</h2>
231
+ <div class="slide active">"Best service, clean cars!"</div>
232
+ <div class="slide">"AC bus was very comfortable!"</div>
233
+ <div class="slide">"Driver was very professional."</div>
234
+ </section>
235
+
236
+ <!-- CTA -->
237
+ <section class="cta">
238
+ <h2>Book Your Ride Now</h2>
239
+ <br>
240
+ <a href="https://wa.me/919878145774"><button class="btn">WhatsApp Booking</button></a>
241
+ </section>
242
+
243
+ <footer id="contact">
244
+ <h3>Contact</h3>
245
+ <p>📞 +91 98781-45774 | +91 98154-83354</p>
246
+ <p>✉ info@amrittourtravels.com</p>
247
+ </footer>
248
+
249
+ <script>
250
+ function book(){
251
+ alert("Redirecting...");
252
+ window.location.href="https://wa.me/919878145774";
253
+ }
254
+
255
+ /* TESTIMONIAL SLIDER */
256
+ let slides=document.querySelectorAll(".slide");
257
+ let i=0;
258
+
259
+ setInterval(()=>{
260
+ slides[i].classList.remove("active");
261
+ i=(i+1)%slides.length;
262
+ slides[i].classList.add("active");
263
+ },3000);
264
+ </script>
265
+
266
+ </body>
267
+ </html>