Creative Tim Builder

<!doctype html> <html lang="en" dir="ltr" style="--bs-body-color: #67748e; --bs-primary: #cb0c9f; --bs-info: #17c1e8; --bs-danger: #ea0606; --bs-warning: #fbcf33; --bs-success: #82d616; --bs-light: #e9ecef; --bs-secondary: #8392ab; --bs-dark: #344767; --bs-gradient-primary-right: #7928ca; --bs-gradient-primary-left: #ff0080; --bs-gradient-info-right: #2152ff; --bs-gradient-info-left: #21d4fd; --bs-gradient-warning-right: #f53939; --bs-gradient-warning-left: #fbcf33; --bs-gradient-danger-right: #ea0606; --bs-gradient-danger-left: #ff667c; --bs-gradient-success-right: #17ad37; --bs-gradient-success-left: #98ec2d; --bs-gradient-dark-right: #141727; --bs-gradient-dark-left: #3a416f; --bs-gradient-secondary-right: #627594; --bs-gradient-secondary-left: #a8b8d8; --bs-gradient-light-right: #ced4da; --bs-gradient-light-left: #ebeff4;"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/png" href="https://builder.creative-tim.com/img/favicon.ico">  <meta name="csrf-token" content="RbRoRkytxsAqKbZjMLG5O9qacSkreOQCdJOXx3RX"> <title>Creative Tim Builder</title>  <link href="https://builder.creative-tim.com/css/vendor/animate.css" rel="stylesheet"> <link href="https://builder.creative-tim.com/css/vendor/codemirror.css" rel="stylesheet"> <link href="https://builder.creative-tim.com/css/vendor/material-ocean.css" rel="stylesheet"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <link href="https://builder.creative-tim.com/css/vendor/fontawesome-iconpicker.min.css" rel="stylesheet"> <link href="https://builder.creative-tim.com/css/app.css?v=0.1.4" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" /> <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/soft-ui-design-system-builder/v1.0.7/assets/css/nucleo-icons.css" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/soft-ui-design-system-builder/v1.0.7/assets/css/nucleo-svg.css" rel="stylesheet" />  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/soft-ui-design-system-builder/v1.0.7/assets/css/soft-design-system.css" rel="stylesheet">  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-NKDMSK6');</script>  <style >[wire\:loading], [wire\:loading\.delay], [wire\:loading\.inline-block], [wire\:loading\.inline], [wire\:loading\.block], [wire\:loading\.flex], [wire\:loading\.table], [wire\:loading\.grid], [wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short], [wire\:loading\.delay\.long], [wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest] {display:none;}[wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}input:-webkit-autofill, select:-webkit-autofill, textarea:-webkit-autofill {animation-duration: 50000s;animation-name: livewireautofill;}@keyframes livewireautofill { from {} }</style> </head> <body class="" data-type="kit" data-project="project-I2P949hp3eW64VAVFTEFADknc3vHMJbA9Mt" data-product="soft-ui-design-system" data-framework="bootstrap5" data-plan=" free ">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div class="sidebar-builder"> <ul class="loopple-nav loopple-nav-tabs nav nav-tabs" id="myTab" role="tablist"> <li class="loopple-nav-item ml-auto" role="presentation"> <button class="loopple-nav-link active w-100 btn-sm" id="structure-tab" data-toggle="tab" data-target="#structure" type="button" role="tab" aria-controls="structure" aria-selected="true">Sections</button> </li> <li class="loopple-nav-item loopple-d-none" role="presentation"> <button class="loopple-nav-link w-100 btn-sm" id="components-tab" data-toggle="tab" data-target="#components" type="button" role="tab" aria-controls="components" aria-selected="true">Components</button> </li> <li class="loopple-nav-item" role="presentation"> <button class="loopple-nav-link w-100 btn-sm" id="editor-tab" data-toggle="tab" data-target="#editor" type="button" role="tab" aria-controls="editor" aria-selected="false">Editor</button> </li> <li class="loopple-nav-item mr-auto" role="presentation"> <button class="loopple-nav-link w-100 btn-sm" id="pages-tab" data-toggle="tab" data-target="#pages" type="button" role="tab" aria-controls="pages" aria-selected="false">Pages</button> </li> </ul> <div class="tab-content tab-content-builder loopple-tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="structure" role="tabpanel" aria-labelledby="grid-tab"> <div class="container loopple-container pb-5"> <div class="row mt-2">  <div class="accordion__item loopple-border-bottom loopple-border-top-0"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac1"> Grid <span class="loopple-ml-auto loopple-float-end accordion__number">4</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac1" aria-hidden="true"> <div class="col-12"> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 2 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-2-cols"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-2-cols.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 3 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-3-cols"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-3-cols.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 4 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-4-cols"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-4-cols.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 4-8 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-col-4-col-8"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-4-8-cols.png"> </div> </div> <h3 class="loopple-text loopple-h6 loopple-font-weight-500 mt-2 mb-1">Grid with 8-4 columns</h3> <div class="draggable drag-start loopple-bg-white loopple-mx-0 mb-2 row-col-8-col-4"> <div class="image-container"> <img class="loopple-w-100" src="/img/grid-8-4-cols.png"> </div> </div> </div> </div> </div> <div class="col-12"> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-3">Sections</h3> </div> <div class="accordion__item loopple-border-top"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset accordion__trigger--active" aria-expanded="false" aria-controls="ac2"> Navbars <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body" style="height: auto;" id="ac2" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="navbar-light"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-light-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="navbar-blur"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-blur-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="navbar-dark"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-dark-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset accordion__trigger--active" aria-expanded="false" aria-controls="ac2"> Headers <span class="loopple-ml-auto loopple-float-end accordion__number">7</span> </button> </h3> <div class="accordion__body" style="height: auto;" id="ac2" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="header-with-skew-image"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/header-with-skew-image-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="header-with-multiple-images"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/header-with-multiple-images-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="header-with-blur-and-image"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/header-with-blur-and-image-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="header-with-carousel"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/header-with-carousel-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="header-with-background-image"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/header-with-background-image-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="header-mobile-application"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/header-mobile-application-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="header-with-typed-text"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/header-with-typed-text-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac3"> Features <span class="loopple-ml-auto loopple-float-end accordion__number">10</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac3" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="feature-with-text-and-icons"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-text-and-icons-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="feature-with-texts-and-card-with-image"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-texts-and-card-with-image-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="feature-with-image-left-and-background-color"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-image-left-and-background-color-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="feature-with-image-on-right"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-image-on-right-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="feature-with-4-columns-and-icons"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-4-columns-and-icons-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="feature-with-companies-logos"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-companies-logos-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="feature-with-background-color"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-background-color-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="feature-with-applications"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-applications-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="feature-with-4-columns-and-text"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-4-columns-and-text-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="feature-with-titles-and-3-columns"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/feature-with-titles-and-3-columns-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac3"> Contents <span class="loopple-ml-auto loopple-float-end accordion__number">5</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac3" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="content-with-multiple-images"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/content-with-multiple-images-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="content-with-companies-logos"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/content-with-companies-logos-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="content-with-title-and-4-images"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/content-with-title-and-4-images-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="content-comments"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/content-comments-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="content-with-2-images"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/content-with-2-images-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac7"> Pricing <span class="loopple-ml-auto loopple-float-end accordion__number">6</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac7" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="pricing-section-with-background"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/pricing-section-with-background-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="pricing-with-tabs-and-background-color"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/pricing-with-tabs-and-background-color-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="pricing-with-cards-in-right"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/pricing-with-cards-in-right-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="pricing-with-3-cards"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/pricing-with-3-cards-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="pricing-with-4-cards"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/pricing-with-4-cards-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="pricing-lifetime-membership-card"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/pricing-lifetime-membership-card-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac4"> FAQ <span class="loopple-ml-auto loopple-float-end accordion__number">1</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac4" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="faq-simple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/faq-simple-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac5"> Blogs <span class="loopple-ml-auto loopple-float-end accordion__number">7</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac5" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="blog-section-with-2-articles"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/blog-section-with-2-articles-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="blog-section-with-3-articles"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/blog-section-with-3-articles-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="blog-section-with-images-left-and-right"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/blog-section-with-images-left-and-right-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="blog-section-with-multiple-cards"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/blog-section-with-multiple-cards-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="blog-article-with-images"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/blog-article-with-images-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="blog-section-3-cards"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/blog-section-3-cards-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="blog-section-4-cards"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/blog-section-4-cards-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac5"> Testimonials <span class="loopple-ml-auto loopple-float-end accordion__number">7</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac5" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="testimonials-simple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/testimonials-simple-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="testimonial-with-centered-card"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/testimonial-with-centered-card-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="testimonial-on-black-with-carousel"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/testimonial-on-black-with-carousel-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="testimonial-with-user-image-on-left"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/testimonial-with-user-image-on-left-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="testimonial-single-user-on-dark"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/testimonial-single-user-on-dark-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="testimonials-companies"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/testimonials-companies-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="testimonials-customers"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/testimonials-customers-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac6"> Teams <span class="loopple-ml-auto loopple-float-end accordion__number">5</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-teams-simple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-teams-simple-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-teams-background-image"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-teams-background-image-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-teams-4-cards"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-teams-4-cards-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-teams-on-2-rows"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-teams-on-2-rows-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-teams-card-blur"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-teams-card-blur-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac6"> Stats <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="stats-purple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/stats-purple-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="stats-info-with-animation"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/stats-info-with-animation-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="stats-warning"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/stats-warning-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac6"> Call to Actions <span class="loopple-ml-auto loopple-float-end accordion__number">7</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="call-to-action-support"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/call-to-action-support-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="call-to-action-background-dark"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/call-to-action-background-dark-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="call-to-action-image-on-right"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/call-to-action-image-on-right-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="call-to-action-buttons"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/call-to-action-buttons-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="call-to-action-buttons-and-background-image"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/call-to-action-buttons-and-background-image-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="call-to-action-social"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/call-to-action-social-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="call-to-action-companies"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/call-to-action-companies-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac2"> Cards section <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="section-cards-blogs"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-cards-blogs-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-cards-podcast"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-cards-podcast-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="section-cards-rent"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/section-cards-rent-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac6"> Contact Us <span class="loopple-ml-auto loopple-float-end accordion__number">7</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="contact-us-simple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/contact-us-simple-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="contact-us-2-column"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/contact-us-2-column-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="contact-us-background-dark"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/contact-us-background-dark-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="contact-us-background-image"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/contact-us-background-image-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="contact-us-blur"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/contact-us-blur-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="contact-us-terms-switch"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/contact-us-terms-switch-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="contact-us-card"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/contact-us-card-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac6"> Logo Areas <span class="loopple-ml-auto loopple-float-end accordion__number">3</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="logo-areas-simple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/logo-areas-simple-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="logo-areas-squared"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/logo-areas-squared-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="logo-areas-title-and-description"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/logo-areas-title-and-description-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac6"> Authentication <span class="loopple-ml-auto loopple-float-end accordion__number">2</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="authentication-sign-in-simple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/authentication-sign-in-simple-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="authentication-sign-up-simple"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/authentication-sign-up-simple-soft-ui-design-system.png"> </div> </div> </div> </div> </div> <div class="accordion__item loopple-border-bottom"> <h3 class="accordion__heading"> <button class="accordion__trigger btn-reset" aria-expanded="false" aria-controls="ac6"> Footers <span class="loopple-ml-auto loopple-float-end accordion__number">5</span> </button> </h3> <div class="accordion__body accordion__body--hidden" id="ac6" aria-hidden="true"> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="footer-simple"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/footer-simple-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable drag-start loopple-bg-white loopple-mx-0 my-2" data-component="footer-with-4-columns-white"> <div class="image-container"> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/footer-with-4-columns-white-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="footer-dark-with-waves"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/footer-dark-with-waves-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="footer-inline-dark"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/footer-inline-dark-soft-ui-design-system.png"> </div> </div> </div> <div class="col-12"> <div class="draggable-pro loopple-bg-white loopple-mx-0 my-2 loopple-position-relative" data-component="footer-white-with-subscribe"> <div class="image-container"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase"> <i class="fa fa-lock loopple-mr-1"></i> PRO section - Unlock </a> </div> <img class="loopple-w-100" src="https://loopple.s3.eu-west-3.amazonaws.com/components/footer-white-with-subscribe-soft-ui-design-system.png"> </div> </div> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="components" role="tabpanel" aria-labelledby="components-tab"> </div> <div class="tab-pane fade" id="editor" role="tabpanel" aria-labelledby="editor-tab"> <p class="loopple-p-5 loopple-text-center">You have no component selected</p> </div> <div class="tab-pane fade" id="pages" role="tabpanel" aria-labelledby="pages-tab"> <div class="loopple-pt-3 loopple-px-4"> <div id="pages-selector"> <div class="loopple-d-flex loopple-align-items-center loopple-button-page loopple-button-page-active" data-page="index"> <a class="loopple-d-block loopple-btn-click-page loopple-cursor-pointer">index</a> <a class="loopple-btn loopple-btn-sm loopple-mr-0 loopple-ml-auto loopple-px-1" onclick="duplicatePage(event, this)"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14"> <path d="M7.5 3.375c0-1.036.84-1.875 1.875-1.875h.375a3.75 3.75 0 013.75 3.75v1.875C13.5 8.161 14.34 9 15.375 9h1.875A3.75 3.75 0 0121 12.75v3.375C21 17.16 20.16 18 19.125 18h-9.75A1.875 1.875 0 017.5 16.125V3.375z" /> <path d="M15 5.25a5.23 5.23 0 00-1.279-3.434 9.768 9.768 0 016.963 6.963A5.23 5.23 0 0017.25 7.5h-1.875A.375.375 0 0115 7.125V5.25zM4.875 6H6v10.125A3.375 3.375 0 009.375 19.5H16.5v1.125c0 1.035-.84 1.875-1.875 1.875h-9.75A1.875 1.875 0 013 20.625V7.875C3 6.839 3.84 6 4.875 6z" /> </svg> </a> </div> <a onclick="addNewPage(event)" id="add-page" class="loopple-d-block loopple-btn loopple-btn-sm loopple-btn-outline-default loopple-text-center loopple-mt-3"> <span>Add Page</span> </a> </div> </div> </div> <div class="tab-pane fade px-4" id="styles" role="tabpanel" aria-labelledby="styles-tab"> <div class="d-flex align-items-center justify-content-between mb-2 mt-4"> <div class="text-sm loopple-text-body">Body Color:</div> <div id="color-picker-1"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Primary Color:</div> <div id="color-picker-2"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Info Color:</div> <div id="color-picker-3"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Danger Color:</div> <div id="color-picker-4"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Warning Color:</div> <div id="color-picker-5"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Success Color:</div> <div id="color-picker-6"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Light Color:</div> <div id="color-picker-7"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Secondary Color:</div> <div id="color-picker-8"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Dark Color:</div> <div id="color-picker-9"></div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Primary Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-10"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-11"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Info Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-12"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-13"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Warning Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-14"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-15"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Danger Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-16"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-17"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Success Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-18"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-19"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Dark Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-20"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-21"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Light Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-22"></div> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-23"></div> </div> </div> <h3 class="loopple-text loopple-h4 text-capitalize loopple-mt-4 mb-2">Secondary Gradient</h3> <div class="loopple-position-relative loopple-p-1"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center loopple-z-index-2"> <a data-toggle="modal" data-target="#pricingModal" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO feature - Unlock </a> </div> <div class="d-flex align-items-center justify-content-between mb-2"> <div class="text-sm loopple-text-body">Left Color:</div> <div id="color-picker-24"></div> </div> <div class="d-flex align-items-center justify-content-between"> <div class="text-sm loopple-text-body">Right Color:</div> <div id="color-picker-25"></div> </div> </div> <div class="mb-8"></div> </div> </div> <div class="loopple-position-absolute loopple-bg-gray loopple-w-100 loopple-bottom-0 loopple-border-top loopple-z-index-2"> <span class="loopple-d-block loopple-ml-2 loopple-my-2 loopple-text-xs">Show grid layout</span> <label class="loopple-custom-toggle loopple-ml-2 loopple-mb-1"> <input type="checkbox" id="checkbox-grid" checked> <span class="loopple-custom-toggle-slider loopple-rounded-circle"></span> </label> <a class="loopple-btn loopple-btn-primary loopple-btn-icon loopple-btn-sm loopple-d-block loopple-ml-2 loopple-mr-2 loopple-my-3" id="styles-tab" onclick="changeTab('#styles-tab', '#styles');"> <span class="loopple-btn-inner--icon loopple-mr-1"> <i class="fa fa-palette"></i> </span> Edit Theme Colors </a> </div> <div class="loopple-modal loopple-fade modal fade" id="pricingModal" tabindex="-1" role="dialog" aria-labelledby="pricingModalLabel" aria-hidden="true"> <div class="loopple-modal-dialog modal-dialog" role="document"> <div class="loopple-modal-content modal-content"> <div class="loopple-modal-body loopple-p-0"> <div class="loopple-card loopple-border-0 loopple-text-center loopple-mb-2 loopple-shadow-0"> <div class="loopple-bg-gray loopple-py-5"> <img src="https://builder.creative-tim.com/img/loopple-logo-simple.png" style="width:40px" class="loopple-mb-2"> <h2 class="loopple-mb-0 loopple-h2">Loopple PRO</h2> <p class="loopple-mb-0"> Get access to all sections and elements </p> <button type="button" class="close loopple-position-absolute loopple-top-3 loopple-right-3" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="loopple-card-body"> <div class="loopple-display-4"><strike>$19</strike></div> <div class="loopple-display-2">$9</div> <span class="loopple-text-muted">/month</span> <ul class="list-unstyled my-4"> </ul> <a onclick="submitProductPaymentForm('price_1JhIzMLDk0qEKSl1j4KaOlku')" class="loopple-btn loopple-btn-primary loopple-text-white">Buy Subscription</a> <br> <br> <span class="loopple-text-sm">Got a question?<a href="/cdn-cgi/l/email-protection#f5999a9a85859990969a9b81949681b59298949c99db969a98"> Contact Us.</a></span> <br> <span class="loopple-text-xs"><a href="https://builder.creative-tim.com/pricing"> See full pricing here</a></span> </div> </div> </div> </div> </div> </div> </div> <div class="loopple-main-panel"> <nav class="loopple-navbar loopple-border-bottom navbar-expand-lg"> <a class="loopple-navbar-brand" href="https://builder.creative-tim.com"> <span>Creative Tim Builder</span> </a> <div class="loopple-border-bottom loopple-d-flex loopple-align-items-center ml-3"> <svg width="20" height="30" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M20.5036 10.4238L10.9438 20.5307C10.6605 20.8303 10.2664 21 9.8541 21L5.5 21C4.67157 21 4 20.3284 4 19.5L4 15.1074C4 14.7178 4.1516 14.3435 4.42271 14.0637L14.0817 4.09442C14.6582 3.49945 15.6078 3.48444 16.2028 4.0609C16.2085 4.0664 16.2141 4.07194 16.2197 4.07753L20.4745 8.33237C21.0488 8.90667 21.0617 9.83374 20.5036 10.4238Z" fill="#525f7f"/> </svg> <input class="loopple-form-control loopple-ml-1" value="Guest project" id="projectName"> </div> <p class="mx-auto loopple-cursor-pointer loopple-text mb-0" id="pageName">index.html</p> <div data-modal="modal-revert-changes" class="loopple-cursor-pointer"> <button class="loopple-btn loopple-btn-simple loopple-btn-default loopple-btn-sm loopple-opacity-5 loopple-btn-hover-none loopple-ml-auto loopple-mr-0"> <svg height="13" width="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M125.7 160H176c17.7 0 32 14.3 32 32s-14.3 32-32 32H48c-17.7 0-32-14.3-32-32V64c0-17.7 14.3-32 32-32s32 14.3 32 32v51.2L97.6 97.6c87.5-87.5 229.3-87.5 316.8 0s87.5 229.3 0 316.8s-229.3 87.5-316.8 0c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0c62.5 62.5 163.8 62.5 226.3 0s62.5-163.8 0-226.3s-163.8-62.5-226.3 0L125.7 160z"/> </svg> </button> <button class="loopple-btn loopple-btn-simple loopple-btn-default loopple-btn-sm loopple-opacity-5 loopple-mr-2 loopple-btn-hover-none"> <svg height="13" width="13" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path d="M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z"/> </svg> </button> </div> <button class="loopple-btn loopple-btn-dark loopple-btn-sm me-2" onclick="actionSave('project-I2P949hp3eW64VAVFTEFADknc3vHMJbA9Mt')">Save</button> <a href="https://builder.creative-tim.com/login" class="loopple-btn loopple-btn-sm loopple-btn-primary opacity-7" data-toggle="tooltip" data-position="top" title="Login to download project" disabled>Download Project</a> <form method="POST" action="../projects-preview/project-I2P949hp3eW64VAVFTEFADknc3vHMJbA9Mt" enctype="multipart/form-data" target="_blank" class="loopple-mb-0"> <input type="hidden" name="_method" value="PATCH"> <input type="hidden" name="_token" value="RbRoRkytxsAqKbZjMLG5O9qacSkreOQCdJOXx3RX"> <input name="page" value="index" class="loopple-d-none" id="previewPage"> <button type="submit" onclick="actionPreview('project-I2P949hp3eW64VAVFTEFADknc3vHMJbA9Mt')" class="loopple-btn loopple-btn-sm loopple-btn-icon loopple-btn-outline-default"> <span class="loopple-btn-inner--icon"><i class="fas fa-eye"></i></span> <span class="loopple-btn-inner--text ml-1">Preview</span> </button> </form> </nav> <div class="builder-precontainer loopple-position-relative"> <div class="card-selection loopple-position-absolute"> </div> <div class="selector loopple-position-absolute"> <div class="name"> </div> </div> <div class="selector selector-click loopple-position-absolute"> </div> <div class="builder-container position-relative show-grid drop-zone mx-5 mt-4 " onscroll="scrollContent()" data-page="index" show-code-editor="0" show-duplicate-element="0" > </div> </div>  <div class="modal fade" id="sidebarModal" tabindex="-1" role="dialog" aria-labelledby="sidebarModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="loopple-modal-content loopple-modal-shadow"> <div class="modal-header"> <h5 class="loopple-modal-title loopple-h4" id="sidebarModalLabel">Change Sidebar</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container"> <div class="row"> </div> </div> </div> <div class="modal-footer"> <button type="button" class="loopple-btn loopple-btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <div class="modal fade" id="navbarModal" tabindex="-1" role="dialog" aria-labelledby="navbarModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="loopple-modal-content loopple-modal-shadow"> <div class="modal-header"> <h5 class="loopple-modal-title loopple-h4" id="navbarModalLabel">Change Navbar</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-12 mb-4"> <h5 class="loopple-h5 text-capitalize">navbar light</h5> <a href="javascript:;" onclick="selectNavbar(this, "<nav class=\"navbar navbar-expand-lg navbar-light bg-white py-3 draggable\">\n <div class=\"container\">\n <a class=\"navbar-brand\" href=\"javascript:;\" rel=\"tooltip\" title=\"Designed and Coded by Creative Tim\" data-placement=\"bottom\">\n Soft UI Design System\n <\/a>\n <button class=\"navbar-toggler shadow-none ms-2\" type=\"button\" data-bs-toggle=\"collapse\" data-bs-target=\"#navigation\" aria-controls=\"navigation\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">\n <span class=\"navbar-toggler-icon mt-2\">\n <span class=\"navbar-toggler-bar bar1\"><\/span>\n <span class=\"navbar-toggler-bar bar2\"><\/span>\n <span class=\"navbar-toggler-bar bar3\"><\/span>\n <\/span>\n <\/button>\n <div class=\"collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0 ms-lg-12 ps-lg-5\" id=\"navigation\">\n <ul class=\"navbar-nav navbar-nav-hover w-100\">\n <li class=\"nav-item dropdown dropdown-hover mx-2\">\n <a class=\"nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center\" id=\"dropdownMenuPages1\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n Pages\n <img src=\"https:\/\/demos.creative-tim.com\/soft-ui-design-system\/assets\/img\/down-arrow-dark.svg\" alt=\"down-arrow\" class=\"arrow ms-1\">\n <\/a>\n <div class=\"dropdown-menu dropdown-menu-animation dropdown-md p-3 border-radius-lg mt-0 mt-lg-3\" aria-labelledby=\"dropdownMenuPages1\">\n <div class=\"d-none d-lg-block\">\n <a href=\"javascript:;\" class=\"dropdown-item border-radius-md\">\n About Us\n <\/a>\n <a href=\"javascript:;\" class=\"dropdown-item border-radius-md\">\n Contact Us\n <\/a>\n <a href=\"javascript:;\" class=\"dropdown-item border-radius-md\">\n Author\n <\/a>\n <a href=\"javascript:;\" class=\"dropdown-item border-radius-md\">\n Sign In\n <\/a>\n<\/div>\n\n<div class=\"d-lg-none\">\n <a href=\"javascript:;\" class=\"dropdown-item border-radius-md\">\n About Us\n <\/a>\n <a href=\"javascript:;\" class=\"dropdown-item border-radius-md\">\n Contact Us\n <\/a>\n <a href=\"javascript:;\" class=\"dropdown-item border-radius-md\">\n Author\n <\/a>\n <a href=\"javascript:;\" class=\"dropdown-item border-radius-md\">\n Sign In\n <\/a>\n<\/div>\n\n <\/div>\n <\/li>\n\n <li class=\"nav-item dropdown dropdown-hover mx-2\">\n <a class=\"nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center\" id=\"dropdownMenuBlocks\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n Blocks\n <img src=\"https:\/\/demos.creative-tim.com\/soft-ui-design-system\/assets\/img\/down-arrow-dark.svg\" alt=\"down-arrow\" class=\"arrow ms-1\">\n <\/a>\n <ul class=\"dropdown-menu dropdown-menu-animation dropdown-lg dropdown-lg-responsive p-3 border-radius-lg mt-0 mt-lg-3\" aria-labelledby=\"dropdownMenuBlocks\">\n <div class=\"d-none d-lg-block\">\n <li class=\"nav-item dropdown dropdown-hover dropdown-subitem\">\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <i class=\"ni ni-single-copy-04 text-gradient text-primary\"><\/i>\n <\/div>\n <div class=\"w-100 d-flex align-items-center justify-content-between\">\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Page Sections<\/h6>\n <span class=\"text-sm\">See all 109 sections<\/span>\n <\/div>\n\n <img src=\"https:\/\/demos.creative-tim.com\/soft-ui-design-system\/assets\/img\/down-arrow.svg\" alt=\"down-arrow\" class=\"arrow\"\/>\n <\/div>\n <\/div>\n <\/a>\n <div class=\"dropdown-menu mt-0 py-3 px-2 mt-3\" aria-labelledby=\"pageSections\">\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Page Headers\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Features\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Pricing\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n FAQ\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Blog Posts\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Testimonials\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Teams\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Stats\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Call to Actions\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Logo Areas\n <\/a>\n <\/div>\n <\/li>\n<\/div>\n\n<div class=\"row d-lg-none\">\n <div class=\"col-md-12\">\n <div class=\"d-flex mb-2\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <i class=\"ni ni-single-copy-04 text-gradient text-primary\"><\/i>\n <\/div>\n <div class=\"w-100 d-flex align-items-center justify-content-between\">\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Page Sections<\/h6>\n <\/div>\n <\/div>\n <\/div>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Page Headers\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Features\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Pricing\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n FAQ\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Blog Posts\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Testimonials\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Teams\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Stats\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Call to Actions\n <\/a>\n <a class=\"dropdown-item ps-3 border-radius-md mb-1\" href=\"javascript:;\">\n Applications\n <\/a>\n <\/div>\n<\/div>\n\n <\/ul>\n <\/li>\n\n <li class=\"nav-item dropdown dropdown-hover mx-2\">\n <a class=\"nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center\" id=\"dropdownMenuDocs\" data-bs-toggle=\"dropdown\" aria-expanded=\"false\">\n Docs\n <img src=\"https:\/\/demos.creative-tim.com\/soft-ui-design-system\/assets\/img\/down-arrow-dark.svg\" alt=\"down-arrow\" class=\"arrow ms-1\">\n <\/a>\n <ul class=\"dropdown-menu dropdown-menu-animation dropdown-lg mt-0 mt-lg-3 p-3 border-radius-lg\" aria-labelledby=\"dropdownMenuDocs\">\n <div class=\"d-none d-lg-block\">\n <li class=\"nav-item \">\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 40 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>spaceship<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1720.000000, -592.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g transform=\"translate(4.000000, 301.000000)\">\n <path class=\"color-background\" d=\"M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z\"><\/path>\n <path class=\"color-background\" d=\"M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z\"><\/path>\n <path class=\"color-background\" d=\"M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z\" opacity=\"0.598539807\"><\/path>\n <path class=\"color-background\" d=\"M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z\" opacity=\"0.598539807\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Getting Started<\/h6>\n <span class=\"text-sm\">All about overview, quick start, license and contents<\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <li class=\"nav-item \">\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 40 44\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>document<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1870.000000, -591.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"document\" transform=\"translate(154.000000, 300.000000)\">\n <path class=\"color-background\" d=\"M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z\" opacity=\"0.603585379\"><\/path>\n <path class=\"color-background\" d=\"M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Foundation<\/h6>\n <span class=\"text-sm\">See our colors, icons and typography<\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <li class=\"nav-item \">\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 42 42\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>box-3d-50<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-2319.000000, -291.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g id=\"box-3d-50\" transform=\"translate(603.000000, 0.000000)\">\n <path class=\"color-background\" d=\"M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z\"><\/path>\n <path class=\"color-background\" d=\"M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z\" opacity=\"0.7\"><\/path>\n <path class=\"color-background\" d=\"M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z\" opacity=\"0.7\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Components<\/h6>\n <span class=\"text-sm\">Explore our collection of fully designed components<\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <li class=\"nav-item \">\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 40 44\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>switches<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1870.000000, -440.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g transform=\"translate(154.000000, 149.000000)\">\n <path class=\"color-background\" d=\"M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z\" opacity=\"0.6\"><\/path>\n <path class=\"color-background\" d=\"M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Plugins<\/h6>\n <span class=\"text-sm\">Check how you can integrate our plugins<\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n <li class=\"nav-item \">\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 40 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>settings<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-2020.000000, -442.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g transform=\"translate(304.000000, 151.000000)\">\n <polygon class=\"color-background\" opacity=\"0.596981957\" points=\"18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667\"><\/polygon>\n <path class=\"color-background\" d=\"M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z\" opacity=\"0.596981957\"><\/path>\n <path class=\"color-background\" d=\"M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Utility Classes<\/h6>\n <span class=\"text-sm\">For those who want flexibility, use our utility classes<\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/li>\n<\/div>\n\n<div class=\"row d-lg-none\">\n <div class=\"col-md-12 g-0\">\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 40 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>spaceship<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1720.000000, -592.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g transform=\"translate(4.000000, 301.000000)\">\n <path class=\"color-background\" d=\"M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z\"><\/path>\n <path class=\"color-background\" d=\"M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z\"><\/path>\n <path class=\"color-background\" d=\"M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z\" opacity=\"0.598539807\"><\/path>\n <path class=\"color-background\" d=\"M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z\" opacity=\"0.598539807\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Getting Started<\/h6>\n <span class=\"text-sm\">All about overview, quick start, license and contents<\/span>\n <\/div>\n <\/div>\n <\/a>\n\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 40 44\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>document<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1870.000000, -591.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g transform=\"translate(154.000000, 300.000000)\">\n <path class=\"color-background\" d=\"M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z\" opacity=\"0.603585379\"><\/path>\n <path class=\"color-background\" d=\"M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Foundation<\/h6>\n <span class=\"text-sm\">See our colors, icons and typography<\/span>\n <\/div>\n <\/div>\n <\/a>\n\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 42 42\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>box-3d-50<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-2319.000000, -291.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g transform=\"translate(603.000000, 0.000000)\">\n <path class=\"color-background\" d=\"M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z\"><\/path>\n <path class=\"color-background\" d=\"M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z\" opacity=\"0.7\"><\/path>\n <path class=\"color-background\" d=\"M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z\" opacity=\"0.7\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Components<\/h6>\n <span class=\"text-sm\">Explore our collection of fully designed components<\/span>\n <\/div>\n <\/div>\n <\/a>\n\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 40 44\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>switches<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-1870.000000, -440.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g transform=\"translate(154.000000, 149.000000)\">\n <path class=\"color-background\" d=\"M10,20 L30,20 C35.4545455,20 40,15.4545455 40,10 C40,4.54545455 35.4545455,0 30,0 L10,0 C4.54545455,0 0,4.54545455 0,10 C0,15.4545455 4.54545455,20 10,20 Z M10,3.63636364 C13.4545455,3.63636364 16.3636364,6.54545455 16.3636364,10 C16.3636364,13.4545455 13.4545455,16.3636364 10,16.3636364 C6.54545455,16.3636364 3.63636364,13.4545455 3.63636364,10 C3.63636364,6.54545455 6.54545455,3.63636364 10,3.63636364 Z\" opacity=\"0.6\"><\/path>\n <path class=\"color-background\" d=\"M30,23.6363636 L10,23.6363636 C4.54545455,23.6363636 0,28.1818182 0,33.6363636 C0,39.0909091 4.54545455,43.6363636 10,43.6363636 L30,43.6363636 C35.4545455,43.6363636 40,39.0909091 40,33.6363636 C40,28.1818182 35.4545455,23.6363636 30,23.6363636 Z M30,40 C26.5454545,40 23.6363636,37.0909091 23.6363636,33.6363636 C23.6363636,30.1818182 26.5454545,27.2727273 30,27.2727273 C33.4545455,27.2727273 36.3636364,30.1818182 36.3636364,33.6363636 C36.3636364,37.0909091 33.4545455,40 30,40 Z\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Plugins<\/h6>\n <span class=\"text-sm\">Check how you can integrate our plugins<\/span>\n <\/div>\n <\/div>\n <\/a>\n\n <a class=\"dropdown-item py-2 ps-3 border-radius-md\" href=\"javascript:;\">\n <div class=\"d-flex\">\n <div class=\"icon h-10 me-3 d-flex mt-1\">\n <svg class=\"text-secondary\" width=\"16px\" height=\"16px\" viewBox=\"0 0 40 40\" version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\">\n <title>settings<\/title>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g transform=\"translate(-2020.000000, -442.000000)\" fill=\"#FFFFFF\" fill-rule=\"nonzero\">\n <g transform=\"translate(1716.000000, 291.000000)\">\n <g transform=\"translate(304.000000, 151.000000)\">\n <polygon class=\"color-background\" opacity=\"0.596981957\" points=\"18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667\"><\/polygon>\n <path class=\"color-background\" d=\"M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z\" opacity=\"0.596981957\"><\/path>\n <path class=\"color-background\" d=\"M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z\"><\/path>\n <\/g>\n <\/g>\n <\/g>\n <\/g>\n <\/svg>\n <\/div>\n <div>\n <h6 class=\"dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0\">Utility Classes<\/h6>\n <span class=\"text-sm\">All about overview, quick start, license and contents<\/span>\n <\/div>\n <\/div>\n <\/a>\n <\/div>\n<\/div>\n\n <\/ul>\n <\/li>\n <li class=\"nav-item ms-lg-auto my-auto ms-3 ms-lg-0 mt-2 mt-lg-0\">\n \n <a href=\"javascript:;\" class=\"btn btn-sm bg-gradient-primary btn-round mb-0 me-1 mt-2 mt-md-0\">Free Download<\/a><\/li>\n <\/ul>\n <\/div>\n <\/div>\n<\/nav>")" data-navbar="119"> <img class="w-100 loopple-component-border loopple-border-radius-sm" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-light-soft-ui-design-system.png" alt="navbar-light-soft-ui-design-system"> </a> </div> <div class="col-12 mb-4"> <h5 class="loopple-h5 text-capitalize">navbar blur</h5> <div class="position-relative"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" onclick="closeOpenModal()" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO navbar - Unlock </a> </div> <img class="w-100 loopple-component-border loopple-border-radius-sm" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-blur-soft-ui-design-system.png" alt="navbar-blur-soft-ui-design-system"> </div> </div> <div class="col-12 mb-4"> <h5 class="loopple-h5 text-capitalize">navbar dark</h5> <div class="position-relative"> <div class="loopple-mask loopple-bg-gradient-dark loopple-d-flex loopple-align-items-center"> <a data-toggle="modal" data-target="#pricingModal" onclick="closeOpenModal()" class="loopple-badge loopple-badge-danger loopple-mx-auto loopple-text-uppercase loopple-cursor-pointer"> <i class="fa fa-lock loopple-mr-1"></i> PRO navbar - Unlock </a> </div> <img class="w-100 loopple-component-border loopple-border-radius-sm" src="https://loopple.s3.eu-west-3.amazonaws.com/components/navbar-dark-soft-ui-design-system.png" alt="navbar-dark-soft-ui-design-system"> </div> </div> </div> </div> </div> <div class="modal-footer pt-0"> <button type="button" class="loopple-btn loopple-btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div>   <div class="loopple-modal loopple-z-index-1070" id="modal-revert-changes"> <div class="loopple-modal-bg loopple-modal-exit"></div> <div class="loopple-modal-container loopple-modal-container-md"> <div class="loopple-px-3 loopple-py-3"> <div class="loopple-row loopple-px-3"> <div class="loopple-col-5 loopple-pl-2 loopple-d-flex loopple-align-items-center"> <div> <p class="loopple-mb-0 loopple-h4 loopple-font-weight-500 loopple-text-body loopple-mb-3"> Get access to the revert changes feature (and many others) with a <span class="loopple-font-weight-bold">PRO plan</span> </p> <div class="loopple-display-2 loopple-text-body loopple-mb-2">$9<span class="loopple-text-muted loopple-text-sm">/month</span></div> <a onclick="submitProductPaymentForm('price_1JhIzMLDk0qEKSl1j4KaOlku')" class="loopple-btn loopple-btn-primary loopple-text-white">Buy Subscription</a> <br> <br> <span class="loopple-text-xs"><a href="https://www.creative-tim.com/builder#pricing" target="_blank" class="loopple-text-default"> See full pricing <span class="loopple-text-primary loopple-text-underline">here</span>.</a></span> </div> </div> <div class="loopple-col-7 loopple-p-2"> <img src="https://raw.githubusercontent.com/Loopple/loopple-public-assets/main/gifs/soft-ui-dashboard-revert-changes.gif" class="loopple-w-100 loopple-border-radius"/> </div> </div> </div> <button class="loopple-modal-close loopple-modal-exit loopple-text-lg loopple-mt-n2 loopple-mr-n2"><span aria-hidden="true">脳</span></button> </div> </div>  <div class="loopple-modal loopple-z-index-9999" id="modal-images"> <div class="loopple-modal-bg loopple-modal-exit"></div> <div class="loopple-modal-container"> <div class="loopple-px-3 loopple-pt-3"> <h3 class="loopple-h3 loopple-mb-3">Upload an image</h3> </div> <div> <ul class="loopple-nav loopple-nav-tabs nav nav-tabs loopple-pr-3" id="tabImages" role="tablist"> <li class="loopple-nav-item" role="presentation"> <button class="loopple-nav-link loopple-nav-link-border-bottom loopple-px-3 w-100 btn-sm active" id="new-image-tab" onclick="removeSelectedImage()" data-toggle="tab" data-target="#newImage" type="button" role="tab" aria-controls="newImage" aria-selected="true">New Image</button> </li> <li class="loopple-nav-item" role="presentation"> <button class="loopple-nav-link loopple-nav-link-border-bottom loopple-px-3 w-100 btn-sm" id="my-images-tab" data-toggle="tab" data-target="#myImages" type="button" role="tab" aria-controls="myImages" aria-selected="true">My Images</button> </li> </ul> </div> <div wire:id="RmR0eLqggdNTkDOP21lp" wire:initial-data="{"fingerprint":{"id":"RmR0eLqggdNTkDOP21lp","name":"image-upload","locale":"en","path":"builder\/project-I2P949hp3eW64VAVFTEFADknc3vHMJbA9Mt","method":"GET","v":"acj"},"effects":{"listeners":[]},"serverMemo":{"children":[],"errors":[],"htmlHash":"4b5bfddc","data":{"image":null,"projectId":144846,"projectSlug":"project-I2P949hp3eW64VAVFTEFADknc3vHMJbA9Mt"},"dataMeta":[],"checksum":"4aa20a3afff8790435ef07bf9368476f599a0990464398731028b4c5cd6264d9"}}" class="tab-content tab-content-builder loopple-tab-content" id="myTabImagesContent"> <div class="loopple-tab-pane fade show active" id="newImage" role="tabpanel" aria-labelledby="new-image-tab"> <div class="loopple-mt-3 loopple-px-3 loopple-pb-3 loopple-text-center"> <div> <div class="loopple-custom-file-uploader loopple-py-2 loopple-mb-2"> <input type="text" name="filename" class="form-control loopple-file-name-get loopple-d-block loopple-mx-auto loopple-w-100 loopple-my-2" placeholder="Drop file here or click to upload"> <div wire:loading.block> <i class="fa fa-spinner fa-spin"></i> </div> <input type="file" id="file_upload" onchange="document.querySelector('.loopple-file-name-get').value = this.files[0].name; document.querySelector('.loopple-btn-upload').classList.remove('d-none');" wire:model="image" accept="image/*" /> <button class="loopple-btn loopple-btn-dark loopple-btn-sm loopple-mb-3 loopple-btn-select-file"> <i class="fa fa-file loopple-mr-1"></i> Choose File </button> </div> </div> </div> </div> <div class="loopple-tab-pane fade show" id="myImages" role="tabpanel" aria-labelledby="my-images-tab"> <div class="loopple-mt-3 loopple-px-3 loopple-pb-3 loopple-text-center loopple-max-height-500 loopple-overflow-scroll"> <div class="row"> <div class="col-md-12 text-center"> <p class="loopple-text-sm loopple-my-5">No images added for this project.</p> </div> </div> </div> </div> </div>  <div class="loopple-border-top loopple-px-3 loopple-pt-3 loopple-text-right loopple-pb-3"> <button class="loopple-btn loopple-btn-default loopple-btn-sm loopple-modal-exit">Cancel</button> <button class="loopple-btn loopple-btn-primary loopple-btn-sm loopple-opacity-6 loopple-choose-image" onclick="chooseImage(this)">Choose Image</button> </div> <button class="loopple-modal-close loopple-modal-exit loopple-text-sm"><span aria-hidden="true">脳</span></button> </div> </div> <div class=" loopple-d-none loopple-bg-white loopple-shadow loopple-border loopple-px-3 loopple-py-3 loopple-z-index-9999 loopple-border-radius loopple-transition-none " id="popover-tips" > <div> <h4 class="loopple-mb-3 loopple-h4 loopple-text-dark">Tips</h4> <ul class="loopple-pl-4"> <li class="loopple-mb-2 loopple-h5">Use <b>CMD/CTRL + S</b> to save the project</li> <li class="loopple-mb-2 loopple-h5">Double-click on texts to start editing</li> <li class="loopple-h5">Use <b>Backspace key</b> to remove an element</li> </ul> </div> </div> <div class="position-absolute top-0 left-0 h-100 w-100 loopple-z-index-9999 d-none loopple-small-devices-alert"> <div class="overflow-hidden position-relative h-100 w-100"> <span class="mask bg-gradient-dark opacity-9"></span> <div class="card position-relative mx-5 mt-10"> <div class="card-body text-center"> <h5 class="font-weight-bolder mb-2 pt-2">Creative Tim Builder is not currently working on small resolution and touchscreen devices</h5> <p>Try using the builder on higher resolution devices.</p> <a href="../../" class="btn bg-gradient-primary mb-0">Return to home page</a> </div> </div> </div> </div> </div>  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script> <script src="https://builder.creative-tim.com/js/vendor/jquery.min.js"></script>  <script src="https://builder.creative-tim.com/js/vendor/bootstrap-notify.js" defer></script>  <script src="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/soft-ui-design-system-builder/v1.0.7/assets/js/core/bootstrap.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/soft-ui-design-system-builder/v1.0.7/assets/js/soft-design-system.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/soft-ui-design-system-builder/v1.0.7/assets/js/plugins/countup.min.js" type="text/javascript"></script> <script src="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/soft-ui-design-system-builder/v1.0.7/assets/js/plugins/flatpickr.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/soft-ui-design-system-builder/v1.0.7/assets/js/plugins/typedjs.js"></script> <script> if (document.getElementById("state1")) { const countUp = new CountUp("state1", document.getElementById("state1").getAttribute("countTo")); if (!countUp.error) { countUp.start(); } else { console.error(countUp.error); } } if (document.getElementById("state2")) { const countUp1 = new CountUp("state2", document.getElementById("state2").getAttribute("countTo")); if (!countUp1.error) { countUp1.start(); } else { console.error(countUp1.error); } } if (document.getElementById("state3")) { const countUp2 = new CountUp("state3", document.getElementById("state3").getAttribute("countTo")); if (!countUp2.error) { countUp2.start(); } else { console.error(countUp2.error); }; } if (document.querySelector('.datepicker-1')) { flatpickr('.datepicker-1', { }); // flatpickr } if (document.querySelector('.datepicker-2')) { flatpickr('.datepicker-2', { }); // flatpickr } if (document.getElementById("typed")) { var typed = new Typed("#typed", { stringsElement: "#typed-strings", typeSpeed: 70, backSpeed: 50, backDelay: 200, startDelay: 500, loop: true }); } </script> <script src="https://builder.creative-tim.com/js/vendor/axios.min.js" defer></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.10.2/beautify-html.js"></script> <script src="https://builder.creative-tim.com/js/bootstrap.bundle.min.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/FileSaver.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/jszip-utils.min.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/jszip.min.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/papaparse.min.js" defer></script> <script src="https://builder.creative-tim.com/js/vendor/fontawesome-iconpicker.js"></script> <script src="https://builder.creative-tim.com/js/vendor/codemirror.js"></script> <script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script> <script src="https://codemirror.net/mode/xml/xml.js"></script> <script src="https://builder.creative-tim.com/js/app.js?v=0.1.4"></script> <script> // Alert dismissible function if(document.querySelector('.loopple-alert.loopple-alert-dismissible .close')){ document.querySelector('.loopple-alert.loopple-alert-dismissible .close').onclick = function() { document.querySelector('.loopple-alert').classList.add('loopple-opacity-0'); setTimeout(function(){ document.querySelector('.loopple-alert').remove(); }, 1000); } } </script> <script src="https://js.stripe.com/v3/"></script> <script> function submitProductPaymentForm(product) { var stripe = window.Stripe('pk_live_51Go8LeLDk0qEKSl1NbMfnzJNvp9smV3cc48XXBaJ64U3jYvE5pVUZo9lMPITqGnZssQJGFe829nzTjVAP6QUaBsD00phhnaIK0'); btn = $(this).attr('dataPrice'); stripe.redirectToCheckout({ mode: 'subscription', lineItems: [{ price: product, quantity: 1 }], successUrl: 'https://builder.creative-tim.com/payment/success?session_id={CHECKOUT_SESSION_ID}', cancelUrl: 'https://builder.creative-tim.com', clientReferenceId: btn }).then(function (result) { console.log('result'); console.log(result.error.message); }); } </script> <script src="/livewire/livewire.js?id=90730a3b0e7144480175" data-turbo-eval="false" data-turbolinks-eval="false" ></script><script data-turbo-eval="false" data-turbolinks-eval="false" >window.livewire = new Livewire();window.Livewire = window.livewire;window.livewire_app_url = '';window.livewire_token = 'RbRoRkytxsAqKbZjMLG5O9qacSkreOQCdJOXx3RX';window.deferLoadingAlpine = function (callback) {window.addEventListener('livewire:load', function () {callback();});};let started = false;window.addEventListener('alpine:initializing', function () {if (! started) {window.livewire.start();started = true;}});document.addEventListener("DOMContentLoaded", function () {if (! started) {window.livewire.start();started = true;}});</script> </body> </html>

CINXE.COM

Creative Tim Builder