@extends('vcards.vcard11.app')
@section('title')
blog single
@endsection
@section('page_css')
<link href="{{ asset('assets/css/blog.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('assets/css/blog-single.css') }}" rel="stylesheet" type="text/css">
@endsection
@section('page_name')
blog single
@endsection
@section('content')
<div class="tab-content p-sm-4 p-3" id="v-pills-tabContent">
<div class="blog-single-tab tab-pane fade show active" id="nav-blog-single" role="tabpanel"
aria-labelledby="nav-blog-single-tab">
<section class="blog-section">
<div class="row">
<div class="col-lg-8">
<div class="blog-post mb-4">
<div class="section-heading mb-4">
<h2 class="fs-22 text-white ps-4 mb-1">BLOG POST TITLE</h2>
<div class="ps-4">
<span class="fs-14 "><i class="fa-regular fa-calendar"></i></span>
<span class="fs-12 text-white">15 MARCH 2022</span>
</div>
</div>
<div class="mb-4">
<div id="carouselExampleIndicators1" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators ">
<button type="button" data-bs-target="#carouselExampleIndicators1"
data-bs-slide-to="0" class="active" aria-current="true"
aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators1"
data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators1"
data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{ asset('assets/img/vcard11/blog-post1.jpeg') }}"
class="w-100 h-100 object-fit-cover">
<div class="search" onclick="openModalBox2();currentSlide(1)">
<a href="#!"
class="search d-flex justify-content-center align-items-center ">
<i class="fas fa-magnifying-glass d-flex justify-content-center align-items-center text-white fs-6"></i>
</a>
</div>
</div>
<div class="carousel-item">
<img src="{{ asset('assets/img/vcard11/blog-post2.jpeg') }}"
class="w-100 h-100 object-fit-cover">
<div class="search" onclick="openModalBox2();currentSlide(2)">
<a href="#!"
class="search d-flex justify-content-center align-items-center ">
<i class="fas fa-magnifying-glass d-flex justify-content-center align-items-center text-white fs-6"></i>
</a>
</div>
</div>
<div class="carousel-item">
<img src="{{ asset('assets/img/vcard11/blog-post3.jpeg') }}"
class="w-100 h-100 object-fit-cover">
<div class="search" onclick="openModalBox2();currentSlide(3)">
<a href="#!"
class="search d-flex justify-content-center align-items-center ">
<i class="fas fa-magnifying-glass d-flex justify-content-center align-items-center text-white fs-6"></i>
</a>
</div>
</div>
</div>
{{-- <div class="d-none d-md-block">--}}
{{-- <button class=" carousel-control-prev" type="button"--}}
{{-- data-bs-target="#carouselExampleIndicators1" data-bs-slide="prev">--}}
{{-- <span class="carousel-control-prev-icon" aria-hidden="true"></span>--}}
{{-- <span class="visually-hidden">Previous</span>--}}
{{-- </button>--}}
{{-- <button class=" carousel-control-next" type="button"--}}
{{-- data-bs-target="#carouselExampleIndicators1" data-bs-slide="next">--}}
{{-- <span class="carousel-control-next-icon" aria-hidden="true"></span>--}}
{{-- <span class="visually-hidden">Next</span>--}}
{{-- </button>--}}
{{-- </div>--}}
</div>
</div>
<div id="myModalbox2" class="modalbox2">
<span class="close cursor" onclick="closeModalBox2()">×</span>
<div class="modal-content">
<div class="mySlidesbox2">
<img src="{{ asset('assets/img/vcard11/blog-post1.jpeg') }}" style="width:100%">
</div>
{{-- <div class="mySlidesbox2">--}}
{{-- <img src="{{ asset('assets/img/vcard11/blog-post2.jpeg') }}" style="width:100%">--}}
{{-- </div>--}}
{{-- <div class="mySlidesbox2">--}}
{{-- <img src="{{ asset('assets/img/vcard11/blog-post3.jpeg') }}" style="width:100%">--}}
{{-- </div>--}}
{{-- <a class="prev" onclick="plusSlides(-1)">❮</a>--}}
{{-- <a class="next" onclick="plusSlides(1)">❯</a>--}}
</div>
</div>
<div class="blog-post-desc ">
<div class="desc d-flex flex-wrap align-items-center mb-4 pt-2">
<div class="me-4">
<span class="fs-14 me-2"><i class="fa-regular fa-eye"></i></span>
<span class="fs-12 text-white"> 164 views</span>
</div>
<div class="">
<span class="fs-14 me-2"><i class="fa-regular fa-message"></i></span>
<span class="fs-12 text-white">6 commnets</span>
</div>
</div>
<p class="fs-14 text-white mb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare sem sed quam
tempus aliquet vitae eget dolor. Proin eu ultrices libero. Curabitur vulputate
vestibulum elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius
eros ac purus dignissim. Proin eu ultrices libero. Curabitur vulputate vestibulum
elementum. Suspendisse id neque a nibh mollis blandit. Quisque varius eros ac purus
dignissim.
</p>
<div class="tags d-flex flex-wrap ">
<div class="me-2 mb-2">
<a href="#!" class="fs-12 d-inline-block">Design</a>
</div>
<div class="me-2 mb-2">
<a href="#" class="fs-12 d-inline-block">Video</a>
</div>
<div class="me-2 mb-2">
<a href="#" class="fs-12 d-inline-block">Photo</a>
</div>
</div>
</div>
</div>
<!-- start comment-section -->
<div class="comment-section p-4 mb-4">
<h3 class="fs-6 text-white mb-4">Comments</h3>
<div class="comment d-flex">
<div class="comment-img d-sm-block d-none">
<img src="{{ asset('assets/img/vcard11/comment.jpeg') }}"
class="w-100 h-100 object-fit-cover">
</div>
<div class="comment-desc p-4 ms-sm-4 position-relative">
<div class="tag d-flex justify-content-center align-items-center">
<a href="#!" class="fs-14 text-white">01</a>
</div>
<div class="comment-img d-sm-none d-block position-relative">
<img src="{{ asset('assets/img/vcard11/comment.jpeg') }}"
class="w-100 h-100 object-fit-cover">
</div>
<h5 class="fs-6 text-white mb-sm-4 ps-sm-0 ps-5 ms-sm-0 ms-2">Kevin Antony</h5>
<p class="text-white fs-12 mb-0 mt-sm-0 mt-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit.
Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id,
mattis vel, nisi. .</p>
<div class="d-flex justify-content-between align-items-center flex-wrap">
<span class="fs-12 me-3 mt-sm-4 mt-3">JANUARY 02, 2022</span>
<a class="btn btn-primary fs-12 mt-sm-4 mt-3" href="#"><i
class="fas fa-reply me-2"></i> Reply</a>
</div>
</div>
</div>
</div>
<!-- end comment-section -->
<!-- start leave-comment section -->
<div class="leave-comment-section mb-4">
<div class="section-heading mb-4">
<h2 class="fs-22 text-white ps-4 mb-1">Leave A Comment</h2>
</div>
<form>
<div class="form-group mb-4">
<div class="input-icon">
<i class="fas fa-user-plus"></i>
</div>
<input type="name" class="form-control fs-12 text-white"
id="exampleFormControlInput1" placeholder="Your Name *" required="">
</div>
<div class="form-group mb-4">
<div class="input-icon">
<i class="fas fa-envelope"></i>
</div>
<input type="email" class="form-control fs-12 text-white"
id="exampleFormControlInput1" placeholder="Email Address*" required="">
</div>
<div class="form-group mb-4 text-area">
<div class="input-icon">
<i class="fas fa-message"></i>
</div>
<textarea name="comments" id="comments"
class="text-area form-control pt-2 fs-12 text-white" rows="5"
placeholder="Your Message:"></textarea>
</div>
<button class="btn btn-primary fs-14">Add Comment</button>
</form>
</div>
<!-- end leave-comment section -->
</div>
<div class="col-lg-4">
<div class="blog-right-section">
{{-- <div class="search-section mb-4">--}}
{{-- <div class="search-box ">--}}
{{-- <form action="#">--}}
{{-- <input type="text" class="search" placeholder="Search..." value="">--}}
{{-- <button class="search-icon"><i class="fa fa-search transition"></i>--}}
{{-- </button>--}}
{{-- </form>--}}
{{-- </div>--}}
{{-- </div>--}}
<!-- start tags-section -->
<div class="tags-section">
<div class="section-heading mb-4">
<h2 class="fs-22 text-white ps-4">Tags</h2>
</div>
<div class="tags d-flex flex-wrap mb-4">
<div class="me-2 mb-2">
<a href="#!" class="fs-12 d-inline-block">Paint</a>
</div>
<div class="me-2 mb-2">
<a href="#" class="fs-12 d-inline-block">Construction</a>
</div>
<div class="me-2 mb-2">
<a href="#" class="fs-12 d-inline-block">Build</a>
</div>
<div class="me-2 mb-2">
<a href="#" class="fs-12 d-inline-block">Poster</a>
</div>
<div class="me-2 mb-2">
<a href="#" class="fs-12 d-inline-block">Trends</a>
</div>
</div>
</div>
<!-- end tags-section -->
<!-- start categories-section -->
<div class="categories-section mb-4">
<div class="section-heading mb-4">
<h2 class="fs-22 text-white ps-4">Categories</h2>
</div>
<div class="category-box p-4">
<div class="d-flex align-items-center justify-content-between mb-3">
<a href="#" class="fs-14">Standard</a>
<span>3</span>
</div>
<div class="d-flex align-items-center justify-content-between mb-3">
<a href="#" class="fs-14">Video</a>
<span>6</span>
</div>
<div class="d-flex align-items-center justify-content-between mb-3">
<a href="#" class="fs-14">Gallery</a>
<span>12</span>
</div>
<div class="d-flex align-items-center justify-content-between">
<a href="#" class="fs-14">Quotes</a>
<span>4</span>
</div>
</div>
</div>
<!-- end categories-section -->
<!-- start last-post-section -->
<div class="last-post-section mb-4">
<div class="section-heading mb-4">
<h2 class="fs-22 text-white ps-4">Last Posts</h2>
</div>
<div class="last-posts d-flex ">
<a href="#!" class="post d-block">
<img src="{{ asset('assets/img/vcard11/last-post1.jpeg') }}"
class="w-100 h-100 object-fit-cover">
</a>
<div class="last-post-desc ps-3">
<a href="#!" class="fs-14 text-white">Vivamus dapibus rutrum</a>
<span class="d-flex align-items-center fs-12 text-white"><i
class="fas fa-calendar me-2"></i> 27 Mar 2021 </span>
</div>
</div>
<div class="last-posts d-flex ">
<a href="#!" class="post d-block">
<img src="{{ asset('assets/img/vcard11/last-post2.jpeg') }}"
class="w-100 h-100 object-fit-cover">
</a>
<div class="last-post-desc ps-3">
<a href="#!" class="fs-14 text-white">Integer sagittis</a>
<span class="d-flex align-items-center fs-12 text-white"><i
class="fas fa-calendar me-2"></i> 12 May 2021 </span>
</div>
</div>
<div class="last-posts d-flex ">
<a href="#!" class="post d-block">
<img src="{{ asset('assets/img/vcard11/last-post3.jpeg') }}"
class="w-100 h-100 object-fit-cover">
</a>
<div class="last-post-desc ps-3">
<a href="#!" class="fs-14 text-white">Snowy Mountains Trip</a>
<span class="d-flex align-items-center fs-12 text-white"><i
class="fas fa-calendar me-2"></i> 22 Feb 2021 </span>
</div>
</div>
</div>
<!-- end last-post-section -->
<!-- start subscribe-section -->
<div class="subscribe-section">
<div class="section-heading mb-4">
<h2 class="fs-22 text-white ps-4">Subscribe</h2>
</div>
<form>
<input class="email fs-12 mb-3" name="email" placeholder="Your Email"
spellcheck="false" type="text" required/>
<button type="submit" class="btn btn-primary fs-12 w-100">Submit</button>
</form>
</div>
<!-- end subscribe-section -->
</div>
</div>
</div>
</section>
</div>
</div>
@endsection