<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - Young Life</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<!--<div onclick="noblur"; id="blur">-->
    <body style="z-index: 2;">
        <div class="BigBar">
            <div class="navigator">
                <i onclick="shownav()" class="fa fa-bars"></i>
            <ul id="navbar" style="display: none;">
                <li><a href="index.html">Home</a></li>
                    <li><a href="Camp.html">Camp</a></li>
                    <li><a href="Contact_Us.html">Contact Us</a></li>
                    <li><a href="Club.html">Club</a></li>
                    <li><a href="Donate.html">Donate</a></li>
                    <li><a href="FAQ's.html">FAQ's</a></li>
                </ul>  
            </div>  
            <div class="header"> 
                Young Life
            </div>
      <!--carousel beginning-->
      <div style="z-index:-1;;" id="carouselExampleIndicators" class="carousel slide, behind" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img class="d-block w-100" src="img/Carousel1.jpeg" alt="First slide">
            </div>
            <div class="carousel-item">
              <img class="d-block w-100" src="img\Carousel3.jpeg" alt="Second slide">
            </div>
            <div class="carousel-item">                                                         
              <img class="d-block w-100" src="img\Carousel2.jpeg" alt="Third slide">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      <!--carousel Ending-->

        <script>
            function shownav() {
                let x = document.getElementById("navbar");
        if ( x.style.display === "none") {
            x.style.display = "block";
        } 
        else{
            x.style.display = "none";
        }
            }
        
            function noblur() {
                document.getElementById("blur").display = "none";

            }
            
        </script> 
      
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  
    <!--Scrolld down once-->
        <section class="quote1">
          <div>
            <img style="border: solid #f77f00 7px;" class="person1" src="img\person1.jpeg" width="450px" height="450px">
            <p>
              - "ALTHOUGH THE WORLD SHUTDOWN DUE TO COVID - 19, MY YOUNG LIFE LEADER SAFELY KEPT IN TOUCH AND NEVER STOPPED PURSUING ME."
            </p>
          </div>

        </section>

        <section class="quote2">
              <div>
                <img style="border: #f77f00 solid 7px;" class="person2" src="img\person2.jpeg" width="425px" height="425px">
                <p>
                  "Young Life has changed my life BIG time and I'm loving it!" -
                </p>
              </div>

        </section>
        
        <section class="luke">
            <h2 style="border: solid 7px #f77f00;">Our Mission:</h2>
            <br>
            <br>
            <span>   
                <img class="pic-luke"  style="border: solid 12px #f77f00;" src="img\Luke Sadler.jpeg" width="325px" height="500px">
                 <div>

                <p class="simple">
                    -"Here at Young Life, It is a guarantee that you will enjoy our beautiful community of young teens like you!
                    Young Life is a place where you can escape from overall stress, rather that is from school, home, or in general, 
                    you can have a super fun time here at Young Life and you will also learn about God's scripture and you will grow 
                    a stronger bond with him and walk on the path he has set for you."
                </p>
                </div>
            </span>         
        </section>

        <section class="last">
              <div>
                  <img style="border: #f77f00 solid 7px;" class="group" src="img\GroupPicture1.PNG" width="825px" height="500px">

                <span>
                  <h3>
                     At Young Life, EVERYONE Is Welcome. We Are More Than Pleased To See
                     New Faces Everyday. THE QUESTION IS, When Will You Join Us On The Young Life Path?
                  </h3>

                </span>
              </div>

        </section>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

      <footer>
        <h1 class="footer">
          Young Life
        </h1>
      </footer>
</div>
</html>