Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @extends('frontend.master')
- @section('content')
- <main class="main-content-area">
- {{-- Ad search --}}
- <div class="ad-search-area">
- <div class="container">
- <div class="row">
- <div class="col-md-12">
- <div class="ad-search-form">
- <form action="">
- <div class="mega-menu">
- <span><i class="fa fa-bars"></i></span>
- </div>
- <div class="main-search">
- <input type="search" class="form-control" placeholder="I am looking for....">
- </div>
- <div class="location-search">
- <span><i class="fa fa-map-marker-alt"></i></span>
- <input type="text" class="form-control" placeholder="Location">
- </div>
- <div class="feat-search">
- <input type="text" class="form-control" placeholder="2km">
- </div>
- <div class="search-button">
- <button class="btn-brand"><i class="fa fa-search"></i></button>
- </div>
- </form>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <div class="breadcrumbs">
- <a href="#">Home</a>
- <span><i class="fa fa-chevron-right"></i></span>
- <a href="#">Cars</a>
- <span><i class="fa fa-chevron-right"></i></span>
- <a href="#">BMW</a>
- <span><i class="fa fa-chevron-right"></i></span>
- <a href="#">200 cc</a>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-8">
- <div class="ad-details-wrapper">
- <div class="ad-details">
- <div class="ad-header-area">
- <div class="ad-header-top d-flex justify-content-between align-items-center">
- <h3 class="ad-header-top-title"><a href="#">{{$add->title}} </a></h3>
- <div class="ad-header-top-price">
- <img src="{{ asset('/assets/img/icons/taka-sign.png') }}" width="14" height="16" alt="">
- <span>{{$add->price}}</span>
- </div>
- </div>
- <div class="ad-header-bottom d-flex justify-content-between">
- <p class="ad-location-text"><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
- <p class="ad-view"><i class="fa fa-eye color-primary"></i></p>
- <p class="ad-fav"><i class="fa fa-heart color-primary"></i></p>
- </div>
- </div>
- <div class="ad-images">
- <ul class="nav nav-tabs ad-nav-area" role="tablist">
- <li class="nav-item">
- <a class="nav-link" href="#adPhoto" role="tab" data-toggle="tab">
- <i class="fa fa-image color-primary"></i>
- <span>Photo</span>
- </a>
- </li>
- <li class="nav-item">
- <a class="nav-link" href="#adMap" role="tab" data-toggle="tab">
- <i class="fa fa-map-marker-alt color-primary"></i>
- <span>Map</span>
- </a>
- </li>
- </ul>
- <div class="tab-content ad-nav-content-area">
- <div role="tabpanel" class="tab-pane fade in active show" id="adPhoto">
- @foreach (json_decode($add->images) as $img)
- <div class="mySlides">
- <img src="{{url('images/'.$img)}}" style="width:100%">
- </div>
- @endforeach
- <a class="ad-prev" onclick="plusSlides(-1)">❮</a>
- <a class="ad-next" onclick="plusSlides(1)">❯</a>
- <div class="caption-container">
- <p id="caption"></p>
- </div>
- <div class="img-nav-area">
- <div class="img-nav-item">
- <img class="imgNav cursor"
- src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
- onclick="currentSlide(1)" alt="Car 1">
- </div>
- <div class="img-nav-item">
- <img class="imgNav cursor"
- src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
- style="width:100%"
- onclick="currentSlide(2)" alt="Car 2">
- </div>
- <div class="img-nav-item">
- <img class="imgNav cursor"
- src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
- onclick="currentSlide(3)" alt="Car 3">
- </div>
- <div class="img-nav-item">
- <img class="imgNav cursor"
- src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
- style="width:100%"
- onclick="currentSlide(4)" alt="Car 4">
- </div>
- <div class="img-nav-item">
- <img class="imgNav cursor"
- src="{{ asset('/assets/img/car-1.png') }}" style="width:100%"
- onclick="currentSlide(5)" alt="Car 5">
- </div>
- <div class="img-nav-item">
- <img class="imgNav cursor"
- src="{{ asset('/assets/img/LamborghiniRoadsterTA.jpg') }}"
- style="width:100%"
- onclick="currentSlide(6)" alt="Car 6">
- </div>
- </div>
- </div>
- <div role="tabpanel" class="tab-pane fade" id="adMap">
- <h1>Google Map</h1>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="ad-description">
- <div class="row">
- <div class="col-md-6">
- <div class="description">
- <h4>Description</h4>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur dolorum
- eius excepturi laboriosam perferendis. At distinctio ipsa laboriosam
- recusandae veritatis. Amet autem consectetur corporis dolore ducimus earum
- eligendi et fuga id in iusto, laborum laudantium libero mollitia nihil porro
- quam quo rem reprehenderit rerum ut voluptas voluptates! Assumenda quis,
- tenetur? Ad aperiam debitis dolor expedita id molestias unde? Cupiditate
- quasi sed sint veritatis. Asperiores assumenda atque excepturi harum quis
- vel. Dolorem quidem sit tempora ullam veritatis. A aperiam cumque
- cupiditate, eaque eius esse ex id incidunt iste mollitia nihil possimus.
- Dolorem quidem sit tempora ullam veritatis. A aperiam cumque
- cupiditate, eaque eius esse ex id incidunt iste mollitia nihil possimus
- repudiandae voluptatum. Accusamus cupiditate eum iusto minima nulla, saepe
- totam. cupiditate, eaque eius esse ex id. incidunt iste mollitia nihil
- possimus
- repudiandae voluptatum. Accusamus cupiditate eum iusto minima null.</p>
- </div>
- </div>
- <div class="col-md-6">
- <div class="additional-info">
- <h4>Additional Info</h4>
- <div class="row">
- <div class="col-md-6">
- <div class="info-box">
- <p>Brand Name:</p>
- <p>Toyota</p>
- </div>
- <div class="info-box">
- <p>Model Year:</p>
- <p>2010</p>
- </div>
- <div class="info-box">
- <p>Condition:</p>
- <p>Used</p>
- </div>
- <div class="info-box">
- <p>Millage:</p>
- <p>20000</p>
- </div>
- <div class="info-box">
- <p>Engine Type:</p>
- <p>2,000c</p>
- </div>
- <div class="info-box">
- <p>Fuel Type:</p>
- <p>Octen</p>
- </div>
- <div class="info-box">
- <p>Seller Rating:</p>
- <p>
- <i class="fa fa-star"></i>
- <i class="fa fa-star"></i>
- <i class="fa fa-star"></i>
- <i class="fa fa-star"></i>
- <i class="fa fa-star"></i>
- </p>
- </div>
- </div>
- <div class="col-md-6">
- <div class="info-box">
- <p>Model Name:</p>
- <p>Primeo</p>
- </div>
- <div class="info-box">
- <p>Reg Year:</p>
- <p>2012</p>
- </div>
- <div class="info-box">
- <p>Transmission:</p>
- <p>Automatic</p>
- </div>
- <div class="info-box">
- <p>Body Type:</p>
- <p>Hatchvack</p>
- </div>
- <div class="info-box">
- <p>Color:</p>
- <p>Red</p>
- </div>
- <div class="info-box">
- <p>Seller Type:</p>
- <p>Private</p>
- </div>
- <div class="info-box">
- <p>Last Edited:</p>
- <p>30/12/2018</p>
- </div>
- <div class="info-box">
- <p>Award</p>
- <p class="award-color">Prime</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-md-4">
- <div class="company-info-area-wrapper">
- <div class="company-info-area">
- <div class="company-info-img">
- <img src="https://via.placeholder.com/120" alt="Company info">
- </div>
- <div class="company-info-content">
- <p class="company-title">Company Info</p>
- <p class="posting-date">Posting Ad since 2011</p>
- </div>
- </div>
- <div class="contact-company p-3 d-flex justify-content-between">
- <div class="contact-info">
- <p class="m-0"><span class="font-weight-bold">Contact:</span> company</p>
- <p class="m-0 contact-number"><i class="fa fa-phone-square color-primary"></i> 0123456789</p>
- </div>
- <div class="show-hide-number align-self-end">
- <p class="m-0"><button class="numberShow">Click to show number</button></p>
- </div>
- </div>
- <div class="contact-buttons p-3">
- <div class="d-flex justify-content-between">
- <button class="btn-brand-outline d-flex">
- <i class="fa fa-envelope color-primary"></i>
- <span>E-mail</span>
- </button>
- <button class="btn-brand-outline d-flex">
- <i class="fab fa-facebook-messenger color-primary"></i>
- <span>Message</span>
- </button>
- </div>
- <div class="d-flex justify-content-between mt-4">
- <button class="btn-brand-outline d-flex">
- <i class="fa fa-heart color-primary"></i>
- <span>Favourite</span>
- </button>
- <button class="btn-brand-outline d-flex">
- <i class="fa fa-exclamation-triangle color-primary"></i>
- <span>Warning</span>
- </button>
- </div>
- </div>
- </div>
- <section class="staySafeSlider">
- <div>
- <div class="stay-safe-area-wrapper">
- <p class="stay-safe-title">Stay Safe 1</p>
- <hr>
- <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
- <a href="#">Read all safety tips</a>
- </div>
- </div>
- <div>
- <div class="stay-safe-area-wrapper">
- <p class="stay-safe-title">Stay Safe 2</p>
- <hr>
- <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
- <a href="#">Read all safety tips</a>
- </div>
- </div>
- <div>
- <div class="stay-safe-area-wrapper">
- <p class="stay-safe-title">Stay Safe 3</p>
- <hr>
- <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
- <a href="#">Read all safety tips</a>
- </div>
- </div>
- <div>
- <div class="stay-safe-area-wrapper">
- <p class="stay-safe-title">Stay Safe 4</p>
- <hr>
- <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
- <a href="#">Read all safety tips</a>
- </div>
- </div>
- <div>
- <div class="stay-safe-area-wrapper">
- <p class="stay-safe-title">Stay Safe 5/p>
- <hr>
- <img src="{{ asset('/assets/img/icons/safe-icon.png') }}" alt="">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Fuga.</p>
- <a href="#">Read all safety tips</a>
- </div>
- </div>
- </section>
- <span class="pagingInfo"></span>
- <div class="share-area-wrapper d-flex justify-content-between">
- <p>Share</p>
- <div class="social-share-icon">
- <a class="facebook-icon" href="#"><i class="fab fa-facebook-square"></i></a>
- <a class="instagram-icon" href="#"><i class="fab fa-instagram"></i></a>
- <a class="linkedin-icon" href="#"><i class="fab fa-linkedin"></i></a>
- <a class="google-plus-icon" href="#"><i class="fab fa-google-plus"></i></a>
- <a class="twitter-icon" href="#"><i class="fab fa-twitter"></i></a>
- <a class="pinterest-icon" href="#"><i class="fab fa-pinterest"></i></a>
- <a class="gmail-icon" href="#"><img
- src="{{ asset('/assets/img/icons/gamil-icon.png') }}" alt=""></a>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="col-md-12">
- <div class="you-may-also-like-area">
- <h4>You may also like...</h4>
- <hr>
- <div class="you-may-also-link-slider">
- <div class="also-like-card d-flex">
- <div class="also-like-card-img">
- <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
- </div>
- <div class="also-like-card-info ml-3">
- <h5>Toyota Premier Auto</h5>
- <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
- <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
- iste iure placeat temporibus veniam voluptates.</p>
- </div>
- </div>
- <div class="also-like-card d-flex">
- <div class="also-like-card-img">
- <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
- </div>
- <div class="also-like-card-info ml-3">
- <h5>Toyota Premier Auto</h5>
- <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
- <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
- iste iure placeat temporibus veniam voluptates.</p>
- </div>
- </div>
- <div class="also-like-card d-flex">
- <div class="also-like-card-img">
- <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
- </div>
- <div class="also-like-card-info ml-3">
- <h5>Toyota Premier Auto</h5>
- <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
- <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
- iste iure placeat temporibus veniam voluptates.</p>
- </div>
- </div>
- <div class="also-like-card d-flex">
- <div class="also-like-card-img">
- <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
- </div>
- <div class="also-like-card-info ml-3">
- <h5>Toyota Premier Auto</h5>
- <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
- <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
- iste iure placeat temporibus veniam voluptates.</p>
- </div>
- </div>
- <div class="also-like-card d-flex">
- <div class="also-like-card-img">
- <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
- </div>
- <div class="also-like-card-info ml-3">
- <h5>Toyota Premier Auto</h5>
- <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
- <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
- iste iure placeat temporibus veniam voluptates.</p>
- </div>
- </div>
- <div class="also-like-card d-flex">
- <div class="also-like-card-img">
- <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
- </div>
- <div class="also-like-card-info ml-3">
- <h5>Toyota Premier Auto</h5>
- <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
- <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
- iste iure placeat temporibus veniam voluptates.</p>
- </div>
- </div>
- <div class="also-like-card d-flex">
- <div class="also-like-card-img">
- <img src="{{ asset('/assets/img/car-1.png') }}" alt="">
- </div>
- <div class="also-like-card-info ml-3">
- <h5>Toyota Premier Auto</h5>
- <p><i class="fa fa-map-marker-alt color-primary"></i> Adabor, Dhaka</p>
- <p><i class="fa fa-dollar-sign color-primary"></i> 2,00,000</p>
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor ex hic ipsam
- iste iure placeat temporibus veniam voluptates.</p>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </main>
- @endsection
- @section('after_scripts')
- <script>
- // Contact number show
- document.querySelector('.numberShow').addEventListener('click', () => {
- document.querySelector('.contact-number').style.display = 'block';
- });
- var slideIndex = 1;
- showSlides(slideIndex);
- function plusSlides(n) {
- showSlides(slideIndex += n);
- }
- function currentSlide(n) {
- showSlides(slideIndex = n);
- }
- function showSlides(n) {
- var i;
- var slides = document.getElementsByClassName("mySlides");
- var dots = document.getElementsByClassName("imgNav");
- var captionText = document.getElementById("caption");
- if (n > slides.length) {
- slideIndex = 1
- }
- if (n < 1) {
- slideIndex = slides.length
- }
- for (i = 0; i < slides.length; i++) {
- slides[i].style.display = "none";
- }
- for (i = 0; i < dots.length; i++) {
- dots[i].className = dots[i].className.replace(" active", "");
- }
- slides[slideIndex - 1].style.display = "block";
- dots[slideIndex - 1].className += " active";
- captionText.innerHTML = dots[slideIndex - 1].alt;
- }
- </script>
- <script>
- // also like carousel
- $('.you-may-also-link-slider').slick({
- dots: true,
- infinite: false,
- speed: 300,
- slidesToShow: 2,
- prevArrow: '<i class="ti-angle-left"></i>',
- nextArrow: '<i class="ti-angle-right"></i>',
- rows: 2,
- slidesToScroll: 2,
- responsive: [
- {
- breakpoint: 1024,
- settings: {
- slidesToShow: 4,
- slidesToScroll: 4,
- infinite: true,
- dots: true
- }
- },
- {
- breakpoint: 600,
- settings: {
- slidesToShow: 2,
- slidesToScroll: 2
- }
- },
- {
- breakpoint: 480,
- settings: {
- slidesToShow: 1,
- slidesToScroll: 1
- }
- }
- ]
- });
- // Stay safe slider
- $(".staySafeSlider").slick({
- autoplay: false,
- dots: false,
- arrows: true,
- prevArrow: '<i class="ti-angle-left"></i>',
- nextArrow: '<i class="ti-angle-right"></i>',
- customPaging: function (staySafeSlider, i) {
- var thumb = $(staySafeSlider.$slides[i]).data();
- return '<a>' + i + '</a>';
- },
- responsive: [{
- breakpoint: 500,
- settings: {
- dots: false,
- arrows: false,
- infinite: false,
- slidesToShow: 2,
- slidesToScroll: 2
- }
- }]
- });
- //custom function showing current slide
- var $status = $('.pagingInfo');
- var $slickElement = $('.staySafeSlider');
- $slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
- //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
- var i = (currentSlide ? currentSlide : 0) + 1;
- $status.text(i + '/' + slick.slideCount);
- });
- </script>
- @endsection
Add Comment
Please, Sign In to add comment