forked from YazdanRizwan/Tour-Guide
-
Notifications
You must be signed in to change notification settings - Fork 0
/
LandingPage.html
206 lines (193 loc) · 10.1 KB
/
LandingPage.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
<!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">
<link rel="stylesheet" href="Assets/CSS/StyleLandingPage.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet" />
<link rel="shortcut icon" type="image/png" href="images/Pic.jpg" />
<title>HomePage</title>
</head>
<body></body>
<div class="navigation">
<input type="checkbox" class="navigation__checkbox" id="navi-toggle" />
<label for="navi-toggle" class="navigation__button">
<span class="navigation__icon"> </span>
</label>
<div class="navigation__background"> </div>
<nav class="navigation__nav">
<ul class="navigation__list">
<li class="navigation__item">
<a href="#" class="navigation__link"> About Tour Guide</a>
</li>
<!-- <li class="navigation__item">
<a href="#" class="navigation__link"> Your Benefits</a>
</li>
<li class="navigation__item">
<a href="#" class="navigation__link"> Popular tours</a>
</li> -->
<li class="navigation__item">
<a href="index.html" class="navigation__link"> Log-In</a>
</li>
<li class="navigation__item">
<a href="index.html" class="navigation__link"> Sign-Up</a>
</li>
</ul>
</nav>
</div>
<header class="header">
<div class="header__logo-box">
<img src="images/pic.png" alt="logo" class="header__logo" />
</div>
<div class="text__box">
<h1 class="heading__primary">
<span class="heading__primary--main">Tour Guide</span>
<span class="heading__primary--sub">Is where travelling begins</span>
</h1>
<a href="#section-tours" class="btn btn-white">Discover our tours</a>
</div>
</header>
<main>
<!-- section tours -->
<section class="section-tours" id="section-tours">
<div class="u-center-text u-margin-bottom-big">
<h2 class="heading-secondary">Most popular tours</h2>
</div>
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front">
<div class="card__picture card__picture--1"> </div>
<div class="card__heading">
<span class="card__heading-span card__heading-span--1">
Hyderabad
</span>
</div>
<div class="card__details">
<p style="font-family:'Times New Roman', Times, serif;font-size:150%;">Hyderabad is the capital of southern India's Telangana state. A major center for the technology industry, it's home to many upscale restaurants and shops. Its historic sites include Golconda Fort, a former diamond-trading center that was once the Qutb Shahi dynastic capital.</p>
</div>
</div>
<div class="card__side card__side--back card__side--back-1">
<div class="card__cta">
<a href="#popup" class="btn btn-white">Visit</a>
</div>
</div>
</div>
</div>
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front">
<div class="card__picture card__picture--2"> </div>
<div class="card__heading">
<span class="card__heading-span card__heading-span--2">
Delhi
</span>
</div>
<div class="card__details">
<p style="font-family:'Times New Roman', Times, serif;font-size:150%;">Delhi, India’s capital territory, is a massive metropolitan area in the country’s north. In Old Delhi, a neighborhood dating to the 1600s, stands the imposing Mughal-era Red Fort, a symbol of India, and the sprawling Jama Masjid mosque, whose courtyard accommodates 25,000 people.</p>
</div>
</div>
<div class="card__side card__side--back card__side--back-2">
<div class="card__cta">
<a href="#popup" class="btn btn-white">Visit</a>
</div>
</div>
</div>
</div>
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front">
<div class="card__picture card__picture--3"> </div>
<div class="card__heading">
<span class="card__heading-span card__heading-span--3">
Varanasi
</span>
</div>
<div class="card__details">
<p style="font-family:'Times New Roman', Times, serif;font-size:150%;">Varanasi is a city in the northern Indian state of Uttar Pradesh dating to the 11th century B.C. Regarded as the spiritual capital of India, the city draws Hindu pilgrims who bathe in the Ganges River’s sacred waters and perform funeral rites. Along the city's winding streets are some 2,000 temples, including Kashi Vishwanath, the “Golden Temple,” dedicated to the Hindu god Shiva.</p>
</div>
</div>
<div class="card__side card__side--back card__side--back-3">
<div class="card__cta">
<a href="#popup" class="btn btn-white">Visit</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section-tours" id="section-tours">
<div class="row">
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front">
<div class="card__picture card__picture--4"> </div>
<div class="card__heading">
<span class="card__heading-span card__heading-span--1">
Jaipur
</span>
</div>
<div class="card__details">
<p style="font-family:'Times New Roman', Times, serif;font-size:150%;">Jaipur is the capital of India’s Rajasthan state. It evokes the royal family that once ruled the region and that, in 1727, founded what is now called the Old City, or “Pink City” for its trademark building color. At the center of its stately street grid (notable in India) stands the opulent, colonnaded City Palace complex. With gardens, courtyards and museums, part of it is still a royal residence.</p>
</div>
</div>
<div class="card__side card__side--back card__side--back-1">
<div class="card__cta">
<a href="#popup" class="btn btn-white">Visit</a>
</div>
</div>
</div>
</div>
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front">
<div class="card__picture card__picture--5"> </div>
<div class="card__heading">
<span class="card__heading-span card__heading-span--2">
Gaya
</span>
</div>
<div class="card__details">
<p style="font-family:'Times New Roman', Times, serif;font-size:150%;">Gaya is a holy city beside the Falgu River, in the northeast Indian state of Bihar. It’s known for 18th-century Vishnupad Mandir, a riverside temple with an octagonal shrine. Close by, ancient Mangla Gauri Temple is set on a hilltop. To the north, Hindu devotees bath in a Brahma Kund pond before honoring their deceased ancestors atop Pretshila Hill. To the south lies the Hindu pilgrimage center of Bodh Gaya.</p>
</div>
</div>
<div class="card__side card__side--back card__side--back-2">
<div class="card__cta">
<a href="#popup" class="btn btn-white">Visit</a>
</div>
</div>
</div>
</div>
<div class="col-1-of-3">
<div class="card">
<div class="card__side card__side--front">
<div class="card__picture card__picture--6"> </div>
<div class="card__heading">
<span class="card__heading-span card__heading-span--3">
Vadodara
</span>
</div>
<div class="card__details">
<p style="font-family:'Times New Roman', Times, serif;font-size:150%;">Vadodara, also known as Baroda, is the second largest city in the Indian state of Gujarat. It serves as the administrative headquarters of the Vadodara district and is situated on the banks of the Vishwamitri River, 141 kilometres from the state capital of Gandhinagar.</p>
</div>
</div>
<div class="card__side card__side--back card__side--back-3">
<div class="card__cta">
<a href="#popup" class="btn btn-white">Visit</a>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<a href="index.html"> Back to Home </a>
<span> </span>
<span class="author">
Crafted by Yazdan, © 2022
</span>
</footer>
</body>
</html>