-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
166 lines (158 loc) · 4.66 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
<!DOCTYPE html>
<html lang="en-IE">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Disney Star Wars Characters</title>
<!-- https://www.iconspedia.com/icon/millenium-falcon-star-wars-17400.html -->
<link
rel="shortcut icon"
href="./images/favicon.ico"
type="image/x-icon"
/>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<header>
<div class="container header-container">
<h1>Disney Star Wars Characters</h1>
<nav>
<button id="nav-links">Links</button>
<div id="expanding-menu" class="hide opacity">
<a href="https://www.disney.com/" target="_blank">
Disney.com
</a>
<a href="https://www.disneyplus.com" target="_blank">
Disney+
</a>
<a href="https://www.lucasfilm.com/" target="_blank">
Lucasfilm
</a>
<a href="https://www.starwars.com/" target="_blank">
Star Wars
</a>
</div>
</nav>
</div>
</header>
<main>
<div class="container main-container">
<!-- Float -->
<div class="columns">
<div class="column left">
<div class="rating">
<label for="range-input"
>How much do you like Disney?
</label>
<input
type="range"
id="range-input"
min="0"
max="10"
/>
<!-- Default values -->
<span id="rate">5</span>
<div id="range-output">I somewhat like Disney.</div>
</div>
<div class="logo">
<!-- Images sources:
Disney+ - https://www.pngitem.com/middle/hiJJwi_disney-plus-logo-png-transparent-png/
Lucasfilm - https://www.pngkit.com/bigpic/u2w7u2q8q8t4t4t4/
-->
<img
src="./images/disney_plus.png"
id="logo"
alt="Logo"
/>
</div>
</div>
<div class="column right">
<h2>Who is your favourite Star Wars character?</h2>
<form id="fav-char">
<label for="character">
Enter your favourite character here:
</label>
<input
type="text"
id="character"
autocomplete="off"
/>
<div id="form-result">
<div id="char-select"></div>
<div id="game-instruct"></div>
</div>
</form>
<div id="characters">
<h3>Characters to choose from:</h3>
<div class="chars">
<div class="char char-1" id="char-1">
Din Djarin
</div>
<div class="char char-2" id="char-2">
Han Solo
</div>
<div class="char char-3" id="char-3">
Luke Skywalker
</div>
<div class="char char-4" id="char-4">Rey</div>
</div>
</div>
<div id="random">
<button id="random-btn">
What Star Wars Character will you get?
</button>
<div id="random-result">
<div class="char-image">
<!-- Image sources:
Din Djarin - https://vignette.wikia.nocookie.net/freekamenrider/images/c/c1/Ddjidrq-967891d0-44fd-422e-a701-6218df1f0f37.png/revision/latest?cb=20200302125908
Han Solo - https://www.pngegg.com/en/png-exgjt
Luke Skywalker - https://toppng.com/a-large-batch-of-character-standees-for-star-wars-luke-skywalker-costume-last-jedi-PNG-free-PNG-Images_268111
Rey - https://www.deviantart.com/artdelmar/art/Rey-Skywalker-png-825123004
-->
<img
src="./images/disney_plus.png"
id="char-img"
alt="Character image"
/>
</div>
<div class="char-details">
<div id="char-name"></div>
<div id="char-movie"></div>
<div id="char-friend"></div>
<div id="char-nemesis"></div>
<div id="char-quote"></div>
</div>
</div>
<button id="compare-btn">Compare</button>
<div id="compare-result"></div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="container footer-container">
<div>
<small>
made by
<a href="mailto:[email protected]">
</a>
</small>
</div>
<div>
<small>for web development fundamentals project</small>
</div>
<div>
<small>
all rights belong to © & ™ Lucasfilm Ltd.
Star Wars™ is a copyright and registered trademark
of Lucasfilm Ltd. - a Walt Disney company. © Disney
2020
</small>
</div>
</div>
</footer>
<script src="./index.js"></script>
</body>
</html>