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

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title>OnePage Bootstrap Template - Index</title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="assets/img/favicon.png" rel="icon">
  <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
  <link rel="stylesheet" type="text/css" href="https://js.api.here.com/v3/3.1/mapsjs-ui.css" />
    <link rel="stylesheet" type="text/css" href="demo.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link rel="stylesheet" type="text/css" href="../template.css" />
    <script type="text/javascript" src='../test-credentials.js'></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-core.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-service.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-ui.js"></script>
    <script type="text/javascript" src="https://js.api.here.com/v3/3.1/mapsjs-mapevents.js"></script>
  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

  <style type="text/css">
    .widt-search{
          width: 39em;
    }
    .width-card{
      width: 25em;
    }
   

    .food-items-list{
       color: #6a6666; 
       background-color: #ededed;
        width: 230px; 
        font-family:'Helvetica Neue',Helvetica, Arial, sans-serif;
        margin-bottom: 5px;
           font-weight: lighter;
      font-size: 14px;

    }

    .bg-map{
       background-color: #c6c6c6;
    }
    .row-top{
      margin-top:-10px;
    }

    .map-bg{
      filter: grayscale(100%);
      width: 100% important;
      height: 600px !important;

    }
    .H_l_vertical,.H_el,.H_copyright{
      display: none !important;
    }
  .googlemaps {
  height: 100% !important;
  width: 100% !important;
  position:absolute;
  top: 0;
  left: 0;
  z-index: 0; /* Set z-index to 0 as it will be on a layer below the contact form */
  filter: grayscale(100%);
}

#foodbank-card {
  position: relative;
  z-index: 1; /* The z-index should be higher than Google Maps */

}
  </style>
</head>

<body  >

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top">
    <div class="container d-flex  justify-content-between">

      <h3 class="logo"><a href="index.html"><img src="Group.svg"></a></h3>


      <nav id="navbar" class="navbar  ">
        <ul>
        <li class="widt-search">
          <div class="input-group">
            <input type="text" class="form-control" placeholder="Search Food Bank......">
            <div class="input-group-append">
              <button class="btn btn-secondary" type="button">
                <i class="fa fa-search"></i>
              </button>
            </div>
          </div>
        </li>
    
          <li><a class="getstarted scrollto" style="background-color: #ffa500; border: none;" href="#about">Login <i class="fa fa-sign-in"></i></a></li>
        </ul>
        <i class="bi bi-list mobile-nav-toggle"></i>
      </nav><!-- .navbar -->

    </div>
  </header><!-- End Header -->

  <!-- ======= Hero Section ======= -->
  <section class="bg-map">
  
  <div class="row">
    <div class="col-md-12">
      <div id="map" class="googlemaps"></div>
      <div id="foodbank-card">
      <div class="card width-card" style=" margin-top: 10px; margin-left: 5px; border-radius: 20px;">
                <div class="card-header" style="background-color:white; cursor: pointer; border-radius:20px; border: none;">
                 <i style="display:none;" class="fa fa-window-close pull-right dismss" aria-hidden="true"></i>
                </div>
                  <div class="card-body">
                    <h4 style="margin-top: -25px; font-weight:500; font-family:'Helvetica Neue',Helvetica, Arial, sans-serif;  font-size:20px; line-height: 24px;">WestBank</p>

                   <p style="font-size:13px; color: blue; font-family:'Helvetica Neue',Helvetica, Arial, sans-serif;  margin-top:-20px;"> <span class="fa fa-location-arrow"></span> 4.2 KM away</p>

                    <p class="text-muted" style="font-size: 13px; font-weight:lighter; margin-top: -20px;">321 CBA Street,Doval, QC H7T0G8</p>
                    <div class="moreexpand" style="display:none;">
                      
                    <p style="font-size: 16px; font-family:'Helvetica Neue',Helvetica, Arial, sans-serif; font-weight:200; color:black; line-height: 20px;">The Demand for food banks is higher then ever,but donations have dried up during lockdown</p>

                    <p style="font-size: 16px; font-weight:200; color:black;">We Appreciate all donations</p>
                    <p class="text-muted" style="font-size: 12px;"><span style="font-size: 14px;" class="fa fa-info-circle"></span>&nbsp;Check website or Call for opening times.</p>

                    <h6 style="font-size:13px; font-weight:bold;">Needed Food Items:</h6>
                    
                    <p class="food-items-list">Fruit Juice (UHT/long-life Only)</p>
                    <p class="food-items-list">Tinned Meat</p>
                    <p class="food-items-list">Rice Pudding</p>
                    <p class="food-items-list">Tinned Fruit</p>
                    <p class="food-items-list">Milk (UHT/Carton)</p>
                    
                    </div>
                    <a id="more" href="#" style="color:#fc6f03; font-size: 12px; font-weight:bold; margin-top: 0px;" class="pull-right">More info  >></a><span class="pull-right">&nbsp;</span>

                    <a href="#" style=" background-color:#fc6f03; border:none; border-radius: 30px; width:8rem; color:white; text-align: center; font-size:15px;" class="pull-right"><i class="fa fa-comments"></i> Chat</a>
            </div>
          </div>
          </div>




    </div>
  </div>

            
          
          
  </section><!-- End Hero -->


  <!-- ======= Footer ======= -->
  <footer id="footer">


    <div class="container d-md-flex py-4">

      <div class="me-md-auto text-center text-md-start">
        <div class="copyright">
          &copy; Copyright <strong><span>Food-don</span></strong>. All Rights Reserved
        </div>
      
      </div>
    
    </div>
  </footer><!-- End Footer -->

  <div id="preloader"></div>
  <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>

  <!-- Vendor JS Files -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/purecounter/purecounter.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>
  <script type="text/javascript" src='demo.js'></script>
  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

<script type="text/javascript">
  $("#more").on("click",function() {
    $(".moreexpand").show();
    $(".dismss").show();
    $("#more").hide();
  
  });

  $(".dismss").on('click',function() {
   $(".moreexpand").hide();
       $(".dismss").hide();
        $("#more").show();
  })

  
</script>

</body>

</html>