- var page_Title = 'Scrollable';
- var theme_customizer      = true;
- var scrollbar             = true;
- var scrollable            = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = 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
                    | Scrollable
                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 Bonus Ui
                    li.breadcrumb-item.active Scrollable
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xl:col-span-12") 
                .card 
                  .card-header 
                    h5 Custom Scrollbar
                    p.f-m-light.mt-1
                      | Use 
                      code vertical-scroll 
                      | and 
                      code scroll-demo 
                      | through design scrollbar.
                  .card-body 
                    .vertical-scroll.scroll-demo.default-scroll
                      h6.pb-2 Scrollbar 
                      p
                        | I'm quite interested in learning more about 
                        b  custom scrollbars
                        |  because they are becoming more and more common.
                      .scrollbar-images
                        img.max-w-full.h-auto(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 
                        b 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.
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Small Size Scrollbar
                    p.f-m-light.mt-1  
                      | Use
                      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
                          h6.pb-2 Solution for Business Transformation
                        p   
                          | The Business transformation solution programme is a 
                          b 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.max-w-full.h-auto.pt-3(src='../assets/images/banner/3.jpg', alt='business', width='800', height='600')
                        p 
                          | The core of the programme is our internally developed 
                          b 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.
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Badges Scrollbar
                    p.f-m-light.mt-1
                      | Use
                      code  badge 
                      |  class through create more badges and 
                      code  vertical-scroll 
                      | use as vertical scroll. 
                  .card-body
                    .vertical-scroll.scroll-demo.scroll-b-none.p-0
                      ol.list-group.list-group-numbered.scroll-rtl
                        li.list-group-item.flex.items-start.flex-wrap.rounded-t-md
                          .ms-2.me-auto
                            |  Stella Nowland
                          span.badge.bg-warning.rounded-full.p-2(class="text-[10px]") Freelance
                        li.list-group-item.flex.items-start.flex-wrap
                          .ms-2.me-auto
                            |  Lola Stanford
                          span.badge.bg-danger.text-white.rounded-full.p-2(class="text-[10px]") Issue
                        li.list-group-item.flex.items-start.flex-wrap
                          .ms-2.me-auto
                            |  Caitlin Coungeau
                          span.badge.bg-primary.text-white.rounded-full.p-2(class="text-[10px]") Social
                        li.list-group-item.flex.items-start.flex-wrap
                          .ms-2.me-auto
                            |  Graciela W. McClaran
                          span.badge.bg-danger.text-white.rounded-full.p-2(class="text-[10px]") Issue
                        li.list-group-item.flex.items-start.flex-wrap
                          .ms-2.me-auto
                            |  Derek T. Aldridge
                          span.badge.bg-warning.text-white.rounded-full.p-2(class="text-[10px]") Freelance 
                        li.list-group-item.flex.items-start.flex-wrap
                          .ms-2.me-auto
                            | Annie A. Riley
                          span.badge.bg-primary.text-white.rounded-full.p-2(class="text-[10px]") Social 
                        li.list-group-item.flex.items-start.flex-wrap
                          .ms-2.me-auto
                            | Hana J. Boyd
                          span.badge.bg-danger.text-white.rounded-full.p-2(class="text-[10px]") Issue
                        li.list-group-item.flex.items-start.flex-wrap
                          .ms-2.me-auto
                            |  Karen R. Pryce
                          span.badge.bg-warning.text-white.rounded-full.p-2(class="text-[10px]") Freelance
                        li.list-group-item.flex.justify-between.items-start.flex-wrap.rounded-b-md
                          .ms-2.me-auto
                            | Cordie C. Pope
                          span.badge.bg-primary.text-white.rounded-full.p-2(class="text-[10px]") Social
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 Profile Scrollable
                    p.f-m-light.mt-1  
                      | Use 
                      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.flex.items-center.rounded-t-md(href='#!')
                          img.rounded-full(src='../assets/images/user/3.png', alt='user')
                          | Gloria D. Acheson
                        a.list-group-item.list-group-item-action.list-hover-primary.flex.items-center(href='#!')
                          img.rounded-full(src='../assets/images/user/2.jpg', alt='user')
                          | Sharon C. Obrien
                        a.list-group-item.list-group-item-action.list-hover-primary.flex.items-center(href='#!')
                          img.rounded-full(src='../assets/images/user/5.jpg', alt='user')
                          | Bryan A. Owens
                        a.list-group-item.list-group-item-action.list-hover-primary.flex.items-center(href='#!')
                          img.rounded-full(src='../assets/images/user/12.png', alt='user')
                          | Ronald M. Enger
                        a.list-group-item.list-group-item-action.list-hover-primary.flex.items-center(href='#!')
                          img.rounded-full(src='../assets/images/user/14.png', alt='user')
                          | Herbert A. Clary
                        a.list-group-item.list-group-item-action.list-hover-primary.flex.items-center(href='#!')
                          img.rounded-full(src='../assets/images/user/6.jpg', alt='user')
                          | Dino A. Cannon
                        a.list-group-item.list-group-item-action.list-hover-primary.flex.items-center(href='#!')
                          img.rounded-full(src='../assets/images/user/3.jpg', alt='user')
                          | Danny A. McLean
                        a.list-group-item.list-group-item-action.list-hover-primary.flex.items-center.rounded-b-md(href='#!')
                          img.rounded-full(src='../assets/images/user/2.jpg', alt='user')
                          | Betty K. Curtis
              div(class="col-span-4 xxl:col-span-12")
                .card
                  .card-header
                    h5 Scrollable Content
                    p.f-m-light.mt-1 
                      | Use 
                      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(class="!pt-0")
                          a.list-group-item.list-group-item-action.list-hover-primary.rounded-t-md(href='#' aria-current='true')
                              .list-wrapper.gap-0(class="[@media(max-width:366px)]:pb-[8px] [@media(max-width:414px)]:[flex-wrap:unset] [@media(max-width:414px)]:[word-break:break-word]")
                                  img.list-img(src="../assets/images/dashboard-11/user/9.jpg", alt="user")
                                  .list-content 
                                    h6 Molly Bot
                                    p MollyBoake@rhyta.com
                                    small 5 days ago
                          a.list-group-item.list-group-item-action.list-hover-primary(href='#')
                              .list-wrapper.gap-0(class="[@media(max-width:366px)]:pb-[8px] [@media(max-width:414px)]:[flex-wrap:unset] [@media(max-width:414px)]:[word-break:break-word]")
                                  img.list-img(src="../assets/images/dashboard-11/user/2.jpg", alt="user")
                                  .list-content 
                                    h6 Gabrielle Fairy
                                    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(class="[@media(max-width:366px)]:pb-[8px] [@media(max-width:414px)]:[flex-wrap:unset] [@media(max-width:414px)]:[word-break:break-word]")
                                  img.list-img(src="../assets/images/dashboard-11/user/3.jpg", alt="user")
                                  .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(class="[@media(max-width:366px)]:pb-[8px] [@media(max-width:414px)]:[flex-wrap:unset] [@media(max-width:414px)]:[word-break:break-word]")
                                  img.list-img(src="../assets/images/dashboard-11/user/1.jpg", alt="user")
                                  .list-content 
                                    h6 Francis K. Henri
                                    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(class="[@media(max-width:366px)]:pb-[8px] [@media(max-width:414px)]:[flex-wrap:unset] [@media(max-width:414px)]:[word-break:break-word]")
                                  img.list-img(src="../assets/images/dashboard-11/user/7.jpg", alt="user")
                                  .list-content 
                                    h6 Jose A. Sea
                                    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(class="[@media(max-width:366px)]:pb-[8px] [@media(max-width:414px)]:[flex-wrap:unset] [@media(max-width:414px)]:[word-break:break-word]")
                                  img.list-img(src="../assets/images/dashboard-11/user/12.jpg", alt="user")
                                  .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(class="[@media(max-width:366px)]:pb-[8px] [@media(max-width:414px)]:[flex-wrap:unset] [@media(max-width:414px)]:[word-break:break-word]")
                                  img.list-img(src="../assets/images/dashboard-11/user/4.jpg", alt="user")
                                  .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.rounded-b-md(href='#')
                              .list-wrapper.gap-0(class="[@media(max-width:366px)]:pb-[8px] [@media(max-width:414px)]:[flex-wrap:unset] [@media(max-width:414px)]:[word-break:break-word]")
                                  img.list-img(src="../assets/images/dashboard-11/user/10.jpg", alt="user")
                                  .list-content 
                                    h6 Lawrence L. Nash
                                    p LawrenceLNash@jourrapide.com
                                    small.text-muted 8 days ago
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Horizontal Scrollbar 
                    p.f-m-light.mt-1
                      | Use 
                      code  horizontal-scroll 
                      | through move content horizontally.
                  .card-body
                    .horizontal-scroll.scroll-demo
                      .horz-scroll-content
                        .grid.grid-cols-12.card-gap
                          div(class="col-span-2") 
                            .horizontal-img
                              img.max-w-full(src="../assets/images/scrollbar/fashion1.jpg", alt="girl")
                          div(class="col-span-2")
                            .horizontal-img
                              img.max-w-full(src="../assets/images/scrollbar/fashion2.jpg", alt="girl")
                          div(class="col-span-2") 
                            .horizontal-img
                              img.max-w-full(src="../assets/images/scrollbar/fashion3.jpg", alt="girl")
                          div(class="col-span-2") 
                            .horizontal-img
                              img.max-w-full(src="../assets/images/scrollbar/fashion4.jpg", alt="girl")
                          div(class="col-span-2") 
                            .horizontal-img
                              img.max-w-full(src="../assets/images/scrollbar/fashion5.jpg", alt="girl")
                          div(class="col-span-2") 
                            .horizontal-img
                              img.max-w-full(src="../assets/images/scrollbar/fashion6.jpg", alt="girl")
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Both Side Visible Scrollbar
                    p.f-m-light.mt-1
                      | Use 
                      code  visible-scroll 
                      | through visible both side scrollbar.
                  .card-body
                    .scroll-bar-wrap
                      .visible-scroll.always-visible.scroll-demo
                        .horz-scroll-content
                          .grid.grid-cols-12.card-gap
                            div(class="col-span-3")
                              .visible-wrapper
                                img(src="../assets/images/banner/2.jpg", alt="office-work")
                              p.pt-3
                                | Inspiration can take many different forms, and 
                                b 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...
                            div(class="col-span-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")
                            div(class="col-span-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. Pinterest
                                br
                                strong 2. Facebook Design 
                                br
                                strong 3. Instagram Design
                                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.
                            div(class="col-span-3")
                              h6.pb-2 How to make best website ideas 
                              .visible-wrapper 
                                img(src="../assets/images/banner/4.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
