index.html

<!DOCTYPE html>
<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">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" media="screen" href="https://fontlibrary.org//face/butler" type="text/css" />
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="about.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <title>Eclipse</title>

</head>

<body style="background-color: black;">

  <section class="main">
    <img src="https://acm-thapar.github.io/Eclipse-v2/images/bg.jpeg" alt="" class="backimg">
    <img src="https://acm-thapar.github.io/Eclipse-v2/images/bg.jpeg" alt="backimg" class="backimg">
    <div class="container">
      <div class="eclipse-logo"><img src="images/eclipselogo.png"></div>


      <!-- Loader -->
      <div class="loader-wrapper">
        <div class="spinner-box">
          <div class="blue-orbit leo">
          </div>

          <div class="green-orbit leo">
          </div>

          <div class="red-orbit leo">
          </div>

          <div class="white-orbit w1 leo">
          </div>
          <div class="white-orbit w2 leo">
          </div>
          <div class="white-orbit w3 leo">
          </div>
        </div>

      </div>

      <!-- Loader -->


      <!----Heading---->
      <div class="image-overlay">
        <h1 class="ecli">ECLI</h1>
        <h1 class="pse">PSE</h1>
      </div>
      <!----Heading---->


      <!----stairs---->
      <div class="image--overlay">
        <img class="stairs" src="https://acm-thapar.github.io/Eclipse-v2/images/stairs.png" alt="">
      </div>
      <!----stairs---->


      <!----about---->
      <div data-aos="fade-right" class="image-overlay1">
        <h1 class="about">About</h1>
        <p class="details">Thapar ACM Student Chapter presents to you Eclipse, a 3-day long flagship event to be held
          from 25th to 27th February. It incorporates three headlining events - Flamingo, Enigma, and Hacklipse. All
          events are designed to cater to the art of thinking and implementing by disintegrating the problem into
          smaller chunks and then using your logic-based creativity to solve it from different angles.</p>
      </div>
      <!----about---->

      <!----logo---->
      <div class="image-overlay2">
        <img data-aos="fade-left" class="logo" src="./images/logo.png" alt="">
      </div>
      <!----logo---->


      <!----eventdetails---->
      <div data-aos="fade-right" class="image-overlay3">
        <h1 class="EventDetails">Event</h1>
        <h1 class="EventDetails">Details</h1>
      </div>
      <!----eventdetails---->

      <!------------------------------------------------------------------------set1---------------------------------------------------------------------->

      <!----image1---->

      <div data-aos="zoom-in" class="image-overlay4">
        <div>
          <img src="./images/frame1.png" alt="" class="frame1">

        </div>
      </div>

      <div data-aos="zoom-in" class="image-overlay5">
        <div>
          <img src="./images/Framepc.png" alt="" class="framepc">
        </div>
      </div>
      <!----image1---->
      <!----time---->
      <div data-aos="zoom-in-left" class="image-overlay6">
        <div>
          <img src="./images/rectframe.png" alt="" class="frame2">

        </div>
      </div>

      <div data-aos="zoom-in-left" class="image-overlay7">
        <div>
          <h1 class="time">6:00-9:00</h1>
          <p class="date">27th Feb 2024</p>
        </div>
      </div>
      <!----time---->

      <!----image2---->
      <div data-aos="zoom-in" class="image-overlay8">
        <div>
          <img src="./images/frame1.png" alt="" class="frame3">

        </div>
      </div>

      <div data-aos="zoom-in" class="image-overlay9">
        <div class="main-img-div">
          <img src="./images/flamingo2.png" alt="" class="codepic">
        </div>
      </div>
      <!----image2---->

      <!----image3---->
      <div data-aos="zoom-in" class="image-overlay10">
        <div>
          <img src="./images/frame1.png" alt="" class="frame4">

        </div>
      </div>

      <div class="image-overlay11">
        <div>
          <img data-aos="zoom-in" src="./images/Frameboy.png" alt="" class="frameboy">
        </div>
      </div>
      <!----image3---->
      <!------------------------------------------------------------------------set1---------------------------------------------------------------------->


      <!------------------------------------------------------------------------set2---------------------------------------------------------------------->
      <!----image4---->
      <div data-aos="zoom-in" class="image-overlay12">
        <div>
          <img src="./images/frame1.png" alt="" class="frame5">

        </div>
      </div>

      <div data-aos="zoom-in" class="image-overlay13">
        <div>
          <img src="./images/code.png" alt="" class="codepic1">
        </div>
      </div>
      <!----image4---->

      <!----image5---->
      <div data-aos="zoom-in" class="image-overlay14">
        <div>
          <img src="./images/frame1.png" alt="" class="frame6">

        </div>
      </div>

      <div data-aos="zoom-in" class="image-overlay15">
        <div>
          <img src="./images/Frameboy.png" alt="" class="frameboy1">
        </div>
      </div>
      <!----image5---->

      <!----image6---->
      <div data-aos="zoom-in" class="image-overlay16">
        <div>
          <img src="./images/frame1.png" alt="" class="frame7">

        </div>
      </div>

      <div data-aos="zoom-in" class="image-overlay17">
        <div>
          <img src="./images/Framepc.png" alt="" class="framepc1">
        </div>
      </div>
      <!----image6---->
      <!------------------------------------------------------------------------set2---------------------------------------------------------------------->


      <!------------------------------------------------------------------------set3---------------------------------------------------------------------->
      <!----image7---->
      <div data-aos="zoom-in" class="image-overlay18">
        <div>
          <img src="./images/frame1.png" alt="" class="frame8">

        </div>
      </div>
      <div data-aos="zoom-in" class="image-overlay19">
        <div>
          <img src="./images/Framepc.png" alt="" class="framepc2">
        </div>
      </div>
      <!----image7---->

      <!----image8---->
      <div data-aos="zoom-in" class="image-overlay20">
        <div>
          <img src="./images/frame1.png" alt="" class="frame9">

        </div>
      </div>

      <div data-aos="zoom-in" class="image-overlay21">
        <div>
          <img src="./images/code.png" alt="" class="codepic2">
        </div>
      </div>
      <!----image8---->

      <!----image9---->
      <div data-aos="zoom-in" class="image-overlay22">
        <div>
          <img src="./images/frame1.png" alt="" class="frame10">

        </div>
      </div>

      <div data-aos="zoom-in" class="image-overlay23">
        <div>
          <img src="./images/Frameboy.png" alt="" class="frameboy2">
        </div>
      </div>
      <!----image9---->

      <!------------------------------------------------------------------------set3---------------------------------------------------------------------->

      <!----Events---->
      <div data-aos="flip-left" data-aos-offset="400" class="image-overlay24">
        <h1 class="event1">Flamingo</h1>
        <p class="event1details">Flamingo is a designing event wherein the participants would be given a case study, and
          they'll be required to make a brand for the same. The event is organized to challenge the problem-solving
          capability of an individual and, in the end, form the most holistic approach towards the problem in a
          time-sensitive environment.</p>
        <a href="https://forms.gle/7bzweAqVB3NhHs7b7">
          <div class="button button-1"><a href="https://forms.gle/7bzweAqVB3NhHs7b7" target="_blank">Register</a></div>
        </a>
      </div>

      <div data-aos="flip-right" data-aos-offset="400" class="image-overlay25">
        <h1 class="event2">Hacklipse</h1>
        <p class="event2details">Hacklipse is an open for all 24-hour virtual hackathon, to be held on 26 February 2024.
          Upskill your coding skills and brainstorm ideas to develop innovative solutions for the case studies provided.
          Whether you are a novice or have prior experience, we expect many to show up to this enthralling event set in
          the backdrop of a thrilling science fiction tale hundreds of years into the future!</p>
        <div class="button button-2"><a href="https://forms.gle/7bzweAqVB3NhHs7b7" target="_blank">Register</a></div>
        <div class="apply-button" data-hackathon-slug="hacklipse2" data-button-theme="light"
          style="height: 44px; width: 312px"></div>

      </div>

      <div data-aos="flip-left" data-aos-offset="400" class="image-overlay26">
        <h1 class="event3">Enigma</h1>
        <!-- <h1 class="event3"> Round)</h1> -->
        <p class="event3details">Enigma is a competitive programming open event for college students. Enigma will
          provide you an opportunity to measure and hone ones' capabilities and provide a platform to compare oneself to
          programmers worldwide. Join in for a riveting ride that will test your ability to perform under pressure and
          put ideas into action to create innovative and effective solutions.</p>
        <a href="https://forms.gle/7bzweAqVB3NhHs7b7">
          <div class="button button-3"><a href="https://forms.gle/7bzweAqVB3NhHs7b7" target="_blank">Register</a></div>
        </a>
      </div>
      <!----Events---->

      <!----Time---->
      <div data-aos="zoom-in-right" class="image-overlay27">
        <div>
          <img src="./images/rectframe.png" alt="" class="frame2">

        </div>
      </div>

      <div data-aos="zoom-in-right" class="image-overlay28">
        <div>
          <h1 class="time">12PM</h1>
          <p class="date">26-27th Feb'22</p>
        </div>
      </div>

      <div data-aos="zoom-in-left" class="image-overlay29">
        <div>
          <img src="./images/rectframe.png" alt="" class="frame2">

        </div>
      </div>

      <div data-aos="zoom-in-left" class="image-overlay30">
        <div>
          <h1 class="time">6:00-9:00</h1>
          <p class="date">25th Feb 2024</p>
        </div>
      </div>
    </div>

    <div class="image-overlay31">

      <div class="event">
        <h1 class="eventheading">Sponsors</h1>
        <div class="row align-items-center">
          <div class="col">
            <a href="https://www.henryharvin.com/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/Event/henryharvin-removebg-preview_fKVFoKgUq.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643904061304"
                alt="" class="henryharvin"></a>
          </div>
          <div class="col">
            <a href="https://growthgear.in/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/Event/growthgear_i0CPR2xsi.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643904061281"
                alt="" class="growthgear"></a>
          </div>
        </div>
      </div>

      <div class="title">
        <h1 class="titleheading">Title Sponsors</h1>
        <div class="row align-items-center">
          <div class="col">
            <a href="https://polygon.technology/"><img src="images/Polygon_Logo-White.png" alt="" class="polygon"></a>
          </div>
          <div class="col">
            <a href="https://devfolio.co/"><img src="images/Devfolio_Logo-White.png" alt="" class="devfolio"></a>
          </div>
        </div>
      </div>

      <div class="power">
        <h1 class="powerheading">Power Sponsors</h1>
        <div class="row align-items-center">
          <div class="col">
            <a href="https://dare2compete.com/"><img class="d2c"
                src="https://ik.imagekit.io/pi5d3yjhcrj4/power/d2c-removebg-preview_u6MJLdx3F.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643963314091"
                alt=""></a>
          </div>
          <div class="col">
            <a href="https://tezos.com/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/power/tezos_Y-K51KCZmgn.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643963314795"
                alt="" class="tezos"></a>
          </div>
          <div class="col">
            <a href="https://filecoin.io/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/power/filecoin_APxj8LM_h.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643963314509"
                alt="" class="filecoin"></a>
          </div>
        </div>
        <div class="row">
          <div class="col">
            <a href="https://celo.org/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/power/celo_DowIvUxIQPH.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643963313937"
                alt="" class="celo"></a>
          </div>
          <div class="col">
            <a href="https://www.redbull.com/us-en/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/power/redbullcom-logo_7SwvWb6JL.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1643962948534"
                alt="" class="redbull"></a>
          </div>
          <div class="col">
            <a href=""><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/power/hackclub_qqSu-dMeLsL.svg?ik-sdk-version=javascript-1.4.3&updatedAt=1643962948411"
                alt="" class="hackclub"></a>
          </div>
        </div>
      </div>

      <div class="associate">
        <h1 class="associateheading">Associate Sponsors</h1>
        <div class="row align-items-center">
          <div class="col">
            <a href="https://www.jetbrains.com/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/associate/jb_beam_W3JatHN6ew.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643964358317"
                alt="" class="jetbrains"></a>
          </div>
          <div class="col">
            <a href="https://easyshiksha.com/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/associate/easyshikah-new-logo_1Jc7oNice.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643964357374"
                alt="" class="easyshiksha"></a>
          </div>
          <div class="col">
            <a href="https://interviewbuddy.in/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/associate/INBDLogo_ozAH1y7j7cl.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643964357650"
                alt="" class="interviewbuddy"></a>
          </div>
          <div class="col">
            <a href="https://1password.com/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/associate/one_rv-HgtZK3.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643964755348"
                alt="" class="onepassword"></a>
          </div>
        </div>
      </div>

      <div class="platform">
        <h1 class="platformheading">Platform Sponsors</h1>
        <div class="row align-items-center">
          <div class="col">
            <a href="https://streamyard.com/"><img src="./images/streamyard2.svg" alt="" class="streamland"></a>
          </div>
        </div>
      </div>

      <div class="apparel">
        <h1 class="apparelheading">Apparel Sponsors</h1>
        <div class="row align-items-center">
          <div class="col">
            <a href=""><img class="kappsons"
                src="https://ik.imagekit.io/pi5d3yjhcrj4/kappsons-removebg-preview_lpjpiB8Ml.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643965354956"
                alt=""></a>
          </div>
          <div class="col">
            <a href="https://www.wanderlooms.com/"><img
                src="https://ik.imagekit.io/pi5d3yjhcrj4/wanderlooms_logo-removebg-preview_OEDElplwusr.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643965846218"
                alt="" class="wanderlooms"></a>
          </div>
        </div>
      </div>

      <div class="row">
        <div class="col Certificate">
          <h1 class="certificateheading">Certificate Sponsors</h1>
          <div class="row align-items-center">
            <div class="col">
              <a href="https://givemycertificate.com/"><img class="givememycertificate"
                  src="https://ik.imagekit.io/pi5d3yjhcrj4/certificate_NS2kUIZ4C.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643965354617"
                  alt=""></a>
            </div>
          </div>
        </div>

        <div class="col media">
          <h1 class="mediaheading">Media Sponsors</h1>
          <div class="row align-items-center">

            <a href="https://www.noticebard.com/"><img class="noticebard"
                src="https://ik.imagekit.io/pi5d3yjhcrj4/noticebard_MdxXlKOPJae.png?ik-sdk-version=javascript-1.4.3&updatedAt=1643965355559"
                alt=""></a>

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

    <!--Footer-->
    <!-- <div id="contact" class="offset">
  <footer>
      <div class="row justify-content-center">
          <div class="col-md-5 text-center">
              <img src="images/acm logo 1.png">
              <p>ACM Thapar believes that youth encompassed with appropriate technology holds the potential to revolutionize the world we perceive today. Thapar ACM Student Chapter has always aimed at creating an environment where like-minded coders can collaborate, grow and have fun!</p>
          <strong>For Updates : </strong>
          
          <a class="btn btn-secondary btn-md" href="https://discord.gg/ucnQrxehu3" target="_blank"><i class="dis fab fa-discord"></i>Join our Discord Server</a>
      <br>
          <a href="https://github.com/ACM-Thapar" target="_blank"><i class="fab fa-github"></i></a> 
      <a href="https://www.instagram.com/acmthapar/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a>
      <a href="https://www.linkedin.com/company/thapar-acm-student-chapter/mycompany/" target="_blank"><i class="fab fa-linkedin"></i></a>
      </div>
      <hr class="socket">
    &copy; Eclipse
      </div>
  </footer>
</div> -->
    <footer>
      <div class="row justify-content-center">
        <div class="col-md-5 text-center">
          <h3><strong>25 - 27 February, 2024</strong></h3>
          <h3><strong>ECLIPSE</strong></h3>
          <h3><strong>Thapar ACM Student Chapter</strong></h3>
          <img src="images/acm logo 1.png">
          <p class="acm-description"><em>ACM Thapar believes that youth encompassed with appropriate technology holds
              the potential to revolutionize the world we perceive today. Thapar ACM Student Chapter has always aimed at
              creating an environment where like-minded coders can collaborate, grow and have fun!</em></p>
          <!-- <strong>For Updates :</strong> -->
          <!-- <br> -->
          <a class="btn-md"
            href="https://www.google.com/url?q=https://discord.gg/ucnQrxehu3&amp;source=gmail-imap&amp;ust=1642315855000000&amp;usg=AOvVaw2sPETYEEhEuci5K70Zq4wv"
            target="_blank"><i class="dis fab fa-discord"></i></a>
          <!-- <br> -->
          <a href="https://www.google.com/url?q=https://github.com/ACM-Thapar&amp;source=gmail-imap&amp;ust=1642315855000000&amp;usg=AOvVaw2M9AA2EgqyCWvUE4ap1wiE"
            target="_blank"><i class="fab fa-github"></i></a>
          <a href="https://www.google.com/url?q=https://www.instagram.com/acmthapar/?hl%3Den&amp;source=gmail-imap&amp;ust=1642315855000000&amp;usg=AOvVaw0nUENpeP0Oc1ZIhxbt0meN"
            target="_blank"><i class="fab fa-instagram"></i></a>
          <a href="https://www.google.com/url?q=https://www.linkedin.com/company/thapar-acm-student-chapter/mycompany/&amp;source=gmail-imap&amp;ust=1642315855000000&amp;usg=AOvVaw3E-KfmL_gwnm-aXUd6vy6e"
            target="_blank"><i class="fab fa-linkedin"></i></a>
        </div>

        <span class="circle"></span>
        <span class="quarter"></span>
    </footer>

  </section>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
    crossorigin="anonymous"></script>
  <script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
  <script>
    $(window).on('load', function () {
      $(".loader-wrapper").addClass("display-none")
      // $( ".loader-wrapper" ).fadeOut(500, function() {
      // // fadeOut complete. Remove the loading div
      // $( ".loader-wrapper" ).remove(); //makes page more lightweight 
    });

  </script>
  <script defer async src="https://apply.devfolio.co/v2/sdk.js"></script>
</body>

</html>