@extends('frontEnd.master')

@section('content')

<!-- Start Page Title Area -->
        <div class="page-title-area item-bg4 jarallax" data-jarallax='{"speed": 0.3}'>
            <div class="container">
                <div class="page-title-content">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li>Courses</li>
                    </ul>
                    <!--  -->
                </div>
            </div>
        </div>
        <!-- End Page Title Area -->

        <!-- Start Courses Area -->
        <section class="courses-area ptb-100">
            <div class="container">
                <div class="courses-topbar">
                    <div class="row align-items-center">
                        <div class="col-lg-4 col-md-4">
                            <div class="topbar-result-count">
                                <p>Showing 1 – 6 of 54</p>
                            </div>
                        </div>

                        <div class="col-lg-8 col-md-8">
                            <div class="topbar-ordering-and-search">
                                <div class="row align-items-center">
                                    <div class="col-lg-3 col-md-5 offset-lg-4 offset-md-1 col-sm-6">
                                        <div class="topbar-ordering">
                                            <select>
                                                <option>Sort by popularity</option>
                                                <option>Sort by latest</option>
                                                <option>Default sorting</option>
                                                <option>Sort by rating</option>
                                                <option>Sort by new</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="col-lg-5 col-md-6 col-sm-6">
                                        <div class="topbar-search">
                                            <form>
                                                <label><i class="bx bx-search"></i></label>
                                                <input type="text" class="input-search" placeholder="Search here...">
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <div class="single-courses-box mb-30">
                            <div class="courses-image">
                                <a href="single-courses.html" class="d-block"><img src="{{asset('frontEnd/assets/img/courses/1.jpg')}}" alt="image"></a>

                                <div class="courses-tag">
                                    <a href="#" class="d-block">IT</a>
                                </div>
                            </div>

                            <div class="courses-content">
                                <div class="course-author d-flex align-items-center">
                                    <img src="{{asset('frontEnd/assets/img/faculty/banner-img3.jpg')}}" class="rounded-circle mr-2" alt="image">
                                    <span>Ujjal Hossain</span>
                                </div>

                                <h3><a href="single-courses.html" class="d-inline-block">Basic Computer Skill</a></h3>

                                <div class="courses-rating">
                                    <div class="review-stars-rated">
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                    </div>

                                    <div class="rating-total">
                                        5.0 (1 rating)
                                    </div>
                                </div>
                            </div>

                            <div class="courses-box-footer">
                                <ul>
                                    <li class="students-number">
                                        <i class='bx bx-user'></i> 10 students
                                    </li>

                                    <li class="courses-lesson">
                                        <i class='bx bx-book-open'></i> 6 lessons
                                    </li>

                                    <li class="courses-price">
                                        3000 Tk
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <div class="single-courses-box mb-30">
                            <div class="courses-image">
                                <a href="single-courses.html" class="d-block"><img src="{{asset('frontEnd/assets/img/courses/2.jpg')}}" alt="image"></a>

                                <div class="courses-tag">
                                    <a href="#" class="d-block">IT</a>
                                </div>
                            </div>

                            <div class="courses-content">
                                <div class="course-author d-flex align-items-center">
                                    <img src="{{asset('frontEnd/assets/img/faculty/banner-img3.jpg')}}" class="rounded-circle mr-2" alt="image">
                                    <span>Ujjal Hossain</span>
                                </div>

                                <h3><a href="single-courses.html" class="d-inline-block">Microsoft Office Management</a></h3>

                                <div class="courses-rating">
                                    <div class="review-stars-rated">
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star-half'></i>
                                    </div>

                                    <div class="rating-total">
                                        4.5 (2 rating)
                                    </div>
                                </div>
                            </div>

                            <div class="courses-box-footer">
                                <ul>
                                    <li class="students-number">
                                        <i class='bx bx-user'></i> 15 students
                                    </li>

                                    <li class="courses-lesson">
                                        <i class='bx bx-book-open'></i> 10 lessons
                                    </li>

                                    <li class="courses-price">
                                        6000 Tk
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <div class="single-courses-box mb-30">
                            <div class="courses-image">
                                <a href="single-courses.html" class="d-block"><img src="{{asset('frontEnd/assets/img/courses/3.jpg')}}" alt="image"></a>

                                <div class="courses-tag">
                                    <a href="#" class="d-block">Development</a>
                                </div>
                            </div>

                            <div class="courses-content">
                                <div class="course-author d-flex align-items-center">
                                    <img src="{{asset('frontEnd/assets/img/faculty/banner-img3.jpg')}}" class="rounded-circle mr-2" alt="image">
                                    <span>Ujjal Hossain</span>
                                </div>

                                <h3><a href="single-courses.html" class="d-inline-block">Basic Web Design & Developement</a></h3>

                                <div class="courses-rating">
                                    <div class="review-stars-rated">
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bx-star'></i>
                                    </div>

                                    <div class="rating-total">
                                        4.0 (1 rating)
                                    </div>
                                </div>
                            </div>

                            <div class="courses-box-footer">
                                <ul>
                                    <li class="students-number">
                                        <i class='bx bx-user'></i> 5 students
                                    </li>

                                    <li class="courses-lesson">
                                        <i class='bx bx-book-open'></i> 5 lessons
                                    </li>

                                    <li class="courses-price">
                                        12000 Tk
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <div class="single-courses-box mb-30">
                            <div class="courses-image">
                                <a href="single-courses.html" class="d-block"><img src="{{asset('frontEnd/assets/img/courses/4.jpg')}}" alt="image"></a>

                                <div class="courses-tag">
                                    <a href="#" class="d-block">IT</a>
                                </div>
                            </div>

                            <div class="courses-content">
                                <div class="course-author d-flex align-items-center">
                                    <img src="{{asset('frontEnd/assets/img/faculty/banner-img3.jpg')}}" class="rounded-circle mr-2" alt="image">
                                    <span>Ujjal HOssain</span>
                                </div>

                                <h3><a href="single-courses.html" class="d-inline-block">Graphic Design Course(Basic)</a></h3>

                                <div class="courses-rating">
                                    <div class="review-stars-rated">
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                    </div>

                                    <div class="rating-total">
                                        5.0 (1 rating)
                                    </div>
                                </div>
                            </div>

                            <div class="courses-box-footer">
                                <ul>
                                    <li class="students-number">
                                        <i class='bx bx-user'></i> 10 students
                                    </li>

                                    <li class="courses-lesson">
                                        <i class='bx bx-book-open'></i> 6 lessons
                                    </li>

                                    <li class="courses-price">
                                        <!-- <span>$200</span> -->
                                        3000 Tk
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <div class="single-courses-box mb-30">
                            <div class="courses-image">
                                <a href="single-courses.html" class="d-block"><img src="{{asset('frontEnd/assets/img/courses/5.jpg')}}" alt="image"></a>

                                <div class="courses-tag">
                                    <a href="#" class="d-block">IT</a>
                                </div>
                            </div>

                            <div class="courses-content">
                                <div class="course-author d-flex align-items-center">
                                    <img src="{{asset('frontEnd/assets/img/faculty/banner-img3.jpg')}}" class="rounded-circle mr-2" alt="image">
                                    <span>Ujjal Hossain</span>
                                </div>

                                <h3><a href="single-courses.html" class="d-inline-block">Graphic Design Course(Advanced)</a></h3>

                                <div class="courses-rating">
                                    <div class="review-stars-rated">
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                    </div>

                                    <div class="rating-total">
                                        5.0 (1 rating)
                                    </div>
                                </div>
                            </div>

                            <div class="courses-box-footer">
                                <ul>
                                    <li class="students-number">
                                        <i class='bx bx-user'></i> 10 students
                                    </li>

                                    <li class="courses-lesson">
                                        <i class='bx bx-book-open'></i> 6 lessons
                                    </li>

                                    <li class="courses-price">
                                        6000 Tk
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <div class="single-courses-box mb-30">
                            <div class="courses-image">
                                <a href="single-courses.html" class="d-block"><img src="{{asset('frontEnd/assets/img/courses/6.jpg')}}" alt="image"></a>

                                <div class="courses-tag">
                                    <a href="#" class="d-block">Photography</a>
                                </div>
                            </div>

                            <div class="courses-content">
                                <div class="course-author d-flex align-items-center">
                                    <img src="{{asset('frontEnd/assets/img/user6.jpg')}}" class="rounded-circle mr-2" alt="image">
                                    <span>David Warner</span>
                                </div>

                                <h3><a href="single-courses.html" class="d-inline-block">Photography Photo modify and Beautiful</a></h3>

                                <div class="courses-rating">
                                    <div class="review-stars-rated">
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                        <i class='bx bxs-star'></i>
                                    </div>

                                    <div class="rating-total">
                                        5.0 (1 rating)
                                    </div>
                                </div>
                            </div>

                            <div class="courses-box-footer">
                                <ul>
                                    <li class="students-number">
                                        <i class='bx bx-user'></i> 10 students
                                    </li>

                                    <li class="courses-lesson">
                                        <i class='bx bx-book-open'></i> 6 lessons
                                    </li>

                                    <li class="courses-price">
                                        $500
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-12 col-md-12 col-sm-12">
                        <div class="pagination-area text-center">
                            <span class="page-numbers current" aria-current="page">1</span>
                            <a href="#" class="page-numbers">2</a>
                            <a href="#" class="page-numbers">3</a>
                            <a href="#" class="page-numbers">4</a>
                            <a href="#" class="page-numbers">5</a>
                            <a href="#" class="next page-numbers"><i class='bx bx-chevron-right'></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Courses Area -->

@endsection