3-D-bot-landing/index.html at main · Swayam42/3-D-bot-landing · 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
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Khandu's Studio</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

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

    <div class="container">
        <header>
            <h1 data-aos="fade-down" data-aos-duration="1500" class="logo">Khandu's Studio</h1>

            <nav>
                <a data-aos="fade-down" data-aos-duration="1500" href="#">COMPANY</a>
                <a data-aos="fade-down" data-aos-duration="2000" href="#">FEATURES</a>
                <a data-aos="fade-down" data-aos-duration="2500" href="#">RESOURCES</a>
                <a data-aos="fade-down" data-aos-duration="3000" href="#">DOCS</a>
            </nav>
            <button data-aos="fade-down" data-aos-duration="1500" class="btn-signing">Jio Ustaad</button>
        </header>
        <main>
        <div class="content">
            <div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0" data-aos-duration="1500" class="tag-box">
                <div class="tag">INTRODUCING</div>
            </div>
            <h1 data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0" data-aos-duration="2000">THE LEGEND<br>KHANDU DON</h1>
            <p data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0" data-aos-duration="2500" class="description">Discover the viral sensation of "Khandu Don," where a spirited young boy passionately sings and performs to the iconic music of the late Punjabi singer Sidhu Moose Wala.</p>
            <div data-aos="fade-zoom-in" data-aos-easing="ease-in-back" data-aos-delay="300" data-aos-offset="0" data-aos-duration="3000" class="buttons">
                <button class="btn-get-started" onclick="toggleSong()">
                    <i class="fas fa-play"></i> Play My Song
                </button>
                <a href="#" class="btn-signing-main">Buy My Course ></a>
            </div>
        </div>

        </main>

    </div>
    <footer>
        <div class="footer-content">
            <p class="last-line">Developed by <a class="swayam" href="https://swayamjethi.netlify.app" target="_blank">Swayam Jethi</a> – Crafting digital experiences with passion.</p>


        </div>
    </footer>
    <script type="module" src="https://unpkg.com/@splinetool/viewer@1.9.86/build/spline-viewer.js"></script>
    <spline-viewer class="robot-3d" url="https://prod.spline.design/9FD3w6rlIOvtiAPu/scene.splinecode"></spline-viewer>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>
    <audio id="botAudio" src="assets/khandu Don.mp3"></audio>
    <script>
        function toggleSong() {
            const audio = document.getElementById('botAudio');
            const button = document.querySelector('.btn-get-started');
            const icon = button.querySelector('i');

            if (audio.paused) {
                audio.play();
                icon.classList.remove('fa-play');
                icon.classList.add('fa-pause');
            } else {
                audio.pause();
                icon.classList.remove('fa-pause');
                icon.classList.add('fa-play');
            }
        }
    </script>
<audio id="intro-audio" autoplay>
    <source src="assets/boom.mp3" type="audio/mpeg" />
  </audio>

  <script>
   window.addEventListener("click", () => {
  const introAudio = document.getElementById("intro-audio");
  introAudio.play();
}, { once: true });

  </script>


</body>
</html>