-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
184 lines (139 loc) · 10.3 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
<!DOCTYPE html>
<html>
<head>
<title>Avatar : The Last Airbender</title>
<meta charset="utf-8">
<!-- Viewport -->
<!-- viewport give page diamension and scaling The width = device-width will set the screen size as the page width -->
<!-- initial scale is the initial zoom level when page is loaded by the browser, viewport is important for responsive websites-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Fonts -->
<!-- Good Practice to Add Fonts Above CSS Resources -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600&family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,600&display=swap" rel="stylesheet">
<!-- Fav Icon -->
<link rel="icon" type="image/png" href="images/AvatarArrow.png">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
<!-- Header -->
<header class="header">
<div class="header-overlay">
<div class=" container">
<div class="row">
<div class="col-md-12">
<!-- Logo -->
<div class="logo text-center">
<img src="images/AvatarTheLastAirbenderLogo.svg" alt="logo">
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div class="header-text">
<!-- Title & Description-->
<h1> Avatar : The Last Airbender </h1>
<p> Action-Adventure | Fantasy | Comedy Drama | Coming of Age</p>
</div>
<div class="header-btns">
<!-- Header Buttons -->
<a class="btn btn-download" href="#">Download</a>
<a class="btn btn-tour" href="#"> Take a Tour </a>
<i class="fa fa-angle-down"></i>
</div>
</div>
<div class="col-md-4"> <!-- col-md-offset-1 "if this is added to class it can add a extra blank coloumn and reduce the Image space"-->
<!-- Header Poster -->
<div class="header-poster">
<img src="images/AvatarPoster.png" alt="AvatarPoster">
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Overview Section -->
<section class="overview-section">
<div class="container">
<div class="row">
<div class="col-md-11 col-md-offset-1"> <!-- col-md-offset-1 will create One Virtual coloumn on the left side so that the row can be centre aligned -->
<!-- Overview Title & Description -->
<div class="section-title">
<h2>Overview</h2>
<p>Avatar : The Last Airbender is set in a world where human civilization consists of four nations,
named after the four classical elements: the Water Tribes, the Earth Kingdom, the Fire Nation, and the Air Nomads.
In each nation, certain people, known as <i>benders</i> (waterbenders, earthbenders, firebenders and airbenders),
have the ability to telekinetically manipulate and control the element corresponding to their nation,
using gestures based on Chinese martial arts. The <i>Avatar</i> is the only individual with the ability to bend all four elements.</p>
</div>
</div>
</div>
</div>
<div class="avatar-overview">
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- About Avatar -->
<div class="about-avatar">
<h2> 降 世 神 通</h2>
<img src="images/AvatarPosterOverview.jpg" alt="Avatar:TLA">
</div>
</div>
<div class="col-md-5 col-md-offset-1">
<!-- Episodes Title-->
<div class="episodes-title">
<h2>The Episodes</h2>
<p>The series is divided into three seasons. The Book One: Water, Book Two: Earth and Book Three: Fire</p>
</div>
<!-- Episodes Description -->
<div class="episodes-des">
<!-- Episodes Item 1 -->
<div class="episodes-item">
<!-- Icon -->
<div id="water-icon"><i class="fa fa-tint" aria-hidden="true"></i></div>
<h3>S01 | Water (2005)</h3>
<p>The season revolves around the protagonist Aang and his friends Katara and Sokka going on a journey to the North Pole to find a Waterbending master to teach Aang and Katara.
The Fire Nation is waging a seemingly endless imperialist war against the Earth Kingdom and the Water Tribes,
following the genocide of the Air Nomads one hundred years ago. Aang, the current Avatar, must master the four elements (Air, Water, Earth, and Fire) to end the war.
Along the way, Aang and his friends are chased by various pursuers: the banished Fire Nation Prince Zuko, along with his uncle and former general Iroh, and Admiral Zhao of the Fire Navy.</p>
</div>
<!-- Episodes Item 2 -->
<div class="episodes-item">
<!-- Icon -->
<div id="earth-icon"><i class="fa fa-leaf" aria-hidden="true"></i></div>
<h3>S02 | Earth (2006)</h3>
<p>In the second season, Aang and his friends Katara and Sokka are on a quest to find an Earthbending teacher which finishes when they recruit Toph Beifong.
After finding important information concerning the war with the Fire Nation, Appa ends up kidnapped.
Their journey leads to Ba Sing Se, the capital of the Earth Kingdom, where they uncover a great internal government conspiracy.
Meanwhile, due to their actions at the North Pole in Book One, Zuko and Iroh are declared traitors of the Fire Nation and desert their country,
becoming fugitives in the Earth Kingdom. Pursuing both Zuko and Aang is Princess Azula, Zuko's younger prodigy sister.</p>
</div>
<!-- Episodes Item 3 -->
<div class="episodes-item">
<!-- Icon -->
<div id="fire-icon"><i class="fa fa-fire" aria-hidden="true"></i></div>
<h3>S03 | Fire (2007)</h3>
<p>The final season focuses once again on Avatar Aang, now seeking to learn Firebending, and his friends Katara, Sokka, and Toph, who must defeat the tyrannical Fire Lord Ozai before the arrival of Sozin's Comet.
Concurrently, it also follows the story of Prince Zuko, who is finally welcomed back into the Fire Nation after betraying his uncle Iroh and helping his sister Azula conquer Ba Sing Se in Season Two.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Script-->
<!-- It's better to add the script at the end of the body. -->
<!-- It increase the page load speed. -->
<script src="js/bootstrap.min.js"></script>
<script scr="js/jquery.js"></script>
</body>
</html>