CINXE.COM
Pixel Pro - Premium Bootstrap 5 UI KIT - Themesberg
<!doctype html> <html lang="en"> <head> <link rel="canonical" href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"> <title>Pixel Pro - Premium Bootstrap 5 UI KIT - Themesberg</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="Bootstrap 5 UI Kit featuring over 1000 unique components, 35 example pages and a user dashboard. Check the live demo and join over 89361 developers using our products."> <meta name="author" content="Themesberg"> <meta name="csrf-token" content="KccShmpYC1ytGpNyDSamoT0QuZZAUmebgh20dn04"> <meta name="image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-preview.jpg"> <meta name=”robots” content="index, follow"> <meta name="twitter:title" content="Pixel Pro - Premium Bootstrap 5 UI KIT"> <meta name="twitter:url" content="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"> <meta name="twitter:description" content="Bootstrap 5 UI Kit featuring over 1000 unique components, 35 example pages and a user dashboard. Check the live demo and join over 89361 developers using our products."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@themesberg"> <meta name="twitter:creator" content="@themesberg"> <meta name="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-preview.jpg"> <meta property="og:type" content="og:product" /> <meta property="og:title" content="Pixel Pro - Premium Bootstrap 5 UI KIT"> <meta property="og:description" content="Bootstrap 5 UI Kit featuring over 1000 unique components, 35 example pages and a user dashboard."> <meta property="og:url" content="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"> <meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-preview.jpg"> <meta property="product:brand" content="Themesberg"> <meta property="product:availability" content="in stock"> <meta property="product:condition" content="new"> <meta property="product:price:amount" content="89"> <meta property="product:price:currency" content="USD"> <meta property="product:retailer_item_id" content="pixel-pro-premium-bootstrap-5-ui-kit"> <meta property="product:item_group_id" content="ui-kit_pixel-pro-premium-bootstrap-5-ui-kit"> <meta property="fb:app_id" content="2440134909584662" /> <link rel="apple-touch-icon" sizes="180x180" href="https://themesberg.com/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="https://themesberg.com/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="https://themesberg.com/favicon-16x16.png"> <link rel="manifest" href="https://themesberg.com/site.webmanifest"> <link rel="mask-icon" href="https://themesberg.com/safari-pinned-tab.svg" color="#ff7f66"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-rqn26AG5Pj86AF4SO72RK5fyefcQ/x32DNQfChxWvbXIyXFePlEktwD18fEz+kQU" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" /> <link type="text/css" href="https://themesberg.com/css/themesberg.css" rel="stylesheet"> <script src="https://cdn.usefathom.com/script.js" data-site="ZLGNUJDJ" defer></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> <nav class="navbar navbar-expand-lg navbar-light bg-soft navbar-light"> <div class="container"> <a class="navbar-brand mr-lg-4" href="https://themesberg.com"> <div class="d-flex align-items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64"> <defs> <style> .class-1 { fill: #ff7f66; } .class-2, .class-4 { fill: #2a344f; } .class-2 { opacity: 0.32; isolation: isolate; } .class-3 { opacity: 0.16; } </style> </defs> <title>logo</title> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_1-2" data-name="Layer 1"> <g id="Group_16" data-name="Group 16"> <g id="Group_15" data-name="Group 15"> <g id="Group_12" data-name="Group 12"> <path id="Path_35" data-name="Path 35" class="class-1" d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z" /> <path id="Path_36" data-name="Path 36" class="class-1" d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z" /> <path id="Path_37" data-name="Path 37" class="class-1" d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z" /> </g> <path id="Path_38" data-name="Path 38" class="class-2" d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z" /> <g id="Group_13" data-name="Group 13" class="class-3"> <path id="Path_39" data-name="Path 39" class="class-4" d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z" /> <path id="Path_40" data-name="Path 40" class="class-4" d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z" /> <path id="Path_41" data-name="Path 41" class="class-4" d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z" /> </g> </g> </g> </g> </g> </svg> <p class="ml-2 mb-0 logo-text "> Themesberg</p> </div> </a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse pt-3 pt-lg-0" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a href="https://themesberg.com/themes" class="nav-link">Themes</a> </li> <li class="nav-item"> <a href="https://themesberg.com/blog" class="nav-link">Blog</a> </li> <li class="nav-item"> <a href="https://themesberg.com/contact" class="nav-link">Contact</a> </li> </ul> <div class="d-flex align-items-center"> <div class="d-flex align-items-center"> <a href="https://themesberg.com/login" class="btn btn-sm btn-outline-primary mt-2 mt-lg-0" data-toggle="tooltip" data-placement="bottom" title="Join 89361 developers to access Free Themes"> <i class="fad fa-sign-in-alt mr-2"></i>Login/Register </a> </div> </div> </div> </div> </nav> </header> <nav class="navbar navbar-product navbar-expand-lg navbar-light bg-soft navbar-light" style="display: none"> <div class="container"> <a class="navbar-brand mr-lg-4" href="https://themesberg.com"> <div class="d-flex align-items-center"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64"> <defs> <style> .class-1 { fill: #ff7f66; } .class-2, .class-4 { fill: #2a344f; } .class-2 { opacity: 0.32; isolation: isolate; } .class-3 { opacity: 0.16; } </style> </defs> <title>logo</title> <g id="Layer_2" data-name="Layer 2"> <g id="Layer_1-2" data-name="Layer 1"> <g id="Group_16" data-name="Group 16"> <g id="Group_15" data-name="Group 15"> <g id="Group_12" data-name="Group 12"> <path id="Path_35" data-name="Path 35" class="class-1" d="M53.52,1.87l-22,5.39a1.61,1.61,0,0,1-1.23-.21L19.89.25a1.57,1.57,0,0,0-1.3-.19l-18,5.3A.77.77,0,0,0,0,6.09V16.87L18.59,11.4a1.57,1.57,0,0,1,1.3.19l10.4,6.79a1.53,1.53,0,0,0,1.23.21L54,13.09V2.23a.39.39,0,0,0-.39-.38Z" /> <path id="Path_36" data-name="Path 36" class="class-1" d="M40.25,27.84l-8.73,2.1a1.57,1.57,0,0,1-1.23-.21l-10.4-6.8a.37.37,0,0,0-.53.11.31.31,0,0,0-.07.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.57,1.57,0,0,0,1.23.2l9.23-2.21A6.86,6.86,0,0,0,46,32.45v-.21a4.62,4.62,0,0,0-4.68-4.55A4.93,4.93,0,0,0,40.25,27.84Z" /> <path id="Path_37" data-name="Path 37" class="class-1" d="M40.25,50.52l-8.73,2.1a1.61,1.61,0,0,1-1.23-.21l-10.4-6.8a.38.38,0,0,0-.53.1.35.35,0,0,0-.07.21V56.15a.75.75,0,0,0,.34.63l10.66,7a1.53,1.53,0,0,0,1.23.21l9.23-2.22A6.84,6.84,0,0,0,46,55.13v-.21a4.62,4.62,0,0,0-4.68-4.55A4.39,4.39,0,0,0,40.25,50.52Z" /> </g> <path id="Path_38" data-name="Path 38" class="class-2" d="M30.86,41.29V30a1.63,1.63,0,0,0,.66,0L35.28,29l2.2,10.8-6,1.46A1.47,1.47,0,0,1,30.86,41.29Zm8.82,9.33-8.16,2a1.63,1.63,0,0,1-.66,0V64a1.63,1.63,0,0,0,.66,0l10.36-2.54Zm-8.82-32a1.63,1.63,0,0,0,.66,0l1.57-.38L30.86,7.28Z" /> <g id="Group_13" data-name="Group 13" class="class-3"> <path id="Path_39" data-name="Path 39" class="class-4" d="M19.29,11.36a1.82,1.82,0,0,1,.6.23l10.4,6.8a1.41,1.41,0,0,0,.57.22V7.27a1.41,1.41,0,0,1-.57-.22L19.89.25a1.82,1.82,0,0,0-.6-.23Z" /> <path id="Path_40" data-name="Path 40" class="class-4" d="M30.86,52.64a1.67,1.67,0,0,1-.57-.23l-10.4-6.8a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V56.15a.75.75,0,0,0,.34.63l10.66,7a1.73,1.73,0,0,0,.57.22Z" /> <path id="Path_41" data-name="Path 41" class="class-4" d="M19.89,22.93a.39.39,0,0,0-.54.11.36.36,0,0,0-.06.2V33.47a.75.75,0,0,0,.34.63l10.66,7a1.58,1.58,0,0,0,.57.22V30a1.43,1.43,0,0,1-.57-.23Z" /> </g> </g> </g> </g> </g> </svg> <p class="ml-2 mb-0 logo-text "> Themesberg</p> </div> </a> <div class="d-flex flex-wrap"> <div class="dropdown d-inline-block"> <div class="d-flex align-items-center" id="livePreviewDropdown" data-toggle="dropdown"> <button class="btn btn-sm btn-dark mr-3" style="background: #803C68; border-color: #803C68 !important"> Live preview <span class="fad fa-external-link ml-2"></span> </button> </div> <div class="dropdown-menu dropdown-menu-md shadow-sm mt-2" aria-labelledby="livePreviewDropdown"> <a class="dropdown-item" href="https://demo.themesberg.com/pixel-pro/v5/index.html" target="_blank" rel="nofollow noopener">Pixel Pro v5.4 (Bootstrap 5)</a> <a class="dropdown-item" href="https://demo.themesberg.com/pixel-pro/v4/index.html" target="_blank" rel="nofollow noopener">Pixel Pro v4 (Bootstrap 4.5)</a> </div> </div> <a data-scroll href="#pricing" class="btn btn-sm btn-dark animate-up-2 mr-3 d-none d-md-inline"> <span class="btn-inner-icon mr-2"><i class="fad fa-shopping-cart"></i></span>Purchase - <span class="currency">$</span><span class="standard_price">89</span> </a> <a href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank" role="button" class="btn btn-gray animate-up-2 btn-sm d-none d-md-inline"> <span class="btn-inner-text"><span class="far fa-books mr-2"></span> Docs v5.4.0</span> </a> <a href="https://themesberg.com/product/ui-kit/pixel-free-bootstrap-5-ui-kit" role="button" class="btn btn-sm btn-outline-dark animate-up-2 ml-3 d-none d-md-inline"> Get Free Demo </a> </div> </div> </nav> <main> <div itemscope itemtype="https://schema.org/Product"> <section class="section section-xl pt-lg-5 pt-3 pb-lg-7 bg-soft o-hidden justify-content-center position-relative"> <div class="container"> <div class="row justify-content-between align-items-center"> <div class="col-12 col-lg-7 mb-5 mb-lg-0"> <nav aria-label="breadcrumb"> <ol class="breadcrumb breadcrumb-gray breadcrumb-product text-dark breadcrumb-transparent mb-3"> <li class="breadcrumb-item"><a href="https://themesberg.com/themes">Themes</a></li> <li class="breadcrumb-item "><a href="https://themesberg.com/templates/ui-kit">UI Kits</a> </li> <li class="breadcrumb-item active" aria-current="page">Pixel Pro</li> </ol> </nav> <h1 class="mb-2 h2" itemprop="name">Pixel Pro - Premium Bootstrap 5 UI KIT</h1> <p class="mb-4 text-md font-weight-light">Premium Bootstrap 5 UI Kit with user dashboard</p><span class="d-none" itemprop="sku">1</span> <div class="d-flex"> <a class="d-flex justify-content-center" href="#reviews" itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating"> <span class="d-flex justify-content-center mb-2"> <i class="star fa-star fas text-warning mr-2"> </i> <i class="star fa-star fas text-warning mr-2"> </i> <i class="star fa-star fas text-warning mr-2"> </i> <i class="star fa-star fas text-warning mr-2"> </i> <i class="star fa-star fas text-warning "> </i> </span> <span class="text-sm text-gray-700 ml-2"><span class="font-weight-normal"><span itemprop="ratingValue">5.0</span> out of 5</span> (<span itemprop="reviewCount">6</span> Reviews)</span> </a> </div> <div class="mt-4"> <div class="dropdown d-inline-block"> <div class="d-flex align-items-center" id="livePreviewDropdown" data-toggle="dropdown"> <button class="btn btn-dark mr-3" style="background: #803C68; border-color: #803C68 !important"> Live preview <span class="fad fa-external-link ml-2"></span> </button> </div> <div class="dropdown-menu dropdown-menu-md shadow-sm mt-2" aria-labelledby="livePreviewDropdown"> <a class="dropdown-item" href="https://demo.themesberg.com/pixel-pro/v5/index.html" target="_blank" rel="nofollow noopener">Pixel Pro v5.4 (Bootstrap 5)</a> <a class="dropdown-item" href="https://demo.themesberg.com/pixel-pro/v4/index.html" target="_blank" rel="nofollow noopener">Pixel Pro v4 (Bootstrap 4.5)</a> </div> </div> <a data-scroll href="#pricing" class="btn btn-dark animate-up-2"> <span class="btn-inner-icon mr-2"><i class="fad fa-shopping-cart"></i></span>Purchase - <span class="currency">$</span><span class="standard_price">89</span> </a> </div> </div> <div class="col-12 col-lg-5 mb-4 mb-lg-0"> <div class="product-card product-card-main show-info card shadow-xl border-0 mb-0" data-product-color="#803C68"> <div class="card border-0 bg-transparent"> <a href="https://demo.themesberg.com/pixel-pro/v5/" rel="noopener nofollow" target="_blank"> <figure> <img src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-preview.jpg" class="card-img-top rounded-md" alt="Pixel Pro - Premium Bootstrap 5 UI KIT Preview" itemprop="image"> <figcaption class="show-on-hover"> <span class="btn btn-tertiary px-4" style="background: #803C68; border-color: #803C68 !important"> <span class="btn-inner-text">Live preview</span> </span> </figcaption> </figure> </a> </div> </div> </div> </div> </div> </section> <div class="section pt-4 pt-xl-0"> <div class="container mt-n5"> <nav class="mb-lg-6 mb-5"> <div class="nav nav-tabs flex-column flex-md-row shadow-sm border-soft justify-content-around bg-white rounded py-4" id="nav-tab" role="tablist"> <a class="nav-item nav-link" href="#overview"> <span class="fad fa-file-alt mr-2"></span>Overview </a> <a class="nav-item nav-link" href="#pages"> <span class="fad fa-file-image mr-2"></span>Pages </a> <a class="nav-item nav-link" href="#folder-structure"> <span class="fad fa-folder-tree mr-2"></span>Folder Structure </a> <a class="nav-item nav-link" href="#reviews"> <span class="fad fa-comment-lines mr-2"></span>Reviews </a> <a class="nav-item nav-link" href="#changelog"> <span class="fad fa-clipboard-list mr-2"></span>Changelog </a> </div> </nav> <div class="row justify-content-between" id="overview"> <div class="col-12 col-xl-7 product-description mb-4 mb-lg-0 read-more " id="product-description" itemprop="description"> <article> <p>Pixel Pro is a premium <strong>Bootstrap 5 UI Kit without jQuery</strong> featuring over 1000 components, 50+ sections and 35 example pages including a fully fledged user dashboard.</p> <p>Pixel is available in both the latest stable version of Bootstrap 4.5 and the new Bootstrap 5 version without jQuery:</p> <ul> <li> <a href="https://demo.themesberg.com/pixel-pro/v5/" target="_blank" rel="nofollow">Pixel Pro Bootstrap 5</a> </li> <li> <a href="https://demo.themesberg.com/pixel-pro/v4/" target="_blank" rel="nofollow">Pixel Pro Bootstrap 4.5</a> </li> </ul> <p><i class="far fa-info-circle mr-2"></i> You get both versions if your purchase this item.</p> <h2 class="mt-5 mb-4 h4">1000+ Components</h2> <p>Buttons, timelines, blog cards, profile cards, tables, accordions... you name it and we have it.</p> <p>Our components are a perfect extension of Bootstrap 4 so you will find it very easy to work with our code if you're familiar with their class names and styles. Furthermore, we've made sure to that <strong>all components are well documented.</strong></p> <p>Our components are created by the <strong>Object Oriented CSS</strong> principle, which means that the classes can be combined each other. You want to make a rounded button, but with the secondary color and an animation? Great! All you have to do is add .btn, .btn-rounded, .btn-secondary and .animate-up-2. How awesome is that?</p> <h2 class="mt-5 mb-4 h4">50+ Sections</h2> <p>Sections are made up of components. These are the big boys and they include the navigation bars, footers, about sections, contact sections and many more.</p> <p>We believe that our navigation bars are one of the most customizable ones out there. You can change the whole color scheme just by changing a letter amongst the classes. Why not check them out under the "Sections" category?</p> <h2 class="mt-5 mb-4 h4">35 Example Pages</h2> <p>These are the last building blocks to build an awesome website. We made sure to offer you a few example pages to prove how useful and great our UI Kit is. You'll find landing pages for app presentations, to showcase your freelancer profile and even a cryptocurrency themed page.</p> <p>Additionally you will get many secondary utility pages, such as pricing, about, contact, support center, careers, authentication pages and many more</p> <h2 class="mt-5 mb-4 h4">Dashboard</h2> <p>Pixel Pro also comes with a <a href="https://demo.themesberg.com/pixel-pro/html/dashboard/account.html" target="_blank">user dashboard</a> containing charts, vectorial maps, statistics, cards, messaging, user settings, billing and many more. You can use this dashboard for a user control panel for almost any scenario.</p> <h2 class="mt-5 mb-4 h4">Bootstrap 5 + Vanilla JS (no jQuery)</h2> <p>Since the <a href="https://themesberg.com/blog/bootstrap/bootstrap-version-5-alpha-whats-new" target="_blank">release of the new version 5 of Bootstrap</a> we know that the CSS Framework no longer requires jQuery as a dependency.</p> <p>Version 5 of Pixel Pro no longer has jQuery included and all libraries and scripts are now Vanilla JS reducing overall loading time and simplifying integration into other front-end web technologies such as React, Angular, Vue and so on.</p> <p>However, Pixel Pro v4 is based on the latest stable version of Bootstrap v4.5 still including jQuery. By purchasing Pixel Pro you will get both version with and without jQuery and be able to download them from your dashboard.</p> <h2 class="mt-5 mb-4 h4">Advanced development flow</h2> <p>If you purchase Pixel Pro you will get an advanced development workflow package including Sass files and a Gulp commands file that will let you build minified and unminified project files with the ability to even add certain blocks of code based on your environment.</p> <h2 class="mt-5 mb-4 h4">Well documented</h2> <p>Pixel Pro is thoroughly documented on how to get started, how to use the building tools, components, plugins and many more. Learn how to get started with Pixel Pro by clicking <a href="https://themesberg.com/docs/pixel-bootstrap/getting-started/quick-start/" target="_blank">here</a>.</p> </article> <span class="toggle-read-more" data-target="#product-description">Read more <i class="fad fa-chevron-circle-down ml-1"></i></span> </div> <div class="col-12 col-xl-4 mt-3 mt-lg-0"> <ul class="d-flex justify-content-center list-style-none mb-4"> <li><button class="btn btn-xl mb-2 mr-3 btn-icon-only rounded-circle btn-white" data-toggle="tooltip" title="Built with Bootstrap 5 - World's most popular CSS Framework"> <span class="btn-inner-icon"><svg xmlns="http://www.w3.org/2000/svg" height="32" class="d-block" viewBox="0 0 118 94" role="img"><title>Bootstrap 5</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="#7F16F9"></path></svg></span> </button></li> <li> <button class="btn btn-xl mb-2 mr-3 btn-icon-only rounded-circle btn-white" data-toggle="tooltip" title="W3C validated and fully responsive HTML5"> <span class="btn-inner-icon"><i class="fab fa-html5 text-xxl text-html"></i></span> </button> </li> <li><button class="btn btn-xl mb-2 mr-3 btn-icon-only rounded-circle btn-white" data-toggle="tooltip" title="SASS files for experienced Front End Developers"> <span class="btn-inner-icon"><i class="fab fa-sass text-xxl text-sass"></i></span> </button></li> <li><button class="btn btn-xl mb-2 mr-3 btn-icon-only rounded-circle btn-white" data-toggle="tooltip" title="Gulp commands - enhanced development workflow"> <span class="btn-inner-icon"><i class="fab fa-gulp text-xxl text-gulp"></i></span> </button></li> </li> </ul> <div class="card bg-soft border-soft p-5 mb-3"> <div class="text-center mb-3 mb-lg-0"> <a href="https://themesberg.com/docs/bootstrap-5/pixel/getting-started/quick-start/" target="_blank" role="button" class="btn btn-gray animate-up-2 btn-block"> <span class="btn-inner-text"><span class="far fa-books mr-2"></span> Docs v5.4.0</span> </a> <a href="https://themesberg.com/product/ui-kit/pixel-free-bootstrap-5-ui-kit" role="button" class="btn btn-block btn-outline-dark animate-up-2 mt-3"> Get Free Demo </a> </div> </div> <div class="card bg-soft border-soft p-5 mb-5"> <div class="d-block justify-content-between align-items-center mb-0"> <div class="pb-3 mb-3 font-weight-normal"> <div class="d-flex align-items-center justify-content-center"> <i class="fas fa-cart-arrow-down downloads-icon mr-2"></i> <span class="h5 m-0">417 purchases</span> </div> </div> <div class="pb-3 mb-3 border-bottom" itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <meta itemprop="priceCurrency" content="USD" /> <meta itemprop="availability" content="instock"> <meta itemprop="url" content="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"> <span class="text-gray font-weight-normal"><i class="fad fa-tags mr-2"></i> Price: </span> <span class="font-weight-normal"><span class="currency">$</span><span itemprop="price" class="standard_price">89</span> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-bullhorn mr-2"></i> Released: </span> <span class="font-weight-normal">5 years ago</span> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-sync-alt mr-2"></i> Updated: </span> <span class="font-weight-normal">3 years ago</span> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-code-branch mr-2"></i> Version: </span> <span class="font-weight-normal">5.4.0</span> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-list mr-2"></i> Category: </span> <a href="https://themesberg.com/templates/ui-kit" class="text-gray font-weight-normal">UI Kits</a> </div> <div class="pb-3 mb-3 border-bottom"> <span class="text-gray font-weight-normal"><i class="fad fa-file-contract mr-2"></i> Well Documented </span> </div> <ul class="list-style-none mb-0 mt-5"> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> 6 months premium support included</li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> 100% W3C valid HTML5 files</li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> Future updates</li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> Fully responsive pages</li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> 30 day <a href="https://themesberg.com/refund-policy" class="font-weight-light">refund policy</a> </li> <li class="font-small mb-2"><i class="fad fa-check-circle mr-1 text-success"></i> Built by <span itemprop="brand">Themesberg</span></li> </ul> </div> </div> </div> </div> <section class="section-sm" id="pages"> <h2 class="mb-3">35 Hand-crafted Example Pages</h2> <p>After downloading <strong>Pixel Pro - Premium Bootstrap 5 UI KIT</strong> you will get 35 high-quality example pages to save you time writing boilerplate code and set up the user interface of your website or web application in no time.</p> <p>Hover over any page below and if you click on one of them you will be able to live preview one of the example pages in your browser.</p> <div class="row mt-5"> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/landing-app.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/landing-app.jpg" alt="Landing App preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Landing App<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/landing-freelancer.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/landing-freelancer.jpg" alt="Landing Freelancer preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Landing Freelancer<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/landing-crypto.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/landing-crypto.jpg" alt="Landing Crypto preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Landing Crypto<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/about.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/about.jpg" alt="About preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">About<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/blog.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/blog.jpg" alt="Blog preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Blog<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/blog-post.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/blog-post.jpg" alt="Blog post preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Blog post<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/pricing.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/pricing.jpg" alt="Pricing preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Pricing<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/contact.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/contact.jpg" alt="Contact preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Contact<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/team.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/team.jpg" alt="Team preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Team<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/profile.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/profile.jpg" alt="Profile preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Profile<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/support.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/support.jpg" alt="Support preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Support<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/support-topic.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/support-topic.jpg" alt="Support topic preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Support topic<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/careers.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/careers.jpg" alt="Careers preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Careers<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/career-single.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/career-single.jpg" alt="Job post preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Job post<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/services.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/services.jpg" alt="Services preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Services<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/terms.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/terms.jpg" alt="Terms preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Terms<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/legal.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/legal.jpg" alt="Legal preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Legal<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/sign-in.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/sign-in.jpg" alt="Sign in preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Sign in<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/sign-up.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/sign-up.jpg" alt="Sign up preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Sign up<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/forgot-password.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/forgot-password.jpg" alt="Forgot password preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Forgot password<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/reset-password.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/reset-password.jpg" alt="Reset password preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Reset password<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/maintenance.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/maintenance.jpg" alt="Maintenance preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Maintenance<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/coming-soon.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/coming-soon.jpg" alt="Coming soon preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Coming soon<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/404.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/404.jpg" alt="404 Not Found preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">404 Not Found<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/500.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/500.jpg" alt="500 Server Error preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">500 Server Error<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/pages/blank.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/blank-page.jpg" alt="Blank page preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Blank page<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/account.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/account.jpg" alt="Dashboard preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Dashboard<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/settings.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/settings.jpg" alt="Settings preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Settings<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/my-items.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/items.jpg" alt="Items preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Items<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/edit-item.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/edit-item.jpg" alt="Edit Item preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Edit Item<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/security.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/security.jpg" alt="Security preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Security<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/invoice.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/invoice.jpg" alt="Invoice preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Invoice<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/billing.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/billing.jpg" alt="Billing preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Billing<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/messages.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/messages.jpg" alt="Messages preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Messages<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> <div class="col-6 col-lg-3 mb-5"> <a href="https://demo.themesberg.com/pixel-pro/v5/html/dashboard/single-message.html" rel="nofollow" target="_blank" class="page-preview scale-up-hover-2"> <img class="shadow-lg rounded scale" src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pages/single-message.jpg" alt="Chatroom preview"> <div class="text-center show-on-hover"> <h6 class="m-0 text-center text-white">Chatroom<i class="fas fa-external-link-alt ml-2"></i></h6> </div> </a> </div> </div> </section> <hr class="bg-soft my-0"> <section class="section-sm mt-5 mt-lg-0 mb-5 mb-lg-0" id="folder-structure"> <h2 class="mb-3">Folder structure</h2> <p>We believe that being transparent when it comes to the code base and the file structure can make you better understand how it is going to be like to actually work with Pixel Pro. </p> <p>Below you can check out the folder structure of this template, and by hovering over each item you can also read an explanation of what the folder contains and what its role is.</p> <div class="mt-5"> <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"> <h4 class="h5">You need only HTML, CSS and Javascript?</h4> <p class="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></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="" data-original-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="" data-original-title="CSS, Images, Fonts and Javascript"><span class="fas fa-folder mr-2"></span> assets</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-title="HTML templates"><span class="fas fa-folder mr-2"></span> html</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-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="" data-original-title="Sass source files"><span class="fas fa-folder mr-2"></span> scss</li> <li data-toggle="tooltip" data-placement="left" title="" data-original-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="" data-original-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="" data-original-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="" data-original-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="" data-original-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="" data-original-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="" data-original-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="" data-original-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="" data-original-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> </div> </section> <hr class="bg-soft my-0"> <section class="section-sm mt-5 mt-lg-0 mb-5 mb-lg-0" id="reviews"> <div class="row"> <div class="col-12 col-lg-4 mb-5 mb-lg-0"> <h2 class="mb-2">Customer reviews</h2> <div class="d-flex"> <span class="mb-2 mr-2"> <i class="star fa-star fas text-warning mr-1"> </i> <i class="star fa-star fas text-warning mr-1"> </i> <i class="star fa-star fas text-warning mr-1"> </i> <i class="star fa-star fas text-warning mr-1"> </i> <i class="star fa-star fas text-warning "> </i> </span> <span class="d-block text-center mb-1 font-weight-normal"><span>5.0</span> out of 5</span> </div> <span class="d-block text-sm text-gray-700">6 Reviews for Pixel Pro</span> </div> <div class="col-12 col-lg-8"> <div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">MW</span> </span> <meta itemprop="datePublished" content="2020-07-01 08:19:06"> <span class="ml-2 text-sm d-none d-md-inline">4 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">The people at Themesberg know how to make a great design (that's also great regarding accessibility). Their products are visually very appealing, and also technically top notch. Very happy with my purchase of Pixel Pro. It is based on Bootstrap, which also makes it a real joy to work with: Bootstrap is very mature and there are lots of resources available.</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Daniel</span> </span> <meta itemprop="datePublished" content="2020-07-03 20:51:13"> <span class="ml-2 text-sm d-none d-md-inline">4 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">The stunning aesthetics, frequent updates, and wonderful customer support that Themesberg provides makes Pixel Pro a great choice for any project, hobby or professional. Highly recommended.</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">ignazio lucenti</span> </span> <meta itemprop="datePublished" content="2020-07-09 14:56:42"> <span class="ml-2 text-sm d-none d-md-inline">4 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">Very good theme: Highly recommended. I needed it for a wordpress project and I integrated it very easily with a bootstrap starter theme.</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">AO</span> </span> <meta itemprop="datePublished" content="2020-08-25 20:19:24"> <span class="ml-2 text-sm d-none d-md-inline">4 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">Amazing template .... highly recommended</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Christopher Baines</span> </span> <meta itemprop="datePublished" content="2020-07-14 13:13:08"> <span class="ml-2 text-sm d-none d-md-inline">4 years ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">What can I say? The theme is beautiful and is very easy yet powerful to use. I have been using this theme since the initial release and it has gone from strength to strength. As far as support goes, it is absolutely outstanding! I lost the email containing my download link after I wiped my computers, 1 email sent to the developers and I had a reply within 5 minutes!! This has happened more time than I care to admit now, but every time the developers have got back to me almost instantly. Now we have a dashboard where we can access our purchases from, so hopefully no more bothering the developers for the download links. Thank you again to everyone involved in creating this theme and the fantastic support.</p> </div> <div itemprop="review" itemscope itemtype="https://schema.org/Review" class="bg-white border shadow-sm p-4 mb-4"> <div class="d-flex justify-content-between mb-4"> <div class="d-flex align-items-center"> <button class="btn btn-xs btn-circle btn-icon-only btn-secondary dropdown-toggle mr-2" aria-haspopup="true" aria-expanded="false"> <span class="fa fa-user"></span> </button> <span itemprop="author" itemscope itemtype="https://schema.org/Person"> <span class="font-weight-normal font-small text-gray-800" itemprop="name">Michael Dance</span> </span> <meta itemprop="datePublished" content="2022-12-15 09:06:46"> <span class="ml-2 text-sm d-none d-md-inline">1 year ago</span> </div> <div class="d-flex justify-content-end align-items-center"> <span class="d-flex justify-content-center"> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning mr-2"></i> <i class="star fa-star fas text-warning "></i> <span itemprop="reviewRating" itemscope itemtype="https://schema.org/Rating" class="d-none"> <span itemprop="ratingValue">5</span> </span> </span> </div> </div> <p class="m-0 text-md" itemprop="reviewBody">Fantastic customer service, fast replies, great theme and UI. This UI kit takes Bootstrap to the next level and for the price you can't go wrong. Highly recommend this company & themes. I will be back for more :) Also to upgrade to the company's</p> </div> <a href="https://themesberg.com/login" rel="nofollow" data-toggle="tooltip" title="Please sign in or download the item to write a review" class="btn btn-primary"><i class="fad fa-comment-alt-edit mr-2"></i> Write a review</a> </div> </div> </div> </section> <hr class="bg-soft my-0"> <section class="section-sm mt-5 mt-lg-0 mb-5 mb-lg-0" id="changelog"> <h2 class="mb-3">Changelog</h2> <p>We believe that providing meaningful updates to our templates are important to keep up with the evolution of the dependencies, libraries, and the new design requirements that the modern day web industry requires.</p> <p>Below you can see the timeline of changes for Pixel Pro since its initial launch 5 years ago.</p> <div class="row mt-5 justify-content-between"> <div class="col-12 col-lg-8"> <h3 class="h4 mb-4">Releases</h3> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_0" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v5.4.0 <span class="mx-2">-</span> <span class="changelog-date">June 12, 2021</span> <span class="badge badge-success ml-3">Latest release</span> </a> <div class="collapse" id="changelog_0"> <ul class="changelog-list text-monospace"> <li>Updated to Bootstrap 5.0.1 stable</li> <li>Fixed GlideJS responsive problems</li> <li>Updated Sign in and Sign up modal and card responsive spacings</li> <li>Remove sections separator shapes</li> <li>Fix the navigation bar sticky colors on mobile</li> <li>Fix the message list dropdown element</li> <li>Fix the item list submit button tablet responsive screen</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_1" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v5.3.1 <span class="mx-2">-</span> <span class="changelog-date">February 16, 2021</span> </a> <div class="collapse" id="changelog_1"> <ul class="changelog-list text-monospace"> <li>Updated to Bootstrap 5 Beta 2</li> <li>Fixed carousel indicators</li> <li>Fixed e-commerce quantity select element</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_2" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v5.3 <span class="mx-2">-</span> <span class="changelog-date">February 10, 2021</span> </a> <div class="collapse" id="changelog_2"> <ul class="changelog-list text-monospace"> <li>Updated to Bootstrap 5 Beta 1</li> <li>Removed vendor folder from Sass and include third-party dependencies only via node_modules</li> <li>Variables are now overridable</li> <li>Improved Sass import structure</li> <li>Added user information and sign out on mobile devices for the dashboard pages</li> <li>Improved overall styling</li> <li>Improved presentation page</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_3" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v5.2 <span class="mx-2">-</span> <span class="changelog-date">December 10, 2020</span> </a> <div class="collapse" id="changelog_3"> <ul class="changelog-list text-monospace"> <li>Updated to Bootstrap 5 Alpha-3</li> <li>Added floating labels</li> <li>Improved design and markup for file upload elements</li> <li>Improved overall user interface</li> <li>Updated the accordion component to match the new markup from BS5 Alpha 3</li> <li>Fixed some device-specific issues</li> <li>Social login buttons are now anchor tags, instead of button elements</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_4" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v5.1 <span class="mx-2">-</span> <span class="changelog-date">July 29, 2020</span> </a> <div class="collapse" id="changelog_4"> <ul class="changelog-list text-monospace"> <li>Fixed menu styles for tablets</li> <li>Fixed some responsive issues</li> <li>Fixed the progress bars</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_5" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v5.0 <span class="mx-2">-</span> <span class="changelog-date">July 20, 2020</span> </a> <div class="collapse" id="changelog_5"> <ul class="changelog-list text-monospace"> <li>Updated Bootstrap to version 5.0 alpha</li> <li>Removed jQuery as a dependency</li> <li>Updated all libraries so that jQuery is no longer required</li> <li>Bug fixes</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_6" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v4.0 <span class="mx-2">-</span> <span class="changelog-date">May 09, 2020</span> <span class="badge badge-info ml-3">Bootstrap v4.5</span> </a> <div class="collapse" id="changelog_6"> <ul class="changelog-list text-monospace"> <li>Added new dashboard pages including user settings, billing, messaging and many more</li> <li>Added many new pages including new landing pages, support center, careers and so on</li> <li>Added charts</li> <li>Added vectorial maps</li> <li>Improved navigation bar markup, accessibility and multi-level dropdowns</li> <li>Improved gulpfile to add analytics tools based on environment build</li> <li>Minor bug fixes</li> <li>Visual improvements across the whole app</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_7" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v3.1 <span class="mx-2">-</span> <span class="changelog-date">April 13, 2020</span> </a> <div class="collapse" id="changelog_7"> <ul class="changelog-list text-monospace"> <li>Updated all colors to comply with WCAG 2.1 Accessibility standards</li> <li>Added E-Commerce components</li> <li>Improve markup and code quality</li> <li>Improve design based on the newest design trends</li> <li>Added Chart JS</li> <li>Created a better online documentation</li> <li>Added fancy loader</li> <li>Updated all example pages to improve quality</li> <li>Added Toasts component</li> <li>Fixed accessibility issues based on WAVE evaluation tool</li> <li>Updated Bootstrap Datepicker</li> <li>Update form styles</li> <li>Update tables</li> <li>Updated some pages markup</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_8" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v2.2 <span class="mx-2">-</span> <span class="changelog-date">August 28, 2020</span> </a> <div class="collapse" id="changelog_8"> <ul class="changelog-list text-monospace"> <li>Added My account page</li> <li>Added My items page</li> <li>Added Edit item page</li> <li>Removed Starter folder (it complicated things more than it did good)</li> <li>Update card borders, shadows & general apperance</li> <li>Input colors now darker for better readability</li> <li>Fix dropdown button border radius</li> <li>Fix input tags color</li> <li>Fix accordion border color</li> <li>Fixed contact page js paths</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_9" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v2.0 <span class="mx-2">-</span> <span class="changelog-date">November 09, 2019</span> </a> <div class="collapse" id="changelog_9"> <ul class="changelog-list text-monospace"> <li>Switch vendor third party libraries to npm packages</li> <li>Slightly updated gulpfile.js file to move node_modules to the dist and html&css folder</li> <li>Start using gulp-include to DRY navigation bars, scripts, heading code and the footers</li> <li>Removed unneeded role="button" attributes for most of the links</li> <li>Fix wrapping issues for tablet sizes across all components</li> <li>Major updates to the file structure, the src folder is now no longer being served directly to BrowserSync but a .temp folder</li> <li>Added a starter template folder to ease new project setup</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_10" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v1.1 <span class="mx-2">-</span> <span class="changelog-date">September 09, 2019</span> </a> <div class="collapse" id="changelog_10"> <ul class="changelog-list text-monospace"> <li>Updated to Gulp 4</li> <li>Added better images</li> <li>Fixed some design inconsistencies</li> <li>Created a separate page to showcase all available pages</li> </ul> </div> </div> <div class="mb-4"> <a href="#" class="h5 changelog-toggle" data-target="#changelog_11" data-toggle="collapse"> <span class="fad fa-tags mr-2"></span> v1.0 <span class="mx-2">-</span> <span class="changelog-date">July 09, 2019</span> </a> <div class="collapse" id="changelog_11"> <ul class="changelog-list text-monospace"> <li>Initial release files</li> </ul> </div> </div> </div> </div> </section> <hr class="bg-soft my-0"> <aside id="pricing" class="section section-md pb-0"> <div class="row justify-content-center"> <div class="col-12 text-center mb-3"> <h2 class="mb-3">Choose the right plan for your business</h2> <p class="text-gray">Trusted by over 89361 developers and software companies </p> </div> <div class="text-gray d-flex align-items-center justify-content-center flex-wrap mb-5 mb-lg-6"> <a href="https://speckyboy.com/weekly-news-for-designers-503/" target="_blank" rel="nofollow" class="mr-4 mr-sm-5 grayscale-hover mb-3 mr-3"> <img class="logo-featured-in lazy" data-src="https://themesberg.com/img/brands/speckyboy-logo.png" alt="Speckyboy Logo"> </a> <a href="https://designshack.net/articles/trends/modern-ui-design/" target="_blank" rel="nofollow" class="mr-4 mr-sm-5 grayscale-hover mb-3 mr-3"> <img class="logo-featured-in lazy mt-1" data-src="https://themesberg.com/img/brands/designshack-logo.png" alt="Designshack Logo"> </a> <a href="https://news.ycombinator.com/item?id=20780376" target="_blank" rel="nofollow" class="mr-4 mr-sm-5 grayscale-hover mb-3 mr-3"> <img class="logo-featured-in lazy mt-1" data-src="https://themesberg.com/img/brands/hackernews-logo.png" alt="Hackernews Logo"> </a> <a href="https://www.awwwards.com/themesberg/" target="_blank" rel="nofollow" class="mr-4 mr-sm-5 grayscale-hover mb-3 mr-3"> <svg width="141" height="22.3" viewBox="0 0 280 44.3"> <path fill="#837D75" id="logo-a1" d="M1.2,20.8c1-5.1,5.5-8.7,11.9-8.7c7.4,0,13.1,3.1,13.1,13.1v18.6h-6.3l-0.8-4c-2.2,2.7-5.1,4.5-9.6,4.5 C4.2,44.3,0,41,0,34.8s5.5-10.2,13.3-10.2h5.2v-1.4c0-3.5-2.6-4.6-5.5-4.6c-2.2,0-4.4,0.7-5.4,3.6L1.2,20.8z M11.3,37.8 c3.5,0,7.2-2.4,7.2-6.4v-0.6h-5.1c-3.3-0.1-5.3,1.2-5.3,3.9C8.1,36.2,9.2,37.8,11.3,37.8z"> </path> <path fill="#837D75" id="logo-a2" d="M151,20.8c1-5.1,5.5-8.7,11.9-8.7c7.4,0,13.1,3.1,13.1,13.1v18.6h-6.3l-0.8-4c-2.2,2.7-5.1,4.5-9.6,4.5 c-5.3,0-9.5-3.3-9.5-9.5s5.5-10.2,13.3-10.2h5.2v-1.4c0-3.5-2.6-4.6-5.5-4.6c-2.2,0-4.4,0.7-5.4,3.6L151,20.8z M161.1,37.8 c3.5,0,7.2-2.4,7.2-6.4v-0.6h-5.1c-3.3,0-5.3,1.2-5.3,4C157.9,36.2,159,37.8,161.1,37.8z"> </path> <path fill="#837D75" id="logo-r" d="M183,43.9V12.6h7.7v5.1c2.2-3.7,5.7-5.6,9.2-5.6c1.4,0,2.5,0.2,3.8,0.6l-1.4,7.1c-0.9-0.6-1.9-0.9-3.2-0.9 c-4.5,0-8.4,3.7-8.4,13.8v11.1L183,43.9L183,43.9z"> </path> <path fill="#837D75" id="logo-d" d="M220.1,12.1c3.2,0,6.2,1.6,7.6,3.3V0h7.7v43.9h-7.7v-3.2c-0.9,1.6-3.7,3.7-7.6,3.7c-9.4,0-14.2-6.5-14.2-16.1 S210.7,12.1,220.1,12.1z M221.2,37.8c4,0,7.2-3.3,7.2-9.5s-3.2-9.5-7.2-9.5s-7.2,3.3-7.2,9.5S217.2,37.8,221.2,37.8z"> </path> <path fill="#837D75" id="logo-s" d="M263.2,17.1l-4.6,4.2c-1.4-1.9-3.5-2.7-5.2-2.7c-1.5,0-2.9,0.9-2.9,2.6c0,1.4,1.1,2.4,3,3 c4.3,1.6,11.3,2.9,11.3,9.6c0,5.7-4.3,10.4-11.1,10.4c-6.5,0-10.9-4.6-12.4-8.4l6.1-3.3c1.1,3,3.2,5.2,6.3,5.2 c2.4,0,3.9-1.1,3.9-3.4c0-2.6-4-3.2-7.8-4.8c-3.4-1.4-6.3-3.6-6.3-8.4s3.9-9.1,10-9.1C257.6,12,261.3,14.1,263.2,17.1z"> </path> <polygon fill="#837D75" id="logo-w2" points="103,12.6 97.5,34.1 92.2,12.6 85,12.6 79.8,34.1 75.4,21.6 74.9,23.1 72.4,31.1 76.4,43.9 83.2,43.9 88.6,23.7 94,43.9 100.8,43.9 110.8,12.6"> </polygon> <polygon fill="#837D75" id="logo-w3" points="140.2,12.6 134.6,34.1 129.3,12.6 122.1,12.6 116.9,34.1 112.5,21.6 112,23.1 109.5,31.1 113.5,43.9 120.3,43.9 125.7,23.7 131.1,43.9 137.9,43.9 147.9,12.6"> </polygon> <path fill="#837D75" id="logo-w1" d="M73.7,12.6l-10,31.2h-6.8l-5.4-20.2l-5.4,20.3h-6.8l-10-31.2h7.8l5.6,21.4L48,12.7h7.1l5.3,21.4L66,12.7 L73.7,12.6L73.7,12.6z"> </path> <path fill="#837D75" id="logo-p" d="M274.8,33.8c3,0,5.2,2.2,5.2,5.2s-2.2,5.2-5.2,5.2s-5.2-2.2-5.2-5.2S271.9,33.8,274.8,33.8z"> </path> </svg> </a> <a href="https://www.producthunt.com/posts/themesberg" target="_blank" rel="nofollow" class="mr-4 mr-sm-5 grayscale-hover mb-3 mr-3"> <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"> <g fill="none" fill-rule="evenodd"> <path d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20" fill="#DA552F"></path> <path d="M22.667 20H17v-6h5.667a3 3 0 0 1 0 6m0-10H13v20h4v-6h5.667a7 7 0 1 0 0-14" fill="#FFF"></path> </g> </svg> </a> </div> </div> <div class="row"> <div class="col-12"> <div class="checkout-wrapper"> <div id="checkout-loading" class="bg-white" style="display: none; z-index: 9999; width: 2.7rem; height: 2.7rem;"> <div class="spinner-border text-primary bg-white" style="width: 2.7rem; height: 2.7rem;" role="status"> <span class="sr-only">Loading...</span> </div> </div> <div class="checkout-container"></div> </div> <div id="checkout-success" class="px-10" style="display: none"> <div class="alert alert-success" role="alert"><span class="d-block font-weight-normal"><i class="fad fa-check-circle mr-2"></i>The order has been succesfully placed</span></div> <p class="font-weight-normal text-gray-600 font-small">You'll get an email from Paddle for the invoice and another one from Themesberg with the instructions to get access to the product. It may take up to 5 minutes for the email to arrive. Thank you for purchasing from Themesberg.</p> </div> </div> </div> <div class="row mt-lg-5" id="pricing-table"> <div class="col-12 col-lg-4"> <div class="card shadow-sm rounded-md border-light mb-3 px-2"> <div class="card-header p-4"> <div class="d-flex mb-3"> <span class="h5 mb-0"><span class="currency">$</span></span> <span class="price display-2 mb-0 text-dark standard_price">89</span> </div> <h3 class="mb-3 text-dark">Freelancer</h3> <p class="font-weight-normal text-sm mb-0">Great for personal use and for your side projects.</p> </div> <div class="card-body pt-2"> <ul class="list-group"> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Full documentation</li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Domains: <strong>1</strong></li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Team size: <strong>1 developer</strong></li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Premium support: <strong>6 months</strong> </li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Free updates: <strong>6 months</strong></li> </ul> </div> <div class="card-footer pt-2 px-4 pb-4"> <button class="btn w-100 btn-primary animate-up-2 paddle-button" data-theme="none" data-product="593410" id="standard_price_button"> Buy now </button> </div> </div> <a href="https://themesberg.com/licensing#freelancer" data-toggle="tooltip" data-placement="bottom" title="Something unclear? Click to read the full Freelancer license." class="font-small text-gray text-center d-block my-4"><i class="fal fa-question-circle mr-2"></i> Freelancer License</a> </div> <div class="col-12 col-lg-4"> <div class="card shadow-sm border-light rounded-md mb-3 pt-lg-3 pb-lg-5 mt-lg-n4"> <div class="card-header p-4"> <div class="d-flex mb-3 text-dark"> <span class="h5 mb-0"><span class="currency">$</span></span> <span class="price display-2 text-dark mb-0 company_price">239</span> </div> <h3 class="mb-3 text-dark">Company</h3> <p class="font-weight-normal text-sm mb-0">Relevant for multiple users and extended support.</p> </div> <div class="card-body pt-2"> <ul class="list-group"> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Full documentation</li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Domains: <strong>unlimited</strong></li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Team size: <strong>1-5 developers</strong> </li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Premium support: <strong>12 months</strong> </li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Free updates: <strong>lifetime</strong></li> </ul> </div> <div class="card-footer pt-2 px-4 pb-0"> <button class="btn w-100 btn-primary animate-up-2 paddle-button" data-theme="none" data-product="594231" id="company_price_button"> Buy now </button> </div> </div> <a href="https://themesberg.com/licensing#company" data-toggle="tooltip" data-placement="bottom" title="Something unclear? Click to read the full Company license." class="font-small text-gray text-center d-block my-4"><i class="fal fa-question-circle mr-2"></i> Company License</a> </div> <div class="col-12 col-lg-4"> <div class="card rounded-md border-light shadow-sm mb-3"> <div class="card-header p-4"> <div class="d-flex mb-3"> <span class="h5 mb-0"><span class="currency">$</span></span> <span class="price display-2 text-dark mb-0 enterprise_price">599</span> </div> <h3 class="mb-3 text-dark">Enterprise</h3> <p class="font-weight-normal text-sm mb-0">Best for large scale uses and extended redistribution rights.</p> </div> <div class="card-body pt-2"> <ul class="list-group"> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Full documentation</li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Domains: <strong>unlimited</strong></li> <li class="list-group-item font-weight-normal text-md py-2 pl-0 d-flex align-items-center"> <span class="icon-success"></span>Team size: <div class="form-group ml-3 mb-0"> <select class="form-control form-control-sm" id="enterpriseDevelopersSelect"> <option>5-15 developers</option> <option>15+ developers</option> </select> </div> </li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Premium support: <strong>24 months</strong> </li> <li class="list-group-item font-weight-normal text-md py-2 pl-0"><span class="icon-success"></span>Free updates: <strong>lifetime</strong></li> </ul> </div> <div class="card-footer pt-2 px-4 pb-4"> <button class="btn w-100 btn-primary animate-up-2 paddle-button" data-theme="none" data-product="594233" id="enterprise_price_button"> Buy now </button> <a href="/cdn-cgi/l/email-protection#8df7e2e1f9ece3cdf9e5e8e0e8feefe8ffeaa3eee2e0b2def8efe7e8eef9b0c8e3f9e8fffdffe4fee8a8bfbddfe8fcf8e8fef9" style="display: none" class="btn w-100 btn-primary animate-up-2" id="enterpriseContactButton"> Contact us </a> </div> </div> <a href="https://themesberg.com/licensing#enterprise" data-toggle="tooltip" data-placement="bottom" title="Something unclear? Click to read the full Enterprise license." class="font-small text-gray text-center d-block my-4"><i class="fal fa-question-circle mr-2"></i> Enterprise License</a> </div> </div> <div class="row"> <div class="col-12 d-flex justify-content-center align-items-center flex-column text-center mt-lg-5 mb-5"> <span class="d-block font-weight-normal text-gray font-small mb-4">Notice: Price displayed excludes VAT. You can add your VAT ID after you press "Buy now" <br> if you are a registered company within the European Union.</span> <span class="d-block font-weight-normal text-gray small"><i class="fad fa-shield-check text-success mr-1"></i> Secure Payment via Paddle</span> <ul class="list-inline pt-3 mb-4"> <li class="list-inline-item mr-3"> <svg height="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 20" style="enable-background:new 0 0 32 20;" xml:space="preserve"> <g> <path fill="#929397" d="M20,10c0,5.5-4.5,9.9-10,9.9c-5.5,0-10-4.4-10-9.9c0-5.5,4.5-9.9,10-9.9C15.5,0.1,20,4.5,20,10z"/> <path fill="#d2d0d0" d="M22,0.1c-2.2,0-4.3,0.7-6,2l0,0c0.3,0.3,0.7,0.5,1,0.9l-2.1,0c-0.3,0.3-0.6,0.7-0.9,1h3.7 c0.3,0.3,0.5,0.6,0.8,1h-5.1c-0.2,0.3-0.4,0.6-0.5,1H19c0.2,0.3,0.3,0.6,0.4,1h-7c-0.1,0.3-0.2,0.7-0.3,1h7.6 c0.1,0.3,0.1,0.7,0.2,1H12c0,0.3,0,0.7-0.1,1h8c0,0.4,0,0.7-0.1,1H12c0,0.3,0.1,0.7,0.1,1h7.5c-0.1,0.3-0.2,0.7-0.3,1h-7 c0.1,0.3,0.2,0.7,0.4,1H19c-0.2,0.4-0.4,0.6-0.6,1h-5.1c0.2,0.3,0.4,0.7,0.7,1l3.7,0.1c-0.3,0.4-0.7,0.6-1.1,0.9c0,0-0.6,0-1.8,0 c1.9,1.9,4.5,3,7.2,3c5.5,0,10-4.4,10-9.9C32,4.5,27.5,0.1,22,0.1L22,0.1z"/> </g> </svg> </li> <li class="list-inline-item mr-3"> <svg height="16" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 16" style="enable-background:new 0 0 50 16;" xml:space="preserve"> <g> <path fill="#929397" d="M20.4,0l-2.5,15.8h4L24.4,0H20.4z M32.5,6.5c-1.4-0.7-2.3-1.2-2.3-1.9c0-0.7,0.7-1.3,2.3-1.3c1,0,2,0.2,3,0.6 L35.9,4l0.5-3.3c-1.1-0.4-2.4-0.7-3.6-0.7c-4,0-6.7,2.1-6.8,5.1c0,2.2,2,3.4,3.5,4.2c1.5,0.8,2.1,1.2,2.1,1.9c0,1-1.3,1.5-2.4,1.5 c-1.6,0-2.5-0.2-3.8-0.8L25,11.7l-0.6,3.4c0.9,0.4,2.7,0.8,4.5,0.8c4.2,0,6.9-2.1,7-5.2C35.9,8.9,34.8,7.6,32.5,6.5L32.5,6.5z M46.7,0.1h-3.1c-1,0-1.7,0.3-2.1,1.3l-6,14.5h4.2l1.2-3.1h4.7l0.6,3.2H50L46.7,0.1L46.7,0.1z M42.1,9.6c0.1,0,1.6-5.1,1.6-5.1 l1.2,5.1L42.1,9.6L42.1,9.6z M14.6,0l-3.9,10.8l-0.4-2.1c-0.7-2.4-3-5.1-5.5-6.4l3.6,13.6h4.2L18.8,0L14.6,0C14.6,0,14.6,0,14.6,0z "/> <path fill="#d2d0d0" d="M8.9,2.1c-0.3-1.2-1.3-2-2.6-2H0.1L0,0.3c4.8,1.2,8.9,5,10.2,8.5L8.9,2.1z"/> </g> </svg> </li> <li class="list-inline-item"> <svg height="20" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 62 17" style="enable-background:new 0 0 62 17;" xml:space="preserve"> <g> <path fill="#929397" d="M42,0.3h-4.7c-0.3,0-0.6,0.3-0.7,0.6l-2,12.3c0,0.3,0.1,0.4,0.4,0.4h2.5c0.3,0,0.4-0.1,0.4-0.4l0.6-3.5 c0-0.3,0.3-0.6,0.7-0.6h1.5c3.2,0,5-1.5,5.4-4.6c0.3-1.3,0-2.4-0.6-3.1C44.8,0.7,43.6,0.3,42,0.3 M42.6,4.9 c-0.3,1.7-1.5,1.7-2.8,1.7H39l0.6-3.2c0-0.1,0.1-0.3,0.4-0.3h0.3c0.8,0,1.7,0,2.1,0.6C42.6,3.8,42.6,4.2,42.6,4.9"/> <g> <path fill="#d2d0d0" d="M7.8,0.3H3.1c-0.3,0-0.6,0.3-0.7,0.6l-2,12.3c0,0.3,0.1,0.4,0.4,0.4h2.2c0.3,0,0.6-0.3,0.7-0.6l0.6-3.3 c0-0.3,0.3-0.6,0.7-0.6h1.5c3.2,0,5-1.5,5.4-4.6c0.3-1.3,0-2.4-0.6-3.1C10.6,0.7,9.5,0.3,7.8,0.3 M8.4,4.9 C8.1,6.6,6.9,6.6,5.6,6.6H4.9l0.6-3.2c0-0.1,0.1-0.3,0.4-0.3h0.3c0.8,0,1.7,0,2.1,0.6C8.4,3.8,8.5,4.2,8.4,4.9 M22.2,4.8H20 c-0.1,0-0.4,0.1-0.4,0.3l-0.1,0.7l-0.1-0.3c-0.6-0.7-1.5-1-2.7-1c-2.5,0-4.7,2-5.2,4.6c-0.3,1.4,0.1,2.7,0.8,3.5 c0.7,0.8,1.7,1.1,2.9,1.1c2.1,0,3.2-1.3,3.2-1.3l-0.1,0.7c0,0.3,0.1,0.4,0.4,0.4h2.1c0.3,0,0.6-0.3,0.7-0.6l1.3-7.8 C22.6,5,22.4,4.8,22.2,4.8 M19,9.2c-0.3,1.3-1.3,2.2-2.7,2.2c-0.7,0-1.3-0.3-1.5-0.6c-0.3-0.4-0.4-1-0.4-1.7C14.5,8,15.7,7,16.9,7 c0.7,0,1.1,0.3,1.5,0.6C18.9,8,19,8.7,19,9.2"/> </g> <path fill="#929397" d="M56.3,4.8H54c-0.1,0-0.4,0.1-0.4,0.3l-0.1,0.7l-0.1-0.3c-0.6-0.7-1.5-1-2.7-1c-2.5,0-4.7,2-5.2,4.6 c-0.3,1.4,0.1,2.7,0.8,3.5c0.7,0.8,1.7,1.1,2.9,1.1c2.1,0,3.2-1.3,3.2-1.3l-0.1,0.7c0,0.3,0.1,0.4,0.4,0.4h2.1 c0.3,0,0.6-0.3,0.7-0.6l1.3-7.8C56.7,5,56.6,4.8,56.3,4.8 M53.1,9.2c-0.3,1.3-1.3,2.2-2.7,2.2c-0.7,0-1.3-0.3-1.5-0.6 c-0.3-0.4-0.4-1-0.4-1.7C48.6,8,49.7,7,51,7c0.7,0,1.1,0.3,1.5,0.6C53.1,8,53.2,8.7,53.1,9.2"/> <path fill="#d2d0d0" d="M34.4,4.8H32c-0.3,0-0.4,0.1-0.6,0.3l-3.1,4.7L27,5.3c-0.1-0.3-0.3-0.4-0.7-0.4H24c-0.3,0-0.4,0.3-0.4,0.6 l2.5,7.4l-2.4,3.3c-0.1,0.3,0,0.7,0.3,0.7h2.2c0.3,0,0.4-0.1,0.6-0.3l7.7-11C34.9,5.2,34.6,4.8,34.4,4.8"/> <path fill="#929397" d="M58.9,0.7l-2,12.6c0,0.3,0.1,0.4,0.4,0.4h2c0.3,0,0.6-0.3,0.7-0.6l2-12.3c0-0.3-0.1-0.4-0.4-0.4h-2.2 C59.2,0.3,59.1,0.4,58.9,0.7"/> </g> </svg> </li> </ul> </div> </div> </aside> <hr class="bg-soft my-0"> <aside class="section section-sm"> <h3 class="font-weight-medium mb-2">Related themes</h3> <p>Other users were also interested in the following premium templates:</p> <div class="row mt-5"> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#803C68"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/pixel-pro/pixel-pro-thumb.jpg" class="lazy" alt="Pixel Pro - Premium Bootstrap 5 UI KIT Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/pixel-pro/v5/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="mb-2 d-block mt-0 h5 text-dark">Pixel Pro UI Kit</a> <p class="font-weight-light text-gray small m-0">Premium Bootstrap 5 UI Kit with user dashboard</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="product-price text-dark">$89</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-cart-arrow-down mr-1"></i> 417 </a> <a href="https://themesberg.com/product/ui-kit/pixel-pro-premium-bootstrap-5-ui-kit#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 5.0/5 </a> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#ffa031"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/volt-pro-bootstrap-5-dashboard/volt-pro-preview.jpg" class="lazy" alt="Volt Pro - Premium Bootstrap 5 Dashboard Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/volt-pro/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" class="mb-2 d-block mt-0 h5 text-dark">Volt Pro Bootstrap 5 Dashboard</a> <p class="font-weight-light text-gray small m-0">Premium Bootstrap 5 Admin Template</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" class="product-price text-dark">$69</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-cart-arrow-down mr-1"></i> 305 </a> <a href="https://themesberg.com/product/admin-dashboard/volt-premium-bootstrap-5-dashboard#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 4.5/5 </a> </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4 mb-5"> <div class="product-card show-info card shadow-sm border-soft" data-product-color="#2D4DC8"> <div class="card border-0 bg-transparent"> <figure class="m-0"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro"> <img data-src="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui-pro/neumorphism-ui-pro-thumb.jpg" class="lazy" alt="Neumorphism UI PRO Bootstrap Preview"> </a> <figcaption class="show-on-hover"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro" class="btn btn-icon-only rounded-circle btn-product-action mr-3" data-toggle="tooltip" data-placement="bottom" title="Theme details"> <span class="btn-inner-icon"><i class="fad fa-list"></i></span> </a> <a href="https://demo.themesberg.com/neumorphism-ui-pro/" target="_blank" class="btn btn-icon-only rounded-circle btn-product-action" data-toggle="tooltip" data-placement="bottom" title="Live preview"> <span class="btn-inner-icon"><i class="fad fa-laptop"></i></span> </a> </figcaption> </figure> <div class="card-body p-3"> <div class="post-meta pt-2 d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro" class="mb-2 d-block mt-0 h5 text-dark">Neumorphism UI PRO</a> <p class="font-weight-light text-gray small m-0">Neumorphism inspired user interface kit</p> </div> </div> <hr class="bg-soft"> <div class="d-flex align-items-center justify-content-between"> <div> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro" class="product-price text-dark">$69</a> </div> <div class="product-counters d-flex"> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro" class="product-card-downloads font-small text-gray-700"> <i class="fad fa-cart-arrow-down mr-1"></i> 203 </a> <a href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap-pro#reviews" class="product-card-downloads font-small text-gray-700 ml-3"> <i class="far fa-star mr-1"></i> 5.0/5 </a> </div> </div> </div> </div> </div> </div> </div> <div class="text-center"> <a href="https://themesberg.com/themes" class="btn btn-primary"><i class="fad fa-th-list mr-2"></i> View all Themes</a> </div> </aside> </div> </div> </div> </main> <section class="footer section section-md mb-5 pt-0 pb-0"> <div class="container"> <div class="row position-relative no-gutters z-2 shadow-sm rounded bg-white"> <div class="col-12 col-lg-6 bg-white rounded"> <div class="border-left-md border-soft py-4 px-3 px-lg-5 m-0 bg-white rounded"> <p class="mb-2 h4">Join our community</p> <p class="font-medium mb-3">Get access to free templates and themes used by over 89361 web developers.</p> <a class="btn btn-sm btn-outline-primary d-none d-sm-inline-block mb-4" href="https://themesberg.com/register"> Create an account for free <span class="fas fa-long-arrow-alt-right ml-2"></span> </a> <p class="text-md">Follow us on social media:</p> <ul class="d-flex flew-row list-style-none"> <li class="mr-3"> <a href="https://twitter.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-twitter" data-toggle="tooltip" data-placement="bottom" title="Follow @themesberg"> <span class="btn-inner-icon"><i class="fab fa-twitter"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.facebook.com/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-facebook" data-toggle="tooltip" data-placement="bottom" title="Like Themesberg"> <span class="btn-inner-icon"><i class="fab fa-facebook"></i></span> </a> </li> <li class="mr-3"> <a href="https://github.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-github" data-toggle="tooltip" data-placement="bottom" title="Open source projects"> <span class="btn-inner-icon"><i class="fab fa-github"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.instagram.com/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-instagram" data-toggle="tooltip" data-placement="bottom" title="Follow us on Instagram"> <span class="btn-inner-icon"><i class="fab fa-instagram"></i></span> </a> </li> <li class="mr-3"> <a href="https://dribbble.com/themesberg" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-dribbble" data-toggle="tooltip" data-placement="bottom" title="Follow us on Dribbble"> <span class="btn-inner-icon"><i class="fab fa-dribbble"></i></span> </a> </li> <li class="mr-3"> <a href="https://www.linkedin.com/company/themesberg/" rel="nofollow noopener" target="_blank" class="btn-sm btn-icon-only rounded-circle btn-linkedin" data-toggle="tooltip" data-placement="bottom" title="Follow us on LinkedIn"> <span class="btn-inner-icon"><i class="fab fa-linkedin"></i></span> </a> </li> </ul> </div> </div> <div class="col-12 col-lg-6 bg-white rounded"> <div class="border-left-md border-soft py-4 px-3 px-lg-5 m-0 bg-white rounded"> <p class="mb-2 h4">Subscribe to our newsletter</p> <p class="mb-4 text-md">New themes, blog posts, marketplace journey. No spam.</p> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script async data-uid="4e9649fabb" src="https://fabulous-artisan-1281.ck.page/4e9649fabb/index.js"></script> </div> </div> </div> </div> </section> <footer class="pb-6 pt-9 bg-soft mt-n8"> <div class="container"> <div class="row mb-5 justify-content-center"> <div class="col-auto"> <a class="footer-brand" href="https://themesberg.com"> <img class="navbar-brand-light" height="35" src="https://themesberg.com/img/brand/themesberg-footer.svg" alt="Logo Themesberg"> </a> </div> </div> <ul class="text-md-center mb-4 text-center footer-links pl-0"> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://flowbite.com/" target="_blank">Flowbite - Tailwind Components</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/terms-and-conditions">Terms and Conditions</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/privacy-policy">Privacy Policy</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/cookie-policy">Cookie Policy</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/licensing">Licensing</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/knowledge-center">Knowledge Center</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/custom-development">Custom Development</a></li> <li class="list-inline-item text-md px-0 px-sm-2 mb-2"><a href="https://themesberg.com/contact">Contact</a></li> </ul> <div class="row justify-content-center text-center"> <div class="col-12"> <small class="text-gray-700">© 2019-2024 All Rights Reserved. Themesberg™ is a registered trademark of Crafty Dwarf LLC.</small> </div> </div> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.bundle.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@15.1.1/dist/lazyload.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scroll/16.1.0/smooth-scroll.min.js"></script> <script src="https://themesberg.com/js/themesberg.js"></script> <script src="https://cdn.paddle.com/paddle/paddle.js"></script> <script src="https://themesberg.com/js/checkout.js"></script> </body> </html>