- var page_Title = 'Creative Card';
- 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.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Creative Card
                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 Creative Card
          // Container-fluid starts
          .container.w-full
            .grid.effective-card.grid-cols-12.card-gap 
              div(class="col-span-3 xxl:col-span-6 xl:col-span-12 box-col-4")
                .card.common-hover
                  .card-body
                    a.effect-card(href='#!')
                      div.common-box1.common-align
                        i(data-feather='plus-square')
                        h5 Add the title of the card
                      p.mb-0 This is an example card for you to use. you are able to include subtitles in your according.
                      .go-corner
                        .go-arrow
              div(class="col-span-6 xl:col-span-12 box-col-4")
                .card.common-hover
                  .card-body  
                    .creative-wrapper
                      img.max-w-full(src="../assets/images/other-images/mountain.jpg", alt="background image")
                      .creative-info 
                        h5 Add the title of the card
                        p This is an example card for you to use. you are able to include subtitles in your according.
              div(class="col-span-3 xxl:col-span-12 box-col-4")
                .card.common-hover
                  .card-body
                    .overlay-card
                      .overlay
                        .overlay-box
                        .overlay-box.overlay-heading
                          h5.light-white Add the title of the card
                          hr
                        .overlay-box.overlay-subtitle
                          p.overlay-pera This is an example card for you to use. you are able to include subtitles in your according.
              div(class="col-span-6 md:col-span-12")
                .card.common-hover
                  .card-header.border-l-primary
                    h5 Border Left
                    p.mt-1.f-m-light
                      | Use class of 
                      code  border-*
                      |  for the left border.
                  .card-body
                    p
                      | You can design your creative card by taking only the 
                      strong border-l-primary 
                      |  class.
                      | If you want to use other colors like this: 
                      strong border-l-*
                      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
              div(class="col-span-6 md:col-span-12")
                .card.common-hover
                  .card-header.border-r-secondary
                    h5 Border Right
                    p.mt-1.f-m-light
                      | Use class of 
                      code rounded-r-* 
                      | for the right border.
                  .card-body
                    p.mb-4
                      | You can design your creative card by taking only the 
                      strong border-r-secondary
                      |  class.
                      | If you want to use other colors like this: 
                      strong rounded-r-*
                    form
                      label.form-label(for='exampleFormControlInput1') Email address
                      input#exampleFormControlInput1.form-control(type='email' placeholder='youremail@gmail.com')
              div(class="col-span-6 md:col-span-12")
                .card.common-hover
                  .card-header.border-t-danger
                    h5 Border Top
                    p.mt-1.f-m-light
                      | Use class of 
                      code border-t-* 
                      |  for the top border.
                  .card-body
                    p By using the border-color, we can give the border in the background direction in a creative way.
                      |  You can design your creative card by taking only the 
                      b border-t-danger
                      |  class.
                      | If you want to use other colors like this: 
                      b border-t-*
              div(class="col-span-6 md:col-span-12")
                .card.common-hover
                  .card-header.border-b-info
                    h5 Border Bottom
                    p.mt-1.f-m-light
                      | Use class of
                      code  border-b-* 
                      | for the bottom border.
                  .card-body
                    p By using the border-color, we can give the border in the background direction in a creative way.
                      |  You can design your creative card by taking only the 
                      b border-b-info
                      |  class.
                      | If you want to use other colors like this: 
                      b border-b-*
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card.common-hover
                  .card-header.border-l-primary.border-3
                    h5 Border Primary State
                    p.mt-1.f-m-light
                      | Use class of
                      code  border-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.rounded(href='#!')
                        img.rounded-full(src='../assets/images/user/1.jpg', alt='user')
                        | Teresa J. Mosteller 
                      a.list-group-item.list-group-item-action(href='#!')
                        img.rounded-full(src='../assets/images/user/3.png', alt='user')
                        | Gloria D. Acheson 
                      a.list-group-item.list-group-item-action(href='#!')
                        img.rounded-full(src='../assets/images/user/5.jpg', alt='user')
                        | Bryan A. Owens 
              div(class="col-span-4 xxl:col-span-6 md:col-span-12")
                .card.common-hover
                  .card-header.border-l-warning.border-3
                    h5 Border Warning State 
                    p.mt-1.f-m-light
                      | Use class of 
                      code  border-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.font-bold known for delivery of useful and usable solutions
                      li.list-group-item.txt-danger.font-bold Solve your problem with us
                      li.list-group-item.txt-success.font-bold Certified Professionals
                      li.list-group-item.txt-warning.font-bold Growth-Driven 
              div(class="col-span-4 xxl:col-span-12")
                .card.common-hover
                  .card-header.border-l-secondary.border-3
                    h5 Border Secondary State
                    p.mt-1.f-m-light
                      | Use class of
                      code  border-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.scroll-rtl
                      li.list-group-item.flex.items-start.flex-wrap
                        .ms-2.me-auto
                          | Stella Nowland
                        span.badge.bg-warning.rounded-full.p-2 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 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 Social
                      li.list-group-item.flex.items-start.flex-wrap
                        .ms-2.me-auto
                          | Graciela McClaran
                        span.badge.bg-danger.text-white.rounded-full.p-2 Issue 
              div(class="col-span-6 xl:col-span-12")
                .card.card-absolute
                  .card-header.bg-primary
                    h5.txt-light Absolute Card
                  .card-body
                    .flex.list-behavior-1.items-center
                      .shrink-0
                        img.tab-img.max-w-full(src="../assets/images/blog/img.png", class="[@media(max-width:1999px)]:h-[86px] [@media(max-width:992px)]:h-[64px]" alt="home") 
                      .grow
                        p.mb-xl-0.mb-sm-4(class="[@media(max-width:1199px)]:line-clamp-[3]")
                          | Absolute card is made by using 
                          b shrink-0, grow & card-absolute 
                          |  classes. you can do any of your designs using these classes. Subtracting the total size of all the flex items from the size of the flex container yields the leftover space.
              div(class="col-span-6 xl:col-span-12")
                .card.card-absolute
                  .card-header.bg-secondary
                    h5.txt-light Absolute Card
                  .card-body
                    .flex.list-behavior-1.items-center
                      .shrink-0 
                        img.tab-img.max-w-full(src="../assets/images/blog/blog.jpg", class="[@media(max-width:1999px)]:h-[86px] [@media(max-width:992px)]:h-[64px]" alt="home")
                      .grow
                        p.mb-xl-0.mb-sm-4(class="[@media(max-width:1199px)]:line-clamp-[3]")
                          | Absolute card is made by using 
                          b shrink-0, grow & card-absolute 
                          |  classes. you can do any of your designs using these classes. Subtracting the total size of all the flex items from the size of the flex container yields the leftover space.
          // Container-fluid Ends 
        include ../../components/footer
    include ../../components/footer-files
