index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>CodeReform</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://fonts.googleapis.com/css?family=Nunito:300,400,700|Anton" rel="stylesheet">


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

    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/magnific-popup.css">
    <link rel="stylesheet" href="css/jquery-ui.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/owl.theme.default.min.css">

    <link rel="stylesheet" href="css/bootstrap-datepicker.css">

    <link rel="stylesheet" href="fonts/flaticon/font/flaticon.css">

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

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

  </head>
  <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">

  <div class="site-wrap"  id="home-section">

    <div class="site-mobile-menu site-navbar-target">
      <div class="site-mobile-menu-header">
        <div class="site-mobile-menu-close mt-3">
          <span class="icon-close2 js-menu-toggle"></span>
        </div>
      </div>
      <div class="site-mobile-menu-body"></div>
    </div>


    <header class="site-navbar js-sticky-header site-navbar-target" role="banner">

      <div class="container">
        <div class="row align-items-center position-relative">


            <div class="site-logo">
              <a href="index.html" class="text-black"><span class="text-primary">CodeReform</a>
            </div>

              <nav class="site-navigation text-center ml-auto" role="navigation">

                <ul class="site-menu main-menu js-clone-nav ml-auto d-none d-lg-block">
              <!--     <li><a href="#home-section" class="nav-link">Home</a></li>-->
                  <li><a href="#about-section" class="nav-link">Home</a></li>
                <!--  <li><a href="#discover-section" class="nav-link">Discover</a></li> -->
                  <li><a href="#donate-section" class="nav-link">Donate</a></li>
                  <li><a href="#team-section" class="nav-link">Our Team</a></li>
                  <li><a href="#volunteer-section" class="nav-link">Sign Up</a></li>
                </ul>
              </nav>



          <div class="toggle-button d-inline-block d-lg-none"><a href="#" class="site-menu-toggle py-5 js-menu-toggle text-black"><span class="icon-menu h3"></span></a></div>

        </div>
      </div>








    <div class="site-section bg-image overlay counter" style="background-image: url('images/hero_1_no-text.jpg');" id="about-section">
      <div class="container">
        <div class="row mb-5">
          <div class="col-lg-6 mb-4">
            <figure class="block-img-video-1" data-aos="fade">
            <!--  <a href="https://www.youtube.com/watch?v=eOsFi75UvGg" class="popup-vimeo">
                <span class="icon"><span class="icon-play"></span></span> -->
                <img src="images/indiangirl.jpg" alt="Image" class="img-fluid">
              </a>
            </figure>
          </div>
          <div class="col-lg-5 ml-auto align-self-lg-center">
            <h2 class="text-black mb-4 text-uppercase section-title">Our Mission</h2>
            <p class="text-black">There are 815 correctional facilities in India, housing thousands of underprivileged children that do not get the personal attention they deserve and need, to help them get back a normal life in the society. Lack of funding and a trained staff means that these children lack the resources to break out of a system that has failed them and that they are at a disadvantage to peers who have the access to technology and the internet. With the current virus rampaging, it becomes more important that we help them gain access to the online world. We are partnering with Headstreams NGO in order to achieve our goals.</p>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6 mb-4 col-lg-0 col-lg-3">
            <div class="block-counter-1">
              <span class="number"><span data-number="6">0</span></span>
              <span class="caption text-black">Computers Obtained</span>
            </div>
          </div>
          <div class="col-md-6 mb-4 col-lg-0 col-lg-3">
            <div class="block-counter-1">
              <span class="number"><span data-number="1515">0</span></span>
              <span class="caption text-black">Amount Raised</span>
            </div>
          </div>
          <div class="col-md-6 mb-4 col-lg-0 col-lg-3">
            <div class="block-counter-1">
              <span class="number"><span data-number="5">0</span></span>
              <span class="caption text-black">Number of Volunteers</span>
            </div>
          </div>
          <div class="col-md-6 mb-4 col-lg-0 col-lg-3">
            <div class="block-counter-1">
              <span class="number"><span data-number="23">0</span></span>
              <span class="caption text-black">Children Reached</span>
            </div>
          </div>
        </div>
      </div>
    </div>





    <div class="site-section bg-image overlay" style="background-image: url('images/hero_1_no-text.jpg');" id="donate-section">
      <div class="container">
        <div class="row align-items-center justify-content-center">
          <div class="col-lg-5 text-center">
            <h2 class="text-white mb-4">Make A Donation Now! You Will Change Lives Forever</h2>
            <p><a href="https://www.gofundme.com/f/s59c4-codereform" class="btn btn-primary px-4 py-3 btn-block">Donate Now</a></p>
          </div>
        </div>
      </div>
    </div>

    <div class="d-block d-md-flex intro-engage">
        <div class="">
          <h2>Create Access to Tech</h2>
          <p>Through donations, computers and peripheral hardware will be obtained to create a computer lab</p>
        </div>
        <div>
          <h2>Provide Vocational Training</h2>
          <p>Children will be taught how to use Microsoft Office and the basics of web development through HTMl and CSS</p>
        </div>
        <div>
          <h2>Develop Basic Skills</h2>
          <p>The basics of Windows and how to navigate the internet through Google will be taught</p>
        </div>
      </div>



    <div class="site-section" id="team-section">
      <div class="container">
        <div class="row mb-5 justify-content-center">
          <div class="col-md-7 text-center">
              <h2 class="text-black text-uppercase section-title">Our Team</h2>

          </div>
        </div>
        <div class="row">
          <div class="col-lg-4 col-md-6 mb-4 mb-lg-0" data-aos="fade-up">
            <div class="block-team-member-1 text-center rounded">
              <figure>
                <img src="images/jayanth.jpg" alt="Image" class="img-fluid rounded-circle" >
              </figure>
              <h3 class="font-size-20 text-black">Jayant Tummalapenta</h3>
              <span class="d-block font-gray-5 letter-spacing-1 text-uppercase font-size-12 mb-3">Co-Founder</span>
            <p>Jayant is Studying Comp Sc. From BITS Pilani. His interests include Writing, Music and Gaming in addition to Social Service. He is a member of the English Press Club and actively writes blogs on various topics.</p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mb-4 mb-lg-0" data-aos="fade-up" data-aos-delay="100">
            <div class="block-team-member-1 text-center rounded">
              <figure>
                <img src="images/665cropdin.jpg" alt="Image" class="img-fluid rounded-circle">
              </figure>
              <h3 class="font-size-20 text-black">Dinesh Polisetty</h3>
              <span class="d-block font-gray-5 letter-spacing-1 text-uppercase font-size-12 mb-3">Founder</span>
              <p>Dinesh is a senior at Centennial High School. He likes competitive programming and is the president of the computer science club. He aspires to attend a university to study machine learning and artificial intelligence.</p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mb-4 mb-lg-0" data-aos="fade-up" data-aos-delay="200">
            <div class="block-team-member-1 text-center rounded">
              <figure>
                <img src="images/satya.jpg" alt="Image" class="img-fluid rounded-circle">
              </figure>
              <h3 class="font-size-20 text-black">Satya Tummalapenta</h3>
              <span class="d-block font-gray-5 letter-spacing-1 text-uppercase font-size-12 mb-3">Mentor</span>
              <p>Mr. Tummalapenta is the founder and CEO at Nouveau Labs. He is an engineering leader with over 20 years of experience. His dream is to create a level field for underprivileged kids in India.
            </div>
          </div>
          <div class="col-lg-4 col-md-6 mb-4 mb-lg-0" data-aos="fade-up">
            <div class="block-team-member-1 text-center rounded">
              <figure>
                <img src="images/drnaveen.jpg" alt="Image" class="img-fluid rounded-circle">
              </figure>
              <h3 class="font-size-20 text-black">Dr. Naveen Thomas</h3>
              <span class="d-block font-gray-5 letter-spacing-1 text-uppercase font-size-12 mb-3">Partner</span>
              <p>Dr. Naveen Thomas is the Co-Founder of Headstreams NGO. Through Headstreams, he brings positive change to children in difficult circumstances by promoting free play, open learning, and giving children freedom.</p>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mb-4 mb-lg-0" data-aos="fade-up" data-aos-delay="100">
            <div class="block-team-member-1 text-center rounded">
              <figure>
                <img src="images/person_2.jpg" alt="Image" class="img-fluid rounded-circle">
              </figure>
              <h3 class="font-size-20 text-black">Dinesh Polisetty</h3>
              <span class="d-block font-gray-5 letter-spacing-1 text-uppercase font-size-12 mb-3">Co-Founder</span>
            </div>
          </div>

          <div class="col-lg-4 col-md-6 mb-4 mb-lg-0" data-aos="fade-up" data-aos-delay="200">
            <div class="block-team-member-1 text-center rounded">
              <figure>
                <img src="images/person_3.jpg" alt="Image" class="img-fluid rounded-circle">
              </figure>
              <h3 class="font-size-20 text-black">Judge Name</h3>
              <span class="d-block font-gray-5 letter-spacing-1 text-uppercase font-size-12 mb-3">Partner</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="site-section bg-light" id="volunteer-section">
      <div class="container">
        <div class="row">
          <div class="col-12 text-center mb-5">
            <h2 class="text-black section-title text-uppercase">Want to Volunteer?</h2>
            <p>Volunteers will help teach the basics of Windows software as well as web development</p>
          </div>
        </div>
        <div class="row justify-content-center">
          <div class="col-lg-6 mb-5">
            <form action="#" method="post">
              <div class="form-group row">
                <div class="col-md-6 mb-4 mb-lg-0">
                  <input type="text" class="form-control" placeholder="First name">
                </div>
                <div class="col-md-6">
                  <input type="text" class="form-control" placeholder="Last name">
                </div>
              </div>

              <div class="form-group row">
                <div class="col-md-12">
                  <input type="text" class="form-control" placeholder="Email address">
                </div>
              </div>

              <div class="form-group row">
                <div class="col-md-12">
                  <textarea name="" id="" class="form-control" placeholder="What are your qualifications?" cols="30" rows="10"></textarea>
                </div>
              </div>
              <div class="form-group row">
                <div class="col-md-6 ml-auto">
                  <input type="submit" class="btn btn-block btn-primary text-white py-3 px-5" value="Submit">
                </div>
              </div>
            </form>
          </div>

        </div>
      </div>
    </div>


    <footer class="site-footer">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="row">
              <div class="col-md-8">
                <h2 class="footer-heading mb-4">About Us</h2>
                <p>We strive to provide opportunties to juveniles children through the power of code</p>
              </div>
              <div class="col-md-4 ml-auto">
                <h2 class="footer-heading mb-4">Contact Us</h2>
                <ul class="list-unstyled">
                  <li>Email: codereformnpo@gmail.com</a></li>
                  <li>Phone:<br>469-605-7151</a></li>
                </ul>
              </div>

            </div>
          </div>

        <div class="row pt-5 mt-5 text-center">
          <div class="col-md-12">
            <div class="border-top pt-5">
            <p>
            </p>
            </div>
          </div>

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

  </div>

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/popper.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/owl.carousel.min.js"></script>
  <script src="js/jquery.magnific-popup.min.js"></script>
  <script src="js/jquery.sticky.js"></script>
  <script src="js/jquery.waypoints.min.js"></script>
  <script src="js/jquery.animateNumber.min.js"></script>
  <script src="js/aos.js"></script>

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

  </body>
</html>