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


<!-- Mirrored from kalanidhithemes.com/live-preview/landing-page/apper/all-demo/01-app-landing-page-defoult/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 17 May 2023 05:18:30 GMT -->
<head>

  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Our Green Planet :: App Landing Page</title>

  <!-- icofont-css-link -->
  <link rel="stylesheet" href="css/icofont.min.css">
  <!-- Owl-Carosal-Style-link -->
  <link rel="stylesheet" href="css/owl.carousel.min.css">
  <!-- Bootstrap-Style-link -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Aos-Style-link -->
  <link rel="stylesheet" href="css/aos.css">
  <!-- Coustome-Style-link -->									
  <link rel="stylesheet" href="css/style.css">
  <!-- Responsive-Style-link -->
  <link rel="stylesheet" href="css/responsive.css">		
  <!-- Favicon -->						
  <link rel="shortcut icon" href="images/favicon.png" type="image/x-icon">

</head>

<body>

  <!-- Page-wrapper-Start -->
  <div class="page_wrapper">

    <!-- Preloader -->
    <div id="preloader">
      <div id="loader"></div>
    </div>

    <!-- Header Start -->
   <?php include('include/header.php'); ?> 

    <!-- Banner-Section-Start -->
    <section class="banner_section">
      <!-- container start -->
      <div class="container">
      	<!-- vertical animation line -->
        <div class="anim_line">
            <span><img src="images/anim_line.png" alt="anim_line"></span>
            <span><img src="images/anim_line.png" alt="anim_line"></span>
            <span><img src="images/anim_line.png" alt="anim_line"></span>
            <span><img src="images/anim_line.png" alt="anim_line"></span>
            <span><img src="images/anim_line.png" alt="anim_line"></span>
            <span><img src="images/anim_line.png" alt="anim_line"></span>
            <span><img src="images/anim_line.png" alt="anim_line"></span>
            <span><img src="images/anim_line.png" alt="anim_line"></span>
            <span><img src="images/anim_line.png" alt="anim_line"></span>
        </div>
        <!-- row start -->
        <div class="row">
          <div class="col-lg-6 col-md-12"  data-aos="fade-right" data-aos-duration="1500">
          	<!-- banner text -->
            <div class="banner_text">
              <!-- h1 -->
              <h1>Our<span> Green Planet</span></h1>
              <!-- p -->
              <p>Planet and Wellbeing as an initiative aims at creating a climate-aware youth and children through its varied knowledge resource portal.
              </p>
            </div>
            <!-- app buttons -->
            <ul class="app_btn">
              <li>
               
                  <img class="blue_img" src="images/qr.jpg" alt="image" >
                <!--   <img class="white_img" src="images/qr.jpg" alt="image" > -->
               
              </li>
              <li>
                <a href="https://play.google.com/store/apps/details?id=com.vi.ourgreenplanet&hl=en_IN&gl=US">
                  <img class="blue_img" src="images/playstore.png" alt="image" >
                  <img class="white_img" src="images/playstore.png" alt="image" >
                </a>
              </li>
            </ul>

            <!-- users -->
          <!--   <div class="used_app">
              <ul>
                <li><img src="images/used01.png" alt="image" ></li>
                <li><img src="images/used02.png" alt="image" ></li>
                <li><img src="images/used03.png" alt="image" ></li>
                <li><img src="images/used04.png" alt="image" ></li>
              </ul>
              <p>12M + <br> used this app</p>
            </div> -->
          </div>

          <!-- banner slides start -->
          <div class="col-lg-6 col-md-12"  data-aos="fade-in" data-aos-duration="1500">
            <div class="banner_slider">
             <!--  <div class="left_icon">
                <img src="images/message_icon.png" alt="image" >
              </div> -->
             <!--  <div class="right_icon">
                <img src="images/shield_icon.png" alt="image" >
              </div> -->
              <div id="frmae_slider" class="owl-carousel owl-theme">
                <div class="item">
                  <div class="slider_img">
                    <img src="images/screen-1.png" alt="image" >
                  </div>
                </div>
                <div class="item">
                  <div class="slider_img">
                    <img src="images/screen-2.png" alt="image" >
                  </div>
                </div>
                <div class="item">
                  <div class="slider_img">
                    <img src="images/screen-3.png" alt="image" >
                  </div>
                </div>
              </div>
              <div class="slider_frame">
                <img src="images/mobile_frame_svg.svg" alt="image" >
              </div>
            </div>
          </div>
          <!-- banner slides end -->

        </div>
        <!-- row end -->
      </div>
      <!-- container end -->
    </section>
    <!-- Banner-Section-end -->

     <section class="row_am about_app_section" id="about">
      <!-- container start -->
      <div class="container">
      	<!-- row start -->
        <div class="row">
          <div class="col-lg-6">

          	<!-- about images -->
            <div class="about_img" data-aos="fade-in" data-aos-duration="1500">
              <div class="frame_img">
                <img class="moving_position_animatin" src="images/about-frame.png" alt="image" >
              </div>
              <div class="screen_img">
                <img class="moving_animation" src="images/about-screen.png" alt="image" >
              </div>
            </div>
          </div>
          <div class="col-lg-6">

          	<!-- about text -->
            <div class="about_text">
              <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">

              	<!-- h2 -->
                <h2>Our Green Planet</h2>

                <!-- p -->
                <p>
                 Planet and Wellbeing as an initiative aims at creating a climate-aware youth and children through its varied knowledge resource portal. Vois planet allows individuals and organisations to see what is happening worldwide for climate change action and where we stand in understanding our own environment. </p>

                   <p>The app helps children and youth to gather information on climate change. It also provides an opportunity to organize and participate in different campaigns and events that focus on raising awareness of climate change. It is equipped with a varied range of knowledge resources for all age groups and people from varied backgrounds. </p>

                  <p> An engaging game that keeps people engaged and aware related their waste management.
                </p>
              </div>

              <!-- UL -->
             <!--  <ul class="app_statstic" id="counter" data-aos="fade-in" data-aos-duration="1500">
                <li>
                  <div class="icon">
                    <img src="images/download.png" alt="image" >
                  </div>
                  <div class="text">
                    <p><span class="counter-value" data-count="17">0</span><span>M+</span></p>
                    <p>Download</p>
                  </div>
                </li>
                <li>
                  <div class="icon">
                    <img src="images/followers.png" alt="image" >
                  </div>
                  <div class="text">
                    <p><span class="counter-value" data-count="08">0 </span><span>M+</span></p>
                    <p>Followers</p>
                  </div>
                </li>
                <li>
                  <div class="icon">
                    <img src="images/reviews.png" alt="image" >
                  </div>
                  <div class="text">
                    <p><span class="counter-value" data-count="2300">1500</span><span>+</span></p>
                    <p>Reviews</p>
                  </div>
                </li>
                <li>
                  <div class="icon">
                    <img src="images/countries.png" alt="image" >
                  </div>
                  <div class="text">
                    <p><span class="counter-value" data-count="150">0</span><span>+</span></p>
                    <p>Countries</p>
                  </div>
                </li>
              </ul> -->
              <!-- UL end -->
             <!--  <a href="contact.html" class="btn puprple_btn" data-aos="fade-in" data-aos-duration="1500">START FREE TRIAL</a> -->
            </div>
          </div>
        </div>
        <!-- row end -->
      </div>
      <!-- container end -->
    </section>


    <!-- Features-Section-Start -->
    <section class="row_am features_section" id="features">
      <!-- container start -->
      <div class="container">
        <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
          <!-- h2 -->
          <h2>Key Features</h2>
          <!-- p -->
      
        </div>
        <div class="feature_detail">
          <!-- feature box left -->
          <div class="left_data feature_box">

          	<!-- feature box -->
            <div class="data_block" data-aos="fade-right" data-aos-duration="1500">
<div class="d-flex flex-row">
  <h4>Easy to Use and Simple UI</h4>
              <div class="icon">
                <img src="images/i7.png" alt="image" >
              </div> 
              
            </div>
              <div class="text">
                
                <p>Easy to use and simple interface for all age groups that can help the user access all the information and knowledge from the app.</p>
              </div>
            </div>

            <!-- feature box -->
            <div class="data_block" data-aos="fade-right" data-aos-duration="1500">
              <div class="d-flex justify-content-start">
                  <h4>Segregation of Buttons</h4>
               <div class="icon">
                <img src="images/i9.png" alt="image" >
              </div> 
             
            </div>
              <div class="text">
                
                <p>Separate buttons for e-waste point, carbon calculator, game, curated apps hub on climate action and plantation activity.</p>
              </div>
            </div>

             <div class="data_block" data-aos="fade-right" data-aos-duration="1500">
              <div class="d-flex justify-content-start">
                 <h4>Knowledge Repository Hub</h4>
              <div class="icon">
                <img src="images/i6.png" alt="image" >
              </div> 
              
            </div>
              <div class="text">
               
                <p>Knowledge repository with a vast category of original articles, curated articles, case studies, interviews, photo stories on designated themes of low carbon, renewable energy and E-waste management.</p>
              </div>
            </div>
          </div>

          <!-- feature box right -->
          <div class="right_data feature_box">

          	<!-- feature box -->
            <div class="data_block" data-aos="fade-left" data-aos-duration="1500">
              <div class="d-flex justify-content-start">
               <div class="icon">
                <img src="images/i3.png" alt="image" >
              </div>
              <h4>Calculate My Carbon</h4> 
            </div>
              <div class="text">
                
                <p>An in-built GHG calculator that allows you to calculate your carbon footprint and also gives an insight on how to reduce your carbon and adopt a climate friendly lifestyle.
</p>
              </div>
            </div>

            <!-- feature box -->
            <div class="data_block" data-aos="fade-left" data-aos-duration="1500">
              <div class="d-flex justify-content-start">
             <div class="icon">
                <img src="images/i1.png" alt="image" >
              </div>
              <h4>E-waste locator</h4>
              </div> 
              <div class="text">
                
                <p>An in-built E-waste locator in map that helps you navigate e-waste recycler near your location and also gives you the details of the recycler i.e. name, address and contact details.
</p>
              </div>
            </div>

                <div class="data_block" data-aos="fade-left" data-aos-duration="1500">
                  <div class="d-flex justify-content-start">
            <div class="icon">
                <img src="images/i2.png" alt="image" >
              </div>
              <h4>Integrated Plantation Module</h4>
              </div> 
              <div class="text">
                
                <p>Integrated plantation module to track or monitor the growth of the plants planted by you and join in this journey of making a sustainable and better planet.
</p>
              </div>
            </div>

          </div>
          <!-- feature image -->
          <div class="feature_img" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
            <img src="images/features_frame.png" alt="image" >
          </div>
        </div>
      </div>
      <!-- container end -->
    </section>
    <!-- Features-Section-end -->

 <section class="row_am how_it_works" id="how_it_work">
      <!-- container start -->
      <div class="container">
        <div class="how_it_inner">
          <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
          	<!-- h2 -->
            <h2>How it works</h2>
        <!-- 
            <p>Lorem Ipsum is simply dummy text of the printing and typese tting <br> indus orem Ipsum has beenthe
              standard dummy.</p> -->
          </div>
          <div class="step_block">
          	<!-- UL -->
            <ul>
              <!-- step -->
              <li>
                <div class="step_text" data-aos="fade-right" data-aos-duration="1500">
                  <h4>Search App</h4>
                 <!--  <div class="app_icon">
                    <a href="#"><i class="icofont-brand-android-robot"></i></a>
                    <a href="#"><i class="icofont-brand-apple"></i></a>
                    <a href="#"><i class="icofont-brand-windows"></i></a>
                  </div> -->
                  <p>Scan the QR code <br>OR<br>search for "Our Green Planet" on the Google play Store</p>
                </div>
                <div class="step_number">
                  <h3>01</h3>
                </div>
                <div class="step_img" data-aos="fade-left" data-aos-duration="1500">
                  <img src="images/download_app.jpg" alt="image" >
                </div>
              </li>

              <!-- step -->
              <li>
                <div class="step_text" data-aos="fade-left" data-aos-duration="1500">
                  <h4>Download App</h4>
                 
                  <p>Download & Install the app from the Google play Store</p>
                </div>
                <div class="step_number"> 
                  <h3>02</h3>
                </div>
                <div class="step_img" data-aos="fade-right" data-aos-duration="1500">
                  <img src="images/create_account.jpg" alt="image" >
                </div>
              </li>

              <!-- step -->
              <li>
                <div class="step_text" data-aos="fade-right" data-aos-duration="1500">
                  <h4>Register Account</h4>
                  <!-- <span>Have any questions check our <a href="#">FAQs</a></span> -->
                  <p>Register Yourself and get started</p>
                </div>
                <div class="step_number">
                  <h3>03</h3>
                </div>
                <div class="step_img" data-aos="fade-left" data-aos-duration="1500">
                  <img src="images/enjoy_app.jpg" alt="image" >
                </div>
              </li>
            </ul>
          </div>
        </div>

        <!-- video section start -->
    
        <!-- video section end -->
      </div>
      <!-- container end -->
    </section>
    

 <section class="row_am modern_ui_section" id="how_can_you_join_us">
      <!-- container start -->
      <div class="container">
      	<!-- row start -->
        <div class="row">
          <div class="col-lg-6">
          	<!-- UI content -->
            <div class="ui_text">
              <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="100">
                <h2>How can you join us </span></h2>
               <!--  <p>
                  Lorem Ipsum is simply dummy text of the printing and typesetting industry lorem Ipsum has been the
                  industrys standard dummy text ever since the when an unknown printer took a galley of type and.
                </p> -->
              </div>
              <ul class="design_block">
                <li data-aos="fade-up" data-aos-duration="1500">
                 
                  <p>Register on Our Green Planet  as an individual or partner user to promote your activity that helps in building a better tomorrow


</p>
                </li>
                <li data-aos="fade-up" data-aos-duration="1500">
                                    <p>Collaborate with us for various campaigning and event activities</p>
                </li>
                <li data-aos="fade-up" data-aos-duration="1500">
              
                  <p>Ask your partners, friends ,families and colleagues to join the app and get their carbon footprint traced and tracked. </p>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-lg-6">
          	<!-- UI Image -->
            <div class="ui_images" data-aos="fade-in" data-aos-duration="1500">
              <div class="left_img">
                <img class="moving_position_animatin" src="images/modern01.png" alt="image" >
              </div>
              <!-- UI Image -->
              <div class="right_img">
               <!--  <img class="moving_position_animatin" src="images/secure_data.png" alt="image" > -->
                <img class="moving_position_animatin" src="images/modern02.png" alt="image" >
                <img class="moving_position_animatin" src="images/modern03.png" alt="image" >
              </div>
            </div>
          </div>
        </div>
        <!-- row end -->
      </div>
      <!-- container end -->
    </section>
   


    <!-- About-App-Section-Start -->
   
<!--   <section class="row_am free_app_section" id="getstarted">
    
        <div class="container">
            <div class="free_app_inner" data-aos="fade-in" data-aos-duration="1500" data-aos-delay="100"> 
         
              <div class="anim_line dark_bg">
                <span><img src="images/anim_line.png" alt="anim_line"></span>
                <span><img src="images/anim_line.png" alt="anim_line"></span>
                <span><img src="images/anim_line.png" alt="anim_line"></span>
                <span><img src="images/anim_line.png" alt="anim_line"></span>
                <span><img src="images/anim_line.png" alt="anim_line"></span>
                <span><img src="images/anim_line.png" alt="anim_line"></span>
                <span><img src="images/anim_line.png" alt="anim_line"></span>
                <span><img src="images/anim_line.png" alt="anim_line"></span>
                <span><img src="images/anim_line.png" alt="anim_line"></span>
              </div>
              
                <div class="row">
                	
                    <div class="col-md-6">
                        <div class="free_text">
                            <div class="section_title">
                                <h2>Let’s download free from apple and play store</h2>
                                <p>Instant free download from apple and play store orem Ipsum is simply dummy text of the printing.
                                  and typese tting indus orem Ipsum has beenthe standard</p>
                            </div>
                            <ul class="app_btn">
                              <li>
                                <a href="#">
                                  <img src="images/appstore_blue.png" alt="image" >
                                </a>
                              </li>
                              <li>
                                <a href="#">
                                  <img src="images/googleplay_blue.png" alt="image" >
                                </a>
                              </li>
                            </ul>
                        </div>
                    </div>

                 
                    <div class="col-md-6">
                        <div class="free_img">
                            <img src="images/download-screen01.png" alt="image" >
                            <img class="mobile_mockup" src="images/download-screen02.png" alt="image" >
                        </div>
                    </div>
                </div>
           
            </div>
        </div>
  
    </section>
    -->
    <!-- Beautifull-interface-Section start -->
    <section class="row_am interface_section">
	  <!-- container start -->
      <div class="container-fluid">
        <div class="section_title" data-aos="fade-up" data-aos-duration="1500" data-aos-delay="300">
            <!-- h2 -->
            <h2>Beautiful Interface</h2>
       
        </div>

          <!-- screen slider start -->
          <div class="screen_slider" >
            <div id="screen_slider" class="owl-carousel owl-theme">
              <div class="item">
                <div class="screen_frame_img">
                    <img src="images/screen-5.png" alt="image" >
                </div>
              </div>
              <div class="item">
                <div class="screen_frame_img">
                    <img src="images/screen-4.png" alt="image" >
                </div>
              </div>
              <div class="item">
                <div class="screen_frame_img">
                    <img src="images/screen-6.png" alt="image" >
                </div>
              </div>
              <div class="item">
                <div class="screen_frame_img">
                    <img src="images/screen-7.png" alt="image" >
                </div>
              </div>
              <div class="item">
                <div class="screen_frame_img">
                    <img src="images/screen-8.png" alt="image" >
                </div>
              </div>
           
          </div>
          </div>
          <!-- screen slider end -->
      </div>
      <!-- container end -->
    </section>
    <!-- Beautifull-interface-Section end -->

    <!-- Download-Free-App-section-Start  -->
  


 <?php include('include/footer.php'); ?> 
    <!-- Footer-Section end -->

  <!-- VIDEO MODAL -->
  <div class="modal fade youtube-video" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
          <button id="close-video" type="button" class="button btn btn-default text-right" data-dismiss="modal">
            <i class="icofont-close-line-circled"></i>
          </button>
            <div class="modal-body">
                <div id="video-container" class="video-container">
                    <iframe id="youtubevideo" src="#" width="640" height="360" frameborder="0" allowfullscreen></iframe>
                </div>        
            </div>
            <div class="modal-footer">
            </div>
        </div> 
    </div>
  </div>

  <div class="purple_backdrop"></div>

  </div>
  <!-- Page-wrapper-End -->

  <!-- Jquery-js-Link -->
  <script src="js/jquery.js"></script>
  <!-- owl-js-Link -->
  <script src="js/owl.carousel.min.js"></script>
  <!-- bootstrap-js-Link -->
  <script src="js/bootstrap.min.js"></script>
  <!-- aos-js-Link -->
  <script src="js/aos.js"></script>
  <!-- main-js-Link -->
  <script src="js/main.js"></script>

</body>


<!-- Mirrored from kalanidhithemes.com/live-preview/landing-page/apper/all-demo/01-app-landing-page-defoult/index.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 17 May 2023 05:19:04 GMT -->
</html>