forked from Kundan-CR7/HeroVerse
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcomic.html
More file actions
230 lines (166 loc) · 9.16 KB
/
comic.html
File metadata and controls
230 lines (166 loc) · 9.16 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Image Slider</title>
<link rel="stylesheet" href="comic.css">
<!--author @shashwat sharma-->
</head>
<body>
<header class="main-header">
<nav class="desktop-main-menu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="character.html">Characters</a></li>
<li><a href="movies.html">Movies</a></li>
<li><a href="comic.html">Comics</a></li>
</ul>
</nav>
</header>
<div class="carousel">
<div class="list">
<div class="item" style="background-image: url('comic_images/image copy 2.png');">
<div class="content">
<div class="title">The ultimate</div>
<div class="name">Stormbringer</div>
<div class="des"></div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image copy 3.png');">
<div class="content">
<div class="title">The Embers of</div>
<div class="name">Potential</div>
<div class="des">Kamala Khan discovers her extraordinary powers, balancing her life as a teenage hero while embracing her role as a symbol of hope.</div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image copy 4.png');">
<div class="content">
<div class="title">The Gaigantic</div>
<div class="name">Hero</div>
<div class="des">With the power to alter his size and strength, Atom Smasher fights to prove himself among legends in the Justice Society.</div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image copy 5.png');">
<div class="content">
<div class="title">Worlds of Wonder</div>
<div class="name">The Eliminator</div>
<div class="des">Explore the vast multiverse of DC Comics, where heroes, villains, and legends collide in stories of epic proportions.
</div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image copy 6.png');">
<div class="content">
<div class="title">The Spirit of</div>
<div class="name">Vengeance</div>
<div class="des">Johnny Blaze, cursed with the powers of Hellfire, becomes the fiery Ghost Rider, punishing the wicked while battling his own demons.</div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image copy 7.png');">
<div class="content">
<div class="title">United</div>
<div class="name">We Stand </div>
<div class="des">Earth's greatest heroes unite to defend against cosmic threats, proving that together, they are an unstoppable force of justice.</div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image copy 8.png');">
<div class="content">
<div class="title">The Dual</div>
<div class="name">Edge</div>
<div class="des">When Spider-Man and Venom's paths intertwine, it creates a volatile alliance where chaos and heroism collide in the shadows.</div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image copy 9.png');">
<div class="content">
<div class="title">The white</div>
<div class="name">Shadow</div>
<div class="des">Step into Natasha Romanoff’s world of espionage and intrigue, where every move is calculated, and every mission reveals buried truths.</div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image copy 10.png');">
<div class="content">
<div class="title">Clash</div>
<div class="name">of Titans</div>
<div class="des">Watch Earth’s mightiest heroes and Marvel’s first family clash, revealing secrets, alliances, and the stakes of cosmic power.</div>
<div class="btn">
</div>
</div>
</div>
<div class="item" style="background-image: url('comic_images/image.png');">
<div class="content">
<div class="title">Earth’s Mightiest</div>
<div class="name">Heroes</div>
<div class="des">United by courage and purpose, the Avengers face unimaginable threats, proving that together, they are the universe's ultimate shield.</div>
<div class="btn">
</div>
</div>
</div>
</div>
<!--next prev button-->
<div class="arrows">
<button class="prev"></button>
<button class="next"></button>
</div>
<!-- time running -->
<div class="timeRunning"></div>
</div>
<script src="slider.js"></script>
<!--BODY SECTION STARTED FROM HERE author @ shashwat sharma-->
<div class="picture">
<a href="main/main.html">
<div class="cards1"></div>
</a>
<a href="main/main2.html"></a>
<div class="cards2"></div>
</a>
<a href="main/main3.html"></a>
<div class="cards3"></div>
</a>
<a href="main/main4.html"></a>
<div class="cards4"></div>
</a>
<a href="main/main5.html"></a>
<div class="cards5"></div>
</a>
<a href="main/main6.html"></a>
<div class="cards6"></div>
</a>
<a href="main/main7.html"></a>
<div class="cards7"></div>
</a>
<a href="main/main8.html"></a>
<div class="cards8"></div>
</a>
</div>
<div class="container" style="margin-top: 50px;">
<a href="c1_review.html"><div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic1.png" style="height: 100%;width: 100%;"></div></div></a>
<a href="c2_review.html"><div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic2.png" style="height: 100%;width: 100%;"></div></div></a>
<a href="c3_review.html"><div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic7.png" style="height: 100%;width: 100%;"></div></div></a>
<a href="c4_review.html"><div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic8.png" style="height: 100%;width: 100%;"></div></div></a>
<div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic3.png" style="height: 100%;width: 100%;"></div></div>
<div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic4.png" style="height: 100%;width: 100%;"></div></div>
<div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic9.png" style="height: 100%;width: 100%;"></div></div>
<div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic10.png" style="height: 100%;width: 100%;"></div></div>
<div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic5.png" style="height: 100%;width: 100%;"></div></div>
<div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic6.png" style="height: 100%;width: 100%;"></div></div>
<div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic11.png" style="height: 100%;width: 100%;"></div></div>
<div class="card" style="color: WHITE;font-size: 22px;"><div class="inner"><img src="comic_images/comic12.png" style="height: 100%;width: 100%;"></div></div>
</div>
</body>
</html>