Magma-clone/index.html at main · LazycoderAayu/Magma-clone · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Magma</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll@3.5.4/dist/locomotive-scroll.css">
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet"/>

</head>
<body>
   <div id="main">
     <div data-scroll data-scroll-speed="-5" id="page1">
        <nav>
            <img src="https://github.com/aadilkhan08/Magma/blob/main/Screenshot%202023-05-30%20220719.png?raw=true" alt="">
            <div id="right-nav">
                <button>Book a Demo</button>
                <button><i class="ri-menu-fill"></i></button>
            </div>
        </nav>
        <div class="bottom-page1">
            <h1>Experience Real  <br> Estate Agility</h1>
            <div class="bottom-page1-inner">
                <h4>Create a digital twin of your existing building <br> and release the potential of Web3.</h4>
                <button>LEARN MORE</button>
            </div>

        </div>

        <video src="https://thisismagma.com/wp-content/themes/magma/assets/home/hero/1.mp4?2" autoplay loop muted ></video>
     </div>
     <div id="page2">
        <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>
     <div id="page3">
        <canvas></canvas>
     </div>
     <div id="page4">
        <h3>CONNECT THE BUILDING'S TWIN TO YOUR STAKEHOLDERS</h3>
        <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>
     <div id="page5">
        <canvas></canvas>
     </div>
     <div id="page6">
        <h3>INCREASE YOUR DIGITAL TWIN TOKEN’S VALUE</h3>
        <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>
     <div id="page7">
        <div class="page7-cir">
            <div class="page7-cir-inner"></div>
        </div>
        <canvas></canvas>
    </div>
    <div id="page8">
        <div class="page8-bottom">
            <h1>Magma DTT</h1>
            <button>LEARN MORE</button>
        </div>
        <video src="https://thisismagma.com/wp-content/themes/magma/assets/home/glass/1.webm?2" autoplay loop muted></video>

    </div>
    <div id="page9">
        <div class="left9">
            <h1>What is <br> Magma?</h1>
        </div>
        <div class="right9">
            <div class="right9-center"></div>
        </div>
    </div>
    <div id="page10">
        <div class="right10">
            <div class="right10-inner">
                <h1>Web3 platform
                </h1>
                <p>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.</p>
            </div>
            <div class="right10-inner">
                <h1>The Digital Twin Token: The building’s unique digital copy</h1>
                <p>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.</p>
            </div>
            <div class="right10-inner">
                <h1>An Index of digitization</h1>
                <p>The Magma Index provides valuable insight for decision-making regarding data-sharing, service-creating, and operational/environmental expectations.</p>
            </div>
        </div>
    </div>
    <div id="page11">
        <h1>Recent Blog</h1>
        <div class="page11-inner">
            <div class="left11">
                <img src="https://thisismagma.com/wp-content/uploads/2023/05/thisismagma.com-magma-a-la-3eme-edition-du-tech-talk-de-cbre-france-1684942208038.jpeg" alt="">
            </div>
            <div class="right11">
                <h4>MAY 30,2023</h4>
                <h1>Magma At CBRE France's 3rd Tech Talk</h1>

            </div>
        </div>
        <div class="page11-inner">
            <div class="left11">
                <img src="https://thisismagma.com/wp-content/uploads/2023/05/thisismagma.com-workshop-blockchain-et-actif-digitaux-sba-16-min-scaled.jpg" alt="">
            </div>
            <div class="right11">
                <h4>MAY 30,2023</h4>
                <h1>Magma At CBRE France's 3rd Tech Talk</h1>

            </div>
        </div>
        <div class="page11-inner">
            <div class="left11">
                <img src="https://thisismagma.com/wp-content/uploads/2023/03/magma.wp2.cubdev.com-exploring-the-potential-of-real-estate-tokenization-digital-twins-magma.png" alt="">
            </div>
            <div class="right11">
                <h4>MAY 30,2023</h4>
                <h1>Magma At CBRE France's 3rd Tech Talk</h1>

            </div>
        </div>

    </div>
    <div id="page13">
        <h1>Become an
            <br>
            early adopter</h1>
            <button>BOOK A DEMO</button>
    </div>
    <div id="page14">
        <div class="page14-inner">
            <h1>Twitter</h1>
            <i class="ri-arrow-right-up-line"></i>
            <div class="center14"></div>
        </div>
        <div class="page14-inner">
            <h1>LinkedIn</h1>
            <i class="ri-arrow-right-up-line"></i>
            <div class="center14"></div>

        </div>
        <div class="page14-inner">
            <h1>Instagram</h1>
            <i class="ri-arrow-right-up-line"></i>
            <div class="center14"></div>

        </div>

   </div>
   </div>

   <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.5/ScrollTrigger.min.js" integrity="sha512-onMTRKJBKz8M1TnqqDuGBlowlH0ohFzMXYRNebz+yOcc5TQr/zAKsthzhuv0hiyUKEiQEQXEynnXCvNTOk50dg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="script.js"></script>
</body>
</html>