- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var height_equal          = true;
- var theme_customizer      = 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
                    | Basic 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 Basic Card
          // Container-fluid starts
          .container-fluid
            .row
              .col-sm-12.col-xl-6
                .card
                  .card-header
                    h4 Basic Card
                    p.f-m-light.mt-1
                      | This is a simple basic card using anywhere.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .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.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre
                        code.language-html#example-head
                          | &lt;!-- Basic card --&gt;
                          | &lt;p class="mb-0"&gt;Tabs have long been used to show alternative views of the same group of information tabs in software. Known as
                          | &lt;em class="txt-danger"&gt;&ldquo;module tabs&rdquo;&lt;/em&gt; , 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.&lt;/p&gt;
              .col-sm-12.col-xl-6
                .card.b-r-0
                  .card-header
                    h4 Flat Card
                    p.f-m-light.mt-1
                      | For flat cards, make the
                      code .b-r-0[border-radius:0]
                      | used class.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .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.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head1', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre
                        code.language-html#example-head1
                          | &lt;!-- Flat card--&gt;
                          | &lt;p class="mb-0"&gt;A navigation bar is a particularly important feature because it allows visitors to quickly and easily find
                          | &lt;em class="txt-danger"&gt; important pages on your website&lt;/em&gt; , 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.&lt;/p&gt;
              .col-sm-12.col-xl-6
                .card.shadow-none.border
                  .card-header
                    h4 Without shadow Card
                    p.f-m-light.mt-1
                      | Use the
                      code .shadow-none 
                      | &
                      code .border 
                      | class through shadow removes.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .flex-space.flex-wrap.align-items-center
                      img.tab-img(src="../assets/images/avtar/3.jpg", alt="profile") 
                      p 
                        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
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head2', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre
                        code.language-html#example-head2
                          | &lt;!-- Without shadow Card --&gt;
                          | &lt;div class="flex-space flex-wrap align-items-center"&gt;
                          |   &lt;img class="tab-img" src="../assets/images/avtar/3.jpg" alt="profile"&gt;
                          |   &lt;p&gt; &lt;strong&gt;Visit Us: &lt;/strong&gt; 2600 Hollywood Blvd,Florida, United States- 33020&lt;br&gt;&lt;strong&gt;Mail Us:&lt;/strong&gt;contact@us@gmail.com&lt;br&gt;&lt;strong&gt;Contact Number: &lt;/strong&gt;(954) 357-7760&lt;/p&gt;
                          | &lt;/div&gt;
              .col-sm-12.col-xl-6
                .card
                  .card-header
                    h4
                      i.icofont.icofont-library.me-2
                      |  Icon In Heading
                    p.f-m-light.mt-1
                      | Use the any icons  for heading. 
                      code [font-awesome/ico-font/feather]
                      | .
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body
                    .d-flex.gap-3.align-items-center.list-behavior-1
                      .flex-shrink-0
                        img.tab-img.img-fluid(src="../assets/images/blog/img.png", alt="home") 
                      .flex-grow-1.ms-0
                        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.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head3', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre
                        code.language-html#example-head3
                          | &lt;!-- Icon in Heading --&gt;
                          | &lt;div class="d-flex gap-3 align-items-center list-behavior-1"&gt;
                          |   &lt;div class="flex-shrink-0"&gt;&lt;
                          |     img class="tab-img img-fluid" src="../assets/images/blog/img.png" alt="home"&gt;&lt;/div&gt;
                          |   &lt;div class="flex-grow-1 ms-0"&gt;
                          |     &lt;p class="mb-xl-0 mb-sm-4"&gt;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.&lt;/p&gt;
                          |   &lt;/div&gt;
                          | &lt;/div&gt;
              .col-sm-12
                .card
                  .card-header.bg-dark
                    h4.text-white Dark Color Card
                    p.f-m-light.mt-1
                      | Use the 
                      code .bg-dark 
                      | color for dark background card.
                    .card-header-right.dark-color-header
                      ul.list-unstyled.card-option
                        li
                          i.fa.fa-spin.fa-cog
                        li
                          i.view-html.fa.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card
                  .card-body.bg-dark
                    .d-flex.align-items-center.gap-3.pills-blogger 
                      .blog-wrapper 
                          img.blog-img(src="../assets/images/dashboard-2/headphones.png", alt="head-phone")
                      .blog-content 
                        p 
                          em.txt-danger.fw-bold Smart headphones
                          |   — also called smart earbuds or hearable — are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#example-head4', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre
                        code.language-html#example-head4
                          | &lt;!-- Dark Color Card --&gt;
                          | &lt;div class="d-flex align-items-center gap-3 pills-blogger"&gt;
                          |   &lt;div class="blog-wrapper"&gt;
                          |   &lt;img class="blog-img" src="../assets/images/dashboard-2/headphones.png" alt="head-phone"&gt;
                          | &lt;/div&gt;
                          |   &lt;div class="blog-content"&gt;
                          |     &lt;p&gt;
                          |        &lt;em class="txt-danger fw-bold"&gt;Smart headphones&lt;/em&gt; &mdash; also called smart earbuds or hearable &mdash; are high-tech in-ear devices that do more than transmit audio. These headphones are usually wireless, and they can sync up with your phone, tablet, computer or other Bluetooth-enabled device. The main appeal of hearables is convenience, as they allow you to complete common tasks without directly accessing your phone or computer. Smart wireless headphones sync up to other devices using Bluetooth technology, and many of their features rely on data from your smartphone or computer.&lt;/p&gt;
                          |     &lt;/div&gt;
                          |   &lt;/div&gt;
                          | &lt;/div&gt;
                          | &lt;div class="card-footer bg-dark"&gt;
                          |   &lt;h6 class="mb-0"&gt;Card Footer&lt;/h6&gt;
                  .card-footer.bg-dark
                    h6.mb-0 Card Footer
              .col-xl-4.col-sm-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-xl-4.col-sm-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-xl-4.col-12
                .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      
