index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="./">
    <meta charset="UTF-8" />
    <link rel="manifest" href="./manifest.json" />

    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="application-name" content="Databased" />
    <meta name="apple-mobile-web-app-title" content="Databased" />
    <meta name="theme-color" content="#101010" />
    <meta name="msapplication-navbutton-color" content="#101010" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="msapplication-starturl" content="/" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />

    <link
      rel="icon"
      type="image/png"
      sizes="192x192"
      href="./img/icon-192x192.png"
    />
    <link
      rel="apple-touch-icon"
      type="image/png"
      sizes="192x192"
      href="./img/icon-192x192.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="256x256"
      href="./img/icon-256x256.png"
    />
    <link
      rel="apple-touch-icon"
      type="image/png"
      sizes="256x256"
      href="./img/icon-256x256.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="384x384"
      href="./img/icon-384x384.png"
    />
    <link
      rel="apple-touch-icon"
      type="image/png"
      sizes="384x384"
      href="./img/icon-384x384.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="512x512"
      href="./img/icon-512x512.png"
    />
    <link
      rel="apple-touch-icon"
      type="image/png"
      sizes="512x512"
      href="./img/icon-512x512.png"
    />

    <title>Databased | IISc's Undergraduate CS Club</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="icon" href="./img/favicon-32x32.png" type="image/x-icon" />
    <script src="./js/footerinclude.js" type="text/javascript"></script>
  </head>

  <body class="animate-bg">
    <div id="loader"></div>
    
    <header>
      <header-component></header-component>
    </header>

    <div id="title">
      <img src="./img/text.png" alt="title text"/>
    </div>
    <main>
      <div id="about">
        <div class="about-content">
          <div class="title">About</div>
          <p>
            Welcome to Databased, the CS Crew at the Indian Institute of Science
            (IISc), where curiosity and innovation come together to create
            something extraordinary! We're a community of students passionate
            about diving deep into the world of computer science and related
            fields. We're here to provide a comprehensive resource for beginners
            to learn, grow, and create.
          </p>
          <!-- <br />
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec
            purus gravida, tempus ipsum non, finibus turpis. In sed volutpat
            tortor. Curabitur nec nisl at justo bibendum commodo. Nulla gravida
            in ex sed condimentum. Duis ut neque orci. Donec luctus dui eget
            dolor consectetur, eu rutrum orci fermentum. Nullam sit amet
            vestibulum elit.
          </p> -->
          <a href="./about" id="viewMoreAbout">
            More About Us
            <span class="material-symbols-outlined"> arrow_forward </span>
          </a>
        </div>
        <img src="./img/IISc Linesketch.png" alt="databased logo"/>
      </div>

      <div id="events">
        <div class="title">Events</div>
        <div id="eventsGrid"></div>
        <a href="./events" id="viewAllEvents">
          View All Events
          <span class="material-symbols-outlined"> arrow_forward </span>
        </a>
      </div>
      <!-- put the blogs back in when a solution is found
        <div id="blogs">
        <div class="title">Blogs</div>

        <div id="blogsGrid">
          <div class="row"></div>
          <div class="row"></div>
        </div>
        <a href="https://databasediisc.blogspot.com/" id="viewAllBlogs">
          View All Blogs
          <span class="material-symbols-outlined"> arrow_forward </span>
        </a>
      </div> -->

      <div id="contact">
        <div id="titleContact" class="contactLeftSection">Contacts</div>

        <div id="contactDetails" class="contactRightSection">
          <div class="mailText">
            <span id="mailUsAt">Mail us at</span> <span class="mobile-br"><br></span>
            <a class="email" href="mailto:databased.csa@iisc.ac.in" title="Email">
              <span>databased.csa@iisc.ac.in</span>
            </a>
          </div>
          <div class="socials">
            <a href="https://www.facebook.com/people/Databased/100091411453016/" class="facebook" target="_blank" title="Facebook">
              <img src="./img/social/facebook.png" alt="facebook link image"/>
            </a>
            <a href="https://instagram.com/databasediisc" class="instagram" target="_blank" title="Instagram">
              <img src="./img/social/instagram.png" alt="instagram link image"/>
            </a>
            <a href="https://www.linkedin.com/company/databasediisc" class="linkedin" target="_blank" title="LinkedIn">
              <img src="./img/social/linkedin.png" alt="linkedin link image"/>
            </a>
            <a href="https://github.com/databasedIISc/" target="_blank" class="github" title="Github">
              <img src="./img/social/github.png" alt="github link image" />
            </a>
          </div>
        </div>
      </div>
    </main>

    <div id="eventModal">
      <div class="modalContent">
        <div class="modalImg">
          <button id="closeEventModal">
            <span class="material-symbols-outlined"> close </span>
          </button>
          <div class="imagesContainer"></div>
          <div class="imagesButtons"></div>
        </div>
        <div class="modalDetails">
          <h1 class="modalHeading"></h1>
          <div class="modalChips">
            <span class="modalType"></span>
            <span class="modalAudience"></span>
          </div>
          <div class="modalChips modalTopics"></div>
          <span class="modalDate"></span>
          <span class="modalPlace"></span>
          <p class="modalDescription"></p>
        </div>
      </div>
    </div>

    <footer>
      <footer-component></footer-component>
    </footer>
    <script src="./js/common.js"></script>
    <script src="./js/index.js"></script>
    <!--put the blogs back in when a solution is found
      <script type="text/javascript" src="https://databasediisc.blogspot.com/feeds/posts/default?alt=json-in-script&callback=loadBlogs"></script> -->
  </body>
</html>