- var theme_customizer      = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-sm-6
                                  h3
                                    | Detailed Course
                                  ol.breadcrumb
                                    li.breadcrumb-item
                                      a(href='index.html')
                                       | Home
                                    li.breadcrumb-item Learning
                                    li.breadcrumb-item.active Detailed Course
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                      .row.learning-block
                        .col-xl-9.xl-60.box-col-8                         
                          .blog-single
                            .blog-box.blog-details
                              .card
                                img.img-fluid.w-100(src='assets/images/faq/learning-1.jpg' , alt='blog-main')
                              .card
                                .card-body
                                  .blog-details
                                    ul.blog-social
                                      li.digits 25 July 2018
                                      li
                                        i.icofont.icofont-user
                                        | Mark 
                                        span Jecno 
                                      li.digits
                                        i.icofont.icofont-thumbs-up
                                        | 02
                                        span Hits
                                      li.digits
                                        i.icofont.icofont-ui-chat
                                        | 598 Comments
                                    h4
                                      | All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the
                                      | Internet.
                                    .single-blog-content-top
                                      p
                                        | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                                      p
                                        | It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like
                            .card.comment-box
                              .card-body
                                h4 Comment                             
                                ul
                                  li
                                    .media.align-self-center
                                      img.align-self-center(src='assets/images/blog/comment.jpg', alt='Generic placeholder image')
                                      .media-body
                                        .row
                                          .col-md-4.xl-100
                                            a(href="user-profile.html")
                                              h6.mt-0
                                                | Jolio Mark
                                                span  ( Designer )
                                          .col-md-8.xl-100
                                            ul.comment-social.learning-comment
                                              li.digits
                                                i.icofont.icofont-thumbs-up
                                                | 02 Hits
                                              li.digits
                                                i.icofont.icofont-ui-chat
                                                | 598 Comments
                                        p
                                          | There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                                  li
                                    ul
                                      li
                                        .media
                                          img.align-self-center(src='assets/images/blog/9.jpg', alt='Generic placeholder image')
                                          .media-body
                                            .row
                                              .col-xl-12
                                                a(href="user-profile.html")
                                                  h6.mt-0
                                                    | Jolio Mark
                                                    span  ( Designer )
                                            p
                                              | There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                                  li
                                    .media
                                      img.align-self-center(src='assets/images/blog/4.jpg', alt='Generic placeholder image')
                                      .media-body
                                        .row
                                          .col-md-4.xl-100
                                            a(href="user-profile.html")
                                              h6.mt-0
                                                | Jolio Mark
                                                span  ( Designer )
                                          .col-md-8.xl-100
                                            ul.comment-social.learning-comment
                                              li.digits
                                                i.icofont.icofont-thumbs-up
                                                | 02 Hits
                                              li.digits
                                                i.icofont.icofont-ui-chat
                                                | 598 Comments
                                        p
                                          | There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                        .col-xl-3.xl-40
                            .job-sidebar
                              a.btn.btn-primary.job-toggle(href="javascript:void(0)")
                                | learning filter
                              .job-left-aside.custom-scrollbar.custom-scrollbar
                                #accordionoc.default-according.style-1.faq-accordion.job-accordion
                                  .row
                                    .col-xl-12
                                      .card
                                        .card-header
                                          h5.mb-0.p-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
                                    .col-xl-12
                                      .card
                                        .card-header
                                          h5.mb-0.p-0
                                            button.btn.btn-link(data-bs-toggle='collapse', data-bs-target='#collapseicon1', aria-expanded='true', aria-controls='collapseicon1') Categories
                                        #collapseicon1.collapse.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
                                    .col-xl-12
                                      .card
                                        .card-header
                                          h5.mb-0.p-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
                                            .media
                                              .media-body
                                                span.f-w-600 UX Development
                                                h6
                                                  | Course By 
                                                  a(href='#')  Lorem ipsum
                                                ul.rating
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star-half-o.font-warning
                                              div
                                                h5.mb-0.p-0.font-primary 18
                                                span.d-block Dec
                                            .media
                                              .media-body
                                                span.f-w-600 Business Analyst
                                                h6
                                                  | Course By 
                                                  a(href='#') Lorem ipsum 
                                                ul.rating
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star-half-o.font-warning
                                              div
                                                h5.mb-0.p-0.font-primary 28
                                                span.d-block Dec
                                            .media
                                              .media-body
                                                span.f-w-600 Web Development
                                                h6
                                                  | Course By 
                                                  a(href='#') Lorem ipsum 
                                                ul.rating
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star.font-warning
                                                  li
                                                    i.fa.fa-star-half-o.font-warning
                                              div
                                                h5.mb-0.p-0.font-primary 5
                                                span.d-block Jan                         
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files