@extends('layouts.default')
{{-- Page title --}}
@section('title')
    Cards @parent
@stop
{{-- page level styles --}}
@section('header_styles')
    <!-- page vendors -->
    <link href="{{ asset('css/pages.css') }}" rel="stylesheet">

    <!--end of page vendors -->
@stop
@section('content')

    <!-- Content Header (Page header) -->
    <section class="content-header">

        <div aria-label="breadcrumb" class="card-breadcrumb">
            <h1>Cards</h1>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Content</a></li>
                <li class="breadcrumb-item active" aria-current="page">Cards</li>
            </ol>
        </div>
        <div class="separator-breadcrumb border-top"></div>

    </section>
    <!-- /.content -->
    <section class="content">
        <div class="row mt-3">
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card p-0">
                    <div class="card-header d-flex">
                        <div class="d-flex">
                            <span class="mt-8"><img src="{{ asset('img/profile/images2.jpg') }}" alt="image"
                                    class="image-set"></span>
                            <div class="m-2"><strong>John Mark</strong>
                                <p>20 mins.ago</p>
                            </div>
                        </div>
                    </div>
                    <img src="{{ asset('img/images/card-pic2.jpg') }}" alt="image" class="card-img-top img-fluid">
                    <div class="card-body">
                        <div class="card-title card-title-color">Kangaroo Scene Safari
                        </div>
                        <p class="small">Free on Thursdays</p>
                        <p>Cards provide context and an entry point to more robust information and views, and their content
                            and quantity can vary greatly.
                        </p>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-6 col-lg-4">
                <div class="card p-0">
                    <div class="card-header d-flex">
                        <div class="d-flex">
                            <span class="mt-8"><img src="{{ asset('img/profile/images2.jpg') }}" alt="image"
                                    class="image-set"></span>
                            <div class="m-2"><strong>John Mark</strong>
                                <p>20 mins.ago</p>
                            </div>
                        </div>
                    </div>
                    <img src="{{ asset('img/images/card-pic2.jpg') }}" alt="image" class="img-fluid">
                    <div class="card-body">
                        <div class="card-title card-title-color">Kangaroo Scene Safari
                        </div>
                        <p class="small">Free on Thursdays</p>
                        <p>Cards provide context and an entry point to more robust information and views.
                        </p>
                        <a href="#" class="card-link text-primary"><span
                                class="im im-icon-Sharethis me-2 stroke"></span>SHARE</a>
                        <a href="#" class="card-link text-primary"><span
                                class="im im-icon-Internet-Explorer me-2 stroke"></span>EXPLORE</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-md-12 col-lg-4">
                <div class="card mb-3 p-0">
                    <div class="row no-gutters">
                        <div class="col-md-4">
                            <img src="{{ asset('img/profile/bonsai.jpg') }}" class="card-img rounded-start" alt="image">
                        </div>
                        <div class="col-md-8">
                            <div class="card-body">
                                <h5 class="card-title">Card title</h5>
                                <p class="card-text">This is a wider card with supporting text below as a natural
                                    lead-in to
                                    additional content. This content is a little bit longer.</p>
                                <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-12 mt-3">
                        <div class="card card-bg1 bg-info text-white rounded-0">
                            <img src="{{ asset('img/images/card-pic3.svg') }}" class="card-img" alt="image-missing">
                            <div class="card-img-overlay">
                                <h5 class="card-title text-white">Card title</h5>
                                <p class="card-text">This is a wider card with supporting text below as a natural
                                    lead-in to
                                    additional content. This content is a little bit longer.</p>
                                <p class="card-text">Last updated 3 mins ago</p>
                            </div>
                            <div class="overlay"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-3 col-md-6 col-12">
                <div class="card mb-4">
                    <div class="card-body">
                        <h5 class="card-title mb-3">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of
                            the
                            card's content.
                        </p>
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">Another link</a>
                    </div>
                </div>
<div class="card mb-4 p-0 mt-20px">
                    <div class="card-header border-bottom">
                        <h6 class="card-title">Featured</h6>
                    </div>
                    <div class="card-body">
                        <h6 class="card-title">Card title text</h6>
                        <p class="card-text mt-2">With supporting text below as a natural lead-in to additional content.
                        </p>
<a href="#" class="btn btn-primary rounded-pill">Go somewhere</a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3 col-12 ">
                <div class="card mt-md-20 mb-4 p-0 card-res">
                    <img class="card-img-top img-fluid" src="{{ asset('img/images/photo-card1.jpg') }}" alt="">
                    <div class="card-body">
                        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum, cumque!</p>
                    </div>
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item">List Item One</li>
                        <li class="list-group-item">List Item Two</li>
                        <li class="list-group-item">List Item Three</li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12">
                <div class="row">
                    <div class="col-12">
                        <div class="card mb-4 p-0 mt-md-20 card-res">
                            <img class="card-img-top img-fluid" src="{{ asset('img/images/photo-card1.jpg') }}"
                                alt="">
                            <div class="card-body">
                                <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum, cumque!</p>
                                <a href="#" class="btn btn-primary">Go somewhere</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6 col-12 card-res">
                <div class="card card-bg">
<div class="card-header text-end px-15px">
                        <span class="photo-set"><i class="im im-icon-Love-2 text-danger"></i> </span>
                        <span class="photo-set">663</span>
                        <span class="photo-set">+Collect</span>
                    </div>
                    <div class="overlay"></div>
<div class="card-footer px-15px py-15px">
                        <span class="image-set"><img src="{{ asset('img/profile/images2.jpg') }}"
                                alt="image"></span><span class="ps-2 text-white">John Mark</span>
                        <span class="float-end bg-white py-2 px-3 mt-3 cursor"><i class="im im-icon-Down"></i></span>
                    </div>
                </div>
                <div class="card bg-primary text-white text-center p-2">
                    <blockquote class="blockquote mb-0">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. iste iste itaque laudantium,
                            magnam magni maiores possimus provident sed sint veniam! Consectetur, dolore?</p>
                        <footer class="blockquote-footer text-white">
                            <small>
                                Someone famous in <cite title="Source Title">Source Title</cite>
                            </small>
                        </footer>
                    </blockquote>
                </div>
            </div>
        </div>

    </section>

@stop
@section('footer_scripts')

@stop