index.html

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Horizontal Tab Menu</title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">


      <link rel="stylesheet" href="css/style.css">


</head>

<body>

  <nav class="nav nav--active">
  <ul class="nav__list">
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color1" data-letter="a"></div>
        <p class="nav__label">About</p>
      </a>
    </li>
<!--    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color2" data-letter="p"></div>
        <p class="nav__label">Products</p>
      </a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color3" data-letter="q"></div>

<p class="nav__label">Questions</p>
      </a>
    </li>
-->
<li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color4" data-letter="e"></div>

<p class="nav__label">Events</p>
      </a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color5" data-letter="s"></div>
        <p class="nav__label">Sponsors</p>
      </a>
    </li>
    <li class="nav__item">
      <a href="" class="nav__link">
        <div class="nav__thumb color6" data-letter="c"></div>
        <p class="nav__label">Contact</p>
      </a>
    </li>
  </ul>
  <div class="burger burger--close">
    <div class="burger__patty"></div>
  </div>
  <!--
   <a href="#" class="logo" target="_blank">
   <img class="logo" src="some-linux-icon.svg" alt="" />
  </a>
-->
</nav>

<div class="page">
  <section class="section section--active color1" data-letter=>
    <article class="section__wrapper">
      <h1 class="section__title">About us</h1>
      <p>We are linux users from Delhi NCR region. We mostly include students and professionals who uses linux. We believe in endorsing OSS/FOSS and linux use and development of the same. As of now we organise monthly meetup. We respect all technologies from Perl to Python. If you want to volunteer for ILUGD you can join us in any of our social channels.</p>
    </article>
  </section>
  <!--
  <section class="section color2" data-letter="p">
    <article class="section__wrapper">
      <h1 class="section__title">Products</h1>
      <p>Use your 'left' and 'right' arrow keys to navigate.<br> some para</p>
    </article>
  </section>
  <section class="section color3" data-letter="q">
    <article class="section__wrapper">
      <h1 class="section__title">Questions</h1>
      <p>Use your 'left' and 'right' arrow keys to navigate.<br> some para bla bla blue bla abe chal bla blu bla.</p>
    </article>
  </section>
-->
<section class="section color4" data-letter="e">
    <article class="section__wrapper">
      <h1 class="section__title">Next Event</h1>
     <p>Next Meetup bar.<br> Foldable history with links</p>
    </article>
  </section>
  <section class="section color5" data-letter="s">
    <article class="section__wrapper">
      <h1 class="section__title">Sponsors</h1>
      <p>Use your 'left' and 'right' arrow keys to navigate.<br> About Sponsors</p>
    </article>
  </section>
  <section class="section color6" data-letter="c">
    <article class="section__wrapper">
      <h1 class="section__title">Contact us</h1>
      <p>Use your 'left' and 'right' arrow keys to navigate.<br> telegram Social medai etc buttons using fontawesme.</p>
    </article>
  </section>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


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


</body>

</html>