home.php

<link rel ="stylesheet" href ="animate.css">
<style>
  .about{
    font-size:15px;
    color:white;
    text-align:center;
    margin-left:-2%;
    scroll-behavior: smooth;

  }
  .head{
      color:#fff;
      font-size:50px;
      text-align:center;
      font-weight:200px;
      /* font-family:'Merriweather'; */
      font-family:'Alfa Slab One';
      scroll-behavior: smooth;
  }
 
  .about-btn{
    width:100px;
    height:auto;
    scroll-behavior: smooth;
    color:black;
    /* margin:10px; */
  }
  .main-header-20{
    height:90vh;
    scroll-behavior: smooth
  }
  a{
    text-decoration:none;
    scroll-behavior: smooth;
  }
  .fa-angle-double-down{
    font-size:40px;
    color:white;
    margin-left:-20px;
  }
  </style>


  <div class ="main-header-20">
  <div class ="head">OJASS'20</div>
  <object>
    <center>
        <embed src="ojasslogo.svg" style ="margin-left:24px;">
      </center>
</object>
<!--theme-->
<div class ="theme">
  <center>
  <h1 class="ml2" style ="margin-left:-20px;">INDIC ERUDITION</h1>
</center>
</div>
<center>
  <a href ="#about-id">
    <i class="fa fa-angle-double-down animated bounce"></i></a>
</center>
</div>
<br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<style>
  .ml2 {
  font-weight: 200;
  font-size: 40px;
  color:orange;
  font-family:'Inria Serif';
}

.ml2 .letter {
  display: inline-block;
  line-height: 1em;
}
  </style>
  <script>

var textWrapper = document.querySelector('.ml2');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: false})
  .add({
    targets: '.ml2 .letter',
    scale: [4,1],
    opacity: [0,1],
    translateZ: 0,
    easing: "easeOutExpo",
    duration: 950,
    delay: (el, i) => 70*i
  }).add({
    targets: '.ml2',
    opacity: 1,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
    </script>

  </center>
<h2 id  ="about-id"><center><u>ABOUT</u><center></h2>
<p class= "about" >
Ojass is the annual techno-management fest of NIT Jamshedpur. Started in the year 2004, Ojass assembles a wide range of events comprising every genre of engineering, management and even film-making with the aim to foster and boost cogent engineering practices in the nation and stimulate the future generation to dream big. Certified Workshops in diversed fields are conducted every year before the fest to help students understand the different technology trends in the market.
A three-day spectacle, Ojass also organizes many motivating guest lectures under the event cluster "Guru Gyan". Since its inception, Ojass has been receiving immense participation from the student community from all over India with the 2018 edition accounting for over 4000 participants. The prize money for this edition was ₹18 Lac. OJASS 19 is slated to kick-off from 5th April 2019 and the grandeur will prevail for the next two days. Save these dates, for we are all set to make it Bigger and Better, than ever!
</p>
  <!--footer-->
  <div class="container-fluid text-center footer" style="background:#514e56bd;margin-left:-4%;margin-top:10%;overflow:hidden;">
    <footer style="padding-top: 10px;">

        <div class="row ">
          <div class="col text-center">
            <ul class="list-inline" >
              <p class="text-light" style="font-size:18px; font-family: 'Jura', sans-serif;">Ojass'19</p>
            </ul>
          </div>
          <div class="col">

          <ul class="list-inline" style="list-style-type:none">
            <li><i class="fa fa-map-marker text-light" style="font-size: 16px;color:red;"><a style="font-family: 'Jura', sans-serif;color:#fff;"> NIT Jamshedpur</a></i></li>
            <li><a class="fa fa-envelope text-light" style="font-size: 16px;color:red;"><a class="text-light" style="font-family: 'Jura', sans-serif;color:#fff;" href="mailto:ojass@nitjsr.ac.in"> ojass@nitjsr.ac.in</a> </i></li>
          </ul>

          </div>
        </div>

      <center>
            <a href="https://www.facebook.com/Ojassnitjamshedpur/" ><i class="fa fa-facebook-official" style="font-size: 36px; color:white !important" target="_blank"></i></a>
            <a href="https://www.youtube.com/user/ojassnitjsr" class="fa fa-youtube-square" style="font-size: 36px; margin-left: 12px;color:white !important" target="_blank"></a>
            <a href="https://www.instagram.com/ojass_techfest/" class="fa fa-instagram" style="font-size: 36px; margin-left: 12px;color:white !important" target="_blank"></a>
            
            <p style="font-size: 14px; margin: 0; padding: 10px 0;"> <a class="text-light" style="text-decoration:none;color:white" href="developers.php" target= "_blank">© Ojass Web Team</a> </p>

        </center>
    </footer>
    </div>