@extends('layouts.main')
@push('title')
<title>Gallery</title>
<meta name="title" content="Harman Pipe Band">
<meta name="keywords" content="Harman Pipe Band">
<meta name="description" content="Harman Pipe Band">
    
@endpush
@section('main-section')
<div class="breadcrumb-section mb-5" style="background-image: linear-gradient(270deg, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.3) 101.02%), url(/public/assets/about-dhol.jpg);background-repeat: no-repeat;background-position: center;">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 d-flex justify-content-center">
                <div class="banner-content">
                    <h1 class="banner-head">Gallery</h1>
                    <ul class="breadcrumb-list">
                        <li><a class="banner-home" href="/">Home</a></li> 
                        <li>Gallery</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="gallery-area py-100">
        <div class="gallery-shape">
            <img class="gallery-shape-1" src="public/assets/img/shape/02.png" alt="">
            <img class="gallery-shape-2" src="public/assets/img/shape/03.png" alt="">
        </div>
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mx-auto wow fadeInDown" data-wow-duration="1s" data-wow-delay=".25s">
                    <div class="site-heading text-center">
                        <span class="site-title-tagline">Our Gallery</span>
                        <h2 class="site-title">Our Captured <span>Moments</span></h2>
                        <div class="header-img-divider">
                            <img src="public/assets/img/icon/divider.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            
              <div class="row mb-5 card-effects">
      @foreach($gallery as $gallerys)
     <div class="col-md-4 mb-4">
       <div class="card card-effect p-0 h-100">
         <div class="card-img rounded-0">
           <div class="img-hover">
             <img style="width: 100%;height: 250px;" class="rounded-top img-fluid" 
                  src="{{asset('public/uploads/post/'.$gallerys->image)}}" alt="...">
           </div>
         </div>
       </div>
     </div>
     @endforeach
  </div>
        </div>
    </div>
@endsection