generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
200 lines (194 loc) · 10.1 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
<!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">
<meta name="description"
content="A promotional page for The Legend of Zelda: Breath of the Wild for the Nintendo Switch">
<meta name="keywords" content="Nintendo, Legend of Zelda, Breath of the Wild, video game, lore, promotion">
<title>Explore Hyrule</title>
<link rel="stylesheet" href="assets/css/style.css">
<!-- font awesome script -->
<script src="https://kit.fontawesome.com/50309a1295.js" crossorigin="anonymous"></script>
</head>
<body>
<header id="home">
<!-- container for section of header which stays visible on mobile -->
<div id="mobile-header-main">
<a href="index.html">
<h1 id="logo">Explore Hyrule</h1>
</a>
<h1 id="menu-icon"><i class="fas fa-bars" onclick="hideMenu()"></i></h1>
</div>
<!-- navigation links -->
<nav>
<ul id="nav-menu">
<li>
<a href="#home">Home</a>
</li>
<li>
<a href="#gameplay">Gameplay</a>
</li>
<li>
<a href="#purchase-details">Buy Now</a>
</li>
<li>
<a href="#newsletter">Newsletter</a>
</li>
</ul>
<i class="fas fa-chevron-circle-up" id="scroll-to-top-button" onclick="topFuction()"
aria-label="Scroll back to top"></i>
</nav>
</header>
<!-- container holding individual hero image divs which cycle display using js-->
<section id="hero-image-container">
<div class="slideshow fade">
<!-- image source https://www.nintendo.com/games/detail/the-legend-of-zelda-breath-of-the-wild-switch/ -->
<img src="assets/images/botw-title-image-2.jpg" class="hero-image"
alt="Legend of Zelda: Breath of the Wild title card image">
</div>
<div class="slideshow fade">
<!-- image source https://www.nintendo.co.uk/Games/Wii-U/The-Legend-of-Zelda-Breath-of-the-Wild-893260.html-->
<img src="assets/images/botw-title-image-1.jpg" class="hero-image"
alt="Legend of Zelda: Breath of the Wild title card image">
</div>
<div class="slideshow fade">
<!-- Image source https://www.redbrick.me/redbricks-games-year-2017/link-the-legend-of-zelda-breath-of-the-wild-wallpaper-7136/-->
<img src="assets/images/botw-title-image-3.jpg" class="hero-image"
alt="Legend of Zelda: Breath of the Wild title card image">
</div>
</section>
<section class="grid" id="introduction">
<h2 class="heading">Breath of the Wild</h2>
<hr class="underline">
<p class="content">Embark on a new quest. Step into a world of discovery, exploration, and adventure in The
Legend of Zelda: Breath of the Wild,
a boundary-breaking new game in the acclaimed series. Discover what has become of the kingdom of Hyrule in
this stunning Open-Air
Adventure. Now on Nintendo Switch, your journey is freer and more open than ever. Take your system anywhere,
and adventure
as Link any way you like.</p>
<div class="content" id="circle-container">
<div id="circle-portrait" role="img" aria-label="Portrait of Link"></div>
</div>
</section>
<section id="gameplay">
<div class="grid" id="gameplay-parallax">
<div class="content">
<h3>A Wide Open World</h3>
<hr>
<p>Explore shrines, towers, villages and stables solving countless puzzles along the way to grow
stronger, gain equipment and learn new skills in order to defeat Ganon. Secrets are hidden down
every path so exploring the path less travelled is always rewarded.</p>
</div>
<div class="content">
<h3>Groundbreaking Physics System</h3>
<hr>
<p>Use every part of the environment to your advantage with the new chemistry system. This easy to
understand system grows exponentially in complexity as you learn more about it. Harness the power of
fire to create an updraft to glide on, use a metal sword as a lighning rod to start a campfire or
use the powers of the Sheikah Slate to magnetise, stop or blow up objects.</p>
</div>
<div class="content">
<h3>Hundreds Of Quests & Sidequests</h3>
<hr>
<p>As you traverse Hyrule by land, water and sky on your path to Ganon you will encounter many
characters to help you along the way. They may give you a hint as to some hidden treasure, the
solution to a puzzle or a critical piece of info to unlock you lost memory.</p>
</div>
<div class="content">
<h3>Hunt & Gather To Survive</h3>
<hr>
<p>In order to survive Link must gather supplies to keep warm or cool as well as fed and healthy.
Collect meat from animals, monster parts from enemies as well as fruit and materials from the world
around you so you will always have what you need to craft a good meal.</p>
</div>
<div class="content">
<h3>Save The World</h3>
<hr>
<p>Fight against a huge cast of monsters and ancient machines on your path to free the four Divine
Beasts to weaken Ganon before travelling to Hyrule castle to face him. Although your memory has
faded the one thing you know is that you must save Princess Zelda and the kingdom of Hyrule from the
evil Ganon.</p>
</div>
</div>
</section>
<section id="purchase-details">
<div class="grid">
<div class="details-card" id="details-card-1">
<p><strong>Title:</strong> The Legend of Zelda: Breath of the Wild</p>
<p><strong>Developer:</strong> Nintendo EPD</p>
<p><strong>Publisher:</strong> Nintendo</p>
<p><strong>Director:</strong> Hidemaro Fujibayashi</p>
</div>
<div class="details-card" id="details-card-2">
<p><strong>Platforms:</strong> Nintendo Switch, Wii U</p>
<p><strong>Players:</strong> 1 Player</p>
<p><strong>Genre:</strong> Third-person, Action, Adventure, Role-playing</p>
<p><strong>File Size:</strong> 14.4GB</p>
</div>
<div class="details-card" id="details-card-3">
<p><strong>Supported Languages:</strong> Japanese, English, French, German, Italian, Spanish, Dutch,
Russian
</p>
<p><strong>Play Modes:</strong> Docked mode, Tabletop mode, Handheld mode</p>
<p><strong>Rating:</strong> ESRB: Everyone 10+</p>
<p><strong>Release:</strong> March 3, 2017</p>
</div>
<div class="details-card" id="buy-now-card">
<!-- Links to purchase button on nintendo.com -->
<a href="https://www.nintendo.com/games/detail/the-legend-of-zelda-breath-of-the-wild-switch#purchase-buttons"
target="blank_" rel="noopener"
aria-label="Buy Breath of the Wild now (Links to Nintendo offical store)">
<h2>Buy Now</h2>
</a>
</div>
</div>
</section>
<section class="grid" id="newsletter">
<h2 class="heading">Sign up to our Newsletter</h2>
<hr class="underline">
<div class="content">
<form class="newsletter-form" method="POST" action="https://formdump.codeinstitute.net/">
<label for="fname"><strong>First Name:</strong></label>
<input class="text-input" id="fname" type="text" name="first-name" required>
<br>
<label for="lname"><strong>Last Name:</strong></label>
<input class="text-input" id="lname" type="text" name="last-name" required>
<br>
<label for="email"><strong>Email Address:</strong></label>
<input class="text-input" id="email" type="email" name="email-address" required>
<br>
<label for="dob"><strong>Date of Birth:</strong></label>
<input class="date-input" id="dob" type="date" name="dob" required>
<br>
<input class="submit-btn" type="submit" value="Sign Up!">
</form>
</div>
</section>
<footer class="grid">
<ul class="socials content">
<li>
<a href="https://www.facebook.com/NintendoUK" target="blank_" rel="noopener"
aria-label="Visit our Facebook page (opens in a new tab)"><i class="fab fa-facebook"></i></a>
</li>
<li>
<a href="https://twitter.com/NintendoAmerica" target="blank_" rel="noopener"
aria-label="Visit our Twitter page (opens in a new tab)"><i class="fab fa-twitter-square"></i></a>
</li>
<li>
<a href="https://www.youtube.com/user/Nintendo" target="blank_" rel="noopener"
aria-label="Visit our YouTube page (opens in a new tab)"><i class="fab fa-youtube"></i></a>
</li>
</ul>
<div class="copyright content">
<p>Site designed by <a href="https://itsalank.com" target="blank_" rel="noopener"
aria-label="Visit my GitHub Page (opens in a new tab)">Alan Kinsella.</a></p>
<p>Content owned by ©Nintendo</p>
</div>
</footer>
<!-- javascript for mobile nav menu, hero image slideshow & scroll to top button -->
<script src="assets/scripts/main.js"></script>
</body>
</html>