3D-Website/index.html at main · Najahi-Dev/3D-Website · 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
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <img class="image-gardient" src="./gradient.png" alt="gradient">
    <div class="layer-blur"></div>

    <div class="container">
        <header>
            <h1 data-aos="fade-down" data-aos-duration="1500" class="logo">XCODE</h1>

            <nav>
                <a data-aos="fade-down" data-aos-duration="1500" href="#">HOME</a>
                <a data-aos="fade-down" data-aos-duration="2000" href="#">ABOUT</a>
                <a data-aos="fade-down" data-aos-duration="2500"  href="#">BLOG</a>
                <a data-aos="fade-down" data-aos-duration="3000" href="#">PAYMENT</a>
            </nav>

            <button data-aos="fade-left" data-aos-duration="2000" class="btn-signing">SIGN-IN</button>
        </header>

        <main>
            <div data-aos="fade-right"
            data-aos-offset="300"
            data-aos-duration="3000"
            data-aos-easing="ease-in-sine" class="content">
                <div class="tag-box">
                    <div class="tag">
                        INTRODUCING &wedbar;
                    </div>
                </div>
                <h1>EMAIL FOR<br>DEVELOPERS</h1>

                <p class="description">
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsa modi, earum ut eum dolores, qui
                    nostrum
                    expedita illo vitae possimus, officia maiores quibusdam rerum consequuntur quod labore porro esse
                    distinctio?
                </p>

                <div data-aos="zoom-out-up" data-aos-duration="2500" class="buttons">
                    <a href="#" class="btn-get-started">Documentation &gt;</a>
                    <a href="#" class="btn-signing-main">Get Started &gt;</a>
                </div>

            </div>
        </main>

        <spline-viewer data-aos="fade-left" data-aos-duration="2500" class="robot-3d" url="https://prod.spline.design/Fj6qAcllpdQil-yj/scene.splinecode"></spline-viewer>

    </div>


    <script type="module" src="https://unpkg.com/@splinetool/viewer@1.9.76/build/spline-viewer.js"></script>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>

</body>

</html>