-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
182 lines (163 loc) · 9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WELCOME TO INDIA</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
</head>
<body>
<header>
<nav>
<div class="logo"><h1 >WANDER, EXPLORE & DISCOVER</h1></div>
<div class="menu">
<a href="#home">HOME</a>
<a href="#destinations">GALLERY</a>
<a href="#about">BLOG</a>
<a href="#contact">CONTACT</a>
</div>
</nav>
<section id="home">
<h3 >WELCOME TO INDIA</h3>
<h1 class="animated infinite heartBeat">DO COME & VISIT<span></span></h1>
<p>To other countries,I may go as a TOURIST</p>
<p>But to INDIA, I come as a PILGRIM.</p>
<a href="#" class="btn2">ABOUT US</a>
</section>
<section >
<br>
<div class="transbox">
<p id="quote">"India is the cradle of the human race, the birthplace of human speech,</p>
<p id="quote">the mother of history, the grandmother of legend an</p>
<p id="quote">Our most valuable and most artistic materials in the history of man are </p>
<p id="quote">treasured up in India only!"</p>
</div>
</section>
<section class="wrapper text-dark bg-grey" id="destinations">
<div class="container d-flex-c">
<div class="text-center"></div>
<h6 id="heading">POPULAR DESTINATIONS</h6>
<br>
<p id="text">We live in a wonderful world that is full of beauty, charm and adventure.</p>
<p id="text">There is no end to the adventures we can have if only we seek them with our eyes open.</p>
<p id="text"> – Jawaharlal Nehru</p>
</div>
<ul class="d-flex-r nospace">
<li class="hover1">
<img src="images/Taj-Mahal.jpg" width="330" height="300">
<div class="overlay">
<h2>TAJ MAHAL</h2>
</div>
</li>
<li class="hover1">
<img src="images/golden temple.jpg" width="400" height="300">
<div class="overlay">
<h2>GOLDEN TEMPLE</h2>
</div>
</li>
<li class="hover1">
<img src="images/hawa_mahal.jpg" width="330" height="300">
<div class="overlay">
<h2>HAWA MAHAL</h2>
</div>
</li>
<li class="hover1">
<img src="images/khajurao.jpg" width="330" height="300">
<div class="overlay">
<h2>KHAJURAO TEMPLE</h2>
</div>
</li>
<li class="hover1">
<img src="images/the-red-fort-delhi.jpg" width="330" height="300">
<div class="overlay">
<h2>RED FORT</h2>
</div>
</li>
<li class="hover1">
<img src="images/lotus-temple.jpg" width="330" height="300">
<div class="overlay">
<h2>LOTUS TEMPLE</h2>
</div>
</li>
<li class="hover1">
<img src="images/mysore palace.jpg" width="330" height="300">
<div class="overlay">
<h2>MYSORE PALACE</h2>
</div>
</li>
<li class="hover1">
<img src="images/sanchi-stupa.jpg" width="330" height="300">
<div class="overlay">
<h2>SANCHI STUPA</h2>
</div>
</li>
<li class="hover1">
<img src="images/jama-masjid-delhi.jpg" width="330" height="300">
<div class="overlay">
<h2>JAMA MASJID</h2>
</div>
</li>
<li class="hover1">
<img src="images/mahabodhi-temple-bodh-gaya.jpg" width="330" height="300">
<div class="overlay">
<h2>MAHABODHI TEMPLE</h2>
</div>
</li>
<li class="hover1">
<img src="images/ajanta-and-ellora-caves-aurangabad.jpg" width="330" height="300">
<div class="overlay">
<h2>AJANTA & ELLORA CAVES</h2>
</div>
</li>
<li class="hover1">
<img src="images/fatehpur sikri.jpg" width="330" height="300">
<div class="overlay">
<h2>FATEHPUR SIKRI</h2>
</div>
</li>
</ul>
</div>
</section>
<section class="wrapper bg-grey" id="about">
<div class="d-flex-c container">
<div class="text-center">
<h4 id="heading" style="color:darkblue">ABOUT INDIAN TOURISM</h4><br>
<br>
<p id="text1"><b>Welcome to India, one of the most interesting travel destinations in the world.</b></p>
<div class="transbox1">
<p id="text2">One of the most popular tourist attractions in India is the synonym of love and romance, the Taj Mahal. This beautiful building is made of white marble and it is a symbol that attracts between two million and four million visitors annually, including more than 200,000 from overseas.</p>
</div>
<div class="transbox1">
<p id="text2" line-height:1.5>India can be your destination if you are looking for some of the most attractive beaches in this part of the world. They have some of the best sandy beaches around. One of the most popular is the Palolem beach which is located in the southern part of the state Goa.</p>
</div>
<div class="transbox1">
<p id="text2" >Right from magical Jammu and Kashmir in the north to pristine Kerala in South and notable Arunachal Pradesh in the east to legendary Gujarat in west, India has a whole lot to offer. The mighty Himalayan peaks and the expansive deserts offer some of the most amazing experiences on earth.</p>
</div>
</div>
</div>
</section>
<section id="contact"></section>
<div class="wrapper bg-green">
<footer class="d-flex-r clear container text-white">
<h1 class="end">ATITHI DEVO BHAVA</h1>
<div class="mx-2">
<h6 class="heading1 font-x1 " style="font-size: 200">Contact Us</h6>
<ul class="nospace">
<li>
<address>Jabalpur,Madhya Pradesh,(482002)</address>
</li>
<li>
<address>explore@gmail.com</address>
</li>
<li>
<i></i> +91 123 456 7890</li>
</li>
</ul>
</div>
</footer>
</div>
</section>
</header>
</body>
</html>