index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="We at the Rotaract Club of SRM Kattankulkathur are an 800-member strong team working from our base station in Chennai. ">
    <meta name="keywords" content="Rotary, Rotary International, Rotaract Club, Rotaract SRM, SRM IST">
    <meta name="author" content="CodeChef SRM">
    <!-- End Basic Meta tags -->
    <title>Rotaract Club SRM</title>
    <link rel="icon" href="./Images/Rotary_International.png" />
    <link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./CSS/hover.css">
    <link rel="stylesheet" href="./CSS/hamB.css">
    <link rel="stylesheet" href="./CSS/home.css">
    <link rel="stylesheet" href="./CSS/team.css">

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-NLP50CJC23"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

     gtag('config', 'G-NLP50CJC23');
    </script>
    
  </head>
  <body>

    <nav class="navbar navbar-expand-lg navbar-dark">
      <button style="border: none; outline: none;" class="navbar-toggler hamburger hamburger--3dy js-hamburger d-block d-lg-none" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>
      <a class="navbar-brand" href="#"><img src="./Images/Rotaract-White.png" height="50px" width="240px"></a>
    
   
      <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
          <ul class="navbar-nav ml-auto mt-2 mt-lg-0 text-center text-lg-left">
            <li class="nav-item active mx-3">
              <a class="nav-link hvr-underline-from-center" href="#">Home</span></a>
            </li>
            <li class="nav-item active mx-3">
              <a class="nav-link hvr-underline-from-center" href="./team.html">Team</a>
            </li>
            <li class="nav-item active mx-3">
              <a class="nav-link hvr-underline-from-center" href="./gallery.html">Gallery</a>
            </li>
            <li class="nav-item active mx-3">
              <a class="nav-link hvr-underline-from-center" href="./projects.html">Projects</a>
            </li>
            <li class="nav-item active mx-3">
              <a class="nav-link hvr-underline-from-center" href="./rotaract.html">About Rotaract</a>
            </li>
          </ul>
        </div>
  
    </nav>

    <div class="container containerM">
        
          <div class="parent text-center d-none d-lg-block">
            <img class="image2 rotate" src="./Images/rotate.png" width="450px" height="450px"/>
            <img class="image1" src="./Images/notrotate.png" width="450px" height="450px" />
          </div>
          <div class="parent text-center d-block d-lg-none ">
            <img class="image2 rotate" src="./Images/rotate.png" width="300px" height="300px"/>
            <img class="image1" src="./Images/notrotate.png" width="300px" height="300px" />
          </div>
          <div class="text-center" style="margin-bottom: 60px;">
            <p class="headtext">Uplifting <span style="font-weight: 600; color:#db195e;">Personalities</span>, Serving <span style="font-weight: 600; color:#db195e;">Humanity</span>
            <br>
             <span style="font-size: 18px;" class="element"></span> 
            </p>
            
            <a href="#about" class="hvr-wobble-vertical"><i class="fa fa-angle-down mb-4" aria-hidden="true" style="font-size: 30px; color: #db195e;"></i></a>
            <br>
          </div>
             <hr id="about">
          <section class="mt-5"  data-aos="fade-up" data-aos-duration="2000" >
            <div class="text-center mb-5 sec-title centered">
               <h1 class="heads mt-2" data-aos="zoom-in" data-aos-duration="1000"><span style="color:#db195e;font-weight: 700;">A</span>bout</h1>
              <div class="separator"><span></span></div>
            </div>
            <p>
              We at the <span class="color">Rotaract Club</span> of SRM Kattankulkathur are an 800-member strong team working from our base station in Chennai. As a part of District 3232 we function under the <span class="color">Rotary Club of Meenambakkam(Chennai)</span> as our parent club.
            </p>
            <p>
              We try to play problem-solvers who see a world where people unite and take action to create lasting change – across the globe, in our communities, and in ourselves-Being one of the first clubs to adopt <span class="color">The UNITED NATIONS</span>' sustainable development goals as part of our mission. 
              
            </p>
            <p>
              Our members believe that we have a shared responsibility to take action on our world’s most persistent issues. Our members work together to:
            </p>
            <ul class="mx-3 listmast" style="font-size: 16px; font-weight: 500;">
             <li>Promote peace</li>
             <li>Fight disease</li>
             <li>Provide clean water, sanitation and hygiene</li>
             <li>Save mothers and children</li>
             <li>Grow local economies</li>
             <li>Support education</li>
            </ul>
          </section>
          <hr>
        
         
             <div class="embed-responsive embed-responsive-16by9 shadow mb-5 bg-white rounded" data-aos="fade-up" data-aos-duration="2000">
                <video controls loop height="500" width="1000">
                  <source src="./Images/F1.mp4" type="video/mp4">
                </video>
              </div>
         <hr>
          <section class="mt-5 card px-5 pt-5 shadow p-3 mb-5 rounded" id="contact" data-aos="zoom-in" data-aos-duration="2000" style="background: none;" >
            <div class="text-center mb-5 sec-title centered">
               <h1 class="heads contact-us"><span style="color:#db195e;font-weight: 700;">C</span>ontact</h1>
               <div class="alert">Your message has been sent!</div>
              <div class="separator"><span></span></div>
            </div>
            <form id="contactForm">
              <div class="form-group">
                <label for="exampleInputPassword1">Name</label>
                <input required type="text" name="name" class="form-control" id="name" placeholder="Full Name">
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input required type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
              </div>
              
              <div class="form-group">
                <label for="exampleFormControlTextarea1">Message</label>
                <textarea required class="form-control" name="message" id="message" rows="3"></textarea>
              </div>
             <div class="text-center my-2">
              <button type="submit" style="background: none; border-color: #db195e; font-weight: 500; color: #db195e;" class="btn hvr-grow">Submit</button>
             </div>
            </form>
          </section>
          
           
          <hr>
          <section id="footer" class="text-center py-4">
              <img alt="" src="./Images/Rotaract-Red.png" height="50px" width="240px">
                 
              
              <ul style="list-style: none; color:#db195e; " class="d-flex justify-content-center my-4">
                <a href="https://www.facebook.com/Rotaract-Club-of-SRM-IST-699111607368596" target="_blank" class="hvr-float" style="color: #db195e;"><li class="mx-2"><span class="fa fa-facebook fa-lg"></span></li></a>
                <a href="https://www.instagram.com/rotaractclub_srm_ktr/" target="_blank" class="hvr-float" style="color: #db195e;"><li class="mx-2"><span class="fa fa-instagram fa-lg"></span></li></a>
                <a href="mailto: rotaract.studentaffairs@srmist.edu.in" target="_blank" class="hvr-float" style="color: #db195e;"><li class="mx-2"><span class="fa fa-envelope fa-lg"></span></li></a>
                <a href="https://www.linkedin.com/company/rotaract-club-of-srm-ist/" target="_blank" class="hvr-float" style="color: #db195e;"><li class="mx-2"><span class="fa fa-linkedin fa-lg"></span></li></a>
              </ul>

              <p style="font-size:14px">©<span class="color"> Rotaract Club </span>SRM KTR: All Rights Reserved.</p>
              <p style="font-size:16px"><span class="fa fa-code color"></span> by <a target="_blank" style="text-decoration: none; color: #db195e; font-weight: 500;" href="https://codechefsrm.in">CodeChef SRM</a></p>
              <p style="font-size:14px"><span class="fa fa-phone color"></span> Contact<br><a class="my-1" href="callto:+91 80851 79464" style="text-decoration: none; color: #db195e; ">Shubhangi Soni</a><br><a class="my-1" href="callto:+91 70880 37362" style="text-decoration: none; color: #db195e; ">Nishita Hiresha Verma</a></p>
            </section>

           
          
    </div>

    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="./JS/home.js"></script>
    <script src="https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>
    <script src="./JS/form.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    <script>
      AOS.init();
    </script>
      <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>
    <script>
      
    var options = {
        strings: ['Promote','Provide','Save', 'Grow', 'Support'],
        typeSpeed: 100,
        loop: true,
        loopCount: Infinity
        };
    var typed = new Typed('.element', options);
    </script>
    
  </body>
</html>