-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
230 lines (226 loc) · 7.94 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gullible's Travels - About</title>
<meta
name="description"
content="A totally real travel page deserves an authentic about page. Find out more about the origins of Gullible's travels."
/>
<meta
property="og:image"
itemprop="image"
content="assets/images/sheep_of_faroe_islands.jpg"
/>
<meta
property="og:description"
content="A totally real travel page deserves an authentic about page. Find out more about the origins of Gullible's travels."
/>
<meta property="og:title" content="Gullible's Travels - About" />
<meta property="og:type" content="website" />
<meta
propert="og:url"
content="https://watcodedatcode.github.io/travelblog/about.html"
/>
<link rel="shortcut icon" href="assets/images/favicon.png" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body class="text-dark-600 bg-light-200 font-mono w-full">
<div class="grid lg:grid-cols-5">
<div class="nav-container">
<a
href="index.html"
class="lg:fixed w-12 sm:w-20 lg:w-32 mx-4 my-2 lg:my-6"
>
<img src="assets/images/logo.png" alt="Gullible's Travels Logo" />
</a>
<nav class="lg:fixed lg:mt-64">
<ul class="lg:justify-end duration-400">
<svg
id="burger"
class="mt-6 sm:mt-12 active-nav cursor-pointer lg:hidden w-12"
xmlns="https://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
clip-rule="evenodd"
/>
</svg>
<a class="inactive-nav" href="index.html"
><li class="nav-item">Home</li></a
>
<a class="inactive-nav" href="blog.html"
><li class="nav-item">Blog</li></a
>
<a class="active-nav" href="#"><li class="nav-item">About</li></a>
</ul>
</nav>
</div>
<div class="lg:col-span-4">
<div class="hero-about mt-8 lg:mt-0 relative">
<div class="hero-text">
<h1>About Gullible's Travels</h1>
<p class="text-xl lg:text-3xl font-bold text-light-200">
Totally a real travel blog
</p>
</div>
<button
id="jump-to-content"
class="jump transition ease-out duration-100"
>
Learn more
<svg
class="mx-auto h-12 w-auto"
xmlns="https://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M15.707 4.293a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 011.414-1.414L10 8.586l4.293-4.293a1 1 0 011.414 0zm0 6a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-5-5a1 1 0 111.414-1.414L10 14.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</button>
</div>
<main id="content">
<div class="w-full h-1/2 sm:w-1/2 mx-auto my-12 px-4">
<img
src="assets/images/andrew_russell_portrait.jpg"
alt="Photo of Andrew Russell"
/>
</div>
<div class="w-full sm:w-3/4 mx-auto px-4">
<h2 class="text-2xl sm:text-3xl xl:text-6xl text-primary-500">
What is Gullible's Travels?
</h2>
<br />
<p class="text-lg md:text-xl">
Some stories are born out of hardship, others are born out of
greatness, even fewer are born out of the necessity to finish a
coding project.
</p>
<br />
<p class="text-lg md:text-xl">
This page is the result of one such project. I hope you enjoy!
</p>
<br />
<p class="text-md md:text-lg">
P.s. feel free to check out my
<a
class="text-primary-600 font-bold"
href="https://github.com/WatCodeDatCode"
target="_blank"
>Github profile</a
>
for more projects or my
<a
class="text-primary-600 font-bold"
href="https://www.instagram.com/viking_visuals/"
target="_blank"
>instagram</a
>
for my photos.
</p>
</div>
<div class="my-6 xl:my-10 text-center">
<button id="open-modal-window" class="add-entry-button">
Contact
</button>
</div>
</main>
<!-- START FORM MODAL -->
<div id="modal-window" class="modal">
<div class="modal-content container">
<form id="contact-form" class="pt-2 w-full">
<span class="close-modal">×</span>
<div class="flex flex-wrap -mx-3 mb-6">
<div class="w-full sm:w-1/2 px-3 mb-6 md:mb-0">
<label for="name-input" class="form-label"> Name: </label>
<input
type="text"
id="name-input"
autocomplete="on"
class="form-input"
placeholder="John Doe"
required
/>
</div>
<div class="w-full sm:w-1/2 px-3">
<label for="email-input" class="form-label">
E-mail address:
</label>
<input
type="email"
id="email-input"
class="form-input"
required
placeholder="[email protected]"
/>
</div>
</div>
<div class="-mx-3 mb-6">
<div class="w-full px-3 mb-6">
<label for="message-input" class="form-label">
Message:
</label>
<textarea
id="message-input"
class="h-30 form-input"
required
></textarea>
</div>
</div>
<div class="flex justify-center">
<button class="submit-button" type="submit">Send</button>
</div>
</form>
</div>
</div>
</div>
<!-- END FORM -->
</div>
<footer class="h-auto py-8 bg-primary-500">
<div class="flex justify-center">
<a href="index.html"
><img
class="h-16 lg:h-24 mb-3"
src="assets/images/logo_footer.png"
alt="Gullible's Travels Logo"
/></a>
</div>
<div class="flex justify-center">
<!-- Add font awesome icons -->
<a
href="https://github.com/WatCodeDatCode"
target="_blank"
class="fa fa-facebook social-icons"
></a>
<a
href="https://github.com/WatCodeDatCode"
target="_blank"
class="fa fa-twitter social-icons"
></a>
<a
href="https://github.com/WatCodeDatCode"
target="_blank"
class="fa fa-instagram social-icons"
></a>
<a
href="https://github.com/WatCodeDatCode"
target="_blank"
class="fa fa-rss social-icons"
></a>
</div>
</footer>
<script src="scripts/about_script.js"></script>
</body>
</html>