-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (127 loc) · 8.33 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:type" content="article" />
<meta name="author" content="Eugenio Segovia" />
<title name="pageTitle">ℍ𝕠𝕥ℤ𝕠𝕞𝕓𝕚𝕖𝕤</title>
<link rel="shortcut icon" href="media/favicon.ico"/>
<!-- Tailwind CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Pazly Colors -->
<link rel="stylesheet" href="https://pazly.dev/colors/gradients.css" />
<link rel="stylesheet" href="https://pazly.dev/colors/backgrounds.css" />
<link rel="stylesheet" href="https://pazly.dev/colors/text.css" />
<link rel="stylesheet" href="https://pazly.dev/colors/border.css" />
<style>
body { overflow-x: hidden; }
h1, h2, h3, h4, h5, h6 { line-height:1.3 !important; }
ol { list-style-type: decimal !important; padding-left: 1em !important; }
ul { list-style-type: disc !important; padding-left: 1em !important; }
.stretchToScreen { width:100vw; height:100vh; }
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body class="m-0 p-0 stretchToScreen">
<!-- Pazly Custom Background-->
<section id="pazly-page-background" class="fixed m-0 p-0 stretchToScreen">
<img class="w-full h-full object-cover object-center" loading="lazy" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII=" />
</section>
<!-- Pazly Blocks Come Here -->
<section id="pazly-template-set" class="absolute top-0 m-0 p-0 stretchToScreen">
<section xmlns="http://www.w3.org/1999/xhtml" class="w-full text-p-gray-700 shadow bg-p-gray-600">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center justify-center">
<nav class="flex lg:w-1/5 flex-wrap justify-center text-center md:ml-auto">
</nav>
<a class="flex order-first lg:order-none lg:w-2/5 title-font font-medium items-center text-p-gray-900 lg:items-center lg:justify-center px-2 mb-4 md:mb-0">
<div class="m-2 w-16 h-16 rounded-md shadow-lg bg-p-red-50 flex justify-center items-center transform rotate-45 overflow-hidden">
<img class="object-fill h-full w-full transform -rotate-45 scale-150" alt="logo" src="media/logo hotzombie.jpg" />
</div>
<span class="ml-3 whitespace-pre-line font-serif font-extrabold text-3xl md:text-5xl text-p-grad-3">HotZombies</span>
</a>
<nav class="flex lg:w-1/5 flex-wrap justify-center text-center md:ml-auto">
</nav>
</div>
</section>
<section xmlns="http://www.w3.org/1999/xhtml" class="w-full bg-p-gray-600">
<div class="container mx-auto flex py-16 px-5 md:flex-row flex-col items-center">
<div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 w-5/6 text-center p-4 md:p-8">
<img class="inline-flex object-cover object-center rounded-xl" alt="hero" src="media/presentacionHZ.gif" />
</div>
<div class="w-full md:w-8/12 lg:w-6/12 xl:w-6/12 px-3 md:text-left mb-16 md:mb-0 items-center text-center">
<p class="my-8 leading-relaxed whitespace-pre-line text-xl text-p-white">In a shadowy corner of the NFTcoolarts metaverse, an infected land awaits those brave enough to enter.
Welcome to Hotzombies, an NFT collection that immerses collectors in an unparalleled zombie apocalypse.
Once thriving and teeming with life, this slice of land fell victim to a devastating virus that turned its inhabitants into bloodthirsty creatures. Now, these infected survivors find themselves isolated in their own microcosm.
Each digital artwork in the Hotzombies collection depicts a unique character fighting for survival. From brave warriors to cunning hunters, each possesses special abilities to face the dangers lurking around every infected corner.
Do you have what it takes to survive in this metaverse of nightmares? Join the Hotzombies collection and immerse yourself in a post-apocalyptic world where the fight for survival comes alive in every NFT.
Remember that life and death are intertwined in this metaverse, and only the bravest and most cunning will be able to resist.
Jump into Hotzombies and face the undead today!</p>
<div class="flex flex-col md:flex-row justify-center md:justify-start py-4">
<a href="https://throbbing-sea-5635.on.fleek.co" class="mx-1 font-bold px-6 py-4 rounded-xl outline-none focus:outline-none mr-1 mb-1 uppercase text-sm shadow-xl hover:shadow-lg text-p-green-400 bg-p-black whitespace-pre-line" style="transition:all .15s ease" target="_blank">Get your HotZombie</a>
</div>
</div>
</div>
</section>
<section xmlns="http://www.w3.org/1999/xhtml" class="w-full bg-p-gray-600">
<div class="container lg:py-16 py-4 mx-auto flex flex-col-reverse lg:flex-row items-center">
<div class="w-full lg:w-1/2 px-6 lg:px-12 text-center md:text-left">
<h5 class="w-full text-4xl mb-3 font-semibold whitespace-pre-line text-white">By Q3 2024 "will be the launch of the NFT Game".</h5>
<p class="w-full mb-4 text-lg whitespace-pre-line text-white">You will be able to be part of epic battles where each HotZombie must fight to defend his territory and not be eliminated.
"So you can't be left out " </p>
</div>
<div class="w-full flex flex-col lg:w-1/2 px-2 items-center py-6">
<img src="media/gamehz.gif" />
</div>
</div>
</section>
<section xmlns="http://www.w3.org/1999/xhtml" class="w-full bg-p-gray-600">
<div class="container mx-auto px-3 grid grid-cols-1 md:grid-cols-3 gap-6 justify-center items-center py-12">
<img class="rounded-lg" src="media/hz1 (1).gif" />
<img class="rounded-lg" src="media/hz2.gif" />
<img class="rounded-lg" src="media/hz3.gif" />
</div>
</section>
<footer xmlns="http://www.w3.org/1999/xhtml" class="w-full bg-p-gray-600">
<div class="w-full p-4 text-center flex flex-col md:flex-row justify-around items-center">
<a class="flex justify-center items-center" target="_blank">
<div class="m-2 w-12 h-12 rounded-md shadow-lg bg-p-red-50 flex justify-center items-center transform rotate-45 overflow-hidden">
<img class="object-fill h-full w-full transform -rotate-45 scale-150" alt="logo" src="media/logo hotzombie.jpg" />
</div>
</a>
<span class="flex whitespace-pre-line text-p-white">©2023 Eugenio Segovia. All rights reserved</span>
<div class="flex flex-row justify-center items-center">
<a href="https://twitter.com/hot_zombiesNFT" target="_blank" class="py-2 px-3 whitespace-pre-line text-p-white"><i class="fa-brands fa-x-twitter" style="color: #ffffff;"></i></a>
<a href="https://www.instagram.com/hotzombies_nft" target="_blank" class="py-2 px-3 whitespace-pre-line text-p-white"><i class="fa-brands fa-instagram" style="color: #ffffff;"></i></a>
<a href="https://hotz.x.rarible.com/" target="_blank" class="py-2 px-3 whitespace-pre-line text-p-white"><i class="fa-solid fa-store" style="color: #f4e00b;"></i></a>
</div>
</div>
</footer>
</section>
<!-- Fontswesome -->
<script src="https://kit.fontawesome.com/41bcea2ae3.js" crossorigin="anonymous"></script>
<!-- Pazly Scripts Start Here -->
<section id="pazly-scripts-set" class="m-0 p-0 w-0 h-0">
<!-- Smooth scrolling -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
// handle links with @href started with '#' only
$(document).on('click', 'a[href^="#"]', function(e) {
// target element id
var id = $(this).attr('href');
// target element
var $id = $(id);
if ($id.length === 0) {
return;
}
// prevent standard hash navigation (avoid blinking in IE)
e.preventDefault();
// top position relative to the document
var pos = $id.offset().top;
// animated top scrolling
$('body, html').animate({scrollTop: pos});
});
</script>
</section>
</body>
</html>