- var theme_customizer      = true;
- var scrollable            = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = 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-fluid
            .page-title
              .row
                .col-6
                  h4
                    | Scrollable
                .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 Scrollable
          // Container-fluid starts
          .container-fluid
            .row
              .col-xl-6 
                .card 
                  .card-header 
                    h4.mb-0 Custom Scrollbar
                    p.f-m-light.mt-1
                      | Used 
                      code .vertical-scroll 
                      | and 
                      code .scroll-demo 
                      | through design scrollbar.
                  .card-body 
                    .vertical-scroll.scroll-demo
                      h5.pb-2 Custom Scrollbar 
                      p
                        | I'm quite interested in learning more about 
                        em.txt-danger custom scrollbars
                        |  because they are becoming more and more common.
                      .scrollbar-images
                        img.img-fluid(src="../assets/images/banner/1.jpg", alt="banner")
                      p 
                        | There are various justifications for customizing a scrollbar. For instance, the default scrollbar can cause an app's user interface to look inconsistent across various operating systems. In this case, having a single style is helpful.
                      p 
                        | I never had the opportunity to learn about CSS scrollbar customization, but I have always been interested in doing so. I'll take the chance to learn more about them and share my trip in this essay.
                      p 
                        | One crucial point to remember is that, depending on the design, a scrollbar may operate either 
                        em.txt-danger horizontally or vertically
                        |  . Additionally, it might alter when you work on a website that is global and operates in both left-to-right and right-to-left orientations.
              .col-xl-6
                .card
                  .card-header
                    h4 Small Size Scrollbar
                    p.f-m-light.mt-1  
                      | Use the 
                      code .scrollbar-margins 
                      | through small scroll and image is draggable. 
                  .card-body
                    .scroll-bar-wrap
                      .scrollbar-margins.large-margin.scroll-demo.pe-0
                        .margin-scrollbar
                          h5.pb-2 Solution for Business Transformation
                        p   
                          | The Business Transformation Solution programme is a 
                          em.txt-danger multi-level engagement program
                          |  is designed to help Small and Medium-Sized Businesses and Startups create a strong, well-functioning business organization that produces the best results quickly and effectively.
                          img.img-fluid.pt-3(src='../assets/images/banner/3.jpg', alt='business', width='800', height='600')
                        p 
                          | The core of the programme is our internally developed 
                          em.txt-danger Business Management model
                          |  , "Business Foundation & Management", which was tried and true for Indian business conditions while drawing inspiration from other successful global SME Business Management techniques.
              .col-xxl-4.col-md-6
                .card
                  .card-header
                    h4 Badges Scrollbar
                    p.f-m-light.mt-1
                      | Use the
                      code .badge 
                      |  class through create more badges and 
                      code .vertical-scroll 
                      | used as vertical scroll. 
                  .card-body
                    .vertical-scroll.scroll-demo.scroll-b-none
                      ol.list-group.list-group-numbered.scroll-rtl
                        li.list-group-item.d-flex.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Stella Nowland
                          span.badge.bg-warning.rounded-pill.p-2 Freelance
                        li.list-group-item.d-flex.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Lola Stanford
                          span.badge.bg-danger.text-white.rounded-pill.p-2 Issue
                        li.list-group-item.d-flex.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Caitlin Coungeau
                          span.badge.bg-primary.text-white.rounded-pill.p-2 Social
                        li.list-group-item.d-flex.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Graciela W. McClaran
                          span.badge.bg-danger.text-white.rounded-pill.p-2 Issue
                        li.list-group-item.d-flex.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Derek T. Aldridge
                          span.badge.bg-warning.text-white.rounded-pill.p-2 Freelance 
                        li.list-group-item.d-flex.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Annie A. Riley
                          span.badge.bg-primary.text-white.rounded-pill.p-2 Social 
                        li.list-group-item.d-flex.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Hana J. Boyd
                          span.badge.bg-danger.text-white.rounded-pill.p-2 Issue
                        li.list-group-item.d-flex.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Karen R. Pryce
                          span.badge.bg-warning.text-white.rounded-pill.p-2 Freelance
                        li.list-group-item.d-flex.justify-content-between.align-items-start.flex-wrap
                          .ms-2.me-auto
                            | Cordie C. Pope
                          span.badge.bg-primary.text-white.rounded-pill.p-2 Social
              .col-xxl-4.col-md-6
                .card
                  .card-header
                    h4 Profile Scrollable
                    p.f-m-light.mt-1  
                      | Use the 
                      code .list-group-item 
                      | through made profile and with used 
                      code .vertical-scroll 
                      | .
                  .card-body
                    .vertical-scroll.scroll-demo.scroll-b-none
                      .list-group
                        a.list-group-item.list-group-item-action.list-hover-primary(href='javascript:void(0)')
                          img.rounded-circle(src='../assets/images/user/3.png', alt='user')
                          | Gloria D. Acheson
                        a.list-group-item.list-group-item-action.list-hover-primary(href='javascript:void(0)')
                          img.rounded-circle(src='../assets/images/user/2.jpg', alt='user')
                          | Sharon C. Obrien
                        a.list-group-item.list-group-item-action.list-hover-primary(href='javascript:void(0)')
                          img.rounded-circle(src='../assets/images/user/5.jpg', alt='user')
                          | Bryan A. Owens
                        a.list-group-item.list-group-item-action.list-hover-primary(href='javascript:void(0)')
                          img.rounded-circle(src='../assets/images/user/12.png', alt='user')
                          | Ronald M. Enger
                        a.list-group-item.list-group-item-action.list-hover-primary(href='javascript:void(0)')
                          img.rounded-circle(src='../assets/images/user/14.png', alt='user')
                          | Herbert A. Clary
                        a.list-group-item.list-group-item-action.list-hover-primary(href='javascript:void(0)')
                          img.rounded-circle(src='../assets/images/user/6.jpg', alt='user')
                          | Dino A. Cannon
                        a.list-group-item.list-group-item-action.list-hover-primary(href='javascript:void(0)')
                          img.rounded-circle(src='../assets/images/user/3.jpg', alt='user')
                          | Danny A. McLean
                        a.list-group-item.list-group-item-action.list-hover-primary(href='javascript:void(0)')
                          img.rounded-circle(src='../assets/images/user/2.jpg', alt='user')
                          | Betty K. Curtis
              .col-xxl-4.col-md-12
                .card
                  .card-header
                    h4 Scrollable Content
                    p.f-m-light.mt-1 
                      | Use the 
                      code .list-group-item 
                      | through made profile and with used 
                      code .vertical-scroll 
                      | .
                  .card-body 
                    .vertical-scroll.scroll-demo.scroll-b-none
                      .list-group.main-lists-content
                          a.list-group-item.list-group-item-action.active.list-hover-primary(href='#' aria-current='true')
                              .list-wrapper.gap-0
                                  img.list-img(src="../assets/images/user/9.jpg", alt="profile")
                                  .list-content 
                                    h6 Molly Boake
                                    p MollyBoake@rhyta.com
                                    small 5 days ago
                          a.list-group-item.list-group-item-action.list-hover-primary(href='#')
                              .list-wrapper.gap-0
                                  img.list-img(src="../assets/images/user/10.jpg", alt="profile")
                                  .list-content 
                                    h6 Gabrielle Fahey
                                    p GabrielleFahey@dayrep.com
                                    small.text-muted 10 days ago
                          a.list-group-item.list-group-item-action.list-hover-primary(href='#')
                              .list-wrapper.gap-0
                                  img.list-img(src="../assets/images/user/2.jpg", alt="profile")
                                  .list-content 
                                    h6 Lucinda Moseley
                                    p LucindaMoseley@teleworm.us
                                    small.text-muted 3 days ago
                          a.list-group-item.list-group-item-action.list-hover-primary(href='#')
                              .list-wrapper.gap-0
                                  img.list-img(src="../assets/images/user/12.png", alt="profile")
                                  .list-content 
                                    h6 Francis K. Henriques
                                    p FrancisKHenriques@teleworm.us
                                    small.text-muted 2 days ago
                          a.list-group-item.list-group-item-action.list-hover-primary(href='#')
                              .list-wrapper.gap-0
                                  img.list-img(src="../assets/images/user/14.png", alt="profile")
                                  .list-content 
                                    h6 Jose A. Seay
                                    p JoseASeay@rhyta.com
                                    small.text-muted 15 days ago
                          a.list-group-item.list-group-item-action.list-hover-primary(href='#')
                              .list-wrapper.gap-0
                                  img.list-img(src="../assets/images/user/3.jpg", alt="profile")
                                  .list-content 
                                    h6 Phil F. Cunningham
                                    p PhilFCunningham@dayrep.com
                                    small.text-muted 6 days ago
                          a.list-group-item.list-group-item-action.list-hover-primary(href='#')
                              .list-wrapper.gap-0
                                  img.list-img(src="../assets/images/user/7.jpg", alt="profile")
                                  .list-content 
                                    h6 Richard E. Johnson
                                    p RichardEJohnson@teleworm.us
                                    small.text-muted 20 days ago
                          a.list-group-item.list-group-item-action.list-hover-primary(href='#')
                              .list-wrapper.gap-0
                                  img.list-img(src="../assets/images/user/2.png", alt="profile")
                                  .list-content 
                                    h6 Lawrence L. Nash
                                    p LawrenceLNash@jourrapide.com
                                    small.text-muted 8 days ago
              .col-xl-6
                .card
                  .card-header
                    h4 Horizontal Scrollbar 
                    p.f-m-light.mt-1
                      | Use the 
                      code .horizontal-scroll 
                      | through move content horizontally.
                  .card-body
                    .horizontal-scroll.scroll-demo
                      .horz-scroll-content
                        .row
                          .col-2 
                            .horizontal-img
                              img.img-fluid(src="../assets/images/scrollbar/fashion1.jpg", alt="girl")
                          .col-2
                            .horizontal-img
                              img.img-fluid(src="../assets/images/scrollbar/fashion2.jpg", alt="girl")
                          .col-2 
                            .horizontal-img
                              img.img-fluid(src="../assets/images/scrollbar/fashion3.jpg", alt="girl")
                          .col-2 
                            .horizontal-img
                              img.img-fluid(src="../assets/images/scrollbar/fashion4.jpg", alt="girl")
                          .col-2 
                            .horizontal-img
                              img.img-fluid(src="../assets/images/scrollbar/fashion5.jpg", alt="girl")
                          .col-2 
                            .horizontal-img
                              img.img-fluid(src="../assets/images/scrollbar/fashion6.jpg", alt="girl")
              .col-xl-6
                .card
                  .card-header
                    h4 Both Side Visible Scrollbar
                    p.f-m-light.mt-1
                      | Use the 
                      code .visible-scroll 
                      | through visible both side scrollbar.
                  .card-body
                    .scroll-bar-wrap
                      .visible-scroll.always-visible.scroll-demo
                        .horz-scroll-content
                          .row
                            .col-sm-3
                              .visible-wrapper
                                img(src="../assets/images/banner/2.jpg", alt="office-work")
                              p.pt-3
                                | Inspiration can take many different forms, and 
                                em.txt-danger professional growth never stops
                                | . In light of this, we've compiled a comprehensive list of web design blogs that will keep your mind stimulated for the entire year. You won't find any stinkers on this list, so don't worry. We value your time and believe that you should only receive the greatest. Because of this, we've only gathered web design blogs that have recently being updated. Get ready to add numerous subscriptions by creating your Feebly account.
                                br
                                | --> Responsive...
                                br
                                | --> Secure your domain...
                                br
                                | --> Testing...
                                br
                                | --> Content creation...
                                br
                                | --> Visual elements...
                                br
                                | --> Launch...
                            .col-sm-3
                              h6.pb-2 Latest trends 
                              p 
                                | You should stay current with all the most recent advances in the business whether you operate as a freelance web designer or for an agency or design studio. You may be sure you're constantly providing the most intelligent and original design solutions by doing this.
                              p
                                | You can keep up with evolving design trends by reading web design blogs. You'll need to be able to comprehend new trends' causes and how they affect user experience. Additionally, you'll discover upgrades to current tools as well as new ones that have recently hit the market.
                              .visible-wrapper 
                                img(src="../assets/images/email/3.jpg", alt="office")
                            .col-sm-3
                              h6.pb-2 The best UX designer
                              p
                                | The internet is teeming with free resources, no matter what stage of your UX journey you're in, and UX design blogs should be your first point of call. The abundance of blogs available, though, can be somewhat of a double-edged sword because there are so many to choose from. How do you decide which blogs are actually worthwhile reading?
                              p
                                | We've collected a selection of the top UX design blogs available right now to spare you hours of scrolling and sorting through search results. We possess:
                                br
                                strong 1. Muzli 
                                br
                                strong 2. Facebook Design 
                                br
                                strong 3. Awwwards
                                br
                              p 
                                | If you already work in the UX field, the Inside Design blog has all the information you need to expand your knowledge, especially if you're interested in streamlining your UX teams and procedures and getting a better understanding of the whole product design and development process. This is an excellent location to keep an eye out for the most recent UX trends, tools, resources, and events because they are always adding new stuff.
                            .col-sm-3
                              h6.pb-2 How to make best website ideas 
                              .visible-wrapper 
                                img(src="../assets/images/banner/3.jpg", alt="website")
                              p.pt-3
                                | --> Blog 
                                br
                                | --> Portfolio website 
                                br
                                | --> Event website 
                                br
                                | --> personal website 
                                br
                                | --> Fashion website 
                                br
                                | --> Admin dashboards 
                                br
                                | --> E-commerce website 
                                br
                                | --> Beauty website 
                                br
                                | --> Food website
                                br
                                | --> Animation website 
                                br
                                | --> Financial website
              
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
