-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfe3h.html
128 lines (128 loc) · 8.71 KB
/
fe3h.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<title>FE Three Houses | FE Central</title>
<meta name="author" content="Luka Bigot">
<meta name="theme-color" content="#333333">
<meta name="google" content="notranslate">
<meta name="description" content="A fan-website about the Fire Emblem Games">
<meta name="keywords" content="Fire Emblem, Fire Emblem Central, Fire Emblem Heroes, Fire Emblem: Three Houses, Nintendo, Fire Emblem Games, Fire Emblem Series">
<link rel="icon" type="image/png" href="img/favicon.png">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<header class="top-header">
<div class="centered">
<!-- Website Logo -->
<div class="logo">
<a href="index.html"><img class="title" alt="Fire Emblem Central" src="img/icons/fecentral_logo2.png" id="logoImg"></a>
</div>
<!-- Navigation bar next to the logo -->
<nav>
<ul>
<li><a href="index.html">Main Page</a></li>
<li><a href="feh.html">FE Heroes</a></li>
<li><a href="fe3h.html">FE: Three Houses</a></li>
<li><a href="fegames.html">FE Series</a></li>
</ul>
</nav>
</div>
</header>
<!-- Lower level of the header -->
<section class="subheader" id="subHeader">
<div class="centered">
<ul>
<li><a href="https://twitter.com/nintendouk" target="_blank">Twitter</a></li>
<li><a href="https://www.facebook.com/NintendoUKStore" target="_blank">Facebook</a></li>
<li><a href="https://discord.gg/fe3h" target="_blank">Discord</a></li>
<li>
<a href="#">Other FE Websites</a>
<ul>
<li><a href="https://gamepress.gg/feheroes/" target="_blank">Gamepress <i class="fas fa-external-link-alt"></i></a></li>
<li><a href="https://serenesforest.net/" target="_blank">Serenes Forest <i class="fas fa-external-link-alt"></i></a></li>
</ul>
</li>
</ul>
</div>
</section>
<main>
<section class="bg_fe3h1">
<h1 class="page_title centered">Three young lords,<br>Three destinies,<br>Three diverging paths</h1>
</section>
<section> <!-- Three Houses paragraph section -->
<article class="wrapper white_bg centered padded10 outlined">
<h2>Discover the latest game in the FE franchise : <em>Fire Emblem: Three Houses</em></h2>
<p>Set in the continent of Fódlan, <em>Fire Emblem: Three Houses</em> reinvents the gameplay of the franchise for its arrival on the Nintendo Switch (on July 26th of 2019).</p>
<img src="img/chara/fe3h-byleth.png" alt="Both of the main characters" title="Both of the main characters" class="block-center" width="300px" height="auto">
<p class="image-caption">The game's playable protagonists.</p>
<p>You play as a professor at the Garreg Mach Monastery, teaching your students in the ways and techniques of battle.</p>
<p>Mixing phases where you teach and interact with your students at the monastery on one hand, and where you lead them to battle and put their acquired skills to the test on the other hand, this new game sets itself apart from the others in the series.</p>
<img src="img/fe3h-houses.jpg" alt="Edelgard, Dimitri and Claude" title="Edelgard, Dimitri and Claude" class="block-center image-responsive" width="550px" height="auto">
<p class="image-caption">In order: Edelgard, Dimitri and Claude.</p>
<p>The game is split into 3 principal routes, hence the name <em>Three Houses</em>.</p>
<p>The entire story of the game changes based on the house you choose. As such, you can discover the story of your favorite house only, or play through all three of them in order to understand the full picture of the events occuring at Fódlan, as there are heavy changes occuring from one to another!</p>
<img src="img/fe3h-gameplay.jpg" alt="Gameplay Screenshot" title="Gameplay Screenshot" class="block-center image-responsive" width="550px" height="auto">
<p class="image-caption">Gameplay Screenshot</p>
<p>The graphics are entirely in 3D, from the battle sections to the overhead map, a feature that was last seen in the 9th entry.</p>
<p>Running on the most modern engine seen in the series yet, both the game's 3D environments and artworks are beautiful and immersive!</p>
<iframe class="video-player" src="https://www.youtube.com/embed/rkux5h0PeXo"></iframe>
</article>
</section>
<section>
<h1 class="centered heading-text-shadow">Game Screenshots</h1>
<div class="gallery wrapper outlined white_bg" id="gallery"></div>
</section>
</main>
<footer>
<ul>
<li>
<a href="https://www.nintendo.co.uk/Games/Nintendo-Characters-Hub/Fire-Emblem-Hub/Fire-Emblem-Hub-1168499.html" target="_blank">Nintendo's Fire Emblem page <i class="fas fa-external-link-alt"></i></a>
</li>
<li>
<a href="#" id="aboutUsButton">About us</a>
</li>
<li>
<a href="#" id="contactButton">Contact</a>
</li>
</ul>
<!-- Elements put in this section will have a display CSS value of none -->
<!-- They correspond to the pop-up windows that show up when we click "About us" -->
<!-- or "Contact". A script is handling their apparition/disparition -->
<div id="aboutUs" class="pop-up hidden">
<div class="wrapper black_bg centered_small">
<article>
<h1 class="content-header">About Us</h1>
<p>This website was made by me - Luka Bigot - as part of my Web Technologies assignment during my studies abroad.<br><br>
It was made with the main purpose of completing that assignment, but to also give some basic information to anyone who doesn't know about the Fire Emblem series.<br>
As such, this website has been made with the burning passion of a loving fan, and I hope you enjoy it!<br><br>
Since this website was done during my studies, huge thanks to my teacher, Peter Butcher - he's responsible for teaching me most of the stuff I made here! <a href="https://codepen.io/pbutcher" target="_blank">If you're interested about what he does, check out his CodePen!</a><br>
</p>
</article>
</div>
</div>
<div id="contact" class="pop-up hidden">
<div class="wrapper black_bg centered_small">
<article>
<h1 class="content-header">Contact</h1>
<p>This website was not made professionally, and was made by a single person, Luka Bigot<br><br>
Contact here: [email protected]</p>
</article>
</div>
</div>
<section>
© Luka Bigot 2021
<p>Fire Emblem is © Nintendo and Intelligent Systems 1990-2019.<br>
All images and names owned and trademarked by Nintendo and Intelligent Systems are property of their respective owners.</p>
</section>
</footer>
<script src="js/stickyheader.js"></script>
<script src="js/collapseheader.js" defer></script>
<script src="js/imggallery.js"></script>
<script src="js/popuphandler.js" defer></script>
</body>
</html>