index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=], initial-scale=1.0">
        <title>Spider-man: Miles Morales | PS5</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="preconnect" href="https://fonts.gstatic.com">
         <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@300;400&display=swap" rel="stylesheet">
        <script src="js/svg-inject.min.js"></script>
    </head>
    <body>

        <!-- ====== LOADING ======= -->
        <section class="bg-loader">
            <svg style="max-width: 144px;" width="55" height="77" viewBox="0 0 55 77" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path class="logo-spiderman" fill-rule="evenodd" clip-rule="evenodd" d="M30.4431 34.6386L30.703 34.1559C33.3391 35.6906 39.4431 39.3762 42.7698 41.8416C42.745 43.9208 42.5247 49.401 41.8416 54.6881C41.5322 57.3243 40.2599 63.8589 37.646 68.9084C39.1435 66.9158 42.4876 61.3713 43.8836 55.1337C44.3663 53.3639 45.4653 48.0495 46 40.9505C43.1534 39.3045 36.1683 35.5223 31 33.5619L31.3713 32.7822C35.1955 33.8342 44.1287 36.5025 49.2673 38.7599C49.1559 41.4332 48.495 48.4505 46.7426 55.1337C45.8371 58.5866 43.3416 67.4753 36.2723 76C36.3697 75.8994 36.4882 75.78 36.6273 75.6398C38.1308 74.1248 42.0302 70.1956 47.5223 61.6312C50.2698 56.5446 52.0891 50.6782 54.3911 36.7178C48.9703 34.9728 41.5817 33.0421 31.594 32.0025L31.8911 31.4084C35.6039 31.2104 44.2772 31.0743 49.2673 32.1139C49.8366 28.3144 49.6312 19.4975 45.146 14.6262C46.1361 17.3366 47.9827 24.0569 46.5569 29.255C42.9307 29.2302 34.9431 29.3812 32.0025 30.1832L31.5198 29.552C33.698 28.2525 38.6708 25.5421 41.1361 25.0965C41.1442 25.0372 41.1523 24.9774 41.1605 24.9172C41.8684 19.7099 42.9799 11.5342 35.4554 1C37.2747 4.75 40.2153 13.802 38.3143 23.2772L30.9257 28.6609L30.3688 27.8812L32.6336 25.5421C32.2252 24.8738 31.0074 23.3812 29.4035 22.7574C30.1708 23.6733 31.2079 25.698 29.2178 26.4703H26.2846C25.4307 26.2475 24.198 25.1931 26.099 22.7574C25.3193 23.1163 23.604 24.1757 22.9802 25.5421L24.6881 27.5842L24.3168 28.3267L17.1881 23.3144C16.3465 19.6881 15.6584 10.1559 19.6386 1.03713C19.3184 1.62679 19.0101 2.18895 18.7142 2.7287C14.6868 10.0738 12.9356 13.2677 14.1807 25.0965C15.5792 25.3936 19.3639 26.6856 23.3144 29.4777L23.0916 29.9604C19.7005 29.6386 12.0941 29.0619 8.79702 29.3292C8.22772 26.6807 7.70544 20.0322 10.1708 14.6262C6.27228 20.1213 5.49257 24.1312 6.16089 32.2252C8.9703 31.6807 16.2896 30.755 23.0916 31.4084L23.3144 32.0025C18.3144 32.6337 6.85148 34.4604 1 36.7178C1.16384 37.5953 1.32289 38.4557 1.47881 39.2991C2.91289 47.0566 4.0818 53.3797 6.27228 58.3639C9.98538 65.5044 13.156 69.1728 17.0129 73.6354C17.6683 74.3937 18.3435 75.1749 19.0446 76C13.0668 67.7203 6.87376 57.3243 6.16089 38.7599C10.0965 37.1881 19.1931 33.7921 24.0941 32.7822L24.4282 33.5619C20.4183 35.2574 11.7673 39.0941 9.5396 40.8762C9.56418 41.2066 9.58838 41.5383 9.61269 41.8715C10.1759 49.5913 10.7984 58.1239 17.5965 68.9084C15.4802 64.2673 13.0891 58.9802 12.5842 41.8416C15.5173 39.8738 22.0446 35.5817 24.6881 34.1559L24.9851 34.6386C23.6485 35.4926 20.5446 37.6386 18.8218 39.3911C18.7104 40.1089 18.5545 42.7847 18.8218 47.745C20.0965 50.0594 23.6559 55.0668 27.6955 56.5817C29.7624 55.7401 34.4084 52.7946 36.4579 47.745C36.6188 46.5569 36.9035 43.2376 36.7549 39.4653C35.5173 38.3391 32.5223 35.797 30.4431 34.6386ZM20.5 39.5L23.5 37L21.5 40C21.5 45.5 23.3216 49.0567 27.8 50.8C33.0938 47.745 34 45 34 40L32 37L35.2 39.8C35.2951 42.3648 35.4229 43.7895 34.7 46.5C33.5 49.5 31.5 51.5 27.7 53.8C24 51.5 23 50 20.7 46.5C20.3164 43.5132 20.1274 41.9879 20.5 39.5Z" fill="#EDF1F7" stroke="#EDF1F7" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </section>

        <!-- ====== HEADER ======= -->

        <header>
            <nav class="navbar">
                <div class="nav-menu">
                    <div class="logo">
                        <img src="svg/logo.svg" onload="SVGInject(this)" />
                    </div>
                    <ul class="nav-list">
                        <li><a href="" class="nav-link">HOME</a></li>
                        <li><a href="" class="nav-link">STORY</a></li>
                        <li><a href="" class="nav-link">WALLPAPERS</a></li>
                        <li><a href="" class="nav-link">#BEYOURSELF</a></li>
                    </ul>
                </div>
                <div class="nav-social">
                    <img src="svg/icon-facebook.svg" onload="SVGInject(this)" />
                    <img src="svg/icon-instagram.svg" onload="SVGInject(this)" />
                    <img src="svg/icon-youtube.svg" onload="SVGInject(this)" />
                    <img src="svg/icon-twitter.svg" onload="SVGInject(this)" />
                </div>
            </nav>
        </header>

        <!-- ====== BG VIDEO ======= -->
        <section class="bg-video">
            <video class="video" autoplay muted loop>
                <source src="video/spiderman2.mp4" type="video/mp4">
            </video>
        </section>

        <!-- ====== CONTAINER ======= -->

        <section class="container">
            <div class="container-item-1">
                <div class="px1 item-1">
                    <img src="img/spiderman-text.png" onload="SVGInject(this)" />
                </div>
                <div class="my-2 item-2">
                    <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
                    </p>
                </div>
                <div class="item-3">
                    <a href="" class="btn">Pre-order now</a>
                    <a href="" class="btn-secondary ml-2">Watch the teaser</a>
                </div>
                <div class="flex align-items-center mt-1 item-4">
                    <img src="svg/ps.svg" class="w-auto" onload="SVGInject(this)" />
                    <img src="svg/marvel.svg" class="w-auto ml-2" onload="SVGInject(this)" />
                </div>
            </div>

            <div class="container-item-2 item-5">
                <div class="js-tilt">
                    <img src="img/spider-man.png" class="spiderman2" onload="SVGInject(this)" />
                </div>
            </div>
        </section>


         <!-- ====== JS ======= -->
        <script src="js/app.js"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js" integrity="sha512-DkPsH9LzNzZaZjCszwKrooKwgjArJDiEjA5tTgr3YX4E6TYv93ICS8T41yFHJnnSmGpnf0Mvb5NhScYbwvhn2w==" crossorigin="anonymous"></script>

        <script>
            $('.js-tilt').tilt({
                perspective: 2000,
                scale: 1.05,
            });
        </script> 
    </body>
</html>