<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>Dfinity Space Apes</title>
    <link rel="icon" type="image/x-icon" href="./assets/img/dlogo.png" />
    <!-- Font Awesome icons (free version)-->
    <script src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" crossorigin="anonymous"></script>
    <!-- Google fonts-->
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" />
    <link
        href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
        rel="stylesheet" />
    <!-- Core theme CSS (includes Bootstrap)-->
    <link href="css/styles.css" rel="stylesheet" />
    <link rel="html" href="./footprint.html">
    <link rel="stylesheet" href="./mining.html">
    <!--auto compiled css & Js-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js">

    </script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
    </script>
    <link rel="stylesheet" type="text/css"
        href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- JavaScript for adding
slider for multiple images
shown at once-->
    <script type="text/javascript">
        $(window).load(function () {
            $(".carousel .item").each(function () {
                var i = $(this).next();
                i.length || (i = $(this).siblings(":first")),
                    i.children(":first-child").clone().appendTo($(this));

                for (var n = 0; n < 4; n++)(i = i.next()).length ||
                    (i = $(this).siblings(":first")),
                    i.children(":first-child").clone().appendTo($(this))
            })
        });
    </script>

</head>

<body id="page-top">
    <!-- Navigation-->
    <nav class="navbarnew">
        <div class="mob">
            <a href="#main" ><img src="./assets/img/dlogo.png" class="primary-icon" alt=""></a>
        </div>
        <ul class="navnew-list" id="navi-list">
            <li class="list-item">
                <a href="#story">Story</a>
            </li>
            <li class="list-item">
                <a href="#roadmap">Roadmap</a>
            </li>
            <li class="list-item">
                <a href="#team">Team</a>
            </li>
            <li class="list-item">
                <a href="footprint.html">FootPrint</a>
            </li>
            <li class="list-item">
                <a href="mining.html">Apesteroid Mining</a>
            </li>
            <li class="list-item" id="twitter">
                <a href="https://twitter.com/ApesDfinity" target="_blank">
                    <i class="fab fa-twitter" id="twitter"></i> Twitter
                </a>
            </li>
            <li class="list-item" id="discord">
                <a href="https://discord.com/invite/apesdfinity" target="_blank">
                    <i class="fab fa-discord" id="discord"></i> Discord</a>
            </li>
        </ul>
        <div class="menu" id="toggle-button">
            <div class="menu-line"></div>
            <div class="menu-line"></div>
            <div class="menu-line"></div>
        </div>
    </nav>
    <!-- Masthead-->
    <header class="masthead" id="main">
        <div class="
          container
          px-4 px-lg-5
          d-flex
          h-100
          align-items-center
          justify-content-center
        ">
            <div class="d-flex justify-content-center">
                <div class="text-center">



                    </a>
                </div>
            </div>
        </div>
    </header>
    <!-- About-->
    <section class="about-section text-center" id="story">
        <div class="carousel slide" id="myCarousel" data-interval="1500" data-ride="carousel">
            <div class="carousel-inner">
                <div class="item active">
                    <div class="col-xs-2">

                        <img src="./assets/img/green.png" class="img-responsive"
                            style="height: 15vw;border-radius: 15px;">

                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">

                        <img src="./assets/img/fire.png" class="img-responsive"
                            style="height: 15vw;;border-radius: 15px;">

                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">

                        <img src="./assets/img/sculpture.png" class="img-responsive"
                            style="height: 15vw;;border-radius: 15px;">

                    </div>
                </div>
               
                <div class="item">
                    <div class="col-xs-2">

                        <img src="./assets/img/Einstein.png" class="img-responsive"
                            style="height: 15vw;;border-radius: 15px;">

                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">

                        <img src="./assets/img/dfinity.png" class="img-responsive"
                            style="height: 15vw;;border-radius: 15px;">

                    </div>
                </div>
                <div class="item">
                    <div class="col-xs-2">

                        <img src="./assets/img/devil.png" class="img-responsive"
                            style="height: 15vw;;border-radius: 15px;">

                    </div>
                </div>
            </div>

        </div>
    </section>
    <section class="about-section text-center" id="about" style="background-color:black;">
        <div class="container px-4 px-lg-5">
            <div class="row gx-4 gx-lg-5 justify-content-center">
                <div class="col-lg-8">
                    <h2 class="text-white mb-4" id="headd">Dfinity Space Apes Collection</h2>
                    <p class="text-white-50" id="p1">

                    </p>
                    <p class="text-white-50"> </p>
                </div>
                <div id="back1">
                    <p class="text-white-50" id="p1">
                        10,000 Dfinity Space Apes came together to explore new things in the universe and started traveling from planet to planet. Their purpose is to take the newly discovered mines in the universe to their own planets. The last stop of this journey was earth. But there is a problem. Their spacecraft broke down and they are collecting parts for the repair of spacecraft by spreading all over the world. Our holders will gather all the Space Apes in the Footprint tab and then they will be ready to return to their planet. At the same time, in the process of returning to their planets, they will want to mine precious metals from the planets they will travel on this journey. In this process, our holders will also be rewarded by playing our P2E game from the Apesteroid Mining tab, helping them to mine.
                    </p>
                    <hr style="color: #FF0000;">
                </div>
    </section>
    <!-- Projects-->
    <section class="about-section text-center" id="about" style="background-color:black;">
        <div class="container">
            <div class="wrapper">
                <h1 style="color: #FF0000;margin-bottom: 4vw;" id="roadmap"> Roadmap</h1>
                <ul class="sessions">
                    <li class="lil">
                        <div class="time" style="color: #FF6101;" id="dates">Apollo 1</div>
                        <h4 style="color: #FF0000;" id="spaces"> <s> Space Apes belong to the decentralized world just
                                like infinite
                                space. Website on Internet Computer will be launched</s></h4>
                    </li>
                    <li class="lil">
                        <div class="time" style="color: #FF6101;" id="dates">Apollo 2 (5th January 2022)</div>
                        <h4 style="color: #FF0000;" id="spaces"><s>Dfinity Space Apes will be ready to launch. Take your
                            seats and we
                            will go to space all together! </s> </h4>
                    </li>
                    <li class="lil">
                        <div class="time" style="color: #FF6101;" id="dates">Apollo 3</div>
                        <h4 style="color: #FF0000;" id="spaces">Just after the launch, the <b>Footprint </b> section on
                            the website that only holders can access will open. Holders will have a chance to leave a
                            footprint in the Dfinity Galaxy. It will be a platform that will carry the NFTs you have in a virtual world to real life and then move it back to digital life. The footprints left by all holders will be brought together and placed in this virtual world. </h4>
                    </li>
                    <li class="lil">
                        <div class="time" style="color: #FF6101;" id="dates">Apollo 4</div>
                        <h4 style="color: #FF0000;" id="spaces">There are total of 10 different galaxies in the background of Dfinity Space Apes NFTs. Each galaxy has unique planets inhabited by Space Apes. We will airdrop these planets to our holders who hold 3 Dfinity Space Apes with the same galaxy background. Therefore, planet collection will form a universe with low collection size. These planets will be used in our Apesteroid Mining as a part of whole metaverse. You will be able to play the unique map with your planets. </h4>
                    </li>
                    <li class="lil">
                        <div class="time" style="color: #FF6101;" id="dates">Apollo 5</div>
                        <div></div>
                        <h4 style="color: #FF0000;" id="spaces">Releasing Apesteroid Mining (our P2E Game) that people who have at least 1 Space Ape and Planet in their wallet can participate. Holders will be able to play the game with different maps with respect to Planet they have in the wallet. There will be tokenization system in our game that every holder will earn while playing the game.</h4>
                    </li>

                </ul>
            </div>
            <hr style="color: #FF0000;">
        </div>

    </section>
    <!-- Signup-->

    <!-- Contact-->
    <section class="contact-section bg-black" id="team">
        <h1 style="font-size: 4vw;text-align: center;color: #FF00FF; margin-bottom: 4vw; margin-left: 0%;">Team</h1>
        <div class="container px-4 px-lg-5" style="align-items: center;">
            <div class="row gx-4 gx-lg-5">
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="card py-4 h-100" style="background-color: black;">
                        <div class="card-body text-center" style="">
                            <img src="./assets/img/astro.jpg" alt=""
                                style="height: 15vw; width: 15vw; border-radius: 50%;margin-bottom: 1rem;">
                            <h3 class="text-uppercase m-0" style="color:#FF00FF ;font-size: 2.2rem">Astro Ape</h3>

                            <h3 style="color: #1DFF1A; font-size: 2rem;"><i>Founder, Marketing & Development </i> <br><br>
                                Specially focuses on Web3 Development on the Internet Computer
                               </h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="card py-4 h-100" style="background-color: black;">
                        <div class="card-body text-center" style="">
                            <img src="./assets/img/sevenart.jpg" alt=""
                                style="height: 15vw; width: 15vw; border-radius: 50%;margin-bottom: 1rem;">
                            <h3 class="text-uppercase m-0" style="color:#FF00FF ;font-size: 2.2rem;">Sevenart</h3>

                            <h3 style="color: #1DFF1A; font-size: 2rem;"> <i>Artist</i> <br><br><br>
                                Specially focuses on Space Apes and their metaverse
                                </h3>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-3 mb-md-0">
                    <div class="card py-4 h-100" style="background-color: black;">
                        <div class="card-body text-center" style="">
                            <img src="./assets/img/tristam.jpg" alt=""
                                style="height: 15vw; width: 15vw; border-radius: 50%;margin-bottom: 1rem;">
                            <h3 class="text-uppercase m-0" style="color:#FF00FF ;font-size: 2.2rem">Tristam</h3>

                            <h3 style="color: #1DFF1A; font-size: 2rem;"><i>Blockchain Expert & Game Developer </i> <br><br>
                                Specially focuses on Apesteroid Mining</h3>
                        </div>
                    </div>
                </div>
            </div>
            <div class="social d-flex justify-content-center">
                <li class="list-item" >
                    <a href="https://twitter.com/ApesDfinity" target="_blank">
                        <i class="fab fa-twitter" id="twitter"></i> Twitter
                    </a>
                </li>
                <li class="list-item">
                    <a href="https://discord.com/invite/apesdfinity" target="_blank">
                        <i class="fab fa-discord" id="discord"></i> Discord</a>
                </li>
                
            </div>
        </div>
    </section>
    <!-- Footer-->
    <footer class="footer bg-black small text-center text-white-50">
        <div class="container px-4 px-lg-5">Copyright &copy; Dfinity Space Apes 2021</div>
    </footer>
    <!-- Bootstrap core JS-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Core theme JS-->
    <script src="js/scripts.js"></script>
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
    <!-- * *                               SB Forms JS                               * *-->
    <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
    <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
    <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
</body>


</html>