-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
241 lines (218 loc) · 12.6 KB
/
index.html
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
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Design-a-thon</title>
<link rel="stylesheet" href="style.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<body>
<!-- ---------------------------------Navbar---------------------------------------------- -->
<div class="container">
<header class="d-flex flex-wrap justify-content-center py-2 mb-6">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
<!-- <svg class="bi me-2" width="40" height="32">
<use xlink:href="#bootstrap"></use>
</svg> -->
<span class="fs-4">NITR Diaries</span>
</a>
<ul class="nav nav-pills">
<li class="nav-item"><a href="#home" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#about" class="nav-link">About</a></li>
<li class="nav-item"><a href="#posts" class="nav-link">Posts</a></li>
<li class="nav-item"><a href="#form" class="nav-link">Contact Us</a></li>
</ul>
</header>
</div>
<!-- ---------------------------------Navbar---------------------------------------------- -->
<!-------------------------------------- Home--------------------------------------- -->
<video src="Images/WhatsApp Video 2022-12-25 at 5.17.17 PM.mp4" class="video-container" loop autoplay muted></video>
<!-- <section id="home">
Let's get lost together! <br>
The best in nature.<br>
Don't go it alone.<br>
It's more than a tour.<br>
The journey of a lifetime.<br>
Make your life an adventure.<br>
Your fun begins here.<br>
Unknown lands await you
</section> -->
<!-------------------------------------- Home--------------------------------------- -->
<!-- ---------------------------------About---------------------------------------------- -->
<section id="about">
<h1> About Us</h1>
Welcome to the college travel stories website! This is a platform where students from our college can share
their travel
experiences and adventures with the community. Whether you're planning a trip or just want to be inspired by
others'
journeys, this is the place to be.
On this website, you'll find a wide range of travel stories written by our students. They cover a variety of
destinations, both domestic and international, and offer insights into different cultures, landscapes, and
experiences.
In addition to reading about others' travels, you can also contribute your own story to the website. Simply sign
up and
start writing about your adventures. You can include photos and videos to bring your story to life and share it
with the
rest of the college community.
Whether you're an avid traveler or just starting to plan your first trip, the college travel stories website is
a great
resource for inspiration and information. So start exploring and get inspired to plan your next adventure!
</section>
<!-- ---------------------------------About---------------------------------------------- -->
<!-- ---------------------------------Post---------------------------------------------- -->
<section id="posts">
<section class="satkosia">
<div class="satkosia-wrapper container1">
<div class="satkosia-text">
<p class="small">Ladakh, Kashmir</p>
<h2>Travel Diary Ladakh</h2>
<p>I traveled to Ladakh with my friends and it was an incredible experience. The stunning landscapes
and cultural
experiences were unlike anything I had ever encountered before. We took a road trip through the
mountains, stopping at
various villages and monasteries along the way. The local people were warm and welcoming, and we
felt truly immersed in
their way of life. It was a trip that I will never forget, and I can't wait to go back and
explore more of this
beautiful region.</p>
</div>
<div class="satkosia-image">
<img src="Images/blog-1.jpg" alt="Satkosia Tiger Reserve">
</div>
</div>
</section>
<section class="satkosia">
<div class="satkosia-wrapper container1">
<div class="satkosia-text">
<p class="small">Agra, Uttar Pradesh</p>
<h2>Travel Diary Agra</h2>
<p>I traveled to Agra with my friends and it was an unforgettable experience. We stayed in a
charming guesthouse near the
Taj Mahal and spent our days exploring the city and its many cultural attractions. We visited
the Agra Fort, a UNESCO
World Heritage Site, and marveled at its grandeur and beauty. We also sampled delicious local
food and shopped for
souvenirs at the vibrant markets. It was a wonderful trip filled with adventure and new
experiences, and I can't wait to
go back and explore more of this amazing city.
</p>
</div>
<div class="satkosia-image">
<img src="Images/blog-2.jpg" alt="Satkosia Tiger Reserve">
</div>
</div>
</section>
<section class="satkosia">
<div class="satkosia-wrapper container1">
<div class="satkosia-text">
<p class="small">Manali, Himachal Pradesh
</p>
<h2>Travel Diary Manali</h2>
<p>I traveled to Manali with my friends and it was an amazing trip. The picturesque mountain town
was a perfect getaway and
we spent our days exploring the surrounding forests and valleys. We went trekking in the
Himalayas and were rewarded
with breathtaking views of snow-capped peaks and sparkling lakes. We also visited temples and
monasteries, and tried our
hand at white-water rafting. It was a trip filled with adventure and new experiences, and I am
so grateful to have
shared it with my friends.
</p>
</div>
<div class="satkosia-image">
<img src="Images/blog-4.webp" alt="Satkosia Tiger Reserve">
</div>
</div>
</section>
<section class="satkosia">
<div class="satkosia-wrapper container1">
<div class="satkosia-text">
<p class="small">Varanasi, Uttar Pradesh</p>
<h2>Travel Diary Banaras
</h2>
<p>I traveled to Banaras with my friends and it was a trip that I will never forget. The holy city
was filled with vibrant
energy and we spent our days exploring its many temples and ghats. We took a boat ride along the
Ganges River and
witnessed the evening aarti ceremony, which was a truly spiritual experience. We also sampled
delicious local cuisine
and shopped for souvenirs at the bustling markets. It was an enriching and memorable trip, and I
am grateful to have had
the opportunity to visit such a special place with my friends.
</p>
</div>
<div class="satkosia-image">
<img src="Images/blog-3.jpg" alt="Satkosia Tiger Reserve">
</div>
</div>
<button class="read">Read more</button>
</section>
</section>
<!-- ---------------------------------Post---------------------------------------------- -->
<!-- ---------------------------------Contact---------------------------------------------- -->
<section id="contact">
<form action="" id="form">
<h1>Contact me</h1>
<div class="r1">
<input type="text" id="name" title="Required" placeholder="Enter name" required>
<input type="email" id="email" placeholder="Enter email address" required>
</div>
<div class="r2">
<input type="number" id="age" placeholder="Enter age" required>
<input type="text" id="mobile" placeholder="Enter phone no." required>
</div>
<textarea name="suggestions" id="textarea" placeholder="Write your text here!"></textarea>
<button type="submit" class="read">Message me</button>
</form>
</section>
<!-- ---------------------------------Contact---------------------------------------------- -->
<!-- ---------------------------------Footer---------------------------------------------- -->
<section id="helloworld">
<div class="container>
<footer class=" py-5">
<div class="row">
<div class="col-2">
<!-- <h5>Section</h5> -->
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#home" class="nav-link p-0 text-muted">Home</a></li>
<li class="nav-item mb-2"><a href="#about" class="nav-link p-0 text-muted">About</a></li>
<li class="nav-item mb-2"><a href="#posts" class="nav-link p-0 text-muted">Posts</a></li>
<li class="nav-item mb-2"><a href="#contact" class="nav-link p-0 text-muted">Contact Us</a></li>
</ul>
</div>
<div class="col-2">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3692.6576224309088!2d84.89879211494011!3d22.25306558534813!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3a201f72bbd561c3%3A0xab5c70e76a7b5a!2sNational%20Institute%20of%20Technology%2C%20Rourkela!5e0!3m2!1sen!2sin!4v1671960720755!5m2!1sen!2sin"
width="500" height="200" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
<div class="col-2"></div>
<div class="col-4 offset-1">
<form>
<h5>Subscribe to our newsletter</h5>
<p>Monthly digest of whats new and exciting from us.</p>
<div class="d-flex w-100 gap-2">
<label for="newsletter1" class="visually-hidden">Email address</label>
<input id="newsletter1" type="text" class="form-control" placeholder="Email address">
<button class="btn btn-primary" type="button">Subscribe</button>
</div>
</form>
</div>
</div>
<div class="d-flex justify-content-center py-4 my-4 border-top">
<ul class="list-unstyled d-flex uuu">
<li class="ms-3"><a href="#"><img src="Images/twitter.png" alt=""></a></li>
<li class="ms-3"><a href="#"><img src="Images/instagram.png" alt=""></a></li>
<li class="ms-3"><a href="#"><img src="Images/facebook.png" alt=""></a></li>
<li class="ms-3"><a href="#"><img src="Images/github b.png" alt=""></a></li>
</ul>
</div>
</footer>
</div>
</section>
<!-- ---------------------------------Footer---------------------------------------------- -->
</body>
</html>