-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
247 lines (243 loc) · 12.5 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
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" type="x-icon" href="image/ninjalogo2.png">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DECEPTICONS</title>
<link rel="stylesheet" href="style.css">
</head>
<body class="mainbody">
<header>
<nav class="navbar">
<a href="#" class="nav-link navhome">Home</a>
<a href="#" class="nav-link">Digital Codex</a>
<a href="#" class="nav-link">Vision Portal</a>
<a href="#" class="nav-link">Neon Market</a>
<a href="#" class="nav-link">Secret Lair</a>
</nav>
</header>
<!-- carousel -->
<div class="carousel">
<!-- list item -->
<div class="list">
<div class="item">
<img class="imageoverlay" id="masterkaito" src="image/img1.jpg">
<div class="content">
<div class="author">SULEMANDEV</div>
<div class="title">CYBER SAMURAI</div>
<div class="topic">MASTER KAITO</div>
<div class="des">
<!-- lorem 50 -->
Master Kaito is the last descendant of a legendary samurai clan, known for their unmatched combat skills and honor. After a devastating war, Kaito was enhanced with cybernetic implants to save his life. Now, he uses his skills and advanced technology to protect the digital realm.
Details: Wields a katana that can emit energy waves, has enhanced reflexes and strength.
</div>
<div class="buttons">
<button class="seemore border-el-btn">SEE MORE
<span class="b1"></span>
<span class="b2"></span>
<span class="b3"></span>
<span class="b4"></span>
</button>
<button class="explore">EXPLORE</button>
</div>
</div>
</div>
<div class="item">
<img class="imageoverlay" id="aikoblade" src="image/img2.jpg">
<div class="content">
<div class="author">SULEMANDEV</div>
<div class="title">CYBER SAMURAI</div>
<div class="topic">AIKO BLADE</div>
<div class="des">
Aiko Blade, once a brilliant engineer, became a rogue samurai after discovering a plot to exploit ancient knowledge for destructive purposes. She integrated her technological expertise with martial prowess, creating gadgets that aid in stealth and combat.
Uses nanotechnology to create temporary cloaking fields, carries throwing stars with hacking capabilities.
</div>
<div class="buttons">
<button class="seemore border-el-btn">SEE MORE
<span class="b1"></span>
<span class="b2"></span>
<span class="b3"></span>
<span class="b4"></span>
</button>
<button class="explore">EXPLORE</button>
</div>
</div>
</div>
<div class="item">
<img class="imageoverlay" id="shadowflux" src="image/img3.jpg">
<div class="content">
<div class="author">SULEMANDEV</div>
<div class="title">NEON NINJAS</div>
<div class="topic">SHADOW FLUX</div>
<div class="des">
ShadowFlux is a mysterious figure who emerged from the depths of the dark web. Little is known about his origins, but his mastery of stealth and hacking is unparalleled. ShadowFlux uses his abilities to expose corruption and aid those in need.
Possesses the ability to become invisible in digital and physical environments, uses throwing blades that emit EMP pulses.
</div>
<div class="buttons">
<button class="seemore border-el-btn">SEE MORE
<span class="b1"></span>
<span class="b2"></span>
<span class="b3"></span>
<span class="b4"></span>
</button>
<button class="explore">EXPLORE</button>
</div>
</div>
</div>
<div class="item">
<img class="imageoverlay" id="luminaviper" src="image/img4.jpg">
<div class="content">
<div class="author">SULEMANDEV</div>
<div class="title">NEON NINJAS</div>
<div class="topic">LUMINA VIPER</div>
<div class="des">
Lumina Viper was once a member of an elite cyber espionage unit, trained in the art of stealth and information retrieval. After discovering her unit's true motives of controlling and manipulating data for personal gain, she defected and became a rogue ninja.
Wields dual energy katanas that can cut through digital firewalls, uses light-based illusions to deceive enemies.
</div>
<div class="buttons">
<button class="seemore border-el-btn">SEE MORE
<span class="b1"></span>
<span class="b2"></span>
<span class="b3"></span>
<span class="b4"></span>
</button>
<button class="explore">EXPLORE</button>
</div>
</div>
</div>
<div class="item">
<img class="imageoverlay" id="sirdataheart" src="image/img5.jpg">
<div class="content">
<div class="author">SULEMANDEV</div>
<div class="title">BINARY KNIGHTS</div>
<div class="topic">SIR DATAHEART</div>
<div class="des">
Sir Dataheart, originally a knight from a medieval simulation, gained sentience and awareness of the larger digital universe. With a strong sense of chivalry, he vowed to defend the digital realm against malicious code and viruses.
His sword can cut through any digital barrier, his shield deflects harmful data attacks, his armor is made of impenetrable binary code.
</div>
<div class="buttons">
<button class="seemore border-el-btn">SEE MORE
<span class="b1"></span>
<span class="b2"></span>
<span class="b3"></span>
<span class="b4"></span>
</button>
<button class="explore">EXPLORE</button>
</div>
</div>
</div>
<div class="item">
<img class="imageoverlay" id="ladyalgaress" src="image/img6.jpg">
<div class="content">
<div class="author">SULEMANDEV</div>
<div class="title">BINARY KNIGHTS</div>
<div class="topic">LADY ALGARESS</div>
<div class="des">
Lady Algaress, a former network security specialist, was knighted by the digital kingdom for her bravery and expertise in thwarting cyber threats. She combines her knowledge of algorithms with her combat skills, creating a unique fighting style.
Uses algorithmic spells to manipulate digital environments, her lance can disrupt malware, her armor provides immunity.
</div>
<div class="buttons">
<button class="seemore border-el-btn">SEE MORE
<span class="b1"></span>
<span class="b2"></span>
<span class="b3"></span>
<span class="b4"></span>
</button>
<button class="explore">EXPLORE</button>
</div>
</div>
</div>
</div>
<!-- list thumnail -->
<div class="thumbnail">
<div class="item">
<img src="image/img1.jpg">
<div class="content">
<div class="title">
MASTER KAITO
</div>
<div class="description">
CYBER SAMURAI
</div>
</div>
</div>
<div class="item">
<img src="image/img2.jpg">
<div class="content">
<div class="title">
AIKO BLADE
</div>
<div class="description">
CYBER SAMURAI
</div>
</div>
</div>
<div class="item">
<img src="image/img3.jpg">
<div class="content">
<div class="title">
SHADOW FLUX
</div>
<div class="description">
NEON NINJAS
</div>
</div>
</div>
<div class="item">
<img src="image/img4.jpg">
<div class="content">
<div class="title">
LUMINA VIPER
</div>
<div class="description">
NEON NINJAS
</div>
</div>
</div>
<div class="item">
<img src="image/img5.jpg">
<div class="content">
<div class="title">
SIR DATAHEART
</div>
<div class="description">
BINARY KNIGHTS
</div>
</div>
</div>
<div class="item">
<img src="image/img6.jpg">
<div class="content">
<div class="title">
LADY ALGARESS
</div>
<div class="description">
BINARY KNIGHTS
</div>
</div>
</div>
</div>
<!-- next prev -->
<div class="arrows">
<button class="pre ppne" id="prev"><</button>
<label class="container ppne">
<input checked="checked" type="checkbox">
<svg viewBox="0 0 384 512" height="1em" xmlns="http://www.w3.org/2000/svg" class="play"><path d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"></path></svg>
<svg viewBox="0 0 320 512" height="1em" xmlns="http://www.w3.org/2000/svg" class="pause"><path d="M48 64C21.5 64 0 85.5 0 112V400c0 26.5 21.5 48 48 48H80c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H48zm192 0c-26.5 0-48 21.5-48 48V400c0 26.5 21.5 48 48 48h32c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48H240z"></path></svg></label>
<button class="next ppne" id="next">></button>
</div>
<!-- Download Button -->
<div class="download">
<button class="downloadbtn" id="downloadbtn">
<svg class="svgIcon" viewBox="0 0 384 512" height="1em" xmlns="http://www.w3.org/2000/svg"><path d="M169.4 470.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 370.8 224 64c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 306.7L54.6 265.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"></path></svg>
<span class="icon2"></span>
<span class="tooltip">Download</span>
</button>
</div>
<!-- time running -->
<div class="time"></div>
</div>
<script src="app.js"></script>
</body>
</html>