CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Pixel Pro - Premium Bootstrap 5 UI Kit</title><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="title" content="Pixel Pro - Premium Bootstrap 5 UI Kit"><meta name="author" content="Themesberg"><meta name="description" content="Premium Bootstrap 5 UI Kit featuring over 1000 components and 35 example pages created by Themesberg."><meta name="keywords" content="bootstrap, bootstrap ui kit, premium Bootstrap 5 UI Kit, bootstrap dashboard, bootstrap messaging, bootstrap billing, bootstrap item list, bootstrap charts, bootstrap timelines, bootstrap cards, bootstrap pricing cards, bootstrap profile cards, bootstrap 5, gulp, npm, sass, javascript, jquery, themesberg, Bootstrap 5 UI Kit theme, Bootstrap 5 UI Kit, premium bootstrap ui kit, bootstrap design system, themesberg ui kit, pixel ui kit, pixel pro ui kit"><link rel="canonical" href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"><meta property="og:type" content="website"><meta property="og:url" content="https://demo.themesberg.com/pixel-pro"><meta property="og:title" content="Pixel Pro - Premium Bootstrap 5 UI Kit"><meta property="og:description" content="Premium Bootstrap 5 UI Kit featuring over 1000 components and 35 example pages created by Themesberg."><meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-preview.jpg"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://demo.themesberg.com/pixel-pro"><meta property="twitter:title" content="Pixel Pro - Premium Bootstrap 5 UI Kit"><meta property="twitter:description" content="Premium Bootstrap 5 UI Kit featuring over 1000 components and 35 example pages created by Themesberg."><meta property="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-preview.jpg"><link rel="apple-touch-icon" sizes="120x120" href="./assets/img/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon/favicon-16x16.png"><link rel="manifest" href="./assets/img/favicon/site.webmanifest"><link rel="mask-icon" href="./assets/img/favicon/safari-pinned-tab.svg" color="#ffffff"><meta name="msapplication-TileColor" content="#ffffff"><meta name="theme-color" content="#ffffff"><link type="text/css" href="./vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"><link rel="stylesheet" href="./vendor/@glidejs/glide/dist/css/glide.core.min.css"><link rel="stylesheet" href="./vendor/@glidejs/glide/dist/css/glide.theme.min.css"><link type="text/css" href="./css/pixel.css" rel="stylesheet"><script async src="https://www.googletagmanager.com/gtag/js?id=UA-141734189-6"></script><script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-141734189-6');</script><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-THQTXJ7');</script></head><body><noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-THQTXJ7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript><header class="header-global"><nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-dark"><div class="container position-relative"><a class="navbar-brand me-lg-5" href="./index.html"><img class="navbar-brand-dark" src="./assets/img/brand/light.svg" alt="Logo light"> <img class="navbar-brand-light" src="./assets/img/brand/dark.svg" alt="Logo dark"></a><div class="navbar-collapse collapse me-auto" id="navbar_global"><div class="navbar-collapse-header"><div class="row"><div class="col-6 collapse-brand"><a href="./index.html"><img src="./assets/img/brand/dark.svg" alt="Themesberg logo"></a></div><div class="col-6 collapse-close"><a href="#navbar_global" class="fas fa-times" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a></div></div></div><ul class="navbar-nav navbar-nav-hover align-items-lg-center"><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="frontPagesDropdown" aria-expanded="false" data-bs-toggle="dropdown">Pages <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a><div class="dropdown-menu dropdown-megamenu px-0 py-2 p-lg-4" aria-labelledby="frontPagesDropdown"><div class="row"><div class="col-6 col-lg-4"><h6 class="d-block mb-3 text-primary">Main pages</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/about.html">About</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/pricing.html">Pricing</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/team.html">Team</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/services.html">Services</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/profile.html">Profile</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/contact.html">Contact</a></li></ul><h6 class="d-block text-primary">Legal</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/legal.html">Legal center</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/terms.html">Terms & agreement</a></li></ul><h6 class="d-block text-primary">Career</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/careers.html">Careers</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/career-single.html">Career Single</a></li></ul></div><div class="col-6 col-lg-4"><h6 class="d-block mb-3 text-primary">Landings</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/landing-app.html">App</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/landing-crypto.html">Crypto</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/landing-freelancer.html">Freelancer</a></li></ul><h6 class="d-block mb-3 text-primary">Support</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/support.html">Support center</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/support-topic.html">Support topic</a></li></ul><h6 class="d-block mb-3 text-primary">Blog</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/blog.html">Blog</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/blog-post.html">Blog post</a></li></ul></div><div class="col-6 col-lg-4"><h6 class="d-block mb-3 text-primary">User</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/sign-in.html">Sign in</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/sign-up.html">Sign up</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/forgot-password.html">Forgot password</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/reset-password.html">Reset password</a></li></ul><h6 class="d-block mb-3 text-primary">Special</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/404.html">404 Not Found</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/500.html">500 Server Error</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/maintenance.html">Maintenance</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/coming-soon.html">Coming soon</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/pages/blank.html">Blank page</a></li></ul></div></div></div></li><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="dashboardDropdown" aria-expanded="false" data-bs-toggle="dropdown">Dashboard <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a><div class="dropdown-menu dropdown-megamenu-sm px-0 py-2 p-lg-4" aria-labelledby="dashboardDropdown"><div class="row"><div class="col-6"><h6 class="d-block mb-3 text-primary">User dashboard</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/account.html">My account</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/settings.html">Settings</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/security.html">Security</a></li></ul><h6 class="d-block mb-3 text-primary">Items</h6><ul class="list-style-none"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/my-items.html">My items</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/edit-item.html">Edit item</a></li></ul></div><div class="col-6"><h6 class="d-block mb-3 text-primary">Messaging</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/messages.html">Messages</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/single-message.html">Chat</a></li></ul><h6 class="d-block mb-3 text-primary">Billing</h6><ul class="list-style-none mb-4"><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/billing.html">Billing details</a></li><li class="mb-2 megamenu-item"><a class="megamenu-link" href="./html/dashboard/invoice.html">Invoice</a></li></ul></div></div></div></li><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" id="componentsDropdown" aria-expanded="false" data-bs-toggle="dropdown">Components <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a><div class="dropdown-menu dropdown-megamenu-md p-0" aria-labelledby="componentsDropdown"><div class="row g-0"><div class="col-lg-6 bg-dark d-none d-lg-block me-0 me-3"><div class="px-0 py-3 text-center"><img src="./assets/img/megamenu_image.png" alt="Pixel Components"></div><div class="z-2 pb-3 text-center"><a href="./html/components/all.html" class="btn btn-outline-white animate-up-2 mb-2 mb-sm-0 me-3"><span class="me-1"><span class="fas fa-th-large"></span></span> All components </a><a href="./html/sections/all-sections.html" class="btn btn-tertiary animate-up-2 mb-2 mb-sm-0"><span class="me-1"><span class="fas fa-pager"></span></span> All sections</a></div></div><div class="col ps-0 py-3"><ul class="list-style-none"><li><a class="dropdown-item" href="./html/components/accordions.html">Accordions</a></li><li><a class="dropdown-item" href="./html/components/alerts.html">Alerts</a></li><li><a class="dropdown-item" href="./html/components/badges.html">Badges</a></li><li><a class="dropdown-item" href="./html/components/cards.html">Cards</a></li><li><a class="dropdown-item" href="./html/components/charts.html">Charts</a></li><li><a class="dropdown-item" href="./html/components/bootstrap-carousels.html">Bootstrap Carousels</a></li><li><a class="dropdown-item" href="./html/components/breadcrumbs.html">Breadcrumbs</a></li><li><a class="dropdown-item" href="./html/components/buttons.html">Buttons</a></li><li><a class="dropdown-item" href="./html/components/counters.html">Counters</a></li></ul></div><div class="col ps-0 py-3"><ul class="list-style-none"><li><a class="dropdown-item" href="./html/components/dropdowns.html">Dropdowns</a></li><li><a class="dropdown-item" href="./html/components/e-commerce.html">E-commerce</a></li><li><a class="dropdown-item" href="./html/components/forms.html">Forms</a></li><li><a class="dropdown-item" href="./html/components/icon-boxes.html">Icon Boxes</a></li><li><a class="dropdown-item" href="./html/components/modals.html">Modals</a></li><li><a class="dropdown-item" href="./html/components/navs.html">Navs</a></li><li><a class="dropdown-item" href="./html/components/glidejs-carousels.html">GlideJS Carousels</a></li><li><a class="dropdown-item" href="./html/components/pagination.html">Pagination</a></li><li><a class="dropdown-item" href="./html/components/popovers.html">Popovers</a></li></ul></div><div class="col ps-0 py-3"><ul class="list-style-none"><li><a class="dropdown-item" href="./html/components/progress-bars.html">Progress Bars</a></li><li><a class="dropdown-item" href="./html/components/steps.html">Steps</a></li><li><a class="dropdown-item" href="./html/components/tables.html">Tables</a></li><li><a class="dropdown-item" href="./html/components/tabs.html">Tabs</a></li><li><a class="dropdown-item" href="./html/components/toasts.html">Toasts</a></li><li><a class="dropdown-item" href="./html/components/timelines.html">Timelines</a></li><li><a class="dropdown-item" href="./html/components/tooltips.html">Tooltips</a></li><li><a class="dropdown-item" href="./html/components/typography.html">Typography</a></li><li><a class="dropdown-item" href="./html/components/widgets.html">Widgets</a></li></ul></div></div></div></li><li class="nav-item dropdown"><a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" id="supportDropdown" aria-expanded="false">Support <span class="fas fa-angle-down nav-link-arrow ms-1"></span></a><div class="dropdown-menu dropdown-menu-lg" aria-labelledby="supportDropdown"><div class="col-auto px-0"><div class="list-group list-group-flush"><a href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4"><span class="icon icon-sm"><span class="fas fa-file-alt"></span></span><div class="ms-4"><span class="d-block font-small fw-bold mb-0">Documentation<span class="badge badge-sm badge-secondary ms-2">v3.1</span></span> <span class="small">Examples and guides</span></div></a><a href="https://themesberg.com/contact" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4"><span class="icon icon-sm"><span class="fas fa-microphone-alt"></span></span><div class="ms-4"><span class="d-block font-small fw-bold mb-0">Support</span> <span class="small">Need help? Ask us!</span></div></a></div></div></div></li></ul></div><div class="d-flex align-items-center"><a href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank" class="btn btn-outline-gray-100 d-none d-lg-inline me-md-3"><span class="fas fa-book me-2"></span> Docs v5.4</a> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" target="_blank" class="btn btn-tertiary"><span class="fas fa-shopping-cart me-2"></span> Buy now</a> <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button></div></div></nav></header><main><div class="preloader bg-dark flex-column justify-content-center align-items-center"><svg id="loader-logo" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 64 78.4"><path fill="#fff" d="M10,0h1.2V11.2H0V10A10,10,0,0,1,10,0Z"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="40" y="17.6" width="0" height="25.6"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="11.2" x="23" y="35.2" width="0" height="25.6"/><path fill="#fff" d="M52.8,35.2H64V53.8a7,7,0,0,1-7,7H52.8V35.2Z"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="6" y="52.8" width="0" height="25.6"/><path fill="#fff" d="M52.8,0H57a7,7,0,0,1,7,7h0v4.2H52.8V0Z"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="11.2" x="57.8" y="17.6" width="0" height="11.2"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="6" y="35.2" width="0" height="11.2"/><rect fill="none" stroke="#fff" stroke-width="11.2" x="40.2" y="49.6" width="0" height="11.2"/><path fill="#fff" d="M17.6,67.2H28.8v1.2a10,10,0,0,1-10,10H17.6V67.2Z"/><rect fill="none" stroke="#fff" stroke-opacity="0.4" stroke-width="28.8" x="31.6" width="0" height="11.2"/><rect fill="none" stroke="#fff" x="14" stroke-width="28.8" y="17.6" width="0" height="11.2"/></svg></div><section class="section-header overflow-hidden pt-7 pt-lg-8 pb-9 pb-lg-12 bg-primary text-white"><div class="container"><div class="row"><div class="col-12 text-center"><div class="bootstrap-big-icon d-none d-lg-block"><svg xmlns="http://www.w3.org/2000/svg" width="700" height="622" class="d-block my-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg></div><h1 class="fw-bolder display-2">Pixel UI<span class="pixel-pro-badge fw-bolder text-dark">PRO</span></h1><h2 class="lead fw-normal text-muted mb-4 px-lg-10">Premium Bootstrap 5 UI Kit without jQuery that will help you prototype and design beautiful, creative and modern websites</h2><div class="d-flex justify-content-center mb-5"><a href="./html/components/all.html" class="btn btn-tertiary mb-3 mt-2 me-2 me-md-3 animate-up-2"><span class="fas fa-th-large me-2"></span> <span class="d-none d-md-inline">Explore components</span> <span class="d-md-none">Components</span></a> <a href="./html/pages/all.html" class="btn btn-outline-white mb-3 mt-2 me-md-4 animate-up-2">Demo pages</a></div><div class="d-flex justify-content-center flex-column mb-6 mb-lg-5"><a href="https://themesberg.com" class="d-block text-center mx-auto" target="_blank"><img src="./assets/img/themesberg.svg" class="d-block mx-auto mb-3" height="25" width="25" alt="Themesberg Logo"> <span class="text-muted font-small">A Themesberg production</span></a></div></div></div></div><figure class="position-absolute bottom-0 left-0 w-100 d-none d-md-block mb-n2"><svg class="fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 185.4"><path d="M3000,0v185.4H0V0c496.4,115.6,996.4,173.4,1500,173.4S2503.6,115.6,3000,0z"></path></svg></figure></section><div class="section py-0"><div class="container mt-n10 mt-lg-n12 z-2"><div class="row justify-content-center"><div class="col-12 col-md-10"><img src="./assets/img/presentation-mockup.png" alt="Pixel Pro Mockup"></div></div></div></div><section class="section section-lg"><div class="container"><div class="row justify-content-center mb-5 mb-lg-6"><div class="col-6 col-md-3 text-center mb-4"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle mb-4"><span class="fas fa-puzzle-piece text-tertiary"></span></div><h3 class="fw-bolder">1000+</h3><p class="text-gray">Premium Components</p></div><div class="col-6 col-md-3 text-center mb-4"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle mb-4"><span class="fas fa-pager text-tertiary"></span></div><h3 class="fw-bolder">9</h3><p class="text-gray">Dashboard Pages</p></div><div class="col-6 col-md-3 text-center"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle mb-4"><span class="fab fa-sass text-tertiary"></span></div><h3 class="fw-bolder">Workflow</h3><p class="text-gray">Sass & Gulp</p></div><div class="col-6 col-md-3 text-center"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle mb-4"><span class="fab fa-js-square text-tertiary"></span></div><h3 class="fw-bolder">Vanilla</h3><p class="text-gray">Javascript</p></div></div><div class="row justify-content-between align-items-center mb-5 mb-lg-7"><div class="col-lg-5 order-lg-2 mb-5 mb-lg-0"><h2 class="h1">Premium Elements</h2><p class="mb-4 lead fw-bold">Collection of custom Bootstrap 5 components</p><p class="mb-4">Get started building your project using a collection of over 1000 premium web components such as buttons, alerts, cards, modals, and many more</p><a href="./html/components/all.html" class="btn btn-tertiary mt-2 animate-up-2"><span class="fas fa-th-large me-2"></span> Explore components</a></div><div class="col-lg-6 order-lg-1"><img src="./assets/img/elements-mockup.jpg" alt="MapBox Leaflet.js Custom Integration Mockup"></div></div><div class="row justify-content-between align-items-center mb-5 mb-lg-7"><div class="col-lg-5 mb-5 mb-lg-0"><h2 class="h1">Modular sections</h2><p class="mb-4 lead fw-bold">More than 50 website sections</p><p class="mb-4">Using the sections in Pixel Pro you can easily build new pages by adding them together</p><a href="./html/sections/all-sections.html" class="btn btn-primary mt-2 animate-up-2"><span class="fas fa-th-large me-2"></span> Explore sections</a></div><div class="col-lg-6"><img src="./assets/img/sections-mockup.jpg" alt="MapBox Leaflet.js Custom Integration Mockup"></div></div><div class="row justify-content-between align-items-center mb-5 mb-lg-7"><div class="col-12 col-lg-5 order-lg-2 mb-5 mb-lg-0"><h2 class="h1">User Dashboard</h2><p class="mb-4 lead fw-bold">9 dashboard pages</p><p class="mb-4">Quickly set up a user settings panel with the advanced dashboard pages including billing, settings, messaging</p><a href="./html/dashboard/account.html" class="btn btn-tertiary animate-up-2"><span class="fas fa-chart-line me-2"></span> Explore dashboard</a></div><div class="col-12 col-lg-6 order-lg-1"><img src="./assets/img/presentation-mockup-dashboard.png" alt="Dashboard Preview"></div></div><div class="row justify-content-between align-items-center"><div class="col-12 col-lg-5 mb-5 mb-lg-0"><h2 class="h1">Bootstrap 5</h2><p class="mb-4 lead fw-bold">Latest version of Bootstrap without jQuery</p><p class="mb-4">Pixel is built using the latest version of Bootstrap 5 and we only used Vanilla Javascript for everything including the plugins</p><a href="https://themesberg.com/docs/pixel-bootstrap/components/accordions/" target="_blank" class="btn btn-outline-primary"><span class="fas fa-book me-2"></span> Getting started</a></div><div class="col-12 col-lg-6"><img src="./assets/img/illustrations/bs5-illustrations.svg" alt="Front pages overview"></div></div></div></section><section class="section section-md"><div class="container"><div class="row justify-content-center mb-5 mb-lg-6"><div class="col-12 text-center"><h2 class="h1 px-lg-5">35 hand-crafted example pages</h2></div></div><div class="row"><div class="col-12"><h2 class="mb-4 mb-lg-5">Front Pages</h2></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/landing-app.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/landing-app.jpg" alt="App landing preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">App Landing<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/landing-freelancer.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/landing-freelancer.jpg" alt="Freelancer landing preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Freelancer Landing<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/landing-crypto.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/landing-crypto.jpg" alt="Crypto landing preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Crypto Landing<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/about.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/about.jpg" alt="About page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">About<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/team.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/team.jpg" alt="Team page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Team<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/profile.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/profile.jpg" alt="About me page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Profile<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/support.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/support.jpg" alt="Support page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Support<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/support-topic.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/support-topic.jpg" alt="Support topic page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Support Topic<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/careers.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/careers.jpg" alt="Careers page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Careers<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/career-single.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/career-single.jpg" alt="Career single page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Career Single<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/blog.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/blog.jpg" alt="Blog page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Blog<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/blog-post.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/blog.jpg" alt="Blog post page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Blog post<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/pricing.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/pricing.jpg" alt="Pricing page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Pricing<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/services.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/services.jpg" alt="Services page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Services<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/contact.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/contact.jpg" alt="Contact page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Contact<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/terms.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/terms.jpg" alt="Terms page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Terms<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/legal.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/legal.jpg" alt="Legal page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Legal<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/sign-in.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/sign-in.jpg" alt="Sign in page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Sign in<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/sign-up.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/sign-up.jpg" alt="Sign up page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Sign up<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/forgot-password.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/forgot-password.jpg" alt="Forgot password page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Forgot Password<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/reset-password.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/reset-password.jpg" alt="Reset password page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Reset Password<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/blank.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/blank-page.jpg" alt="Blank page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Blank Page<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/maintenance.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/maintenance.jpg" alt="Maintenance page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Maintenance<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/coming-soon.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/coming-soon.jpg" alt="Coming soon page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">Coming soon<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/404.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/404.jpg" alt="404 not found error page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">404 not found<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/pages/500.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/500.jpg" alt="500 server error page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center text-white">500 server error<span class="fas fa-external-link-alt ms-2"></span></h3></div></a></div></div><div class="row justify-content-center"><div class="col-12"><h2 class="mb-4 mb-lg-5">Dashboard</h2></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/account.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/account.jpg" alt="Account page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Overview<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/settings.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/settings.jpg" alt="Settings page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Settings<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/my-items.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/items.jpg" alt="My Items page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">My Items<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/edit-item.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/edit-item.jpg" alt="Edit Item page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Edit Item<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/security.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/security.jpg" alt="Security page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Security<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/invoice.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/invoice.jpg" alt="Invoice page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Invoice<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/billing.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/billing.jpg" alt="Billing page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Billing<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/messages.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/messages.jpg" alt="Messages page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Messages<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div><div class="col-6 col-lg-3 mb-5"><a href="./html/dashboard/single-message.html" class="page-preview scale-up-hover-2"><img class="shadow-lg rounded scale" src="./assets/img/presentation/all-pages/single-message.jpg" alt="Single Message page preview"><div class="text-center show-on-hover"><h6 class="m-0 text-center text-white">Single Message<span class="fas fa-external-link-alt ms-2"></span></h6></div></a></div></div></div></section><section class="section section-lg bg-tertiary"><div class="container"><div class="row justify-content-center"><div class="col-lg-8 text-center text-white"><h2 class="fw-light">Notable <span class="fw-bold">features</span></h2><p class="lead">You get all Bootstrap components fully customized. Besides, you receive numerous plugins out of the box and ready to use</p></div></div><div class="row mt-4 mt-lg-6 text-white"><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon"><svg xmlns="http://www.w3.org/2000/svg" height="35" class="d-inline mx-1" viewBox="0 0 118 94" role="img"><title>Bootstrap</title><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"></path></svg></div><h2 class="h5 my-3">Latest Bootstrap 5</h2><p>A responsive and mobile-first theme built with the world's most popular CSS framework</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon"><span class="fab fa-sass"></span></div><h2 class="h5 my-3">Build with Sass</h2><p>Change one variable and the theme adapts. Colors, fonts, sizes, buttons... you name it</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon"><span class="fas fa-mobile-alt"></span></div><h2 class="h5 my-3">Responsive Design</h2><p>Did you know 53% of the world web traffic is mobile? Pixel is fully responsive and mobile first</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon"><span class="fab fa-js-square"></span></div><h2 class="h5 my-3">Vanilla JS</h2><p>Pixel Pro does not have jQuery included as Bootstrap 5 dropped support</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon"><span class="fab fa-gulp"></span></div><h2 class="h5 my-3">Gulp & BrowserSync</h2><p>With our custom Gulp commands & BrowserSync we offer a seemless and fast workflow for your project</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon"><span class="fas fa-file-alt"></span></div><h2 class="h5 my-3">Well documented</h2><p>Our kit is delivered with very detailed documentation, describing all components, styles and usages</p></div></div><div class="col-md-4"><div class="icon-box text-center"><div class="icon"><span class="fas fa-tachometer-alt"></span></div><h2 class="h5 my-3">Google PageSpeed</h2><p>Pixel has 80+ scores on Google PageSpeed Insights to offer you and your clients a fast website</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon"><span class="fas fa-image"></span></div><h2 class="h5 my-3">SVG illustrations</h2><p>Photography and Illustration SVGs are included in the download package and are free to use</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon"><img class="navbar-brand-dark" style="height: 35px;" src="./assets/img/brand/light.svg" alt="pixel logo"></div><h2 class="h5 my-3">Every pixel matters</h2><p>We crafted each component with great care so that no rouge pixel is left behind</p></div></div></div></div></section><section class="section section-lg line-bottom-soft"><div class="container"><div class="row justify-content-center mb-5 mb-lg-6"><div class="col-12 text-center"><h2 class="h1 px-lg-5">What's inside?</h2><p class="lead px-lg-8">We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.</p></div></div><div class="row d-flex align-items-center"><div class="col-12 col-lg-6 mb-4"><div class="d-none d-lg-block mt-5"><h3 class="h4">You need only HTML, CSS and Javascript?</h3><p class="lead mb-4">Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p><a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/file-structure/" target="_blank" class="btn btn-md btn-secondary animate-up-2"><span class="fas fa-book me-2"></span> Docs v5.4</a></div></div><div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center"><ul class="d-block fmw-100 list-style-none folder-structure"><li data-bs-toggle="tooltip" data-bs-placement="left" title="Main folder that you will be working with"><span class="fas fa-folder me-2"></span>src</li><li><ul class="list-style-none ps-4"><li data-bs-toggle="tooltip" data-bs-placement="left" title="CSS, Images, Fonts and Javascript"><span class="fas fa-folder me-2"></span> assets</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="HTML templates"><span class="fas fa-folder me-2"></span> html</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="Partials are HTML snippets that are included in multiple pages, such as the menu or footer"><span class="fas fa-folder me-2"></span> partials</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="Sass source files"><span class="fas fa-folder me-2"></span> scss</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="The page you're looking at right now. Call it inception."><span class="fab fa-html5 me-2 text-secondary"></span> index.html</li></ul></li><li data-bs-toggle="tooltip" data-bs-placement="left" title="Pixel with only HTML, CSS and Javascript"><span class="fas fa-folder me-2 text-muted"></span> html&css</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="Temporary folder that is created when serving files with BrowserSync"><span class="fas fa-folder text-muted me-2"></span>.temp</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="Minified version of the project"><span class="fas fa-folder me-2 text-muted"></span> dist</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="Project dependencies from package.json"><span class="fas fa-folder text-muted me-2"></span> node_modules</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="Development workflow commands. We have them well documented."><span class="fab fa-js-square me-2 text-warning"></span> gulpfile.js</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="Project details and dependencies."><span class="fas fa-file-code me-2 text-tertiary"></span> package.json</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="No project can miss a README :)"><span class="fas fa-file-code me-2 text-tertiary"></span> README.md</li><li data-bs-toggle="tooltip" data-bs-placement="left" title="This file ensures that generated files and folder are ignored by Git. (eg. node_modules)"><span class="fas fa-file-code me-2 text-tertiary"></span> .gitignore</li></ul></div><div class="col-12 mt-5 d-lg-none"><h3 class="h5">You need only HTML, CSS and Javascript?</h3><p>Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p></div></div></div></section><section class="section section-lg bg-secondary"><div class="container"><div class="row justify-content-center text-center text-white"><div class="col-lg-10 col-xl-12"><h2 class="fw-light mb-4">WCAG 2.1 accessible <span class="fw-bold">color scheme</span></h2><p class="lead">We've enhanced Bootstrap鈥檚 color settings<br>to comply with the latest accessibility standards</p></div></div><div class="row mt-4 mt-lg-6"><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-soft bg-gray-200 p-5 text-center mb-4"><div class="color-shape rounded bg-primary m-auto"></div><div class="mt-4"><h2 class="h5 text-dark">Primary:</h2><span class="fw-bold text-primary">#174F84</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-soft bg-gray-200 p-5 text-center mb-4"><div class="color-shape rounded bg-secondary m-auto"></div><div class="mt-4"><h2 class="h5 text-dark">Secondary:</h2><span class="fw-bold text-secondary">#10AB7C</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-primary p-5 text-center mb-4"><div class="color-shape rounded bg-tertiary m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Tertiary:</h2><span class="fw-bold text-white">#FF7F66</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-primary p-5 text-center mb-4"><div class="color-shape rounded bg-info m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Info:</h2><span class="fw-bold text-white">#1E90FF</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-primary p-5 text-center mb-4"><div class="color-shape rounded bg-warning m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Warning:</h2><span class="fw-bold text-white">#F5B759</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-primary p-5 text-center mb-4"><div class="color-shape rounded bg-success m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Success:</h2><span class="fw-bold text-white">#00BF9A</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-primary p-5 text-center mb-4"><div class="color-shape rounded bg-danger m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Danger:</h2><span class="fw-bold text-white">#FA5252</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-soft bg-gray-200 p-5 text-center mb-4"><div class="color-shape rounded bg-dark m-auto"></div><div class="mt-4"><h2 class="h5 text-dark">Dark:</h2><span class="fw-bold text-dark">#2A354F</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-primary p-5 text-center mb-4"><div class="color-shape rounded bg-gray-300 m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Light:</h2><span class="fw-bold text-light">#DDE1ED</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-dark bg-primary p-5 text-center mb-4"><div class="color-shape rounded bg-gray-200 m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Soft:</h2><span class="fw-bold text-light">#EFF2F5</span></div></div></div></div></div></section><section class="section section-lg bg-gray-200"><div class="container"><div class="row justify-content-center text-center text-dark mb-5"><div class="col-lg-9 col-xl-8"><h2 class="h1 fw-light mb-3">Less <span class="fw-bold">work</span>, more <span class="fw-bold">flow</span>.</h2><p class="lead">Boost productivity with BrowserSync. SCSS changes are reflected instantly and pages scroll and refresh on devices as you work.</p></div></div><div class="row justify-content-center mb-6"><div class="col-md-10 col-xl-9"><div class="position-relative"><div class="rounded bg-dark p-4 text-white mb-2"><div class="mb-3"><div class="fw-normal">> $ npm install</div><div class="text-muted">Everything鈥檚 installed!</div></div><div class="mb-3"><div class="fw-normal">> $ gulp</div><div class="text-muted">SCSS watching</div><div class="text-muted">LiveReload started</div><div class="text-muted">Opening localhost:3000</div></div><div><div class="fw-normal">> $ that's it?</div><div class="text-muted">It's that simple!</div></div></div></div><div class="alert bg-dark text-white position-relative mt-4"><span class="fas fa-question-circle me-2"></span> Looks unfamiliar? Don鈥檛 worry! Our <a class="text-white fw-bold text-underline" href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank">documentation</a> has got you covered.</div></div></div></div></section><section class="section section-lg bg-white"><div class="container"><div class="row"><div class="col-12 col-lg-8"><h2 class="h1 fw-light mb-3">Free Demo</h2><p class="lead mb-4">Do you want to test and see the benefits of this UI Kit before purchasing it? You can give the demo version a try. It features enough components for you to get a feel of the design and also test the quality of the code.</p><div class="d-flex align-items-center"><a href="https://github.com/themesberg/pixel-bootstrap-ui-kit" target="_blank" class="btn btn-tertiary me-4 animate-up-2">View on GitHub </a><div class="mt-2"> <a class="github-button" href="https://github.com/themesberg/pixel-bootstrap-ui-kit" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star themesberg/pixel-bootstrap-ui-kit on GitHub">Star</a></div></div></div><div class="col-12 col-lg-4"><div class="github-big-icon"><span class="fab fa-github"></span></div></div></div><div class="row mt-6"><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0"><div class="card border-gray-300 p-4"><div class="card-header bg-white border-0 pb-0"><span class="d-block"><span class="h2 text-primary fw-bold align-top">Free Demo</span></span></div><div class="card-body"><ul class="list-group list-group-flush price-list"><li class="list-group-item bg-white border-0 ps-0"><strong>80</strong> Components</li><li class="list-group-item bg-white border-0 ps-0"><strong>5</strong> Example Pages</li><li class="list-group-item bg-white border-0 ps-0"><span class="icon-danger"><span class="fas fa-times-circle"></span></span> Uncoventional cards</li><li class="list-group-item bg-white border-0 ps-0"><span class="icon-danger"><span class="fas fa-times-circle"></span></span> Timelines</li><li class="list-group-item bg-white border-0 ps-0"><span class="icon-danger"><span class="fas fa-times-circle"></span></span> E-commerce</li><li class="list-group-item bg-white border-0 ps-0"><span class="icon-danger"><span class="fas fa-times-circle"></span></span> Charts</li><li class="list-group-item bg-white border-0 ps-0 pb-0"><span class="icon-danger"><span class="fas fa-times-circle"></span></span> Premium Support</li></ul></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0"><div class="card border-gray-300 p-4 mt-lg-n4"><div class="card-header bg-white border-0 pb-0"><span class="d-block"><span class="h2 text-primary fw-bold align-top">Pro Version</span></span></div><div class="card-body"><ul class="list-group list-group-flush price-list"><li class="list-group-item bg-white border-0 ps-0"><strong>1000+</strong> Components</li><li class="list-group-item bg-white border-0 ps-0"><strong>35</strong> Example Pages</li><li class="list-group-item bg-white border-0 ps-0">Dashboard included</li><li class="list-group-item bg-white border-0 ps-0"><span class="icon-success"><span class="fas fa-check-circle"></span></span> Uncoventional cards</li><li class="list-group-item bg-white border-0 ps-0"><span class="icon-success"><span class="fas fa-check-circle"></span></span> Timelines</li><li class="list-group-item bg-white border-0 ps-0"><span class="icon-success"><span class="fas fa-check-circle"></span></span> E-commerce</li><li class="list-group-item bg-white border-0 ps-0"><span class="icon-success"><span class="fas fa-check-circle"></span></span> Premium charts</li><li class="list-group-item bg-white border-0 border-0 ps-0 pb-0"><span class="icon-success"><span class="fas fa-check-circle"></span></span> Premium Support</li></ul></div></div></div></div></div></section><section class="section section-lg bg-primary"><div class="container"><div class="row justify-content-center mb-4 mb-lg-6 text-white"><div class="col-12 col-lg-9 text-center"><h2 class="display-3 fw-light mb-4">Choose the right plan for your business</h2><p class="lead">You have at least <span class="fw-bold text-white">Free 6 Months of Updates</span> and <span class="fw-bold text-white">Premium Support</span> on each package. You also have 30 days to request a refund if you're not happy with your purchase.</p></div></div><div class="row"><div class="col-12 col-lg-6 col-xl-4 mb-5"><div class="card border-gray-300 rounded-md mb-3 px-2"><div class="card-header bg-white border-gray-300 p-4"><div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="price display-2 mb-0 text-primary">89</span></div><h3 class="h4 mb-3 text-black">Freelancer</h3><p class="fw-normal font-small mb-0">Great for personal use and for your side projects.</p></div><div class="card-body py-4"><ul class="list-group simple-list"><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Full documentation</li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Domains: <strong>1</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Team size: <strong>1 developer</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Premium support: <strong>6 months</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Free updates: <strong>6 months</strong></li></ul></div><div class="card-footer d-grid bg-white border-0 pt-0 px-4 pb-4"><a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit#pricing" target="_blank" class="btn btn-primary">Buy now <span class="icon icon-xs ms-3"></span></a></div></div><a href="https://themesberg.com/licensing#freelancer" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" class="font-small text-white text-center d-block mt-4" data-original-title="Something unclear? Click to read the full Freelancer license."><span class="fas fa-balance-scale me-2"></span>Freelancer License</a></div><div class="col-12 col-lg-6 col-xl-4 mb-5"><div class="card border-gray-300 rounded-md mb-3 px-2"><div class="card-header bg-white border-gray-300 p-4"><div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="price display-2 mb-0 text-primary">239</span></div><h3 class="h4 mb-3 text-black">Company</h3><p class="fw-normal font-small mb-0">Relevant for multiple users and extended support.</p></div><div class="card-body py-4"><ul class="list-group simple-list"><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Full documentation</li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Domains: <strong>Unlimited</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Team size: <strong>1-5 developers</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Premium support: <strong>12 months</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Free updates: <strong>12 months</strong></li></ul></div><div class="card-footer d-grid bg-white border-0 pt-0 px-4 pb-4"><a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit#pricing" target="_blank" class="btn btn-primary">Buy now <span class="icon icon-xs ms-3"></span></a></div></div><a href="https://themesberg.com/licensing#company" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" class="font-small text-white text-center d-block mt-4" data-original-title="Something unclear? Click to read the full Freelancer license."><span class="fas fa-balance-scale me-2"></span>Company License</a></div><div class="col-12 col-lg-6 col-xl-4 mb-5"><div class="card border-gray-300 rounded-md mb-3 px-2"><div class="card-header bg-white border-gray-300 p-4"><div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="price display-2 mb-0 text-primary">599</span></div><h3 class="h4 mb-3 text-black">Enterprise</h3><p class="fw-normal font-small mb-0">Best for large scale uses and extended redistribution rights.</p></div><div class="card-body py-4"><ul class="list-group simple-list"><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Full documentation</li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Domains: <strong>Unlimited</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Team size: <strong>Unlimited</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Premium support: <strong>24 months</strong></li><li class="list-group-item fw-normal border-0"><span class="icon-success me-2"><span class="fas fa-check"></span></span>Free updates: <strong>12 months</strong></li></ul></div><div class="card-footer d-grid bg-white border-0 pt-0 px-4 pb-4"><a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit#pricing" target="_blank" class="btn btn-primary">Buy now <span class="icon icon-xs ms-3"></span></a></div></div><a href="https://themesberg.com/licensing#enterprise" target="_blank" data-bs-toggle="tooltip" data-bs-placement="bottom" title="" class="font-small text-white text-center d-block mt-4" data-original-title="Something unclear? Click to read the full Freelancer license."><span class="fas fa-balance-scale me-2"></span>Enterprise License</a></div></div></div></section><section class="section section-lg bg-gray-200 text-dark"><div class="container"><div class="row justify-content-center text-white mb-5 mb-lg-6"><div class="col-lg-10 text-center"><h2 class="fw-light">Frequently asked questions</h2></div></div><div class="row justify-content-center"><div class="col-12 col-md-8"><div class="accordion bg-white rounded" id="accordionExample1"><div class="accordion-item"><h2 class="accordion-header" id="headingOne"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">What is a UI Kit?</button></h2><div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample1"><div class="accordion-body"><p>Pixel is a Premium web based User Interface Kit based on the popular Bootstrap 5 CSS Framework developed by Themesberg.</p><p>UI kits help you reduce the time of developing websites and web apps by having numerous components, sections and pages ready to be used.</p><p>Pixel is a highly customizable design system due to our increased efforts of using Sass variables, mixins and functions.</p></div></div></div><div class="accordion-item"><h2 class="accordion-header" id="headingTwo"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Can I use Pixel for my clients?</button></h2><div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample1"><div class="accordion-body"><p class="mb-0">Of course you can! You can use Pixel UI Kit to build as many websites as you want. The simple license only restricts you from selling a copy or a modified copy of Pixel.</p></div></div></div><div class="accordion-item"><h2 class="accordion-header" id="headingThree"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Are the fonts, icons and images the same as in the demo?</button></h2><div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample1"><div class="accordion-body"><p class="mb-0">Of course! Everything you see in the demo page is what you will get if you buy our product.</p></div></div></div><div class="accordion-item"><h2 class="accordion-header" id="headingFour"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">Is there a money back guarantee?</button></h2><div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionExample1"><div class="accordion-body"><p class="mb-0">Please read the following page regarding refunds: <a href="https://themesberg.com/refund-policy">Refund Policy</a></p></div></div></div><div class="accordion-item"><h2 class="accordion-header" id="headingFive"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">Do I get free updates?</button></h2><div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive" data-bs-parent="#accordionExample1"><div class="accordion-body"><p>Pixel is a product that our team will continuously update every month with extra components, sections, pages and plugins.</p><p class="mb-0">We will also make updates based on the feedback we get from our community, so feel free to let us know how we can upgrade our UI Kit.</p></div></div></div><div class="accordion-item"><h2 class="accordion-header" id="headingSix"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">Where can I get support?</button></h2><div id="collapseSix" class="accordion-collapse collapse" aria-labelledby="headingSix" data-bs-parent="#accordionExample1"><div class="accordion-body"><p class="mb-0">Got a question? Let us know and we'll try our best to answer you at the <a href="https://themesberg.com/contact">support center</a>.</p></div></div></div></div></div></div></div></section></main><footer class="footer pt-6 pb-5 bg-primary text-white"><div class="container"><div class="row"><div class="col-md-4"><img class="navbar-brand-dark mb-4" height="35" src="./assets/img/brand/light.svg" alt="Logo light"><p>Pixel Pro is a premium Bootstrap 5 UI Kit that will help you prototype and design beautiful, creative and modern websites.</p><ul class="social-buttons mb-5 mb-lg-0"><li><a href="https://twitter.com/themesberg" aria-label="twitter social link" class="icon-white me-2"><span class="fab fa-twitter"></span></a></li><li><a href="https://www.facebook.com/themesberg/" class="icon-white me-2" aria-label="facebook social link"><span class="fab fa-facebook"></span></a></li><li><a href="https://github.com/themesberg" aria-label="github social link" class="icon-white me-2"><span class="fab fa-github"></span></a></li><li><a href="https://dribbble.com/themesberg" class="icon-white" aria-label="dribbble social link"><span class="fab fa-dribbble"></span></a></li></ul></div><div class="col-6 col-md-2 mb-5 mb-lg-0"><span class="h5">Themesberg</span><ul class="footer-links mt-2"><li><a target="_blank" href="https://themesberg.com/blog">Blog</a></li><li><a target="_blank" href="https://themesberg.com/themes">Products</a></li><li><a target="_blank" href="https://themesberg.com/about">About Us</a></li><li><a target="_blank" href="https://themesberg.com/contact">Contact Us</a></li></ul></div><div class="col-6 col-md-2 mb-5 mb-lg-0"><span class="h5">Other</span><ul class="footer-links mt-2"><li><a href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank">Docs <span class="badge badge-sm bg-success ms-2">v5.4</span></a></li><li><a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/changelog/" target="_blank">Changelog</a></li><li><a target="_blank" href="https://themesberg.com/licensing">License</a></li><li><a target="_blank" href="https://github.com/themesberg/pixel-bootstrap-ui-kit/issues">Support</a></li></ul></div><div class="col-12 col-md-4 mb-5 mb-lg-0"><span class="h5">Subscribe</span><p class="text-muted font-small mt-2">Join our mailing list. We write rarely, but only the best content.</p><form action="#"><div class="form-row mb-2"><div class="col-12"><label class="h6 fw-normal text-muted" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control mb-2" placeholder="example@company.com" name="email" aria-label="Subscribe form" id="exampleInputEmail3" required></div><div class="col-12 d-grid"><button type="submit" class="btn btn-tertiary" data-loading-text="Sending"><span>Subscribe</span></button></div></div></form><p class="text-muted font-small m-0">We鈥檒l never share your details. See our <a class="text-white" href="#">Privacy Policy</a></p></div></div><hr class="bg-secondary my-3 my-lg-5"><div class="row"><div class="col mb-md-0"><a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center mb-3"><img src="./assets/img/themesberg.svg" height="30" class="me-2" alt="Themesberg Logo"><p class="text-white fw-bold footer-logo-text m-0">Themesberg</p></a><div class="d-flex text-center justify-content-center align-items-center" role="contentinfo"><p class="fw-normal font-small mb-0">Copyright 漏 Themesberg 2019-<span class="current-year">2021</span>. All rights reserved.</p></div></div></div></div></footer><script src="./vendor/@popperjs/core/dist/umd/popper.min.js"></script><script src="./vendor/bootstrap/dist/js/bootstrap.min.js"></script><script src="./vendor/headroom.js/dist/headroom.min.js"></script><script src="./vendor/onscreen/dist/on-screen.umd.min.js"></script><script src="./vendor/nouislider/distribute/nouislider.min.js"></script><script src="./vendor/jarallax/dist/jarallax.min.js"></script><script src="./vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script><script src="./vendor/vivus/dist/vivus.min.js"></script><script src="./vendor/chartist/dist/chartist.min.js"></script><script src="./vendor/chartist-plugin-tooltips/dist/chartist-plugin-tooltip.min.js"></script><script src="./vendor/@glidejs/glide/dist/glide.min.js"></script><script src="./vendor/countup.js/dist/countUp.umd.js"></script><script src="./vendor/vanillajs-datepicker/dist/js/datepicker.min.js"></script><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script src="./assets/js/pixel.js"></script></body></html>