- var page_Title = 'Layout Light';
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
- var typeahead             = true;
- var typeahead_search      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var scrollbar             = true;
- var theme_customizer      = 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/starter-kit-header
      // Page Body Start
      .page-body-wrapper.horizontal-menu
        include ../../components/starter-kit-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
                    | Layout Light
                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 Color version
                    li.breadcrumb-item.active Layout light
          // Container-fluid starts
          .container
            .grid.grid-cols-12.card-gap.starter-main
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Kick start your project development !
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.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
                      | Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, Cuba Admin provides useful features to kick start your project development with no efforts !
                    ul
                      li
                        p
                          | Cuba Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.
                      li
                        p
                          | Every components in Cuba Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.
                      li
                        p
                          | It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.
                    .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;!-- Cod Box Copy begin --&gt;
                          | &lt;p&gt;Getting start with your project custom requirements using a ready template which is quite difficult and time taking process, Cuba Admin provides useful features to kick start your project development with no efforts !&lt;/p&gt;
                          | &lt;ul&gt;
                          | &lt;li&gt;&lt;p&gt;Cuba Admin provides you getting start pages with different layouts, use the layout as per your custom requirements and just change the branding, menu & content.&lt;/p&gt;&lt;/li&gt;
                          | &lt;li&gt;&lt;p&gt;Every components in Cuba Admin are decoupled, it means use only components you actually need! Remove unnecessary and extra code easily just by excluding the path to specific SCSS, JS file.&lt;/p&gt;&lt;/li&gt;
                          | &lt;li&gt;&lt;p&gt;It use PUG as template engine to generate pages and whole template quickly using node js. Save your time for doing the common changes for each page (i.e menu, branding and footer) by generating template with pug.&lt;/p&gt;&lt;/li&gt;
                          | &lt;/ul&gt;
                          | &lt;!-- Cod Box Copy end --&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 What is starter kit ?
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.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
                      | Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time.
                    ul
                      li
                        p Each layout includes basic components only.
                      li
                        p
                          | Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.
                      li
                        p
                          | Using template engine to generate whole template quickly with your selected layout and other custom changes. 
                    .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;!-- Cod Box Copy begin --&gt;
                          | &lt;p&gt;Starter kit is a set of pages with different layouts, useful for your next project to start development process from scratch with no time. &lt;/p&gt;
                          | &lt;ul&gt;
                          | &lt;li&gt;&lt;p&gt;Each layout includes basic components only.&lt;/p&gt;&lt;/li&gt;
                          | &lt;li&gt;&lt;p&gt;Select your choice of layout from starter kit, customize it with optional changes like colors and branding, add required dependency only.&lt;/p&gt;&lt;/li&gt;
                          | &lt;li&gt;&lt;p&gt;Using template engine to generate whole template quickly with your selected layout and other custom changes.&lt;/p&gt;&lt;/li&gt;
                          | &lt;/ul&gt;
                          | &lt;!-- Cod Box Copy end --&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 How to use starter kit ?
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.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
                      span.font-semibold HTML
                    p
                      | If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.
                    p
                      span.font-semibold PUG
                    p
                      | To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.
                    .alert.alert-primary.inverse(role='alert')
                      i.icon-info-alt
                      h5 Tips!
                      p
                        | Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.
                    .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;!-- Cod Box Copy begin --&gt;
                          | &lt;p&gt;&lt;span class="font-semibold"&gt;HTML&lt;/span&gt;&lt;/p&gt;
                          | &lt;p&gt;If you know just HTML, select your choice of layout from starter kit folder, customize it with optional changes like colors and branding, add required dependency only.&lt;/p&gt;
                          | &lt;p&gt;&lt;span class="font-semibold"&gt;PUG&lt;/span&gt;&lt;/p&gt;
                          | &lt;p&gt;To use PUG it required node.js and basic knowledge of using it. Using PUG as template engine to generate whole template quickly with your selected layout and other custom changes. To getting start with PUG usage & template generating process please refer template documentation.&lt;/p&gt;
                          | &lt;div class="alert alert-primary inverse" role="alert"&gt;
                          | &lt;i class="icon-info-alt"&gt;&lt;/i&gt;
                          | &lt;h5&gt;Tips!&lt;/h5&gt;
                          | &lt;p&gt;Hideable navbar option is available for fixed navbar with static navigation only. Works in top and bottom positions, single and multiple navbars.&lt;/p&gt;
                          | &lt;/div&gt;
                          | &lt;!-- Cod Box Copy end --&gt;
              div(class="col-span-12")
                .card
                  .card-header
                    h5 Simple Card
                  .card-body
                    h6.mb-2 HTML Content Presents
                    p
                      strong Create an account
                      |  on the chosen ticketing platform and set up your workspace. Customize it according to your projects and team, if applicable. Set permissions and access levels for team members and clients, if necessary.
                      em Individual pieces of software called WordPress plugins
                      |  let you extend the functionality of your website. You may install each of these pieces of software on your
                      code  WordPress website 
                      a(href='#!') they are using support
                      |  the widget before adding it. It's conceivable that the issue is brought on by a lack of functionality.
                    h6.mb-2 Header Level 2
                    ol
                      li Every screen size is accommodated with a responsive website
                      li Coding is the art of engineering
                    .figure.block
                      blockquote.blockquote
                        p
                          | The usefulness and usability of a website, not its aesthetic design, define its success or failure. User-centric design has become the norm for effective and financially motivated web design since the visitor to the website is the only one who clicks the mouse and thus determines everything. After all, a feature might as well not exist if people can't utilize it.
                    h4.mb-2
                      | Header Level
                      span  3
                    ul
                      li Plugins and tools for seamless WordPress integration
                      li Stars require darkness to shine.
                    pre.
                      #header h1 a {
                        display: block;
                        width: 300px;
                        height: 80px;
                      }
                    dl
                      dt Definition list
                      dd
                        | It is used to systematically arrange and convey words and the meanings that go with them. Typically, there are two basic components to a definition list: the word or "defined term" and the associated definition or "description."
                      dt Meta tags in wordPress
                      dd
                        | Security Scan: Protecting Against Vulnerabilities.
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header
                    h5 With Header
                  .card-body
                    h5 Content title
                    p
                      | Add a heading to card with 
                      code .card-header
                      |  class
                    p
                      | You may also include any &lt;h1&gt;-&lt;h6&gt; with a 
                      code .card-header 
                      |  & 
                      code .card-title
                      |  class to add heading.
                    p
                      | While there is no right or incorrect response, a professional designer should be well-versed in UX and be able to provide a complete end-to-end UX design process.
              div(class="col-span-6 md:col-span-12")
                .card
                  .card-header.card-no-border
                    h5 With Header & No Border
                  .card-body
                    h5 Content title
                    p
                      | Add a heading to card with 
                      code .card-header 
                      |  class & without header border
                      code .border-bottom-0
                      |  class.
                    p
                      | You may also include any &lt;h1&gt;-&lt;h6&gt; with a 
                      code .card-header 
                      |  & 
                      code .card-title
                      |  class to add heading.
                    p
                      | Gingerbread brownie sweet roll cheesecake chocolate cake jelly beans marzipan gummies dessert. Jelly beans sugar plum cheesecake cookie oat cake soufflé.
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files