-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
218 lines (190 loc) · 9.16 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="images/humanfav.ico">
<title>Humankind</title>
<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=Lora&family=Rubik:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navb">
<div>
<img src="images/boy.svg" alt="Brand" srcset="">
</div>
<div >
<a class="humankind" href="#">humankind</a>
</div>
<div class="sidebyside">
<a href="#">Art</a>
<a href="#">Collectibles</a>
<a href="#">Studios</a>
<a href="#">Community</a>
<a href="#">Subscribe</a>
<button class="bal">Burn a Lunchbox</button>
</div>
</nav>
<div class="first">
<section>
<img class ="bigImg" src="images/humankind.png" alt="">
<h3 >Creating a magical world for the kid in all of us.</h3>
<button class ="light">Get A Lunchbox</button>
<button class ="dark">Burn A Lunchbox</button>
<br>
<p>Lunchbox burn starts on Dec 13th, 2022</p>
</section></div>
<div class="second">
<div class="middle1">
<img style="float: left;" height="480px" width="480px" src="images/middleguitar.png" alt="middle guitar.img">
</div>
<div class="middle2">
<h2>Bring your ideas to life with the Humankind Fund</h2>
<p>The Humankind Fund is a community-driven platform that supports and empowers projects that align with the values and mission of the Humankind brand.
Join us in bringing creative ideas to life and making a positive impact in the world.</p>
<br>
<a class="yello" href="">Learn More</a>
</div>
</div>
<div class="third">
<img height="40%" width="60%" src="images/running.png" alt="running.img" srcset="">
</div>
<div class="fourth">
<div>
<h2 class = "lkd" >The land of Kinds is in danger!</h2>
</div>
<div class="cvhb">
<p >Chiquito Village has been attacked by the giant Mechas.
Maya and Dallas need you to join the adventure.</p>
<button> Go help them! </button>
</div>
</div>
<div class = "fifth">
<div class="fifdes">
<div >
<img style="margin-top: 12%;float: left; padding:0 2rem 6rem 0;" height="65%" width="48%" src="images/animate.gif" alt="animate.gif" srcset="">
</div>
<div>
<h2 style="margin-right: 10%; font-size: 33.9865px ;">
Grab your lunchbox. It will be a long journey.</h2>
<p style="padding-right: 5;">We are delighted you're finally joining our adventure alongside Maya and Dallas.
It all starts with a simple and nostalgic object: a lunchbox.
A lunchbox? What for? Well, it's gonna be a long journey! </p>
<p style="padding-right: 5%;">
Every lunchbox will unlock a Humankind on a brave quest. You'll be able to claim your Kind with them.
We've made our generative lunchboxes with art we've been creating for the last year.
</p>
<button class="dark">Get one for opensea</button>
<button>Learn more</button>
</div>
</div>
</div>
<div class="sixth">
<div class="sixthDes">
<h2 style="margin-top:6% ; font-size: 40px; font-weight: 400;">Humankind Collectibles </h2>
<p style=" font-weight: 100;">We're launching a set of diverse and unique art collectibles featuring the Humankind species,
the most prevalent in The Land of Kinds.</p>
<button style="background-color: black; color:white; border: 3px solid white;">Learn more</button>
<button >Get one for opensea</button>
</div>
</div>
<div class="seventh">
<img style="float: right; padding: 10rem 4rem ;"height="750rem" width="750rem" src="images/robot.gif" alt="robot.img">
<div class="seventhdes">
<h2 style="font-size: 40px;">Art and kindness are our tools of trade</h2>
<p>Humankind is a creative force developing relatable
characters and epic stories for a global audience across various formats powered by decentralization.</p>
<button>Learn About Us</button>
</div>
</div>
<div class="eight">
<div>
<img width = "80%"src="images/ghosts.png" alt="ghosts">
</div>
<div class="eightdes">
<div class="eightdesh2"><h2 >Designing a universe</h2></div>
<div >
<p class="eightdesh3">We're building the Humankind brand, its world, stories, and characters.
Our goal is to capture the hearts and minds of kids and adults worldwide with epic creations,
a unique vision, and community-driven storytelling.
</p>
<button>Discover the art</button>
</div>
</div>
</div>
<div class="ninth">
<h1 class="stayhuman" style=" padding: 0; margin:0; color: white; font-size: 290px; font-weight: 800px;">stayhuman</h1>
<div class="bots">
<img width="100%" src="images/humans.png" alt="humans.faces">
</div>
<div class="ninthdes">
<div class="ninthdespop">
<img height="80px" src="images/rakoon1.png" alt="des1.img">
<h2>Humankind Studios</h2>
<p>A creatives studio desining the stories, world, and brand of Humankind.</p>
</div>
<div class="ninthdespop">
<img height="80px" src="images/rakoon2.png" alt="des2.img">
<h2>Humankind Fund</h2>
<p>A fund that helps artist concieve creation free of economic dependencies.</p>
</div>
</div>
<div class="ninthtree">
<div>
<img style="float: left; margin: 0; padding: 0;" height="1000rem" width="1000rem" src="images/tree.png" alt="tree">
</div>
<div class="nitre">
<h2 style="font-size: 35px; font-weight: 600;">Building together</h2>
<p style="padding-right: 25px;">Our mission is to entertain and inspire people all over the globe through the
power of art, kindness, and unique storytelling in web3.</p>
<button>Explore Careers</button>
</div>
</div>
</div>
<div class="tenth">
<img height="430rem" width="540rem" src="images/swordcop.png" alt="boygirl.img">
<h2 style="font-size: 40px; font-weight: 600;">Join our adventure</h2>
<p style="padding:0 20%;">Despite the many evil forces in the world, there is hope. We can still make
a positive difference through art and community. We're looking for other geeks, punks,
and freaks like us who believe in the power of storytelling to be a part of our quest.</p>
<button class="dark"> Join our Discord </button>
</div>
<div class="eleventh">
<div class="smalleleimg">
<h2 style="font-size: 50px; margin: 0; margin-top: 200px; text-align: left;" >humankind</h2>
<p style=" padding-bottom: 2rem;margin: 0; text-align: left;" >stay human. be kind.</p>
<br>
<img height="35px" width="35px" src="images/discord.svg" alt="discord">
<img style="margin-left:10px ;" height="35px" width="35px" src="images/twitter.svg" alt="twitter">
<img style="margin-left:10px ;" height="35px" width="35px" src="images/insta.svg" alt="instagram">
<img style="margin-left:10px ;" height="35px" width="35px" src="images/linkedin.svg" alt="linkedin">
<img style="margin-left:10px ;" height="35px" width="35px" src="images/boat.svg" alt="boat logo">
<div style="margin-left:10px ;" class="elebut">
<br>
</div>
<div class="but">
<button class="dark">Burn a Lunchbox</button>
<button>Join Our Discord</button>
</div>
<br>
<p style="font-size: small;">Humankind Industries Inc. 2023</p>
</div>
<div class="elegirl">
<img height="600rem" width="680rem" style="float: right;" src="images/girl.png" alt="girl.img">
</div>
</div>
</div>
</body>
<footer>
<div class="footer">
<h5>Powered by </h5>
<img src="images/bueno.svg" alt="bueno">
</div>
<div class="footr">
<h4>Made with ❤️🔥 by <a href="https://www.instagram.com/nittaany""><img height="15px" width="15px" src="images/insta.svg" alt="follow"></a></h4>
</div>
</footer>
</html>