@extends('layouts.app')
@section('title', 'Members')
@section('styles')
    <link rel="stylesheet" type="text/css" href="{{ asset('') }}assets/css/style.min.css">
@endsection
@section('content')
    <main class="main">
        <div class="shop-default-banner shop-boxed-banner banner d-flex align-items-center mb-6" style="background-image: url(assets/images/star1.png);background-size:contain;background-color: #fbfbfd;height: 170px;">
                    <div class="container banner-content">
                        <h4 class="banner-subtitle text-center" style="
    font-size: 50px;
">PHOTO GALLERY</h4>

                      
                    </div>
                </div>
        <!-- Start of Breadcrumb -->
        <nav class="breadcrumb-nav">
            <div class="container-fluid">
                <ul class="breadcrumb bb-no">
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li>Photo Gallery</li>
                </ul>
            </div>
        </nav>
        <!-- End of Breadcrumb -->

        <!-- Start of Page Content -->
        <div class="page-content mb-10 mt-2">
            <!-- Start of Shop Banner -->
            <!-- End of Shop Banner -->
            <div class="container">


                <section class="category-masonry-section mb-10">
                    <div class="category-grid show-code-action show-code-added">
                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/4.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>
                        <div class="grid-item2">
                            <div class="category category-banner category-absolute overlay-zoom br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/8.jpg') }}" alt="category" width="580"
                                            height="215">
                                    </figure>

                                </a>
                            </div>
                        </div>
                        <div class="grid-item3">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure>
                                        <img src="{{ asset('assets/images/tn-soap/11.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>
                        <div class="grid-item2">
                            <div class="category category-banner category-absolute overlay-zoom br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/9.jpg') }}" alt="category" width="580"
                                            height="215">
                                    </figure>

                                </a>
                            </div>
                        </div>

                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/1.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>
                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/2.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>

                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/3.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>

                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/4.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>

                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/5.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>
                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/7.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>

                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/9.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>
                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/10.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>

                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/12.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>

                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/13.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>

                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/14.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>
                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/15.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>
                        <div class="grid-item1">
                            <div class="category category-banner category-absolute overlay-zoom overlay-dark br-sm">
                                <a href="#">
                                    <figure class="category-media">
                                        <img src="{{ asset('assets/images/tn-soap/6.jpg') }}" alt="Category Banner"
                                            width="280" height="520">
                                    </figure>

                                </a>
                            </div>
                        </div>

                    </div>
                </section>
            </div>
        </div>
        <!-- End of Page Content -->
    </main>
@endsection