DIS_flask/testfile.html at main · chyeswanth/DIS_flask · 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
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
<!DOCTYPE html>
<html>
<head>
	<title>Lonely Planet</title>
	<style>
        body {
  font-family: Arial, sans-serif;
  margin: 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Header styles */
.header {
  background-color: #fff;
  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}

.header .logo {
  display: inline-block;
  height: 60px;
  margin: 10px 0;
}

.header nav {
  display: inline-block;
  float: right;
  margin: 30px 0;
}

.header nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.header nav li {
  display: inline-block;
}

.header nav li a {
  color: #333;
  text-decoration: none;
  padding: 10px 15px;
}

.header nav li a:hover {
  color: #f00;
}

/* Main section styles */
.main {
  background-image: url('background-image.jpg');
  background-size: cover;
  background-position: center;
  height: 600px;
}

.main .container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.main h1 {
  font-size: 60px;
  color: #fff;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  text-align: center;
  margin-bottom: 30px;
}

.main a {
  display: inline-block;
  background-color: #f00;
  color: #fff;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 5px;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}

.main a:hover {
  background-color: #ff6a00;
}

/* Footer styles */
.footer {
  background-color: #333;
  color: #fff;
  padding: 40px 0;
}

.footer .container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.footer .left {
  width: 50%;
}

.footer .right {
  width: 50%;
}

.footer h2 {
  font-size: 24px;
  margin-bottom: 20px;
}

.footer p {
  font-size: 16px;
  line-height: 1.5;
}

.footer a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

.footer a:hover {
  color: #f00;
}
        </style>
</head>
<body>

	<header>
		<div class="logo">
			<a href="#">Lonely Planet</a>
		</div>
		<nav>
			<ul>
				<li><a href="#">Destinations</a></li>
				<li><a href="#">Inspiration</a></li>
				<li><a href="#">Activities</a></li>
				<li><a href="#">Food & Drink</a></li>
				<li><a href="#">Hotels</a></li>
				<li><a href="#">Bookings</a></li>
			</ul>
		</nav>
	</header>

	<main>
		<section class="hero">
			<h1>Explore the world with Lonely Planet</h1>
			<p>Get inspired and plan your next adventure today!</p>
			<a href="#" class="btn">Start exploring</a>
		</section>

		<section class="destinations">
			<h2>Popular Destinations</h2>
			<div class="destination-item">
				<img src="https://via.placeholder.com/400x250" alt="Destination 1">
				<h3>London</h3>
				<p>Discover the city of history and culture</p>
				<a href="#">Explore</a>
			</div>
			<div class="destination-item">
				<img src="https://via.placeholder.com/400x250" alt="Destination 2">
				<h3>Paris</h3>
				<p>Experience the romance of the City of Lights</p>
				<a href="#">Explore</a>
			</div>
			<div class="destination-item">
				<img src="https://via.placeholder.com/400x250" alt="Destination 3">
				<h3>New York City</h3>
				<p>Discover the vibrant city that never sleeps</p>
				<a href="#">Explore</a>
			</div>
		</section>

		<section class="articles">
			<h2>Latest Articles</h2>
			<div class="article-item">
				<img src="https://via.placeholder.com/400x250" alt="Article 1">
				<h3>Top 10 Things to Do in Tokyo</h3>
				<p>Discover the best sights and experiences in Japan's bustling capital city.</p>
				<a href="#">Read more</a>
			</div>
			<div class="article-item">
				<img src="https://via.placeholder.com/400x250" alt="Article 2">
				<h3>The Ultimate Guide to Italian Cuisine</h3>
				<p>Explore the flavors and traditions of Italy's rich culinary heritage.</p>
				<a href="#">Read more</a>
			</div>
			<div class="article-item">
				<img src="https://via.placeholder.com/400x250" alt="Article 3">
				<h3>Off the Beaten Path: Hidden Gems in Bali</h3>
				<p>Discover the hidden gems and lesser-known spots in one of Indonesia's most popular destinations.</p>
				<a href="#">Read more</a>
			</div>
		</section>
	</main>

	<footer>
		<p>&copy; 2023 Lonely Planet. All rights reserved.</p>
    </footer>
</body>
</html>