-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
180 lines (171 loc) · 8.11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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=Jost:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
<link rel="stylesheet" href="style.css">
<link rel="icon" href="assets/favicon-32x32.png">
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css" rel="stylesheet">
<title>3d Animated Website || ahkamboh</title>
</head>
<body>
<main id="main">
<section id="page1" data-scroll data-scroll-speed="-5">
<header><a href="https://thisismagma.com/">
<img src="assets/magma logo-01.svg" alt="logo" height="80px"></a>
<div class="nav-right-btn">
<button class="btn">
<span class="btn-text-one">Book a Demo</span>
<span class="btn-text-two">Book a Demo</span>
<div class="bg-btn"></div>
</button>
<button class="nav-btn">
<div class="line"></div>
<div class="line"></div>
</button>
</div>
</header>
<video src="assets/Hero video.mp4" autoplay muted loop></video>
<div class="wrap1-text">
<h1>Experience Real <br> Estate Agility</h1>
<div class="wrap2-text">
<h5>Create a digital twin of your existing building and release the potential of Web3.</h5>
<button class="btn">
<span class="btn-text-one">LEARN MORE</span>
<span class="btn-text-two">LEARN MORE</span>
<div class="bg-btn"></div>
</button>
</div>
</div>
</section>
<!-- -------------- -->
<section id="page2">
<div class="page2-content">
<h2>CERTIFY YOUR BUILDING AS A DIGITAL TWIN TOKEN (DTT®)</h2>
<h1>The Digital Twin Token is a unique digital asset backed by property data. Magma combines your
building’s components and systems essential information into a DTT®.</h1>
</div>
</section>
<section id="page3">
<canvas></canvas>
</section>
<section id="page4">
<div class="page4-content">
<h2>CONNECT THE BUILDING'S TWIN TO YOUR STAKEHOLDERS</h2>
<h1>Users connect directly to the DTT® without any intermediaries. As Stakeholder, they have the power
to upload and verify information that enriches the Digital Twin Token. A Stakeholder's ability to
access validated-data to perform tasks depends on their specific role.</h1>
</div>
</section>
<section id="page5">
<canvas></canvas>
</section>
<section id="page6">
<div class="page6-content">
<h2>INCREASE YOUR DIGITAL TWIN TOKEN’S VALUE</h2>
<h1>DTT® data increases the value of your digital asset by lowering operational costs, improving energy
use, assisting commercialization, and boosting the liquidity of your building.</h1>
</div>
</section>
<section id="page7">
<canvas></canvas>
<div class="page7-cir">
<div class="page7-inner-cir">
<div class="counter">0%</div>
<div class="page7-inner-cir-text">MAGMA INDEX</div>
</div>
</div>
</section>
<section id="page8" data-scroll data-scroll-speed="-5">
<video src="https://thisismagma.com/wp-content/themes/magma/assets/home/glass/1.webm?2" autoplay loop
muted></video>
<div class="page8-bottom">
<h1>Magma DTT®</h1>
<button class="btn">
<span class="btn-text-one">LEARN MORE</span>
<span class="btn-text-two">LEARN MORE</span>
<div class="bg-btn"></div>
</button>
</div>
</section>
<section id="page9">
<h1>What is
Magma?</h1>
<br>
<img src="https://thisismagma.com/wp-content/uploads/2023/04/magma.wp2.cubdev.com-home-1.jpeg">
<br>
<div class="page9-text">
<h1>Web3 platform</h1>
<h3>Magma is a Web3 platform for all real estate stakeholders, which provides users with the ability to
manage interactions between physical and digital assets through unique, and collectively generated,
3D representations of their buildings.</h3>
<br>
<br>
<h1>Digital Twin Token: The building’s unique digital copy</h1>
<h3>Magma uses blockchain technology to record essential data, which enables transparent, traceable, and
immutable streams of information to be readily accessible to its users. Magma smart contracts are
built
with this blockchain data to expedite tasks like requests for proposals, lease agreements, and
services
arrangements.</h3>
<br><br>
<h1>An Index of digitization</h1>
<h3>The Magma Index provides valuable insight for decision-making regarding data-sharing,
service-creating,
and operational/environmental expectations.</h3>
</div>
</section>
<footer id="page10">
<div class="footer-head">
<h1>Become an early adopter</h1>
<br>
<button class="btn">
<span class="btn-text-one">LEARN MORE</span>
<span class="btn-text-two">LEARN MORE</span>
<div class="bg-btn"></div>
</button>
</div>
<div class="social-link">
<h1>Twitter</h1>
<i class="ri-arrow-right-up-line"></i>
<div class="bg-hover"></div>
</div>
<div class="social-link social-link2 ">
<h1>Linkedin</h1>
<i class="ri-arrow-right-up-line"></i>
<div class="bg-hover"></div>
</div>
<div class="social-link">
<h1>Instagram</h1>
<i class="ri-arrow-right-up-line"></i>
<div class="bg-hover"></div>
</div>
<div class="bottom">
<h1>© 2023 BY MAGMA</h1>
<div class="input-btn">
<form action="">
<label for="mail">Subscribe</label>
<div class="input-field">
<input type="email" id="mail" required>
<button type="submit"><i class="ri-arrow-right-line"></i></button>
</form>
</div>
</div>
</div>
<br>
</footer>
</main>
<script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"
integrity="sha512-16esztaSRplJROstbIIdwX3N97V1+pZvV33ABoG1H2OyTttBxEGkTsoIVsiP1iaTtM8b3+hu2kB6pQ4Clr5yug=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"
integrity="sha512-Ic9xkERjyZ1xgJ5svx3y0u3xrvfT/uPkV99LBwe68xjy/mGtO+4eURHZBW2xW4SZbFrF1Tf090XqB+EVgXnVjw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="script.js"></script>
</body>
</html>