-
Notifications
You must be signed in to change notification settings - Fork 1
/
DragonChars.html
170 lines (157 loc) · 8.06 KB
/
DragonChars.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Practice Dragons</title>
<link rel="stylesheet" href="Styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ROBOTO FONT -->
<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=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- OSWALD FONT -->
<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=Oswald:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
<!-- BOOTSTRAP: Latest compiled and minified CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="header">Dragon Practice Website</div>
<div class="navbar sticky-top navbar-expand-sm bg-dark" data-bs-theme="dark">
<div class="container">
<button type="button" class="navbar-toggler" data-bs-toggle="collapse" data-bs-target="#navbarNav"><span class="navbar-toggler-icon"></span></button>
<div class="navbar-nav collapse navbar-collapse justify-content-evenly" id="navbarNav">
<a href="index.html" class="nav-link nav-item active">Homepage</a>
<a href="Humans.html" class="nav-link nav-item active">Human Characters</a>
<a href="DragonChars.html" class="nav-link nav-item active">Dragon Characters</a>
<a href="DragonSurvey.html" class="nav-link nav-item active">Survey</a>
<a href="FanGallery.html" class="nav-link nav-item active">Fan Art</a>
<a href="GamePage.html" class="nav-link nav-item active">Game</a>
</div>
</div>
</div>
<div class="content container-fluid">
<div class="info">
<h1>Dragon Characters</h1>
<p>Everything you need to know about the dragons of Berk!</p>
</div>
<!-- Dragon Profile Sheet
<div class="dragons">
<h2>Name</h2>
<img src="" alt="">
<p>Species:</p>
<p>Class:</p>
<p>Rider:</p>
<p>Skills:</p>
<p>Weaknesses:</p>
</div>
-->
<div class="container">
<div class="dragons mb-4">
<div class="row justify-content-center my-4">
<div class="col-md-12 text-center">
<h2>Toothless</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<img src="Images/Fanart/Toothless_Offical.jpg" alt="Toothless" class="flipped">
</div>
<div class="col-md-6 text-center">
<p class="my-4">Species: Night Fury</p>
<p class="mb-4">Class: Striker</p>
<p class="mb-4">Rider: Hiccup Horrendous Haddock III</p>
<p class="mb-4">Skills: Echolocation, Quick Speed, Camouflage</p>
<p>Weaknesses: Eels, Broken Tail, Small Size</p>
</div>
</div>
</div>
<div class="row" style="border-bottom: 4px solid black"></div>
<div class="dragons2 mb-4">
<div class="row justify-content-center my-4">
<div class="col-md-12 text-center">
<h2>Stormfly</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<img src="Images/Fanart/Stormfly_Offical.jpg" alt="Stormfly">
</div>
<div class="col-md-6 text-center">
<p class="my-4">Species: Deadly Nadder</p>
<p class="mb-4">Class: Sharp/Tracker</p>
<p class="mb-4">Rider: Astrid</p>
<p class="mb-4">Skills: Hot Fire, Spike Shooting, Mild Venom</p>
<p>Weaknesses: Eels, Playful Nature, Blind Spot</p>
</div>
</div>
</div>
<div class="row" style="border-bottom: 4px solid black"></div>
<div class="dragons mb-4">
<div class="row justify-content-center my-4">
<div class="col-md-12 text-center">
<h2>Barf and Belch</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<img src="Images/Fanart/Barf_and_Belch_Offical.jpg" alt="Barf and Belch">
</div>
<div class="col-md-6 text-center">
<p class="my-4">Species: Hiddeous Zippleback</p>
<p class="mb-4">Class: Mystery</p>
<p class="mb-4">Rider: Ruffnut (Barf), Tuffnut (Belch)</p>
<p class="mb-4">Skills: Two Headed, Breathes Gas, Great Teamwork</p>
<p>Weaknesses: Eels, Fighting Riders, Slower Speed</p>
</div>
</div>
</div>
<div class="row" style="border-bottom: 4px solid black"></div>
<div class="dragons2 mb-4">
<div class="row justify-content-center my-4">
<div class="col-md-12 text-center">
<h2>Meatlug</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<img src="Images/Fanart/Meatlug_Offical.jpg" alt="Meatlug" class="flipped">
</div>
<div class="col-md-6 text-center">
<p class="my-4">Species: Gronckle</p>
<p class="mb-4">Class: Boulder</p>
<p class="mb-4">Rider: Fishlegs</p>
<p class="mb-4">Skills: Tough Skin, Hovering, Melts Rocks Easily</p>
<p>Weaknesses: Eels, Slower Speed, Sensitive</p>
</div>
</div>
</div>
<div class="row" style="border-bottom: 4px solid black"></div>
<div class="dragons mb-4">
<div class="row justify-content-center my-4">
<div class="col-md-12 text-center">
<h2>Hookfang</h2>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-6 text-center">
<img src="Images/Fanart/Hookfang_Offical.jpg" alt="Hookfang">
</div>
<div class="col-md-6 text-center">
<p class="my-4">Species: Monstrous Nightmare</p>
<p class="mb-4">Class: Stoker</p>
<p class="mb-4">Rider: Snotlout</p>
<p class="mb-4">Skills: Light Self On Fire, Strong, Quick Speed</p>
<p>Weaknesses: Eels, Pride, Easily Overuses Fire</p>
</div>
</div>
</div>
<div class="row" style="border-bottom: 4px solid whitesmoke"></div>
</div>
</div>
<div class="footer">Made by K Zongker</div>
<!-- Latest compiled JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>