- var theme_customizer      = 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
                    | Creative 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 Creative Card
          // Container-fluid starts
          .container-fluid
            .row
              .col-12.col-md-6
                .card
                  .card-header.border-l-primary
                    h4 Border Left
                    p.mt-1.f-m-light
                      | Use the class of
                      code .b-l-* 
                      | for left border.
                  .card-body
                    p
                      | Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them.
                      br
                      strong Visit Us: 
                      | 	2600 Hollywood Blvd,Florida, United States-	33020
                      br
                      strong Mail Us:
                      | contact@us@gmail.com
                      br
                      strong Contact Number: 
                      | (954) 357-7760
              .col-12.col-md-6
                .card
                  .card-header.border-r-secondary
                    h4 Border Right
                    p.mt-1.f-m-light
                      | Use the class of
                      code .b-r-* 
                      | for right border.
                  .card-body
                    p
                      | Us Technology offers web & mobile development solutions for all industry verticals.Include a short form using fields that'll help your business understand who's contacting them. 
                    form
                      label.form-label(for='exampleFormControlInput1') Email address
                      input#exampleFormControlInput1.form-control(type='email' placeholder='youremail@gmail.com')
              .col-12.col-md-6
                .card
                  .card-header.border-t-danger
                    h4 Border Top
                    p.mt-1.f-m-light
                      | Use the class of
                      code .b-t-* 
                      | for top border.
                  .card-body
                    p.mb-0
                      | Tabs have long been used to show alternative views of the same group of information tabs in software. Known as
                      em.txt-danger “module tabs”
                      |  , these are still used today in web sites. For instance, airline companies such as Ryanair, easyJet and AirMalta use module tabs to enable the user to switch between bookings for flights, hotels and car hire.
              .col-12.col-md-6
                .card
                  .card-header.border-b-info
                    h4 Border Bottom
                    p.mt-1.f-m-light
                      | Use the class of
                      code .b-b-* 
                      | for bottom border.
                  .card-body
                    p.mb-0
                      | A navigation bar is a particularly important feature because it allows visitors to quickly and easily find
                      em.txt-danger  important pages on your website
                      |  , like your blog, product pages, pricing, contact info, and documentation. This improves the chances of visitors browsing your site longer, which can boost your page views and reduce your bounce rate.
              .col-xxl-4.col-md-6
                .card.height-equal
                  .card-header.border-l-primary.border-3
                    h4 Border Primary State
                    p.mt-1.f-m-light
                      | Use the class of
                      code .b-l-* 
                      | for left border and 
                      code .border-3 
                      | is used to increase the width of the border.
                  .card-body
                    .list-group
                      a.list-group-item.list-group-item-action.active(href='javascript:void(0)')
                        img.rounded-circle(src='../assets/images/user/1.jpg', alt='user')
                        | Teresa J. Mosteller
                      a.list-group-item.list-group-item-action(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(href='javascript:void(0)')
                        img.rounded-circle(src='../assets/images/user/5.jpg', alt='user')
                        | Bryan A. Owens
              .col-xxl-4.col-md-6
                .card.height-equal
                  .card-header.border-l-warning.border-3
                    h4 Border Warning State
                    p.mt-1.f-m-light
                      | Use the class of
                      code .b-l-* 
                      | for left border and 
                      code .border-3 
                      | is used to increase the width of the border.
                  .card-body
                    ol.list-group.list-group-numbered
                      li.list-group-item.txt-primary.fw-bold known for delivery of useful and usable solutions
                      li.list-group-item.txt-danger.fw-bold Solve your problem with us
                      li.list-group-item.txt-success.fw-bold Certified Professionals
                      li.list-group-item.txt-warning.fw-bold Growth-Driven 
              .col-xxl-4.col-12
                .card.height-equal
                  .card-header.border-l-secondary.border-2
                    h4 Border Secondary State
                    p.mt-1.f-m-light
                      | Use the class of
                      code .b-l-* 
                      | for left border and 
                      code .border-3 
                      | is used to increase the width of the border.
                  .card-body.scroll-demo
                    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 McClaran
                        span.badge.bg-danger.text-white.rounded-pill.p-2 Issue
              .col-sm-12.col-xl-6
                .card.card-absolute
                  .card-header.bg-primary
                    h5.txt-light Absolute Card
                  .card-body
                    .d-flex.list-behavior-1.align-items-center
                      .flex-shrink-0
                        img.tab-img.img-fluid(src="../assets/images/blog/img.png", alt="home") 
                      .flex-grow-1
                        p.mb-xl-0.mb-sm-4
                          | We provide end to end digital solutions, right from designing your website/application development: Domain, Web Hosting, Email Hosting Registration, Search Engine Optimization and other Internet Marketing, Renewal of Services timely and effectively.
              .col-sm-12.col-xl-6
                .card.card-absolute
                  .card-header.bg-secondary
                    h5.txt-light Absolute Card
                  .card-body
                    .d-flex.list-behavior-1.align-items-center
                      .flex-shrink-0 
                        img.tab-img.img-fluid(src="../assets/images/blog/blog.jpg", alt="home")
                      .flex-grow-1
                        p.mb-xl-0.mb-sm-4
                          | When someone visits your homepage, your design should inspire them to stay. Therefore, your value proposition should be established on the homepage for visitors to select to stay on your website.Building trust, expressing value,to the next step all depend on a page's design.
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
