-
Notifications
You must be signed in to change notification settings - Fork 0
/
old.html
142 lines (137 loc) · 10.1 KB
/
old.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
<!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>Envisionists</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="tailwind.css" />
<script src="https://cdn.jsdelivr.net/npm/lax.js"></script>
</head>
<body class="bg-primary-1">
<script src="main.js"></script>
<div class="p-2 mt-0 mx-auto fixed w-full z-10 headerAnimation headerBackground">
<div class="container mx-auto flex flex-row items-center w-3/4">
<div class="flex w-full md:w-1/2 justify-center md:justify-start text-gray-200 font-extrabold">
<a class="text-gray-200 text-center hover:text-white hover:no-underline" href="#">
<span class="text-5xl pl-2 dropShadow subTitleFont">ENVISIONISTS</span>
</a>
</div>
<div class="flex w-auto pt-2 content-center justify-between md:w-1/2 md:justify-end ">
<ul class="flex justify-between flex-1 md:flex-none items-center ">
<li>
<button class="hover:bg-indigo-800 buttonStyle rounded-3xl transform hover:scale-110">
<a class="text-3xl inline-block px-2 text-gray-200 no-underline hover:text-white hover:no-underline dropShadow" href="#contact">CONTACT US</a>
</button>
</li>
</ul>
</div>
</div>
</div>
<main class="container mx-auto flex">
<div>
<div class="text-center flex flex-col items-center justify-center min-h-screen">
<h1 class="font-black fixed text-gray-200 dropShadow titleFont">ENVISIONISTS</h1>
</div>
<div class="mt-96 text-center flex flex-col items-center justify-center min-h-screen">
<div>
<h1 class="text-9xl font-bold text-gray-200 dropShadow py-96 subTitleFont conceptAnimation">YOUR CONCEPT</h1>
</div>
<div>
<h1 class="text-9xl font-bold py-96 text-gray-200 dropShadow subTitleFont statementAnimation">YOUR STATEMENT</h1>
</div>
<div>
<h1 class="text-9xl font-bold py-96 text-gray-200 lax lax_preset_zigzag:100:50 lax_preset_jiggle:68:18 lax_preset_seesaw:133:10 dropShadow subTitleFont">YOUR THEORY</h1>
</div>
<div class="text-center flex flex-row items-center justify-center min-h-screen w-1/2 text-gray-200 dropShadow py-96 ">
<img src="waveLeft.png" class="lax lax_preset_flipX:1223:720 lax_preset_blurIn:40:30 lax_preset_fadeInOut:100:0.2">
<h1 class="text-9xl font-bold lax lax_preset_fadeInOut:100:0.3 subTitleFont">YOUR VOICE</h1>
<img src="waveRight.png" class="lax lax_preset_flipX:1223:720 lax_preset_blurIn:40:30 lax_preset_fadeInOut:100:0.2 ">
</div>
</div>
<div class="flex flex-col items-center justify-center ">
<div class="text-center flex flex-col items-center justify-evenly bg-white shadow-2xl rounded-xl w-3/4 h-1/2 mb-40 mt-40 mr-0 ml-0 relative windowInertia">
<h2 class="text-9xl font-extrabold py-16 realityAnimation onlyTitleFont">YOUR REALITY</h2>
<div class="text-center">
<p class="text-2xl mb-8 mt-6 mx-12">
The Envisionists are a dedicated team of creative engineers who share a common passion for transforming remarkable ideas into reality. Established in 2020, each of our Envisionists have participated in a variety of fascinating projects. <br> <br>
Our core expertise lies within the crypto ecosystem, where we specialize in the creation and design of products, the development and growth of communities, the crafting of compelling narratives, the construction of various "tokenomics" models, and more. Join us below for only a taste of what we offer.
</p>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<div class="text-center flex flex-col items-center justify-evenly bg-white shadow-2xl rounded-xl w-3/4 h-auto mb-40 mt-40 mr-0 ml-0 relative windowInertia">
<h2 class="text-8xl font-extrabold py-16">OMEN.ETH</h2>
<p class="pb-6 pr-6 pl-6">
Omen was a fully decentralized multi-chain prediction market platform built on the Gnosis conditional token framework. Users can create and participate in information markets on various topics (crypto, politics, sports, etc.) and stake their crypto on possible outcomes. <br> <br>
Envisionists participated in a collaborative visual and functional overhaul of the product, including but not limited to UI and UX, tokenomics release, landing page, community framework and marketing materials such as a fully composed informational video, social campaigns and more.
</p>
<div class="text-center pt-6 pb-6 pr-6 pl-6 ">
<img src="exampleGIF.gif" class="shadow-2xl rounded-xl">
</img>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<div class="text-center flex flex-col items-center justify-evenly bg-white shadow-2xl rounded-xl w-3/4 h-auto mb-40 mt-40 mr-0 ml-0 relative windowInertia">
<h2 class="text-8xl font-extrabold py-16">OMEN.ETH</h2>
<p class="pb-6 pr-6 pl-6">
Omen was a fully decentralized multi-chain prediction market platform built on the Gnosis conditional token framework. Users can create and participate in information markets on various topics (crypto, politics, sports, etc.) and stake their crypto on possible outcomes. <br> <br>
Envisionists participated in a collaborative visual and functional overhaul of the product, including but not limited to UI and UX, tokenomics release, landing page, community framework and marketing materials such as a fully composed informational video, social campaigns and more.
</p>
<div class="text-center pt-6 pb-6 pr-6 pl-6 ">
<img src="exampleGIF.gif" class="shadow-2xl rounded-xl">
</img>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<div class="text-center flex flex-col items-center justify-evenly bg-white shadow-2xl rounded-xl w-3/4 h-auto mb-40 mt-40 mr-0 ml-0 relative windowInertia">
<h2 class="text-8xl font-extrabold py-16">OMEN.ETH</h2>
<p class="pb-6 pr-6 pl-6">
Omen was a fully decentralized multi-chain prediction market platform built on the Gnosis conditional token framework. Users can create and participate in information markets on various topics (crypto, politics, sports, etc.) and stake their crypto on possible outcomes. <br> <br>
Envisionists participated in a collaborative visual and functional overhaul of the product, including but not limited to UI and UX, tokenomics release, landing page, community framework and marketing materials such as a fully composed informational video, social campaigns and more.
</p>
<div class="text-center pt-6 pb-6 pr-6 pl-6 ">
<img src="exampleGIF.gif" class="shadow-2xl rounded-xl">
</img>
</div>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<div class="text-center flex flex-col items-center justify-evenly bg-white shadow-2xl rounded-xl w-3/4 h-auto mb-40 mt-40 mr-0 ml-0 relative windowInertia">
<h2 class="text-8xl font-extrabold py-16">OMEN.ETH</h2>
<p class="pb-6 pr-6 pl-6">
Omen was a fully decentralized multi-chain prediction market platform built on the Gnosis conditional token framework. Users can create and participate in information markets on various topics (crypto, politics, sports, etc.) and stake their crypto on possible outcomes. <br> <br>
Envisionists participated in a collaborative visual and functional overhaul of the product, including but not limited to UI and UX, tokenomics release, landing page, community framework and marketing materials such as a fully composed informational video, social campaigns and more.
</p>
<div class="text-center pt-6 pb-6 pr-6 pl-6 ">
<img src="exampleGIF.gif" class="shadow-2xl rounded-xl">
</img>
</div>
</div>
</div>
<section id="contact" class="bg-white rounded-xl z-20">
<div class="py-8 lg:py-16 px-4 mx-auto w-3/4">
<h2 class="mb-4 text-4xl tracking-tight font-extrabold text-center text-gray-900 ">LET'S CONNECT</h2>
<p class="mb-8 lg:mb-16 font-light text-center text-gray-500 sm:text-xl">Tell us a bit about your project and the services you are interested in. We're excited to get to know you and help you succeed.</p>
<form action="#" class="space-y-8">
<div>
<label for="email" class="block mb-2 text-sm font-medium text-gray-900">EMAIL</label>
<input type="email" id="email" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5" placeholder="[email protected]" required>
</div>
<div>
<label for="subject" class="block mb-2 text-sm font-medium text-gray-900 ">PROJECT NAME</label>
<input type="text" id="subject" class="block p-3 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 shadow-sm focus:ring-primary-500 focus:border-primary-500 " placeholder="What should we call you?" required>
</div>
<div class="sm:col-span-2">
<label for="message" class="block mb-2 text-sm font-medium text-gray-900 ">CONTEXT</label>
<textarea id="message" rows="6" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg shadow-sm border border-gray-300 focus:ring-primary-500 focus:border-primary-500 " placeholder="Leave us some context and how we can help you succeed ..."></textarea>
</div>
<button type="submit" class="py-3 px-5 text-sm font-medium text-center text-white rounded-lg bg-blue-600 sm:w-fit hover:bg-blue-200 focus:ring-4 focus:outline-none focus:ring-blue-200">Send message</button>
</form>
</div>
</section>
<script src="lax.js"></script>
</body>
</html>