-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
222 lines (215 loc) · 8.47 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
<!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" />
<script
src="https://kit.fontawesome.com/bd38cdc239.js"
crossorigin="anonymous"
></script>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400;1,500&display=swap"
rel="stylesheet"
/>
<link href="./dist/style.css" rel="stylesheet" />
<title>Travel Blog</title>
</head>
<body>
<!-- Header Element -->
<header class="bg-couple-img bg-no-repeat bg-cover md:bg-center">
<!-- Navigation Element -->
<nav
class="px-6 sm:px-12 py-3 w-full bg-theme-grey bg-opacity-80 flex flex-row justify-between items-baseline fixed z-10"
>
<p class="text-theme-yellow font-semibold">
TRAVELBUDDY <i class="fas fa-paper-plane pl-1"></i>
</p>
<i class="sm:hidden fas fa-bars text-white"></i>
<ul
class="hidden sm:flex list-none flex-row justify-end text-sm space-x-8 text-white font-extralight"
>
<li class="hover:text-theme-yellow">
<a href="#next">Upcoming Adventures</a>
</li>
<li class="hover:text-theme-yellow">
<a href="#past">Past Adventures</a>
</li>
<li class="hover:text-theme-yellow"><a href="#about">About</a></li>
</ul>
</nav>
<div
class="bg-theme-purple bg-opacity-40 sm:h-96 relative flex flex-col items-center justify-center"
>
<div
class="flex flex-wrap content-center justify-center px-10 sm:px-32 py-20"
>
<h1
class="text-white text-center w-full text-lg sm:text-xl md:text-2xl"
>
"Still round the corner, there may wait, a new road or a secret
gate."
</h1>
<p class="text-white mt-5 text-xs sm:text-sm font-extralight">
J.R.R. Tolkien
</p>
</div>
</div>
</header>
<!-- Main Element -->
<main>
<!-- About Me Element -->
<section
class="mt-16 px-12 flex flex-col md:flex-row items-center"
id="about"
>
<div
class="h-56 sm:h-96 md:h-56 lg:h-60 md:order-2 bg-no-repeat bg-cover rounded border-0 bg-hero-img w-full md:bg-left"
></div>
<div class="flex flex-col items-center md:items-start md:mr-12">
<h2 class="mt-8 md:mt-0 md:text-3xl text-gray-900">
How it all began
</h2>
<hr class="w-1/4 mt-6 border-t border-gray-300" />
<p
class="mt-6 text-gray-700 font-extralight text-center md:text-left"
>
Adipiscing a commodo ante nunc accumsan et interdum mi ante
adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus
nascetur ac non.
</p>
<button class="button-article">MORE</button>
</div>
</section>
<!-- Travel Dates Element -->
<section class="mt-16 bg-no-repeat bg-cover bg-scotland-img" id="next">
<div
class="bg-theme-purple bg-opacity-50 flex flex-col items-center px-12 py-16"
>
<h2 class="md:text-3xl text-white">Upcoming adventures</h2>
<hr class="w-1/4 mt-6 border-t border-gray-300" />
<div class="mt-12 flex flex-col space-y-2">
<div class="travel-date">
<p class="w-28">13 March</p>
<p>Edinburgh, Scotland</p>
</div>
<div class="travel-date">
<p class="w-28">19 March</p>
<p>Cornwal, Ireland</p>
</div>
<div class="travel-date">
<p class="w-28">06 April</p>
<p>Rome, Italy</p>
</div>
<div class="travel-date">
<p class="w-28">29 April</p>
<p>Secret Destination</p>
</div>
</div>
</div>
</section>
<!-- Article Intro Element -->
<section class="mt-16 px-12 flex flex-col items-center" id="past">
<h2 class="md:text-3xl text-gray-900">Past adventures</h2>
<hr class="w-1/4 mt-6 border-t border-gray-300" />
<!-- Article Overview -->
<div class="lg:flex lg:space-x-4">
<!-- Article 1 -->
<div class="mt-10 flex flex-col items-center pb-10">
<div class="image-article bg-london-img bg-center"></div>
<h3 class="mt-8 md:text-3xl lg:text-2xl text-gray-900 text-center">
Good Morning, London!
</h3>
<p
class="mt-6 text-center text-gray-700 font-extralight px-6 sm:px-14"
>
Adipiscing a commodo ante nunc accumsan et interdum mi ante
adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus
nascetur ac non.
</p>
<button class="button-article">MORE</button>
</div>
<!-- Article 2 -->
<div class="mt-10 flex flex-col items-center pb-10">
<div class="image-article bg-budapest-img bg-center"></div>
<h3 class="mt-8 md:text-3xl lg:text-2xl text-gray-900">
Hello Budapest!
</h3>
<p
class="mt-6 text-center text-gray-700 font-extralight px-6 sm:px-14"
>
Adipiscing a commodo ante nunc accumsan et interdum mi ante
adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus
nascetur ac non.
</p>
<button class="button-article">MORE</button>
</div>
<!-- Article 3 -->
<div class="mt-10 flex flex-col items-center pb-10">
<div class="image-article bg-munich-img bg-center"></div>
<h3 class="mt-8 md:text-3xl lg:text-2xl text-gray-900">
Cheers, Munich!
</h3>
<p
class="mt-6 text-center text-gray-700 font-extralight px-6 sm:px-14"
>
Adipiscing a commodo ante nunc accumsan et interdum mi ante
adipiscing. A nunc lobortis non nisl amet vis sed volutpat aclacus
nascetur ac non.
</p>
<button class="button-article">MORE</button>
</div>
</div>
</section>
<!-- Newsletter Signup Element -->
<section class="mt-12 bg-no-repeat bg-cover bg-scotland-img relative">
<div
class="bg-theme-purple bg-opacity-50 flex flex-col items-center px-12 py-16"
>
<h3 class="md:text-3xl text-white">Want to stay up to date?</h3>
<hr class="w-1/4 mt-6 border-t border-gray-300" />
<p class="mt-6 text-center text-white font-extralight">
We'll send you an e-mail to keep you posted on our travels.
</p>
<div class="mt-6 flex flex-col sm:flex-row">
<button
class="focus:outline-none border px-6 py-2 rounded-md bg-white text-theme-grey text-xs tracking-widest text-transparent font-medium w-40"
>
SIGN UP
</button>
<button
class="focus:outline-none mt-2 sm:mt-0 border px-6 py-2 rounded-md text-white text-xs tracking-widest sm:ml-3 w-40"
>
LEARN MORE
</button>
</div>
</div>
</section>
</main>
<!-- Footer Element -->
<footer class="bg-theme-purple text-sm py-6 px-12 flex flex-col">
<!-- Social Media Icons -->
<div class="flex flex-col items-center">
<div
class="flex flex-row space-x-5 justify-center mt-5 text-theme-rose"
>
<i class="fab fa-twitter hover:text-theme-yellow"></i>
<i class="fab fa-facebook-f hover:text-theme-yellow"></i
><i class="fab fa-instagram hover:text-theme-yellow"></i
><i class="fab fa-tiktok hover:text-theme-yellow"></i
><i class="fas fa-envelope hover:text-theme-yellow"></i>
</div>
<hr class="w-1/4 mt-8 border-t border-theme-rose" />
</div>
<!-- Footer Links -->
<div
class="flex mt-6 flex-row justify-center space-x-5 font-extralight text-theme-rose"
>
<p class="hover:text-theme-yellow">About Me</p>
<p class="hover:text-theme-yellow">Cooperations</p>
<p class="hover:text-theme-yellow">Contact</p>
</div>
</footer>
</body>
</html>