FP Phase II - Onboarding - Find a Local Group

In this example below you will see how to do a FP Phase II - Onboarding - Find a Local Group with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by ksullivan, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ksullivan ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>FP Phase II - Onboarding - Find a Local Group</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

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

  
</head>

<body>

  <div class="container">
  <div class="row">
    
    <div class="page-header">
      <h1>Find a local group</h1>
      <p class="lead">Showing locations near 12345 <a href="#" id="show"><small>change</small></a></p>
      <div class="search">
        <div class="input-group input-group-lg">
          <input type="text" class="form-control" aria-describedby="searchhelp">
          <span class="input-group-btn">
            <button class="btn btn-primary" type="button">Search</button>
          </span>
        </div><!-- /input-group -->
        <p class="text-muted">Search by address, city, state, or zip code</p>
        <p><a href="#" id="hide"><small>cancel</small></a></p>
      </div>
    </div>
    
    <div class="col-md-6">
      <div class="list-group">
        <a href="/class.html" class="list-group-item">
          <h4 class="list-group-item-heading">Grace Church Nashville</h4>
          <p class="list-group-item-text">1097 Murfreesboro Road, Franklin, TN 37064</p>
        </a>
        <a href="/class.html" class="list-group-item">
          <h4 class="list-group-item-heading">Church of the City</h4>
          <p class="list-group-item-text">828 Murfreesboro RoadFranklin, TN 37064</p>
        </a>
        <a href="/class.html" class="list-group-item">
          <h4 class="list-group-item-heading">Otter Creek Church of Christ</h4>
          <p class="list-group-item-text">409 Franklin Road Brentwood, TN 37027</p>
        </a>
      </div>
      <a class="btn btn-default btn-block" href="/find-group.html" role="button">load more</a>
    </div>
      
    <div class="col-md-6">
      [Map Here]
    </div>
    
  </div><!-- end .row -->
    
  <footer>
    <div class="row">
      <p>&copy; 2017 Ramsey Solutions</p>
    </div>
  </footer>
  
</div> <!-- /container -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/ksullivan/fp-phase-ii-onboarding-find-a-local-group-KmOexO */
.jumbotron h1 {
  font-size: 3em;
}

footer {
  padding-top: 4em;
}

.search {
  margin-bottom: 3em;
  display: none;
}


/*Downloaded from https://www.codeseek.co/ksullivan/fp-phase-ii-onboarding-find-a-local-group-KmOexO */
$(document).ready(function(){
    $("#hide").click(function(){
        $(".search").hide();
    });
    $("#show").click(function(){
        $(".search").show();
    });
});

Comments