-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
250 lines (237 loc) · 9.19 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
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
<!DOCTYPE HTML>
<html>
<head>
<title>World Wonders</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
</head>
<body class="is-preload">
<!-- Header -->
<header id="header">
<h1>World Wonders</h1>
<nav>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#ancient">Ancient</a></li>
<li><a href="#modern">Modern</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<!-- Intro -->
<section id="intro" class="main style1 dark fullscreen">
<div class="content">
<header>
<h2>Did you know?</h2>
</header>
<p>
The wonders of the world are separated into 2 parts: <strong>Ancient</strong> and <strong>Modern</strong>.<br />
Such a separation occurred because, unfortunately, the vast majority of Ancient ones did not survive time.
</p>
<footer>
<a href="#ancient" class="button style2 down">More</a>
</footer>
</div>
</section>
<!-- Ancient -->
<section id="ancient" class="main style2 right dark fullscreen">
<div class="content box style2">
<header>
<h2>Ancient</h2>
</header>
<p>
The seven traditional wonders are the Great Pyramid of Giza, the Colossus of Rhodes,
the Lighthouse of Alexandria, the Mausoleum at Halicarnassus, the Temple of Artemis,
the Statue of Zeus at Olympia, and the Hanging Gardens of Babylon.
</p>
</div>
<a href="#modern" class="button style2 down anchored">Next</a>
</section>
<!-- Modern -->
<section id="modern" class="main style2 left dark fullscreen">
<div class="content box style2">
<header>
<h2>Modern</h2>
</header>
<p>
The seven modern wonders are The Great Wall of China, Petra, The Colosseum, Chichén Itzá,
Machu Picchu, Taj Mahal, and Christ the Redeemer.
</p>
</div>
<a href="#gallery" class="button style2 down anchored">Next</a>
</section>
<!-- Gallery -->
<section id="gallery" class="main style3 primary">
<div class="content">
<header>
<h2>Gallery</h2>
<p>
Below are images of each of the wonders of the Ancient and Modern world,
<u>click</u> on each one to expand its size and read its description.
</p>
</header>
<!-- Photo gallery -->
<div class="gallery">
<article class="from-left">
<a href="images/fulls/great-pyramid-of-giza.jpg" class="image fit">
<img src="images/thumbs/great-pyramid-of-giza.jpg"
title="The Great Pyramid of Giza - Built in about 2600 B.C. in Egypt."
alt="The Great Pyramid of Giza"
/>
</a>
</article>
<article class="from-right">
<a href="images/fulls/chichen-itza.jpg" class="image fit">
<img src="images/thumbs/chichen-itza.jpg"
title="Chichén Itzá - Built in A.D. 600 in Mexico."
alt="Chichén Itzá"
/>
</a>
</article>
<article class="from-left">
<a href="images/fulls/statue-of-zeus.jpg" class="image fit">
<img src="images/thumbs/statue-of-zeus.jpg"
title="The Statue of Zeus - Built in the fifth century B.C. in Greece."
alt="The Statue of Zeus"
/>
</a>
</article>
<article class="from-right">
<a href="images/fulls/christ-the-redeemer.jpg" class="image fit">
<img src="images/thumbs/christ-the-redeemer.jpg"
title="Christ the Redeemer - Built in A.D. 1931 in Brazil."
alt="Christ the Redeemer"
/>
</a>
</article>
<article class="from-left">
<a href="images/fulls/hanging-gardens-of-babylon.jpg" class="image fit">
<img src="images/thumbs/hanging-gardens-of-babylon.jpg"
title="The Hanging Gardens of Babylon - Built in Iraq, year unknown."
alt="The Hanging Gardens of Babylon"
/>
</a>
</article>
<article class="from-right">
<a href="images/fulls/machu-picchu.jpg" class="image fit">
<img src="images/thumbs/machu-picchu.jpg"
title="Machu Picchu - Built in A.D. 1450 in Peru."
alt="Machu Picchu"
/>
</a>
</article>
<article class="from-left">
<a href="images/fulls/mausoleum-at-halicarnassus.jpg" class="image fit">
<img src="images/thumbs/mausoleum-at-halicarnassus.jpg"
title="The Mausoleum at Halicarnassus - Built in the fourth century B.C. in Turkey."
alt="The Mausoleum at Halicarnassus"
/>
</a>
</article>
<article class="from-right">
<a href="images/fulls/taj-mahal.jpg" class="image fit">
<img src="images/thumbs/taj-mahal.jpg"
title="Taj Mahal - Built in A.D. 1643 in India."
alt="Taj Mahal"
/>
</a>
</article>
<article class="from-left">
<a href="images/fulls/colossus-of-rhodes.jpg" class="image fit">
<img src="images/thumbs/colossus-of-rhodes.jpg"
title="The Colossus of Rhodes - Built in the fourth century B.C. on the island of Rhodes."
alt="The Colossus of Rhodes"
/>
</a>
</article>
<article class="from-right">
<a href="images/fulls/colosseum.jpg" class="image fit">
<img src="images/thumbs/colosseum.jpg"
title="The Colosseum - Built in A.D. 80 in Italy."
alt="The Colosseum"
/>
</a>
</article>
<article class="from-left">
<a href="images/fulls/lighthouse-of-alexandria.jpg" class="image fit">
<img src="images/thumbs/lighthouse-of-alexandria.jpg"
title="The Lighthouse of Alexandria - Built in the third century B.C. in Egypt."
alt="The Lighthouse of Alexandria"
/>
</a>
</article>
<article class="from-right">
<a href="images/fulls/petra.jpg" class="image fit">
<img src="images/thumbs/petra.jpg"
title="Petra - Built in 312 B.C in Jordan."
alt="Petra"
/>
</a>
</article>
<article class="from-left">
<a href="images/fulls/temple-of-artemis.jpg" class="image fit">
<img src="images/thumbs/temple-of-artemis.jpg"
title="The Temple of Artemis - Built in the sixth century B.C. in Ephesus, Turkey."
alt="The Temple of Artemis"
/>
</a>
</article>
<article class="from-right">
<a href="images/fulls/great-wall-of-china.jpg" class="image fit">
<img src="images/thumbs/great-wall-of-china.jpg"
title="The Great Wall of China - Built in 700 B.C in China."
alt="The Great Wall of China"
/>
</a>
</article>
</div>
</div>
</section>
<!-- Contact -->
<section id="contact" class="main style3 secondary">
<div class="content">
<header>
<h2>Questions or suggestions?</h2>
<p>If you would like to ask, suggest or comment something, feel free to send a message below 😀</p>
</header>
<div class="box">
<form method="post" action="#">
<div class="fields">
<div class="field half"><input type="text" name="name" placeholder="Name" /></div>
<div class="field half"><input type="email" name="email" placeholder="Email" /></div>
<div class="field"><textarea name="message" placeholder="Message" rows="3"></textarea></div>
</div>
<ul class="actions special">
<li><input type="submit" value="Send Message" /></li>
</ul>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<!-- Icons -->
<ul class="icons">
<li><a href="https://www.linkedin.com/in/gabrielrapuccigonzalez/" class="icon brands fa-linkedin-in" target="_blank"><span class="label">LinkedIn</span></a></li>
<li><a href="https://github.com/gabrielrg14" class="icon brands fa-github" target="_blank"><span class="label">GitHub</span></a></li>
<li><a href="mailto:[email protected]" class="icon fa-envelope" target="_blank"><span class="label">E-mail</span></a></li>
</ul>
<!-- Menu -->
<ul class="menu">
<li>© World Wonders</li><li>Design: <a href="https://html5up.net" target="_blank">HTML5 UP</a></li>
</ul>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.poptrox.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>