- var theme_customizer      = true;
- var jquery_ui             = true;
- var dragable              = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = 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-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Draggable Card
                .col-6
                  ol.breadcrumb
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Bonus Ui
                    li.breadcrumb-item.active Draggable Card
          // Container-fluid starts
          .container-fluid
            #draggableMultiple.row.ui-sortable
              .col-xxl-4.col-md-6
                .card.height-equal
                  .card-header
                    h4 Basic Card
                    p.mt-1.f-m-light
                        | You can draggable cards anywhere.
                  .card-body
                    ul.list-group
                      li.list-group-item 
                        i.icofont.icofont-arrow-right
                        | Logo Design
                      li.list-group-item 
                        i.icofont.icofont-arrow-right
                        | Web Designer 
                      li.list-group-item 
                        i.icofont.icofont-arrow-right
                        | E-Commerce
                      li.list-group-item 
                        i.icofont.icofont-arrow-right
                        | UX Designer
              .col-xxl-4.col-md-6
                .card.height-equal
                  .card-header
                    h4 Default Card
                    p.mt-1.f-m-light
                        | You can draggable cards anywhere.
                  .card-body
                    ul.list-group
                      li.list-group-item.active.bg-warning-light(aria-current='true')
                        i.icofont.icofont-arrow-right 
                        | UI Kits
                      li.list-group-item
                        i.icofont.icofont-arrow-right 
                        | Wow Animations
                      li.list-group-item 
                        i.icofont.icofont-arrow-right 
                        |Apex Charts
                      li.list-group-item
                        i.icofont.icofont-arrow-right 
                        | Starter Kits
              .col-xxl-4.col-md-6
                .card.b-r-0.height-equal
                  .card-header
                    h4 Flat Card
                    p.f-m-light.mt-1
                      | You can draggable cards anywhere.
                  .card-body
                    ul.list-group.list-group-flush
                      li.list-group-item
                        i.icofont.icofont-arrow-right 
                        | PRODUCT
                      li.list-group-item
                        i.icofont.icofont-arrow-right 
                        | PRODUCT DETAILS 
                      li.list-group-item
                        i.icofont.icofont-arrow-right 
                        | CART 
                      li.list-group-item.pb-0
                        i.icofont.icofont-arrow-right 
                        | CHECKOUT
              .col-xxl-4.col-md-6
                .card.height-equal
                  .card-header.bg-info
                    h4.text-white Info Color Header
                  .card-body
                    h5.pb-2  Web Designer 
                    p.mb-0
                      | By following instructions and adding your own unique twist and style, you may apply your imagination as a web designer. The majority of the tasks you'll be assigned will have a specific due date and work description, but the reason you were employed was because they need a specialist to inject some much-needed creativity.
                  .card-footer
                    h6.mb-0.text-end Cuba Theme
              .col-xxl-4.col-md-6
                .card.height-equal
                  .card-header
                    h4 Info Color Body
                  .card-body.bg-info
                    h5.pb-2 UX Designer 
                    p.mb-0
                      | It is the responsibility of the UX designer to make a product or service useful, pleasurable, and accessible. The word "user experience" is used by various industries, although it is most frequently related to digital design for websites and mobile applications.There is no need for coding in user experience design.
                  .card-footer
                    h6.mb-0.text-end Cuba Theme
              .col-xxl-4.col-md-6
                .card.height-equal
                  .card-header
                    h4 Info Color Footer
                  .card-body
                    h5.pb-2 Web Developer
                    p.mb-0
                      | A programmer who uses the client-server architecture to create World Wide Web applications is known as a web developer. The apps generally employ any general-purpose programming language on the server and HTML, CSS, and JavaScript on the client.
                  .card-footer.bg-info
                    h6.mb-0.text-end Cuba Theme
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
