index.html

<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <title>Emerald City</title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="description" content="">

  <meta property="og:title" content="">
  <meta property="og:type" content="">
  <meta property="og:url" content="">
  <meta property="og:image" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="icon.png">

  <link rel="manifest" href="site.webmanifest">
  <meta name="theme-color" content="#000103">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
  <script src="https://unpkg.com/split-type"></script>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;700&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600&display=swap" rel="stylesheet">
</head>

<body>
  <!-- <div class="cursor" style="left: 944.8px; top: 142.6px;">
    <img src="img/cursor.svg" class="w-full h-full" alt="cursor">
</div> -->

  <div class="navbar" id="navbar">
    <nav>
      <ul class="sidebar">
        <li id="toggle2"><a><svg width="47" height="42" viewBox="0 0 47 42" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M37.9017 41L46.0967 31.1539V1H37.9017H11.224L1.00003 10.9997V41L37.9017 41Z" fill="#00FF57"
                stroke="#00FF57" stroke-linejoin="round" />
              <line x1="13.7371" y1="11.7495" x2="33.7371" y2="11.7495" stroke="#000A18" stroke-width="2.5" />
              <line x1="13.7371" y1="19.7495" x2="33.7371" y2="19.7495" stroke="#000A18" stroke-width="2.5" />
              <line x1="13.7371" y1="27.7495" x2="33.7371" y2="27.7495" stroke="#000A18" stroke-width="2.5" />
            </svg>
          </a> </li>
        <!-- <li><img src="img/logo.png" alt="Emerald City"></li> -->
        <li><a href="#titlepage">Home</a></li>
        <li><a href="#aboutsection">About Us</a></li>
        <li><a href="#prizesection">Prizes</a></li>
        <li><a href="#faq-section">FAQs</a></li>
        <li><a href="#contact-section">Contact-Us</a></li>
        <!-- <li><a href="#">REGISTER NOW!</a></li> -->
      </ul>
      <ul class = "nav-desk">
        <!-- <li><img class="logo" src="img/logo.svg" alt="Emerald City"></li>  -->
        <li class="main-logo"><img src="img/top left logo.svg" alt="logo"></li>
        <li class="hideOnMobile"><a href="#titlepage">Home</a></li>
        <li class="hideOnMobile"><a href="#aboutsection">About Us</a></li>
        <li class="hideOnMobile"><a href="#prizesection">Prizes</a></li>
        <li class="hideOnMobile"><a href="#faq-section">FAQs</a></li>
        <li class="hideOnMobile"><a href="#contact-section">Contact-Us</a></li>
        <li class="menu-button" id="toggleLink"><a><svg width="47" height="42" viewBox="0 0 47 42" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M37.9017 41L46.0967 31.1539V0.999999H37.9017H11.224L1.00003 10.9997V41L37.9017 41Z"
                stroke="#00FF57" stroke-width="1.5" stroke-linejoin="round" />
              <line x1="13.7371" y1="11.7495" x2="33.7371" y2="11.7495" stroke="#00FF57" stroke-width="2.5" />
              <line x1="13.7371" y1="19.7495" x2="33.7371" y2="19.7495" stroke="#00FF57" stroke-width="2.5" />
              <line x1="13.7371" y1="27.7495" x2="33.7371" y2="27.7495" stroke="#00FF57" stroke-width="2.5" />
            </svg>
          </a></li>
        <!-- <li><a href="#">REGISTER NOW!</a></li> -->
      </ul>

    </nav>
  </div>

  <div class="titlesection" id="titlepage">
    <!-- Harsh Code Area Landing Page -->


    <!-- <div class="logo">
      <img src="img/top left logo.svg" alt="logo">

    </div> -->

    <!-- <div  class="frontp" >
  <center>
      <br>
      <h1 class="head">EMERALD </h1>
      <h1 class="head">CITY 2.0</h1>
  </center>
  <br>
  <br> -->

    <div class="reg">
      <div class="mpg">Emerald City 2.0</div>
    </div>
    <div class="reg-btn-area">
      <a href="https://riviera.vit.ac.in/eventDetails?eventPid=evt_bf270786af4e49eab7007978f77ff189&fbclid=PAAabR5wtwMHoSpgVUpn_HoiJmccHVJGjITGm1HmjZdkH72C6HBzFbtpESehU">
        <img src="img/Reg button.svg" alt="reg button">
      </a>
    </div>
    <div class="img2">
      <center>
        <br>
        <img class="small-diamond"src="img/Group 1191.svg" alt="small diamond">
        </br>
      </center>
    </div>


  </div>
  <div class="aboutsection" id="aboutsection">
    <div class="aboutsection-text">
      <div class="aboutsection-header"><h2>About Emerald City</h2> </div>
      <div class="aboutsection-content"><p>Get ready for the IEEE-CS chapter's Emerald City Treasure Hunt at VIT Vellore! Join us for a digital pirate-themed adventure, where participants decode clues and uncover hidden treasures. It's tech, teamwork, and swashbuckling fun all in one!
        </br>
      </p></div>
    </div>
    <div class="aboutsection-image">
      <img id="floating-diamond" class="aboutsection-image1" src="img/about-diamond.svg" alt="diamond">
      <!-- <img  class="aboutsection-image2"src="img/about-diamond-border.svg" alt="" srcset=""> -->
      <img id="mobileonly-diamond" class="aboutsection-mobileimg" src="img/about-mobileDiamond.svg" alt="small-diamond" srcset="">
    </div>
  </div>

  <div class="midsection" id="prizesection">
     <div class="prizesLabel">
      <img src="img/prizesHolder.svg" alt="prizes">
      <p class="overlayText">Prizes</p>
    </div>
     <div class="gridContainer">
      <img id="debris" src="img/debris.svg" alt="debris" class="debrisImage">
      <br><br>
      <div class="prizes">
        <div class="prizePool">
          <img src="img/box-vector.png" alt="container" class="boxVector">
          <p id="currencyLabel"></p>
          <img src="img/PrizesPhone.svg" class = "prizePhone" alt="img phone">

        </div>
      </div>
      <br>
    </div>
    <div class="prizesLap">
    <section class = "Prizes">
      <div class="designCrystal">
        <img class = "designCrystal" id = "diamondCrystal" src="img/DesignCrystal.svg" alt="Design Crystal">
      </div>
      <div class="prizeSectionFinal">
        <img class = "prizesFinal" src="img/PrizesFinal.svg" alt="Prize Final">
      </div>
    </section>
  </div>
    <section class="sponsoredBy">
      <div class="sponsoredByLabel">
        <img src="img/sponsoredbyLabel.svg" class = "sponsoredByLabel" alt="Sponsored by">
      </div>
      <img src="img/galaxy_cinema_yellow.svg" alt="galaxy_cinema_yellow" class="galaxycinemaLogo">
      <h1 class="slogan">Gives you the best movie experience</h1>
      <div class="lower">
        <div class="galaxycinemasSocials">
          <div class="galaxysite">
            <div class="socialcontainer">
              <img src="img/webicon.svg">
              <a href="https://galaxy-cinemas.business.site/" target="_blank">    Galaxy Cinemas</a>
            </div>
          </div>
          <div class="galaxyinstagram">
            <div class="socialcontainer">
              <img src="img/igicon.svg">
              <a href="https://www.instagram.com/galaxycinemass/" target="_blank">    @galaxycinemass</a>
            </div>
          </div>
          <div class="galaxyfacebook">
            <div class="socialcontainer">
              <img src="img/fbicon.svg">
              <a href="https://www.facebook.com/galaxycinemass/" target="_blank">    Galaxy Cinemas</a>
            </div>
          </div>
        </div>
        <div class="galaxyAddress">
          <span>Galaxy Cinemas address:</span>
          <span>New Thiruvalam Road, Muthamizh </span>
          <span>Nagar, Katpadi, Vellore,</span>
          <span>Tamil Nadu 632007</span>
        </div>

      </div>
      
    </section>
    <div class="conductedBy">
      <div class="conductedByLabel">
        <img src="img/conductedBy.svg" alt="Conducted by">
      </div>
      <img src="img/debris2.svg" id="debris2">
    </div>

    <div class="logos">
      <img src="img/ieeecslogo.svg" class="ieeecslogo">
      <img src="img/debris.svg" alt="debris" class="debrisImage">
      <img src="img/vitlogo.png" class="vitlogo">
    </div>
  </div>

  <div class="FAQsection" id="faq-section">
    <!-- FAQ and Footer Starts Here -->
    <div class="header">
      <div class="faq">

        <img src="img/faq-title.svg" alt="SVG Image">

      </div>
      <div class="faq-items">
        <div class="faq-item">
          <div class="question">
            How many team members should I have to participate in the event?

            <svg class="arrow-icon"  viewBox="0 0 17 9" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L8.39437 8L16 1" stroke="white" stroke-width="1.5" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </div>
          <div class="answer">
            You will be required to have a minimum of 4 people and a maximum of 6 people in your team.

          </div>
        </div>
        <div class="faq-item">
          <div class="question">What is the event duration?

            <svg class="arrow-icon"  viewBox="0 0 17 9" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L8.39437 8L16 1" stroke="white" stroke-width="1.5" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </div>
          <div class="answer">
            The event will go on for a total of 3 rounds where you will be competing with other teams to move onto the next round.
          </div>
        </div>
        <div class="faq-item">
          <div class="question">Where do I register to participate in the event?

            <svg class="arrow-icon"  viewBox="0 0 17 9" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L8.39437 8L16 1" stroke="white" stroke-width="1.5" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </div>
          <div class="answer">
            Visit our event on the       <a href="https://riviera.vit.ac.in/eventDetails?eventPid=evt_bf270786af4e49eab7007978f77ff189&fbclid=PAAabR5wtwMHoSpgVUpn_HoiJmccHVJGjITGm1HmjZdkH72C6HBzFbtpESehU">
              riviera website
            </a>
          </div>
        </div>
        <div class="faq-item">
          <div class="question">I still have doubts regarding some details about the event, where can I reach you?
            <svg class="arrow-icon" viewBox="0 0 17 9" fill="none"
              xmlns="http://www.w3.org/2000/svg">
              <path d="M1 1L8.39437 8L16 1" stroke="white" stroke-width="1.5" stroke-linecap="round"
                stroke-linejoin="round" />
            </svg>
          </div>
          <div class="answer">
            You can reach out to us on our socials below
          </div>
        </div>
      </div>

      <!-- Add more FAQ items as needed -->

      <div class="contact-us" id="contact-section">
        For More Updates Contact-Us
        <div class="icons">
          <a href="https://www.linkedin.com/company/ieee-cs-vit"><img src="img/LinkedIn.svg" alt="SVG Image"></a>
          <a href="https://www.ieeecsvit.com/"><img src="img/web2.png" alt="SVG Image"></a>
          <a href="https://www.instagram.com/ieeecs_vit/"><img src="img/Instagram.svg" alt="SVG Image"></a>
        </div>
      </div>
      <div class="drawing">
        <img src="img/diamond.svg" id="diamond-design" alt="SVG Image">

      </div>
    </div>

  </div>


  <script src="js/app.js"></script>
  <script>

  </script>
</body>

</html>