@extends('frontEnd.master')

@section('content')

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

        <!-- Start Courses Categories Area -->
        <section class="courses-categories-area ptb-100">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="single-categories-courses-box mb-30">
                            <div class="icon">
                                <i class='bx bx-code-alt'></i>
                            </div>
                            <h3>Web Development</h3>
                            <span>60 Courses</span>
    
                            <a href="#" class="link-btn"></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="single-categories-courses-box mb-30">
                            <div class="icon">
                                <i class='bx bx-camera'></i>
                            </div>
                            <h3>Photography </h3>
                            <span>21 Courses</span>

                            <a href="#" class="link-btn"></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="single-categories-courses-box mb-30">
                            <div class="icon">
                                <i class='bx bx-layer'></i>
                            </div>
                            <h3>Graphics Design</h3>
                            <span>58 Courses</span>

                            <a href="#" class="link-btn"></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="single-categories-courses-box mb-30">
                            <div class="icon">
                                <i class='bx bxs-flag-checkered'></i>
                            </div>
                            <h3>Web Language</h3>
                            <span>99 Courses</span>

                            <a href="#" class="link-btn"></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="single-categories-courses-box mb-30">
                            <div class="icon">
                                <i class='bx bx-health'></i>
                            </div>
                            <h3>Health & Fitness</h3>
                            <span>21 Courses</span>

                            <a href="#" class="link-btn"></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="single-categories-courses-box mb-30">
                            <div class="icon">
                                <i class='bx bx-line-chart'></i>
                            </div>
                            <h3>Business Studies</h3>
                            <span>49 Courses</span>

                            <a href="#" class="link-btn"></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="single-categories-courses-box mb-30">
                            <div class="icon">
                                <i class='bx bx-bar-chart-alt-2'></i>
                            </div>
                            <h3>Humanities</h3>
                            <span>21 Courses</span>

                            <a href="#" class="link-btn"></a>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-4 col-sm-6">
                        <div class="single-categories-courses-box mb-30">
                            <div class="icon">
                                <i class='bx bxs-drink'></i>
                            </div>
                            <h3>Science</h3>
                            <span>12 Courses</span>

                            <a href="#" class="link-btn"></a>
                        </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>

            <div id="particles-js-circle-bubble-2"></div>
        </section>
        <!-- End Courses Categories Area -->

        <!-- Start Become Instructor & Partner Area -->
        <section class="become-instructor-partner-area">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-lg-6 col-md-6">
                        <div class="become-instructor-partner-content bg-color">
                            <h2>Become an Instructor</h2>
                            <p>Choose from hundreds of free courses, or get a degree or certificate at a breakthrough price. Learn at your own pace.</p>
                            <a href="login.html" class="default-btn"><i class='bx bx-plus-circle icon-arrow before'></i><span class="label">Apply Now</span><i class="bx bx-plus-circle icon-arrow after"></i></a>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <div class="become-instructor-partner-image bg-image1 jarallax" data-jarallax='{"speed": 0.3}'>
                            <img src="assets/img/become-instructor.jpg" alt="image">
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <div class="become-instructor-partner-image bg-image2 jarallax" data-jarallax='{"speed": 0.3}'>
                            <img src="assets/img/become-partner.jpg" alt="image">
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6">
                        <div class="become-instructor-partner-content">
                            <h2>Become a Partner</h2>
                            <p>Choose from hundreds of free courses, or get a degree or certificate at a breakthrough price. Learn at your own pace.</p>
                            <a href="login.html" class="default-btn"><i class='bx bx-plus-circle icon-arrow before'></i><span class="label">Contact Us</span><i class="bx bx-plus-circle icon-arrow after"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!-- End Become Instructor & Partner Area -->

@endsection