index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Silicon Maze - The Triwizard Tournament">
    <meta name="keywords" content="Silicon Maze, Contest, Nation-Wide, NITK Surathkal, Prizes">

    <meta property="og:title" content="Silicon Maze" />
    <meta property="og:description" content="Silicon Maze - The Triwizard Tournament" />
    <meta property="og:image" content="https://raw.githubusercontent.com/Silicon-Maze/silicon-maze.github.io/master/img/LOGO.jpg" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://silicon-maze.github.io/2020/" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="https://silicon-maze.github.io/2020/">
    <meta name="twitter:title" content="Silicon Maze">
    <meta name="twitter:description" content="Silicon Maze - The Triwizard Tournament">
    <meta name="twitter:image:src" content="/img/LOGO.jpg">

    <!-- Title -->
    <title>Silicon Maze | The Triwizard Tournament</title>

    <!-- Favicon -->
    <link rel="icon" href="favicon.ico">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css">

    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "Event",
            "name": "Silicon Maze",
            "email": "siliconmaze@gmail.com",
            "image": "https://raw.githubusercontent.com/Silicon-Maze/silicon-maze.github.io/master/img/LOGO.jpg",
            "url": "https://silicon-maze.github.io/",
            "description": "Silicon Maze - The Triwizard Tournament",
            "startDate": "25/01/2020 08:00AM",
            "endDate": "26/01/2020 09:00PM",
            }
        }
    </script>
</head>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-167549289-2"></script>
<script>
   document.cookie="MAZ3{iamTheFlagOrDataYouAreLookingFor}";
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-167549289-2');
</script>


<body>

    <!-- Header Area Start -->
    <header class="header-area">
        <div class="classy-nav-container breakpoint-off">
            <div class="container">
                <!-- Classy Menu -->
                <nav class="classy-navbar justify-content-between" id="MAZ3{iamWhatYouAreLookingFor}">

                    <!-- Logo -->
                    <a class="nav-brand" href=""><img style="height: auto;width: auto;max-height: 72px;max-width: 250px;" src="img/Logo.png"></a>

                    <!-- Navbar Toggler -->
                    <div class="classy-navbar-toggler">
                        <span class="navbarToggler"><span></span><span></span><span></span></span>
                    </div>

                    <!-- Menu -->
                    <div class="classy-menu">
                        <!-- Menu Close Button -->
                        <div class="classycloseIcon">
                            <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                        </div>
                        <!-- Nav Start -->
                        <div class="classynav">
                            <ul class="ml-auto" id="nav">
                                <li><a href="#about">About</a></li>
                                <li><a href="#tracks">Categories</a></li>
                                <li><a href="#faq">FAQ</a></li>
                                <li><a href="https://docs.google.com/forms/d/e/1FAIpQLSfWZoXbF76p-fW9iJIbx1eqUiMea8Yt6QqDPnAhWGiWXCCY-g/viewform?usp=sf_link">Contact</a></li>
                            </ul>
                        </div>
                        <!-- Nav End -->
                    </div>
                </nav>
            </div>
        </div>
    </header>
    <!-- Header Area End -->

    <!-- Welcome Area Start -->
    <section class="hero">
        <div class="header-text">
            <h1>
              <span class="head-main">Silicon Maze</span>
              <span class="head-sub">The triwizard tournament</span>
            </h1>
            <h2 class="event-date">July 25-26 2020</h2>
<!--             <a href="https://p.hck.re/ABCz" class="btn btn-white btn-anim">Register</a> -->
          </div>
    </section>
    <!-- Welcome Area End -->

    <!-- About Us And Countdown Area Start -->
    <section class="about-us-countdown-area section-padding-100-0" id="about">
        <div class="container">
            <div class="row align-items-center">
                <!-- About Content -->
                <div class="col-12 col-md-6 order-2 order-lg-1">
                    <div class="about-content-text mb-80">
                        <!-- <h6 class="wow fadeInUp" data-wow-delay="300ms">About</h6> -->
                        <h3 class="wow fadeInUp" data-wow-delay="300ms" >Silicon Maze</h3>
                        <p class="wow fadeInUp poem" data-wow-delay="300ms"  style="font-family: 'bouwsunc'; font-weight: 700; font-size: 15px;letter-spacing: 2.5px;"><i>A day long you will have to strive,<br>
                            Amidst the travails of time must you thrive,<br>
                            Lay claim to the reward when in reach,<br>
                            But past a day- the prospect is black,<br>
                            Too late, it is gone, it won't come back.</i>
                        </p>
                            <p class="wow fadeInUp" data-wow-delay="300ms">
                            Silicon Maze is a contest that will test your mettle. A platform to showcase your skills, ideas and potential. It is a 24-hour long contest with challenging tasks where you will be pushed to your limits. This will be a great opportunity to present your unique ideas and provide interesting solutions with your out of the box thinking. 
                            </p>
                    </div>
                </div>

                <!-- About Thumb -->
                <div class="col-12 px-5 m-0 p-md-0 col-md-6 order-1 order-lg-2">
                    <div class="about-thumb mb-80 wow fadeInUp" data-wow-delay="300ms">
                        <img src="img/LOGO.jpg" alt="silicon maze Logo">
                    </div>
                </div>
            </div>

            <!-- Prizes section -->
            
        <section class="container" id="tracks">
            <div class="row">
                <div class="col-12 col-md-12">
                    <div class="about-content-text mb-80">
                        <h3 class="text-center wow fadeInUp" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">Categories</h3>
                    </div>
                </div>
            </div>
            <div class="row align-items-center">
                <!-- About Content -->
                <div class="col-12 col-md-6 order-2 order-lg-1">
                    <div class="about-content-text mb-80">
                        <h4 class="wow fadeInUp" data-wow-delay="300ms">Algorithms</h4>
                        <p class="wow fadeInUp" data-wow-delay="300ms"><i>Designed to test your daring. Courage in the face of the unknown is an important quality of any coder.</i></p>
                    </div>
                </div>

                <!-- About Thumb -->
                <div class="col-6 col-md-6 order-1 order-lg-2 d-flex justify-content-center">
                    <div class="about-thumb mb-80 wow fadeInUp" data-wow-delay="300ms">
                        <img src="img/tracks/algorithm.png" alt="Algorithms">
                    </div>
                </div>
            </div>

            <div class="row align-items-center">
                <!-- About Thumb -->
                <div class="col-6 col-md-6 order-1 order-lg-1 d-flex justify-content-center">
                    <div class="about-thumb mb-80 wow fadeInUp" data-wow-delay="300ms">
                        <img src="img/tracks/ml.svg" alt="AI - ML" style="float:right">
                    </div>
                </div>

                <!-- About Content -->
                <div class="col-12 col-md-6 order-2 order-lg-2">
                    <div class="about-content-text mb-80">
                        <h4 class="wow fadeInUp" data-wow-delay="300ms">ML</h4>
                        <p class="wow fadeInUp" data-wow-delay="300ms"><i>Find your own way to labour against the challenge. Only the most precise, most creative and the fastest will rise to the top.</i></p>
                    </div>
                </div>
            </div>

            <div class="row align-items-center">
                <!-- About Content -->
                <div class="col-12 col-md-6 order-2 order-lg-1">
                    <div class="about-content-text mb-80">
                        <h4 class="wow fadeInUp" data-wow-delay="300ms">Capture The Flag</h4>
                            <p class="wow fadeInUp" data-wow-delay="300ms"><i>Oh, attack with vigour, if you can, but be careful. You might just lose your own fort along the way.</i></p>
                    </div>
                </div>

                <!-- About Thumb -->
                <div class="col-12 col-md-6 order-1 order-lg-2">
                    <div class="about-thumb mb-80 p-4 wow fadeInUp d-flex justify-content-center" data-wow-delay="300ms">
                        <img class="ctf-img" src="img/tracks/ctf.svg" alt="Capture the Flag">
                    </div>
                </div>
            </div>

            <div class="row align-items-center">
                <!-- About Thumb -->
                <div class="col-6 col-md-6 order-1 order-lg-1 d-flex justify-content-center">
                    <div class="about-thumb mb-80 wow p-4 fadeInUp" data-wow-delay="300ms">
                        <img class="dev-img" src="img/tracks/dev.svg" alt="web Dev" style="float:right;">
                    </div>
                </div>

                <!-- About Content -->
                <div class="col-12 col-md-6 order-2 order-lg-2">
                    <div class="about-content-text mb-80">
                        <h4 class="wow fadeInUp" data-wow-delay="300ms">Web Dev</h4>
                        <p class="wow fadeInUp" data-wow-delay="300ms"><i>
                            Design your way through, but you have to build well and build fast because the clock is always ticking.
                        </i></p>
                    </div>
                </div>
            </div>
        </section>
        <section class="our-ticket-pricing-table-area bg-img bg-gradient-overlay section-padding-100-0 jarallax">
            <div class="container">
                <div class="row">
                    <div class="col-12 col-md-12">
                        <div class="about-content-text mb-80">
                            <h3 class="text-center wow fadeInUp" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">Prizes</h3>
                        </div>
                    </div>
                </div>
                <div class="row d-flex justify-content-center">
                    <div class="col-12 col-lg-5">
                        <div class="single-ticket-pricing-table text-center mb-100 wow fadeInUp" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">
                            <div class="ticket-icon">
                                <img src="img/core-img/Gold_Cup.png" alt="">
                            </div>
                            <h4 class="ticket-price">Prizes worth &#8377;3000 </h2>
                        </div>
                    </div>
                    <!-- <div class="col-12 col-lg-4">
                        <div class="single-ticket-pricing-table text-center mb-100 wow fadeInUp" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">
                            <h6 class="ticket-plan" style="background-color: #C0C0C0 !important">2nd Prize</h6>
                            <div class="ticket-icon">
                                <img src="img/core-img/Silver_Cup.png" alt="">
                            </div>
                            <h2 class="ticket-price">coming soon ..</h2>
                        </div>
                    </div>
                    <div class="col-12 col-lg-4">
                        <div class="single-ticket-pricing-table text-center mb-100 wow fadeInUp" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">
                            <h6 class="ticket-plan" style="background-color: #CD7F32 !important">3rd Prize</h6>
                            <div class="ticket-icon">
                                <img src="img/core-img/Bronze_Cup.png" alt="">
                            </div>
                            <h2 class="ticket-price">coming soon ..</h2>
                        </div>
                    </div> -->
                    <!-- <span>₹</span>60,000 -->
                </div>
            </div>
        </section>


            <!-- Counter Up Area -->
            <div class="countdown-up-area">
                <div class="container">
                    <div class="row">
                        <div class="col-12 col-md-12">
                            <div class="about-content-text mb-80">
                                <h3 class="text-center wow fadeInUp" data-wow-delay="300ms" style="visibility: visible; animation-delay: 300ms; animation-name: fadeInUp;">Countdown</h3>
                            </div>
                        </div>
                    </div>
                    <div class="row align-items-center">
                      

                        <div class="col-12">
                            <div class="countdown-timer mb-100 wow fadeInUp" data-wow-delay="300ms">
                                <div id="clock"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </section>

    <section id="faq">
        <div class="container">
            <div class="section-header">
                <h2>FAQs </h2>
                <br />
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <ul id="faq-list">
                        <li>
                            <a data-toggle="collapse" class="collapsed" href="#faq1">If I don't know a lot about a field, how will I attempt it?<i class="fa fa-minus-circle"></i></a>
                            <div id="faq1" class="collapse" data-parent="#faq-list">
                                <p>There will be apt resources for you to understand and then attempt</p>
                            </div>
                        </li>

                        <li>
                            <a data-toggle="collapse" class="collapsed" href="#faq2">Will there be any penalty on wrong submissions?<i class="fa fa-minus-circle"></i></a>
                            <div id="faq2" class="collapse" data-parent="#faq-list">
                                <p>Each problem shall have clarifications about the same</p>
                            </div>
                        </li>

                    </ul>
                </div>

                <div class="col-lg-6">
                    <ul id="faq2-list">
                        <li>
                            <a data-toggle="collapse" href="#faq3" class="collapsed">How many people can be on a team?<i class="fa fa-minus-circle"></i></a>
                            <div id="faq3" class="collapse" data-parent="#faq-list">
                                <p>Up to 3 people</p>
                            </div>
                        </li>

                        <li>
                            <a data-toggle="collapse" href="#faq4" class="collapsed">How long will the contest last?<i class="fa fa-minus-circle"></i></a>
                            <div id="faq4" class="collapse" data-parent="#faq-list">
                                <p>24 hours</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

    </section>

    <!-- Footer Area Start -->
    <footer id="footer" class="footer-area bg-img bg-overlay-2 section-padding-100-0">
        <div class="main-footer-area">
            <div class="container">
                <div class="row">
                    <!-- Single Footer Widget Area -->
                    <div class="col-12 col-sm-6 col-lg-6">
                        <div class="single-footer-widget mb-60 wow fadeInUp" data-wow-delay="300ms">
                            <!-- Footer Logo -->
                            <a href="#" class="footer-logo"><img style="height: auto;width: auto;max-height: 72px;max-width: 200px;" src="img/Logo.png" alt="Silicon Maze"></a>
                            <p>The Triwizard Tournament</p>
                        </div>
                    </div>

                    <!-- Single Footer Widget Area -->
                    <div class="col-12 col-sm-6 col-lg-6">
                        <div class="single-footer-widget mb-60 wow fadeInUp" data-wow-delay="300ms">
                            <!-- Widget Title -->
                            <a href="https://docs.google.com/forms/d/e/1FAIpQLSfWZoXbF76p-fW9iJIbx1eqUiMea8Yt6QqDPnAhWGiWXCCY-g/viewform?usp=sf_link"><h5 class="widget-title">Contact</h5></a>

                            <!-- Contact Area -->
                            <div class="footer-contact-info">
                                <p><i class="zmdi zmdi-pin"></i><a style="color:#9293bc" href="https://goo.gl/maps/86DJCMqtYdhVFNgA8" target="_blank">National Institute of Technology Karnataka, Surathkal</a></p>
                                <p><i class="zmdi zmdi-email"></i><a style="color:#9293bc" href="mailto:siliconmaze@gmail.com" target="_blank">siliconmaze@gmail.com</a></p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="copywrite-content">
                <div class="row">
                    <!-- Copywrite Text -->
                    <div class="col-12 col-md-6">
                        <div class="copywrite-text">
                            <p>
                                <!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
                                Copyright ©
                                <script>
                                    document.write(new Date().getFullYear());
                                </script> All rights reserved | Made with <i class="fa fa-heart-o" aria-hidden="true"></i> by WEC NITK,  IEEE NITK, HackVerse</a> &amp; <a href="https://colorlib.com" target="_blank">Colorlib</a>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </footer>

    <!-- Footer Area End -->

    <!-- **** All JS Files ***** -->
    <!-- jQuery 2.2.4 -->
    <script src="js/jquery.min.js"></script>
    <!-- Popper -->
    <script src="js/popper.min.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.min.js"></script>
    <!-- All Plugins -->
    <script src="js/confer.bundle.js"></script>
    <!-- Active -->
    <script src="js/default-assets/active.js"></script>
    <script src="https://use.fontawesome.com/940386bfc9.js"></script>
    <script>
        var mobile = document.getElementById('mobile');
        var desktop = document.getElementById('desktop');
        var mobile_logo = document.getElementById('logo-mob');
        var desktop_logo = document.getElementById('logo-pc');


        if (mobile != null) {
            mobile.style.display = "none";
        }

        if (mobile_logo != null) {
            mobile_logo.onclick = function() {
                window.location.href = "https://nitk.ac.in"
            }
            mobile_logo.style.display = "none";
        }

        if (desktop_logo != null) {
            desktop_logo.onclick = function() {
                window.location.href = "https://nitk.ac.in"
            }
        }

        function img_width(sponsor_div, width_val) {
            if (sponsor_div != null) {
                sponsor_div.getElementsByTagName('img')[0].style.width = width_val
            }
        }

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Tablet|Opera Mini/i.test(navigator.userAgent)) {

            var wf_sponsor = document.getElementById('wells-fargo')
            img_width(wf_sponsor, "auto")

            var monster_sponsor = document.getElementById('monster')
            img_width(monster_sponsor, "auto")

            var dev_sponsor = document.getElementById('dev')
            img_width(dev_sponsor, "auto")

            var jet_sponsor = document.getElementById('jet-brains')
            img_width(jet_sponsor, "auto")

            var sticker_sponsor = document.getElementById('sticker-you')
            img_width(sticker_sponsor, "auto")

            var memsis_sponsor = document.getElementById('memsis')
            img_width(memsis_sponsor, "auto")

            var zebronics_sponsor = document.getElementById('zebronics')
            img_width(zebronics_sponsor, "auto")

            if (mobile != null) {
                mobile.style.display = "block";
                mobile.style.fontSize = ""
            }

            if (desktop != null) {
                desktop.style.display = "none";
            }

            if (mobile_logo != null) {
                mobile_logo.style.display = "block";
            }

            if (desktop_logo != null) {
                desktop_logo.style.display = "none";
            }

            var about = document.getElementById('about');
            if (about != null) {
                var about_sections = [...about.getElementsByClassName('row align-items-center')];
                about_sections.map((section) => {
                    section.style.display = "flex";
                    section.style.justifyContent = "center";

                    var h3_tag = section.querySelector('h3.wow.fadeInUp');
                    if (h3_tag != null) {
                        h3_tag.style.display = "flex";
                        h3_tag.style.justifyContent = "center";
                    }
                    var content = section.querySelector('p.wow.fadeInUp');
                    if (content != null) {
                        content.style.textAlign = "center";
                    }
                });

            }
        }
    </script>
</body>

</html>