@extends('layouts.FrontLayout')
@section('page')
<div class="breadcrumb-area bg-gray text-center shadow dark text-light bg-cover" style="background-image: url({{url('/')}}/frontend/assets/img/2440x1578.png);">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 offset-lg-2">
                <h1>Courses</h1>
                <ul class="breadcrumb">
                    <li><a href="#"><i class="fas fa-home"></i> Home</a></li>
                    <li class="active">Courses</li>
                </ul>
            </div>
        </div>
    </div>
</div>
<!-- End Breadcrumb -->

<!-- Star Courses Area
============================================= -->
<div class="courses-area default-padding">
    <div class="container">
        <div class="courses-items">
            <div class="row">
               <!-- Single item -->
                <div class="single-item col-lg-4 col-md-6">
                    <div class="item">
                        <div class="thumb">
                            <img src="{{url('/')}}/frontend/assets/img/800x600.png" alt="Thumb">
                            <div class="course-info">
                                <ul>
                                    <li><i class="fas fa-clock"></i> 45 Hours</li>
                                    <li><i class="fas fa-list-ul"></i> 345</li>
                                </ul>
                            </div>
                        </div>
                        <div class="top-info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <img src="{{url('/')}}/frontend/assets/img/100x100.png" alt="Advisor">
                                        <a href="#">Busel park</a> in <a href="#">Web</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">
                            <div class="price-rating">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span>(245)</span>
                                </div>
                                <div class="price">
                                    Free
                                </div>
                            </div>
                            <h4>
                                <a href="{{url('/courses-details')}}">Teaching Children English Online Course</a>
                            </h4>
                            <div class="bottom">
                                <ul>
                                    <li><i class="fas fa-user"></i> 8K</li>
                                </ul>
                                <a href="#"><i class="fas fa-shopping-cart"></i> Get Enrolled</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Single item -->
                <!-- Single item -->
                <div class="single-item col-lg-4 col-md-6">
                    <div class="item">
                        <div class="thumb">
                            <img src="{{url('/')}}/frontend/assets/img/800x600.png" alt="Thumb">
                            <div class="course-info">
                                <ul>
                                    <li><i class="fas fa-clock"></i> 30 Hours</li>
                                    <li><i class="fas fa-list-ul"></i> 42</li>
                                </ul>
                            </div>
                        </div>
                        <div class="top-info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <img src="{{url('/')}}/frontend/assets/img/100x100.png" alt="Advisor">
                                        <a href="#">Busel park</a> in <a href="#">Learn</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">
                            <div class="price-rating">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span>(568)</span>
                                </div>
                                <div class="price">
                                    $15.00
                                </div>
                            </div>
                            <h4>
                                <a href="{{url('/courses-details')}}">The Complete React Web Developer Course</a>
                            </h4>
                            <div class="bottom">
                                <ul>
                                    <li><i class="fas fa-user"></i> 8K</li>
                                </ul>
                                <a href="#"><i class="fas fa-shopping-cart"></i> Add to cart</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Single item -->
                <!-- Single item -->
                <div class="single-item col-lg-4 col-md-6">
                    <div class="item">
                        <div class="thumb">
                            <img src="{{url('/')}}/frontend/assets/img/800x600.png" alt="Thumb">
                            <div class="course-info">
                                <ul>
                                    <li><i class="fas fa-clock"></i> 28 Hours</li>
                                    <li><i class="fas fa-list-ul"></i> 266</li>
                                </ul>
                            </div>
                        </div>
                        <div class="top-info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <img src="{{url('/')}}/frontend/assets/img/100x100.png" alt="Advisor">
                                        <a href="#">Busel park</a> in <a href="#">Tech</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">
                            <div class="price-rating">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span>(78)</span>
                                </div>
                                <div class="price">
                                    $38.00
                                </div>
                            </div>
                            <h4>
                                <a href="{{url('/courses-details')}}">Learn JavaScript – Full Course for Beginners</a>
                            </h4>
                            <div class="bottom">
                                <ul>
                                    <li><i class="fas fa-user"></i> 8K</li>
                                </ul>
                                <a href="#"><i class="fas fa-shopping-cart"></i> Add to cart</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Single item -->
                <!-- Single item -->
                <div class="single-item col-lg-4 col-md-6">
                    <div class="item">
                        <div class="thumb">
                            <img src="{{url('/')}}/frontend/assets/img/800x600.png" alt="Thumb">
                            <div class="course-info">
                                <ul>
                                    <li><i class="fas fa-clock"></i> 45 Hours</li>
                                    <li><i class="fas fa-list-ul"></i> 345</li>
                                </ul>
                            </div>
                        </div>
                        <div class="top-info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <img src="{{url('/')}}/frontend/assets/img/100x100.png" alt="Advisor">
                                        <a href="#">Busel park</a> in <a href="#">Web</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">
                            <div class="price-rating">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span>(245)</span>
                                </div>
                                <div class="price">
                                    Free
                                </div>
                            </div>
                            <h4>
                                {{url('/courses-details')}} Children English Online Course</a>
                            </h4>
                            <div class="bottom">
                                <ul>
                                    <li><i class="fas fa-user"></i> 8K</li>
                                </ul>
                                <a href="#"><i class="fas fa-shopping-cart"></i> Get Enrolled</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Single item -->
                <!-- Single item -->
                <div class="single-item col-lg-4 col-md-6">
                    <div class="item">
                        <div class="thumb">
                            <img src="{{url('/')}}/frontend/assets/img/800x600.png" alt="Thumb">
                            <div class="course-info">
                                <ul>
                                    <li><i class="fas fa-clock"></i> 30 Hours</li>
                                    <li><i class="fas fa-list-ul"></i> 42</li>
                                </ul>
                            </div>
                        </div>
                        <div class="top-info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <img src="{{url('/')}}/frontend/assets/img/100x100.png" alt="Advisor">
                                        <a href="#">Busel park</a> in <a href="#">Learn</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">
                            <div class="price-rating">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span>(568)</span>
                                </div>
                                <div class="price">
                                    $15.00
                                </div>
                            </div>
                            <h4>
                                <a href="#">The Complete React Web Developer Course</a>
                            </h4>
                            <div class="bottom">
                                <ul>
                                    <li><i class="fas fa-user"></i> 8K</li>
                                </ul>
                                <a href="#"><i class="fas fa-shopping-cart"></i> Add to cart</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Single item -->
                <!-- Single item -->
                <div class="single-item col-lg-4 col-md-6">
                    <div class="item">
                        <div class="thumb">
                            <img src="{{url('/')}}/frontend/assets/img/800x600.png" alt="Thumb">
                            <div class="course-info">
                                <ul>
                                    <li><i class="fas fa-clock"></i> 28 Hours</li>
                                    <li><i class="fas fa-list-ul"></i> 266</li>
                                </ul>
                            </div>
                        </div>
                        <div class="top-info">
                            <div class="meta">
                                <ul>
                                    <li>
                                        <img src="{{url('/')}}/frontend/assets/img/100x100.png" alt="Advisor">
                                        <a href="#">Busel park</a> in <a href="#">Tech</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="info">
                            <div class="price-rating">
                                <div class="rating">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span>(78)</span>
                                </div>
                                <div class="price">
                                    $38.00
                                </div>
                            </div>
                            <h4>
                                <a href="#">Learn JavaScript – Full Course for Beginners</a>
                            </h4>
                            <div class="bottom">
                                <ul>
                                    <li><i class="fas fa-user"></i> 8K</li>
                                </ul>
                                <a href="#"><i class="fas fa-shopping-cart"></i> Add to cart</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- End Single item -->
            </div>
            <!-- Pagination -->
            <div class="row">
                <div class="col-md-12 pagi-area text-center">
                    <nav aria-label="navigation">
                        <ul class="pagination">
                            <li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-left"></i></a></li>
                            <li class="page-item active"><a class="page-link" href="#">1</a></li>
                            <li class="page-item"><a class="page-link" href="#">2</a></li>
                            <li class="page-item"><a class="page-link" href="#">3</a></li>
                            <li class="page-item"><a class="page-link" href="#"><i class="fas fa-angle-double-right"></i></a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End Courses Area -->

<!-- Star Footer
============================================= -->

@endsection