- var page_Title = 'Course List';
- var accordion             = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;

doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Course List
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Course
                    li.breadcrumb-item.active Course List
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-9 xl:col-span-12 xl-80 xl-0 order-none xl:order-1 box-col-12")
                .grid.grid-cols-12.card-gap
                  div(class="col-span-12")
                    .card
                      .blog-box.blog-list.course-list.grid.grid-cols-12.card-gap
                        div(class="col-span-5 sm:col-span-12")
                          img.max-w-full.h-auto.sm-100-w(src='../assets/images/faq/1.jpg', alt='')
                        div(class="col-span-7 sm:col-span-12")
                          .blog-details
                            .blog-date
                              span 05
                              |  January 2025
                            h6 Java Language 
                            .blog-bottom-content
                              ul.blog-social
                                li by: Paige Turner
                                li 15 Hits
                              hr
                              p.mt-0(class="[@media(max-width:1570px)]:!line-clamp-2")
                                | Learning new skills that will position you for success in the future is crucial as the workplace changes. Even while learning new techniques, methods, and approaches might be difficult, doing so is crucial for increasing your economic mobility and securing stable employment. Retraining and upskilling are two important methods for achieving this.
                  div(class="col-span-12")
                    .card
                      .blog-box.blog-list.grid.grid-cols-12.card-gap
                        div(class="col-span-5 sm:col-span-12")
                          img.max-w-full.h-auto.sm-100-w(src='../assets/images/faq/2.jpg', alt='')
                        div(class="col-span-7 sm:col-span-12")
                          .blog-details
                            .blog-date
                              span 10
                              |  March 2025
                            h6 Web Development 
                            .blog-bottom-content
                              ul.blog-social
                                li by: Lea Odom
                                li 34 Hits
                              hr
                              p.mt-0(class="[@media(max-width:1570px)]:!line-clamp-2")
                                | Websites that are both aesthetically pleasing and user-friendly are the work of eb designers. They create layouts, visuals, and interactive components by fusing technical expertise with creative imagination. To make sure websites perform seamlessly across all devices and browsers, web designers use a variety of tools and programming languages, including HTML, CSS, and JavaScript. By concentrating on user experience (UX) and user interface (UI) design, they seek to improve the usability and attractiveness of websites.
                  div(class="col-span-4 xl-50 xl:col-span-6 sm:col-span-12 box-col-6")
                    .card
                      .blog-box.blog-grid.text-center.product-box
                        .product-img
                          img.max-w-full.h-auto.top-radius-blog(src='../assets/images/faq/3.jpg', alt='')
                          .product-hover
                            ul
                              li
                                i.icon-link
                              li
                                i.icon-import
                        .blog-details-main
                          ul.blog-social
                            li 9 April 2018
                            li by: Admin
                            li 0 Hits
                          hr
                          h6.blog-bottom-details One line at a time, a web developer's code has the power to change the world.
                  div(class="col-span-4 xl-50 xl:col-span-6 sm:col-span-12 box-col-6")
                    .card
                      .blog-box.blog-grid.text-center.product-box
                        .product-img
                          img.max-w-full.h-auto.top-radius-blog(src='../assets/images/faq/5.jpg', alt='')
                          .product-hover
                            ul
                              li
                                i.icon-link
                              li
                                i.icon-import
                        .blog-details-main
                          ul.blog-social
                            li 12 Oct 2019
                            li by: Admin
                            li 0 Hits
                          hr
                          h6.blog-bottom-details The only thing you can purchase that increases your wealth is travel.
                  div(class="col-span-4 xl-50 xl:col-span-6 sm:col-span-12 box-col-6")
                    .card
                      .blog-box.blog-grid.text-center.product-box
                        .product-img
                          img.max-w-full.h-auto.top-radius-blog(src='../assets/images/faq/6.jpg', alt='')
                          .product-hover
                            ul
                              li
                                i.icon-link
                              li
                                i.icon-import
                        .blog-details-main
                          ul.blog-social
                            li 23 July 2019
                            li by: Admin
                            li 0 Hits
                          hr
                          h6.blog-bottom-details Live simply, move lightly, and radiate and embody light.
                  div(class="col-span-4 xl-50 xl:col-span-6 sm:col-span-12 box-col-6")
                    .card
                      .blog-box.blog-grid.text-center.product-box
                        .product-img
                          img.max-w-full.h-auto.top-radius-blog(src='../assets/images/faq/7.jpg', alt='')
                          .product-hover
                            ul
                              li
                                i.icon-link
                              li
                                i.icon-import
                        .blog-details-main
                          ul.blog-social
                            li 10 Sep 2020
                            li by: Admin
                            li 0 Hits
                          hr
                          h6.blog-bottom-details Your voice becomes your most powerful asset in the blogging world.
                  div(class="col-span-4 xl-50 xl:col-span-6 sm:col-span-12 box-col-6")
                    .card
                      .blog-box.blog-grid.text-center.product-box
                        .product-img
                          img.max-w-full.h-auto.top-radius-blog(src='../assets/images/faq/4.jpg', alt='')
                          .product-hover
                            ul
                              li
                                i.icon-link
                              li
                                i.icon-import
                        .blog-details-main
                          ul.blog-social
                            li 12 Jan 2021
                            li by: Admin
                            li 0 Hits
                          hr
                          h6.blog-bottom-details Blogging is the platform to leave a digital footprint on the sands of time.
                  div(class="col-span-4 xl-50 xl:col-span-6 sm:col-span-12 box-col-6")
                    .card
                      .blog-box.blog-grid.text-center.product-box
                        .product-img
                          img.max-w-full.h-auto.top-radius-blog(src='../assets/images/faq/8.jpg', alt='')
                          .product-hover
                            ul
                              li
                                i.icon-link
                              li
                                i.icon-import
                        .blog-details-main
                          ul.blog-social
                            li 8 April 2023
                            li by: Admin
                            li 0 Hits
                          hr
                          h6.blog-bottom-details The digital era's pulse, blogging connects people's hearts and brains.
              div(class="col-span-3 xl:col-span-12 xl-40 box-col-12 learning-filter")
                .md-sidebar
                  a.btn.btn-primary.email-aside-toggle.md-sidebar-toggle Learning filter
                  .md-sidebar-aside.job-sidebar.custom-scrollbar
                    #accordionoc.default-according.style-1.faq-accordion.job-accordion
                      .grid.grid-cols-12
                        div(class="col-span-12")
                          .card
                            .card-header
                              h5.mb-0
                                button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon', aria-expanded='true', aria-controls='collapseicon') Find Course
                            #collapseicon.collapse.show(aria-labelledby='collapseicon', data-bs-parent='#accordion')
                              .card-body.filter-cards-view.animate-chk
                                .job-filter
                                  .faq-form
                                    input.form-control(type='text', placeholder='Search..')
                                    i.search-icon(data-feather='search')
                                .checkbox-animated
                                  .learning-header
                                    span.f-w-600 Categories
                                  label.d-block(for='chk-ani')
                                    input#chk-ani.checkbox_animated(type='checkbox')
                                    |                       Accounting
                                  label.d-block(for='chk-ani0')
                                    input#chk-ani0.checkbox_animated(type='checkbox')
                                    |                             Design
                                  label.d-block(for='chk-ani1')
                                    input#chk-ani1.checkbox_animated(type='checkbox')
                                    |                             Development
                                  label.d-block(for='chk-ani2')
                                    input#chk-ani2.checkbox_animated(type='checkbox')
                                    |                             Management
                                .checkbox-animated.mt-0
                                  .learning-header
                                    span.f-w-600 Duration
                                  label.d-block(for='chk-ani6')
                                    input#chk-ani6.checkbox_animated(type='checkbox')
                                    |                             0-50 hours
                                  label.d-block(for='chk-ani7')
                                    input#chk-ani7.checkbox_animated(type='checkbox')
                                    |                             50-100 hours
                                  label.d-block(for='chk-ani8')
                                    input#chk-ani8.checkbox_animated(type='checkbox')
                                    |                             100+ hours
                                .checkbox-animated.mt-0
                                  .learning-header
                                    span.f-w-600 Price
                                  label.d-block(for='edo-ani')
                                    input#edo-ani.radio_animated(type='radio', name='rdo-ani', checked='')
                                    |                             All Courses
                                  label.d-block(for='edo-ani1')
                                    input#edo-ani1.radio_animated(type='radio', name='rdo-ani', checked='')
                                    |                             Paid Courses
                                  label.d-block(for='edo-ani2')
                                    input#edo-ani2.radio_animated(type='radio', name='rdo-ani', checked='')
                                    |                             Free Courses
                                .checkbox-animated.mt-0
                                  .learning-header
                                    span.f-w-600 Status
                                  label.d-block(for='chk-ani3')
                                    input#chk-ani3.checkbox_animated(type='checkbox')
                                    |                             Registration
                                  label.d-block(for='chk-ani4')
                                    input#chk-ani4.checkbox_animated(type='checkbox')
                                    |                             Progress
                                  label.d-block(for='chk-ani5')
                                    input#chk-ani5.checkbox_animated(type='checkbox')
                                    |                             Completed
                                button.btn.btn-primary.text-center(type='button') Filter
                        div(class="col-span-12")
                          .card
                            .card-header
                              h5.mb-0
                                button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon1', aria-expanded='true', aria-controls='collapseicon1') Categories
                            #collapseicon1.collapse.card-body.px-0.show(aria-labelledby='collapseicon1', data-bs-parent='#accordion')
                              .categories
                                .learning-header
                                  span.f-w-600 Design
                                ul
                                  li
                                    a(href='#') UI Design 
                                    span.badge.badge-primary.pull-right 28
                                  li
                                    a(href='#') UX Design 
                                    span.badge.badge-primary.pull-right 35
                                  li
                                    a(href='#') Interface Design 
                                    span.badge.badge-primary.pull-right 17
                                  li
                                    a(href='#') User Experience 
                                    span.badge.badge-primary.pull-right 26
                              .categories.pt-0
                                .learning-header
                                  span.f-w-600 Development
                                ul
                                  li
                                    a(href='#') Frontend Development
                                    span.badge.badge-primary.pull-right 48
                                  li
                                    a(href='#') Backend Development
                                    span.badge.badge-primary.pull-right 19
                        div(class="col-span-12")
                          .card
                            .card-header
                              h5.mb-0
                                button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon2', aria-expanded='true', aria-controls='collapseicon2') Upcoming Courses
                            #collapseicon2.collapse.show(aria-labelledby='collapseicon2', data-bs-parent='#accordion')
                              .upcoming-course.card-body
                                .upcoming-flex
                                  .flex-grow-1
                                    span.f-w-500 UX Development
                                    span.d-block
                                      | Course By 
                                      a(href='#') Howard Moore
                                    span.d-block
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star-half-stroke.font-warning
                                  div
                                    h5.mb-0.font-primary 18
                                    span.d-block Dec
                                .upcoming-flex
                                  .flex-grow-1
                                    span.f-w-500 Business Analyst
                                    span.d-block
                                      | Course By 
                                      a(href='#') Crystal Markey
                                    span.d-block
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                  div
                                    h5.mb-0.font-primary 28
                                    span.d-block Dec
                                .upcoming-flex
                                  .flex-grow-1
                                    span.f-w-500 Web Development
                                    span.d-block
                                      | Course By 
                                      a(href='#') Jerry Reel
                                    span.d-block
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-solid.fa-star.font-warning
                                      i.fa-regular.fa-star.font-warning
                                  div
                                    h5.mb-0.font-primary 5
                                    span.d-block Jan 
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
