-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinfinity-stone.html
201 lines (173 loc) · 6.09 KB
/
infinity-stone.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Infinity Stones</title>
<style>body, html{
height:100%;
margin:0;
font-size:16px;
font-family:"Lato", sans-serif;
font-weight:400;
line-height:1.8em;
color:#666;
}
.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6, .pimg7{
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
/*
fixed = parallax
scroll = normal
*/
background-attachment:fixed;
}
.pimg1{
background-image:url('https://wallpapercave.com/wp/wp6111064.jpg');
min-height:100%;
}
.pimg2{
background-image:url('https://static.wikia.nocookie.net/shaniverse/images/2/20/-soul-render.jpg/revision/latest?cb=20200607191344://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_kclA-PCOw2FnBaVD5sPD-fZGAl2sfpsyXA&usqp=CAU');
min-height:400px;
}
.pimg3{
background-image:url('https://static.wikia.nocookie.net/shaniverse/images/9/9f/-time-render.jpg/revision/latest?cb=https://i.pinimg.com/originals/4b/fc/75/4bfc75ba977ed04f4b729d1ace3944e1.jpg.gstatic.com/images?q=tbn:ANd9GcQM5tlHcJQqHCRcjSxLeJuAwtWHsTC-uTM9S92kAaXZjBmfm8_ya7thdRI3mOBVuIUBneg&usqp=CAU');
min-height:400px;
}
.pimg4{
background-image:url('https://static.wikia.nocookie.net/shaniverse/images/2/21/-mind-render.jpg/revision/latest?cb=20200607223954.gstatic.com/images?q=tbn:ANd9GcQM5tlHcJQqHCRcjSxLeJuAwtWHsTC-uTM9S92kAaXZjBmfm8_ya7thdRI3mOBVuIUBneg&usqp=CAU');
min-height:400px;
}
.pimg5{
background-image:url('https://static.wikia.nocookie.net/shaniverse/images/0/04/-power-render.jpg/revision/latest?cb=20200607221950.gstatic.com/images?q=tbn:ANd9GcQM5tlHcJQqHCRcjSxLeJuAwtWHsTC-uTM9S92kAaXZjBmfm8_ya7thdRI3mOBVuIUBneg&usqp=CAU');
min-height:400px;
}
.pimg6{
background-image:url('https://static.wikia.nocookie.net/shaniverse/images/5/51/-reality-render.jpg/revision/latest?cb=20200505163717');
min-height:400px;
}
.pimg7{
background-image:url('https://static.wikia.nocookie.net/shaniverse/images/1/12/-space-render.jpg/revision/latest?cb=20200607234657');
min-height:400px;
}
.section{
text-align:center;
padding:50px 80px;
}
.section-light{
background-color:#282e34;
color:#ddd;
}
.section-dark{
background-color:#282e34;
color:#ddd;
}
.ptext{
position:absolute;
top:50%;
width:100%;
text-align:center;
color:#fff;
font-size:27px;
letter-spacing:8px;
text-transform:uppercase;
font-weight:bold;
}
.ptext, .trans{
background-color:transparent;
}
@media(max-width:568px){
.pimg1, .pimg2, .pimg3, .pimg4, .pimg5, .pimg6, .pimg7{
background-attachment:scroll;
}
}
</style>
</head>
<body>
<div class="pimg1">
<div class="ptext">
INFINITY STONES
</div>
</div>
<section class="section section-light">
<h2>SOUL STONE</h2>
<p>
The Soul Stone was one of the six Infinity Stones, the remnant of a singularity that predated the universe, representing the element of soul. Kept on Vormir and under the protection of Red Skull since 1945, the Soul Stone was acquired by Thanos in 2018 after he sacrificed Gamora.
</p>
</section>
<div class="pimg2">
<div class="ptext">
<span class="border trans">
SOUL STONE
</span>
</div>
</div>
<section class="section section-dark">
<h2>TIME STONE</h2>
<p>
The Time Stone is a mysterious Gemstone, whose source and origin are unknown. It's eminent for holding the power of the time itself and helps the user to see the past and foresee the future. It used to reside in the Krohnisfere.
</p>
</section>
<div class="pimg3">
<div class="ptext">
<span class="border trans">
TIME STONE
</span>
</div>
</div>
<section class="section section-dark">
<h2>MIND STONE</h2>
<p>
The Mind Stone is one of the six Infinity Stones, the remnant of a singularity that predated the universe, representing the element of mind. It was previously owned by Thanos inside his Scepter who lent it to Loki for the Chitauri Invasion.
</p>
</section>
<div class="pimg4">
<div class="ptext">
<span class="border trans">
MIND STONE
</span>
</div>
</div>
<section class="section section-dark">
<h2>POWER STONE</h2>
<p>
Best known as Ronan's coveted planet-destroying weapon from Guardians of the Galaxy, the Power Stone made its first chronological MCU appearance being wielded by the godlike Celestials, who were explored in greater depth in the recent Eternals.
</p>
</section>
<div class="pimg5">
<div class="ptext">
<span class="border trans">
POWER STONE
</span>
</div>
</div>
<section class="section section-dark">
<h2>REALITY STONE</h2>
<p>
The Reality Stone is one of the six Infinity Stones . Malekith , the leader of the Dark Elves, created a weapon out of the Reality Stone called the Aether. It is known to be able to convert matter into dark matter, and otherwise maintains an almost lifelike existence that causes it to bond in a parasitic fashion to a living host.
</p>
</section>
<div class="pimg6">
<div class="ptext">
<span class="border trans">
REALITY STONE
</span>
</div>
</div>
<section class="section section-dark">
<h2>SPACE STONE</h2>
<p>
The Space Stone is the Infinity Stone that governs over space and grants the bearer control over it. Housed within the Tesseract, over the course of history it was wielded by many individua Johann Schmidt of HYDRA and Loki of Asgard.
</p>
</section>
<div class="pimg7">
<div class="ptext">
SPACE STONE
</div>
</div>
</body>
</html>