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-5"></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><script>!function (f, b, e, v, n, t, s) { if (f.fbq) return; n = f.fbq = function () { n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments) }; if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0'; n.queue = []; t = b.createElement(e); t.async = !0; t.src = v; s = b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t, s) }(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '685336745573299'); fbq('track', 'PageView');</script><noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=685336745573299&ev=PageView&noscript=1"></noscript><script>(function (h, o, t, j, a, r) { h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) }; h._hjSettings = { hjid: 2097442, hjsv: 6 }; a = o.getElementsByTagName('head')[0]; r = o.createElement('script'); r.async = 1; r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv; a.appendChild(r); })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');</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 mr-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 mr-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-toggle="collapse" data-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-toggle="dropdown">Pages <span class="fas fa-angle-down nav-link-arrow ml-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-toggle="dropdown">Dashboard <span class="fas fa-angle-down nav-link-arrow ml-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-toggle="dropdown">Components <span class="fas fa-angle-down nav-link-arrow ml-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 pr-0 mr-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 mr-3"><span class="mr-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="mr-1"><span class="fas fa-pager"></span></span> All sections</a></div></div><div class="col pl-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 pl-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 pl-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-toggle="dropdown" id="supportDropdown" aria-expanded="false">Support <span class="fas fa-angle-down nav-link-arrow ml-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/pixel-bootstrap/getting-started/overview/" 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="ml-4"><span class="d-block font-small font-weight-bold mb-0">Documentation<span class="badge badge-sm badge-secondary ml-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="ml-4"><span class="d-block font-small font-weight-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/pixel-bootstrap/getting-started/overview/" target="_blank" class="btn btn-outline-soft d-none d-lg-inline mr-md-3 animate-up-2"><span class="fas fa-book mr-2"></span> Docs v4.0</a> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" target="_blank" class="btn btn-tertiary animate-up-2"><span class="fas fa-shopping-cart mr-2"></span> Buy now</a> <button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-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 section bg-primary pb-11 pb-lg-12 text-white overflow-hidden z-2"><div class="container z-2"><div class="row justify-content-center text-center pt-6 pb-4 mb-4"><div class="col-lg-8 col-xl-8"><h1 class="display-1 font-weight-light mb-3">Pixel<span class="pixel-pro-badge font-weight-bold text-primary">PRO</span></h1><p class="lead px-md-6 mb-5"><svg xmlns="http://www.w3.org/2000/svg" height="18" class="d-inline mr-2 mb-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><strong>Bootstrap 5 UI Kit without jQuery</strong> that will help you prototype and design beautiful, creative and modern websites.</p><div class="d-flex flex-column flex-wrap flex-md-row justify-content-md-center mb-5"><div><a href="./html/components/all.html" class="btn btn-tertiary mb-3 mt-2 mr-2 mr-md-3 animate-up-2"><span class="fas fa-th-large mr-2"></span> All components</a> <a href="./html/pages/all.html" class="btn btn-outline-white mb-3 mt-2 mr-md-4 animate-up-2">Demo pages</a></div></div><a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center flex-column mb-0 mb-lg-6"><img src="./assets/img/themesberg.svg" height="25" class="mb-3" alt="Themesberg Logo"> <span class="text-muted font-small">A Themesberg production</span></a></div></div></div><figure class="position-absolute bottom-0 left-0 w-100 d-none d-md-block mb-n2"><svg class="fill-white" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1920 43.4" style="enable-background:new 0 0 1920 43.4;" xml:space="preserve"><path d="M0,23.3c0,0,405.1-43.5,697.6,0c316.5,1.5,108.9-2.6,480.4-14.1c0,0,139-12.2,458.7,14.3 c0,0,67.8,19.2,283.3-22.7v35.1H0V23.3z"></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="illustration"></div></div></div></div><section class="section section-lg"><div class="container"><div class="row"><div class="col-12 col-md-4"><div class="icon-box text-center mb-5 mb-md-0"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"><span class="fas fa-box-open"></span></div><h2 class="h5 my-3">Over 1000 components</h2><p class="px-lg-4">Beatifully crafted and creative components made with great care for each pixel</p></div></div><div class="col-12 col-md-4 mb-5 mb-md-0"><div class="icon-box text-center"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"><span class="fas fa-pager"></span></div><h2 class="h5 my-3">50+ sections</h2><p class="px-lg-4">Navigation bars, pricing cards, footers and many more sections to enhance page variety</p></div></div><div class="col-12 col-md-4 mb-5 mb-md-0"><div class="icon-box text-center"><div class="icon icon-shape icon-lg bg-white shadow-lg border-light rounded-circle icon-secondary mb-3"><span class="far fa-file-alt"></span></div><h2 class="h5 my-3">35 example pages</h2><p class="px-lg-4">We took the time to create a few example pages to show you how gorgeous pages can look like</p></div></div></div></div></section><section class="section section-xl bg-soft"><div class="container"><div class="row"><div class="col-12 col-xl-4"><h1 class="font-weight-light mb-4">Premium <span class="font-weight-bold">components</span></h1><p class="lead">Our components are a perfect extension of Bootstrap 5's elements and classes.</p><a href="./html/components/all.html" class="btn btn-tertiary mt-2 animate-up-2"><span class="fas fa-th-large mr-2"></span> Demo components</a></div><div class="col-12 col-xl-6 ml-xl-auto"><div class="presentation-box mx-auto mx-xl-0 mt-6 mt-xl-0"><img class="d-block d-md-none mx-auto floating-sm mx-auto gadget" src="./assets/img/index-components/iphone.png" alt="Phone"> <img class="d-none d-md-block d-lg-none mx-auto floating-sm gadget" src="./assets/img/index-components/ipad.png" alt="Tablet"> <img class="d-none d-lg-block floating-sm gadget" src="./assets/img/index-components/macbook.png" alt="Macbook laptop"> <img class="pricing-card floating-md" src="./assets/img/index-components/pricing-card.png" alt="Pricing component"> <img class="blog-card floating-sm" src="./assets/img/index-components/blog-card.png" alt="Blog card component"> <img class="profile-card floating-lg" src="./assets/img/index-components/profile-card.png" alt="Profile card component"> <img class="navbar-img floating-md" src="./assets/img/index-components/navbar.jpg" alt="Navbar component"> <img class="modal-img floating-lg" src="./assets/img/index-components/modal.jpg" alt="Modal component"> <img class="social-btn-img" src="./assets/img/index-components/social-btn.png" alt="Social button component"></div></div></div></div></section><section class="section section-xl pt-5 bg-soft"><div class="container"><div class="row justify-content-between align-items-center"><div class="col-lg-6 mb-4 mb-lg-0"><img src="./assets/img/presentation-mockup-dashboard.png" alt="Dashboard Preview"></div><div class="col-lg-5"><h2 class="h1">Dashboard</h2><p class="mb-4 lead">9 advanced user dashboard pages including billing, settings, messaging and many more</p><div class="d-flex justify-content-between mt-lg-4 mb-5"><div><a href="./html/dashboard/account.html" class="btn btn-primary animate-up-2"><span class="fas fa-chart-line mr-2"></span> Dashboard demo</a></div></div></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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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 ml-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"><h1 class="font-weight-light">Notable <span class="font-weight-bold">features</span></h1><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 mr-2"></span> Docs v4.0</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-toggle="tooltip" data-placement="left" title="Main folder that you will be working with"><span class="fas fa-folder mr-2"></span>src</li><li><ul class="list-style-none pl-4"><li data-toggle="tooltip" data-placement="left" title="CSS, Images, Fonts and Javascript"><span class="fas fa-folder mr-2"></span> assets</li><li data-toggle="tooltip" data-placement="left" title="HTML templates"><span class="fas fa-folder mr-2"></span> html</li><li data-toggle="tooltip" data-placement="left" title="Partials are HTML snippets that are included in multiple pages, such as the menu or footer"><span class="fas fa-folder mr-2"></span> partials</li><li data-toggle="tooltip" data-placement="left" title="Sass source files"><span class="fas fa-folder mr-2"></span> scss</li><li data-toggle="tooltip" data-placement="left" title="The page you're looking at right now. Call it inception."><span class="fab fa-html5 mr-2 text-secondary"></span> index.html</li></ul></li><li data-toggle="tooltip" data-placement="left" title="Pixel with only HTML, CSS and Javascript"><span class="fas fa-folder mr-2 text-muted"></span> html&css</li><li data-toggle="tooltip" data-placement="left" title="Temporary folder that is created when serving files with BrowserSync"><span class="fas fa-folder text-muted mr-2"></span>.temp</li><li data-toggle="tooltip" data-placement="left" title="Minified version of the project"><span class="fas fa-folder mr-2 text-muted"></span> dist</li><li data-toggle="tooltip" data-placement="left" title="Project dependencies from package.json"><span class="fas fa-folder text-muted mr-2"></span> node_modules</li><li data-toggle="tooltip" data-placement="left" title="Development workflow commands. We have them well documented."><span class="fab fa-js-square mr-2 text-warning"></span> gulpfile.js</li><li data-toggle="tooltip" data-placement="left" title="Project details and dependencies."><span class="fas fa-file-code mr-2 text-tertiary"></span> package.json</li><li data-toggle="tooltip" data-placement="left" title="No project can miss a README :)"><span class="fas fa-file-code mr-2 text-tertiary"></span> README.md</li><li data-toggle="tooltip" data-placement="left" title="This file ensures that generated files and folder are ignored by Git. (eg. node_modules)"><span class="fas fa-file-code mr-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"><h1 class="font-weight-light mb-4">WCAG 2.1 accessible <span class="font-weight-bold">color scheme</span></h1><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-soft 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="font-weight-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-soft 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="font-weight-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="font-weight-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="font-weight-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="font-weight-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="font-weight-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="font-weight-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-soft 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="font-weight-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-light m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Light:</h2><span class="font-weight-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-soft m-auto"></div><div class="mt-4 text-white"><h2 class="h5">Soft:</h2><span class="font-weight-bold text-light">#EFF2F5</span></div></div></div></div></div></section><section class="section section-lg bg-soft"><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 font-weight-light mb-3">Less <span class="font-weight-bold">work</span>, more <span class="font-weight-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="font-weight-normal">> $ npm install</div><div class="text-muted">Everything鈥檚 installed!</div></div><div class="mb-3"><div class="font-weight-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="font-weight-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 mr-2"></span> Looks unfamiliar? Don鈥檛 worry! Our <a class="text-white font-weight-bold text-underline" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" 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 font-weight-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 mr-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-light p-4"><div class="card-header bg-white border-0 pb-0"><span class="d-block"><span class="h2 text-primary font-weight-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 pl-0"><strong>80</strong> Components</li><li class="list-group-item bg-white border-0 pl-0"><strong>5</strong> Example Pages</li><li class="list-group-item bg-white border-0 pl-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 pl-0"><span class="icon-danger"><span class="fas fa-times-circle"></span></span> Timelines</li><li class="list-group-item bg-white border-0 pl-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 pl-0"><span class="icon-danger"><span class="fas fa-times-circle"></span></span> Charts</li><li class="list-group-item bg-white border-0 pl-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-light p-4 mt-lg-n4"><div class="card-header bg-white border-0 pb-0"><span class="d-block"><span class="h2 text-primary font-weight-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 pl-0"><strong>1000+</strong> Components</li><li class="list-group-item bg-white border-0 pl-0"><strong>35</strong> Example Pages</li><li class="list-group-item bg-white border-0 pl-0">Dashboard included</li><li class="list-group-item bg-white border-0 pl-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 pl-0"><span class="icon-success"><span class="fas fa-check-circle"></span></span> Timelines</li><li class="list-group-item bg-white border-0 pl-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 pl-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 pl-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 text-white mb-5 mb-lg-6"><div class="col-lg-10 text-center"><h1 class="font-weight-light">Frequently asked questions</h1></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-toggle="collapse" data-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-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-toggle="collapse" data-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-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-toggle="collapse" data-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-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-toggle="collapse" data-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-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-toggle="collapse" data-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-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-toggle="collapse" data-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-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><section class="section section-lg bg-soft"><div class="container"><div class="row justify-content-center mb-4 mb-lg-6"><div class="col-12 col-lg-9 text-center"><h2 class="display-3 font-weight-light mb-4">Choose the right plan for your business</h2><p class="lead">You have at least <span class="font-weight-bold text-primary">Free 6 Months of Updates</span> and <span class="font-weight-bold text-primary">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-light rounded-md mb-3 px-2"><div class="card-header bg-white border-light 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="font-weight-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 font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Full documentation</li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Domains: <strong>1</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Team size: <strong>1 developer</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Premium support: <strong>6 months</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-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 ml-3"></span></a></div></div><a href="https://themesberg.com/licensing#freelancer" target="_blank" data-toggle="tooltip" data-placement="bottom" title="" class="font-small text-gray text-center d-block mt-4" data-original-title="Something unclear? Click to read the full Freelancer license."><span class="fas fa-balance-scale mr-2"></span>Freelancer License</a></div><div class="col-12 col-lg-6 col-xl-4 mb-5"><div class="card border-light rounded-md mb-3 px-2"><div class="card-header bg-white border-light 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="font-weight-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 font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Full documentation</li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Domains: <strong>Unlimited</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Team size: <strong>1-5 developers</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Premium support: <strong>12 months</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-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 ml-3"></span></a></div></div><a href="https://themesberg.com/licensing#company" target="_blank" data-toggle="tooltip" data-placement="bottom" title="" class="font-small text-gray text-center d-block mt-4" data-original-title="Something unclear? Click to read the full Freelancer license."><span class="fas fa-balance-scale mr-2"></span>Company License</a></div><div class="col-12 col-lg-6 col-xl-4 mb-5"><div class="card border-light rounded-md mb-3 px-2"><div class="card-header bg-white border-light 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="font-weight-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 font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Full documentation</li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Domains: <strong>Unlimited</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Team size: <strong>Unlimited</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-2"><span class="fas fa-check"></span></span>Premium support: <strong>24 months</strong></li><li class="list-group-item font-weight-normal border-0"><span class="icon-success mr-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 ml-3"></span></a></div></div><a href="https://themesberg.com/licensing#enterprise" target="_blank" data-toggle="tooltip" data-placement="bottom" title="" class="font-small text-gray text-center d-block mt-4" data-original-title="Something unclear? Click to read the full Freelancer license."><span class="fas fa-balance-scale mr-2"></span>Enterprise License</a></div></div></div></section></main><footer class="footer py-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><strong>Pixel</strong> is a large User Interface 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 mr-2"><span class="fab fa-twitter"></span></a></li><li><a href="https://www.facebook.com/themesberg/" class="icon-white mr-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 mr-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/products">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/pixel-bootstrap/getting-started/overview/" target="_blank">Docs <span class="badge badge-sm bg-tertiary ml-2">v4.0</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 font-weight-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="mr-2" alt="Themesberg Logo"><p class="text-white font-weight-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="font-weight-normal font-small mb-0">Copyright 漏 Themesberg 2019-<span class="current-year">2020</span>. All rights reserved.</p></div></div></div></div></footer><script src="./vendor/popper.js/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/prismjs/prism.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>