CINXE.COM

<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Neumorphism UI</title><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="title" content="Neumorphism UI"><meta name="author" content="Themesberg"><link rel="canonical" href="https://themesberg.com/product/ui-kit/neumorphism-ui-kit-bootstrap"><meta name="keywords" content="neumorphism, neumorphism ui, neomorphism, neomorphism ui, neomorphism css, neumorphism css, neumorph, neumorphic, design system, login, form, table, tables, card, cards, navbar, modal, icons, icons, map, chat, carousel, menu, datepicker, gallery, slider, date, social, dropdown, search, tab, nav, footer, date picker, forms, tabs, time, button, select, input, timeline, cart, about us, account, log in, blog, profile, portfolio, landing page, ecommerce, shop, landing, register, app, contact, one page, sign up, signup, store, bootstrap 4, bootstrap4, dashboard, bootstrap 4 dashboard, bootstrap 4 design, bootstrap 4 system, bootstrap 4, bootstrap 4 uit kit, bootstrap 4 kit, themesberg, html kit, html css template, web template, bootstrap, bootstrap 4, css3 template, frontend, responsive bootstrap template, bootstrap ui kit, responsive ui kit"><meta name="description" content="Start developing neumorphic web applications and pages using Neumorphism UI. It features over 100 individual components and 5 example pages."><meta itemprop="name" content="Neumorphism UI by Themesberg"><meta itemprop="description" content="Start developing neumorphic web applications and pages using Neumorphism UI. It features over 100 individual components and 5 example pages."><meta itemprop="image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui/neumorphism-thumbnail.jpg"><meta name="twitter:card" content="product"><meta name="twitter:site" content="@themesberg"><meta name="twitter:title" content="Neumorphism UI by Themesberg"><meta name="twitter:description" content="Start developing neumorphic web applications and pages using Neumorphism UI. It features over 100 individual components and 5 example pages."><meta name="twitter:creator" content="@themesberg"><meta name="twitter:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui/neumorphism-thumbnail.jpg"><meta property="fb:app_id" content="214738555737136"><meta property="og:title" content="Neumorphism UI by Themesberg"><meta property="og:type" content="article"><meta property="og:url" content="https://demo.themesberg.com/neumorphism-ui/"><meta property="og:image" content="https://themesberg.s3.us-east-2.amazonaws.com/public/products/neumorphism-ui/neumorphism-thumbnail.jpg"><meta property="og:description" content="Start developing neumorphic web applications and pages using Neumorphism UI. It features over 100 individual components and 5 example pages."><meta property="og:site_name" content="Themesberg"><link rel="apple-touch-icon" sizes="120x120" href="./assets/img/favicon/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="./assets/img/favicon/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="./assets/img/favicon/favicon-16x16.png"><link rel="manifest" href="./assets/img/favicon/site.webmanifest"><link rel="mask-icon" href="./assets/img/favicon/safari-pinned-tab.svg" color="#ffffff"><meta name="msapplication-TileColor" content="#ffffff"><meta name="theme-color" content="#ffffff"><link type="text/css" href="./vendor/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet"><link type="text/css" href="./css/neumorphism.css" rel="stylesheet"><script async src="https://www.googletagmanager.com/gtag/js?id=UA-141734189-6"></script><script>window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-141734189-6');</script> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-THQTXJ7');</script> </head><body> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-THQTXJ7" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <header class="header-global"><nav id="navbar-main" aria-label="Primary navigation" class="navbar navbar-main navbar-expand-lg navbar-theme-primary headroom navbar-light navbar-transparent navbar-theme-primary"><div class="container position-relative"><a class="navbar-brand shadow-soft py-2 px-3 rounded border border-light mr-lg-4" href="./index.html"><img class="navbar-brand-dark" src="./assets/img/brand/dark.svg" alt="Logo light"> <img class="navbar-brand-light" src="./assets/img/brand/dark.svg" alt="Logo dark"></a><div class="navbar-collapse collapse" id="navbar_global"><div class="navbar-collapse-header"><div class="row"><div class="col-6 collapse-brand"><a href="./index.html" class="navbar-brand shadow-soft py-2 px-3 rounded border border-light"><img src="./assets/img/brand/dark.svg" alt="Themesberg logo"></a></div><div class="col-6 collapse-close"><a href="#navbar_global" class="fas fa-times" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" title="close" aria-label="Toggle navigation"></a></div></div></div><ul class="navbar-nav navbar-nav-hover align-items-lg-center"><li class="nav-item dropdown"><a href="#" class="nav-link" data-toggle="dropdown"><span class="nav-link-inner-text">Pages</span> <span class="fas fa-angle-down nav-link-arrow ml-2"></span></a><ul class="dropdown-menu"><li><a class="dropdown-item" href="./html/pages/about.html">About</a></li><li><a class="dropdown-item" href="./html/pages/pricing.html">Pricing</a></li><li><a class="dropdown-item" href="./html/pages/contact.html">Contact</a></li><li><a class="dropdown-item" href="./html/pages/sign-in.html">Sign in</a></li><li><a class="dropdown-item" href="./html/pages/sign-up.html">Sign up</a></li></ul></li><li class="nav-item dropdown mega-dropdown"><a href="#" class="nav-link" data-toggle="dropdown"><span class="nav-link-inner-text">Components</span> <span class="fas fa-angle-down nav-link-arrow ml-2"></span></a><div class="dropdown-menu"><div class="row"><div class="col-lg-6 inside-bg d-none d-lg-block"><div class="justify-content-center bg-primary text-white"><div class="px-6 pb-5 pt-3"><img src="./assets/img/megamenu-image.jpg" alt="Pixel Components"></div><div class="z-2 pb-4 text-center"><a href="./html/components/all.html" class="btn btn-primary mb-2 mb-sm-0 mr-3 text-secondary"><span class="mr-1"><span class="fas fa-th-large"></span></span> All components </a><a href="https://themesberg.com/docs/neumorphism-ui/components/alerts" target="_blank" class="btn btn-primary mb-2 mb-sm-0"><span class="mr-1"><span class="fas fa-book"></span></span> Docs v1.0</a></div></div></div><div class="col pl-0"><ul class="list-style-none"><li><a class="dropdown-item" href="./html/components/accordions.html">Accordions</a></li><li><a class="dropdown-item" href="./html/components/alerts.html">Alerts</a></li><li><a class="dropdown-item" href="./html/components/badges.html">Badges</a></li><li><a class="dropdown-item" href="./html/components/bootstrap-carousels.html">Bootstrap Carousels</a></li><li><a class="dropdown-item" href="./html/components/breadcrumbs.html">Breadcrumbs</a></li><li><a class="dropdown-item" href="./html/components/buttons.html">Buttons</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/neumorphism-ui/plugins/jquery-counters/" target="_blank">Counters <span class="badge badge-dark ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/cards.html">Cards</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/neumorphism-ui/components/e-commerce/" target="_blank">E-commerce <span class="badge badge-dark ml-3">Pro</span></a></li></ul></div><div class="col pl-0"><ul class="list-style-none"><li><a class="dropdown-item" href="./html/components/forms.html">Forms</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/neumorphism-ui/components/icon-boxes/" target="_blank">Icon Boxes <span class="badge badge-dark ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/modals.html">Modals</a></li><li><a class="dropdown-item" href="./html/components/navs.html">Navs</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/neumorphism-ui/plugins/owl-carousel/" target="_blank">Owl Carousels <span class="badge badge-dark ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/pagination.html">Pagination</a></li><li><a class="dropdown-item" href="./html/components/popovers.html">Popovers</a></li><li><a class="dropdown-item" href="./html/components/progress-bars.html">Progress Bars</a></li></ul></div><div class="col pl-0"><ul class="list-style-none"><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/neumorphism-ui/components/icon-boxes/#steps" target="_blank">Steps <span class="badge badge-dark ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/tables.html">Tables</a></li><li><a class="dropdown-item" href="./html/components/tabs.html">Tabs</a></li><li><a class="dropdown-item" href="./html/components/toasts.html">Toasts</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://themesberg.com/docs/neumorphism-ui/components/timelines/" target="_blank">Timelines <span class="badge badge-dark ml-3">Pro</span></a></li><li><a class="dropdown-item" href="./html/components/tooltips.html">Tooltips</a></li><li><a class="dropdown-item" href="./html/components/typography.html">Typography</a></li><li><a class="dropdown-item d-flex align-items-center justify-content-between" href="https://demo.themesberg.com/neumorphism-ui-pro/html/components/widgets.html" target="_blank">Widgets <span class="badge badge-dark ml-3">Pro</span></a></li></ul></div></div></div></li><li class="nav-item dropdown"><a href="#" class="nav-link" data-toggle="dropdown"><span class="nav-link-inner-text">Support</span> <span class="fas fa-angle-down nav-link-arrow ml-2"></span></a><div class="dropdown-menu dropdown-menu-lg"><div class="col-auto px-0" data-dropdown-content><div class="list-group list-group-flush"><a href="https://themesberg.com/docs/neumorphism-ui/getting-started/quick-start/" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4"><span class="icon icon-sm icon-secondary"><span class="fas fa-file-alt"></span></span><div class="ml-4"><span class="text-dark d-block">Documentation<span class="badge badge-sm badge-secondary ml-2">v1.0</span></span> <span class="small">Examples and guides</span></div></a><a href="https://github.com/themesberg/neumorphism-ui/issues" target="_blank" class="list-group-item list-group-item-action d-flex align-items-center p-0 py-3 px-lg-4"><span class="icon icon-sm icon-secondary"><span class="fas fa-microphone-alt"></span></span><div class="ml-4"><span class="text-dark d-block">Support</span> <span class="small">Looking for answers? Ask us!</span></div></a></div></div></div></li></ul></div><div class="d-flex align-items-center"><a href="https://themesberg.com/product/ui-kits/neumorphism-ui-pro" target="_blank" class="btn btn-primary text-secondary d-none d-md-inline-block mr-3"><i class="far fa-paper-plane mr-2"></i> Upgrade to PRO</a> <a href="https://themesberg.com/docs/neumorphism-ui/getting-started/quick-start/" target="_blank" class="btn btn-primary"><i class="fas fa-book"></i> Docs v1.0</a> <button class="navbar-toggler ml-2" type="button" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button></div></div></nav></header><main><section class="section section bg-soft pb-5 overflow-hidden z-2"><div class="container z-2"><div class="row justify-content-center text-center pt-6"><div class="col-lg-8 col-xl-8"><h1 class="display-2 mb-3">Neumorphism UI</h1><p class="lead px-md-6 mb-5">Neumorphism inspired <strong>User Interface Kit</strong> that will help you prototype and design beautiful, creative and modern websites.</p><div class="d-flex flex-column flex-wrap flex-md-row justify-content-md-center mb-5"><a href="https://themesberg.com/product/ui-kits/neumorphism-ui" target="_blank" class="btn btn-primary mb-3 mb-lg-0 mr-3"><i class="fas fa-cloud-download-alt mr-2"></i> Download</a><div class="mt-2"><a class="github-button" href="https://github.com/themesberg/neumorphism-ui" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star themesberg/neumorphism-ui on GitHub">Star</a></div></div><a href="https://themesberg.com" target="_blank" class="d-flex align-items-center justify-content-center flex-column"><img src="./assets/img/themesberg.svg" height="25" class="mb-3" alt="Themesberg Logo"> <span class="text-muted font-small">A Themesberg production</span></a></div></div></div></section><section class="section section-lg"><div class="container"><div class="row"><div class="col-12 col-md-4"><div class="icon-box text-center mb-5 mb-md-0"><div class="icon icon-shape icon-lg bg-soft shadow-soft border border-light rounded-circle mb-3"><span class="fas fa-box-open"></span></div><h2 class="h5 my-3">Over 200 components</h2><p class="px-lg-4">Beatifully crafted and neumorphism inspired elements</p></div></div><div class="col-12 col-md-4 mb-5 mb-md-0"><div class="icon-box text-center"><div class="icon icon-shape icon-lg bg-soft shadow-soft border border-light rounded-circle mb-3"><span class="fas fa-pager"></span></div><h2 class="h5 my-3">10+ sections</h2><p class="px-lg-4">Navigation bars, pricing cards, footers and many more sections to enhance page variety</p></div></div><div class="col-12 col-md-4 mb-5 mb-md-0"><div class="icon-box text-center"><div class="icon icon-shape icon-lg bg-soft shadow-soft border border-light rounded-circle mb-3"><span class="far fa-file-alt"></span></div><h2 class="h5 my-3">5 example pages</h2><p class="px-lg-4">We took the time to create a few example pages to show you how neumorphic pages can look like</p></div></div></div></div></section><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row"><div class="col text-center"><div class="mb-5"><span class="h5 text-center">Default Accordion</span></div></div></div><div class="row justify-content-center"><div class="col-12 col-md-10 col-lg-8"><div class="accordion shadow-soft rounded" id="accordionExample1"><div class="card card-sm card-body bg-primary border-light mb-0"><a href="#panel-1" data-target="#panel-1" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="h6 mb-0 font-weight-bold">Our Company</span> <span class="icon"><span class="fas fa-plus"></span></span></a><div class="collapse" id="panel-1"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div><div class="card card-sm card-body bg-primary border-light mb-0"><a href="#panel-2" data-target="#panel-2" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="h6 mb-0 font-weight-bold">Neumorphism Components</span> <span class="icon"><span class="fas fa-plus"></span></span></a><div class="collapse" id="panel-2"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div><div class="card card-sm card-body bg-primary border-light"><a href="#panel-3" data-target="#panel-3" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="h6 mb-0 font-weight-bold">Licenses</span> <span class="icon"><span class="fas fa-plus"></span></span></a><div class="collapse" id="panel-3"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div></div></div></div><div class="row"><div class="col text-center"><div class="my-5"><span class="h5 text-center">Accordion with icons</span></div></div></div><div class="row justify-content-center"><div class="col-12 col-md-10 col-lg-8"><div class="accordion shadow-soft rounded"><div class="card card-sm card-body bg-primary border-light mb-0"><a href="#panel-4" data-target="#panel-4" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="icon-title h6 mb-0 font-weight-bold"><span class="fab fa-leanpub"></span>Our Company</span> <span class="icon"><span class="fas fa-plus"></span></span></a><div class="collapse" id="panel-4"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div><div class="card card-sm card-body bg-primary border-light mb-0"><a href="#panel-5" data-target="#panel-5" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="icon-title h6 mb-0 font-weight-bold"><span class="fas fa-box-open"></span>Pixel Components</span> <span class="icon"><span class="fas fa-plus"></span></span></a><div class="collapse" id="panel-5"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div><div class="card card-sm card-body bg-primary border-light mb-0"><a href="#panel-6" data-target="#panel-6" class="accordion-panel-header" data-toggle="collapse" role="button" aria-expanded="false" aria-controls="panel-1"><span class="icon-title h6 mb-0 font-weight-bold"><span class="fas fa-donate"></span>Licenses</span> <span class="icon"><span class="fas fa-plus"></span></span></a><div class="collapse" id="panel-6"><div class="pt-3"><p class="mb-0">At Themesberg, our mission has always been focused on bringing openness and transparency to the design process. We've always believed that by providing a space where designers can share ongoing work not only empowers them to make better products, it also helps them grow. We're proud to be a part of creating a more open culture and to continue building a product that supports this vision.</p></div></div></div></div></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row"><div class="col text-center"><div class="mb-5"><span class="h5 text-center">Default Alerts</span></div></div></div><div class="row justify-content-center"><div class="col-12 col-md-10"><div class="alert alert-secondary shadow-soft" role="alert"><span class="alert-inner--text">This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-success shadow-soft" role="alert"><span class="alert-inner--text">This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-info shadow-soft" role="alert"><span class="alert-inner--text">This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-danger shadow-soft" role="alert"><span class="alert-inner--text">This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div></div></div><div class="row"><div class="col text-center"><div class="mt-6 mb-5"><span class="h5 text-center">Dismissible Alerts with Icons</span></div></div></div><div class="row justify-content-center"><div class="col-12 col-md-10"><div class="alert alert-secondary alert-dismissible shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-inner--text"><strong>Warning!</strong> Better check yourself, you're not looking too good.</span> <button type="button" class="close text-dark" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="alert alert-success alert-dismissible shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-thumbs-up"></span></span> <span class="alert-inner--text"><strong>Well done!</strong> You successfully read this important alert message.</span> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="alert alert-info alert-dismissible shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-bell"></span></span> <span class="alert-inner--text"><strong>Heads up!</strong>This alert needs your attention, but it's not super important.</span> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="alert alert-danger alert-dismissible shadow-soft fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-fire"></span></span> <span class="alert-inner--text"><strong>Oh snap!</strong> Change a few things up and try submitting again.</span> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div></div></div><div class="row"><div class="col text-center"><div class="mt-6 mb-5"><span class="h5 text-center">Alerts with additional content</span></div></div></div><div class="row justify-content-center"><div class="col-12 col-md-10"><div class="alert alert-secondary shadow-soft mb-4 mb-lg-5" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-heading">Warning!</span><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div><div class="alert alert-success shadow-soft mb-4 mb-lg-5" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-thumbs-up"></span></span> <span class="alert-heading">Well done!</span><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div><div class="alert alert-info shadow-soft mb-4 mb-lg-5" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-bell"></span></span> <span class="alert-heading">Heads up!</span><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div><div class="alert alert-danger shadow-soft mb-4 mb-lg-5" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-fire"></span></span> <span class="alert-heading">Danger!</span><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div></div></div></div></div><div class="section pt-4 pb-0"><div class="container"><div class="row"><div class="col text-center"><span class="h3">Inset Shadow</span></div></div></div></div><div class="section section-lg"><div class="container"><div class="row"><div class="col text-center"><div class="mb-5"><span class="h5 text-center">Default Alerts</span></div></div></div><div class="row justify-content-center"><div class="col-12 col-md-10"><div class="alert alert-success shadow-inset" role="alert"><span class="alert-inner--text">This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-secondary shadow-inset" role="alert"><span class="alert-inner--text">This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-info shadow-inset" role="alert"><span class="alert-inner--text">This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div><div class="alert alert-danger shadow-inset" role="alert"><span class="alert-inner--text">This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</span></div></div></div><div class="row"><div class="col text-center"><div class="mt-6 mb-5"><span class="h5 text-center">Dismissible Alerts with Icons</span></div></div></div><div class="row justify-content-center"><div class="col-12 col-md-10"><div class="alert alert-success alert-dismissible shadow-inset fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-thumbs-up"></span></span> <span class="alert-inner--text"><strong>Well done!</strong> You successfully read this important alert message.</span> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="alert alert-secondary alert-dismissible shadow-inset fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-inner--text"><strong>Warning!</strong> Better check yourself, you're not looking too good.</span> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="alert alert-info alert-dismissible shadow-inset fade show" role="alert"><span class="alert-inner--icon"><span class="far fa-bell"></span></span> <span class="alert-inner--text"><strong>Heads up!</strong>This alert needs your attention, but it's not super important.</span> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="alert alert-danger alert-dismissible shadow-inset fade show" role="alert"><span class="alert-inner--icon"><span class="fas fa-fire"></span></span> <span class="alert-inner--text"><strong>Oh snap!</strong> Change a few things up and try submitting again.</span> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button></div></div></div><div class="row"><div class="col text-center"><div class="mt-6 mb-5"><span class="h5 text-center">Alerts with additional content</span></div></div></div><div class="row justify-content-center"><div class="col-12 col-md-10"><div class="alert alert-success shadow-inset" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-thumbs-up"></span></span> <span class="alert-heading">Well done!</span><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div><div class="alert alert-secondary shadow-inset" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-exclamation-circle"></span></span> <span class="alert-heading">Warning!</span><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div><div class="alert alert-info shadow-inset" role="alert"><span class="alert-inner--icon icon-lg"><span class="far fa-bell"></span></span> <span class="alert-heading">Heads up!</span><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div><div class="alert alert-danger shadow-inset" role="alert"><span class="alert-inner--icon icon-lg"><span class="fas fa-fire"></span></span> <span class="alert-heading">Danger!</span><p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p><hr><p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row mb-6"><div class="col-lg-6"><div class="mb-4"><span class="h6">Badges</span></div><span class="badge badge-dark text-uppercase">Dark</span> <span class="badge badge-secondary text-uppercase">Secondary</span> <span class="badge badge-success text-uppercase">Success</span> <span class="badge badge-danger text-uppercase">Danger</span> <span class="badge badge-info text-uppercase">Info</span></div><div class="col-lg-6"><div class="mb-4"><span class="h6">Link Badges</span></div><a href="#" class="badge badge-dark">Dark</a> <a href="#" class="badge badge-secondary">Secondary</a> <a href="#" class="badge badge-success">Success</a> <a href="#" class="badge badge-danger">Danger</a> <a href="#" class="badge badge-info">Info</a></div></div><div class="row mb-6"><div class="col-lg-6"><div class="mb-4"><span>Notification Badges</span></div><button type="button" class="btn btn-primary">Notifications <span class="badge badge-pill badge-success">5</span> <span class="sr-only">unread messages</span></button></div><div class="col-lg-6"><div class="mb-4"><span>Choose your size</span></div><span class="badge badge-success text-uppercase">Badge</span> <span class="badge badge-md badge-success text-uppercase">Badge md</span> <span class="badge badge-lg badge-success text-uppercase">Badge lg</span></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row"><div class="col text-center"><h2 class="h5 mb-6">Blog Cards</h2></div></div><div class="row mb-5"><div class="col-12 col-md-6 col-lg-4 mb-5"><div class="card bg-primary border-light shadow-soft"><img src="./assets/img/blog/blog-article-1.jpg" class="card-img-top rounded-top" alt="Themesberg office"><div class="card-body"><span class="h6 icon-tertiary small"><span class="fas fa-medal mr-2"></span>Awards</span><h3 class="h5 card-title mt-3">We partnered up with Google</h3><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary btn-sm">Learn More</a></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-5"><div class="card bg-primary border-light shadow-soft"><div class="card-header p-3"><img src="./assets/img/blog/blog-article-2.jpg" class="card-img-top rounded" alt="Designer desk"></div><div class="card-body pt-2"><div class="media d-flex align-items-center justify-content-between"><div class="post-group"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers"><img class="avatar-sm mr-2 img-fluid rounded-circle" src="./assets/img/team/profile-picture-2.jpg" alt="Jo portrait"> Jo J. Moore</a></div><div class="d-flex align-items-center"><span class="small"><span class="far fa-calendar-alt mr-2"></span>15 March 2020</span></div></div><h3 class="h5 card-title mt-4">We partnered up with Google</h3><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><a href="#" class="btn btn-primary btn-sm">Learn More</a></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-5"><div class="card bg-primary shadow-soft text-center border-light"><div class="card-header"><span class="card-text small"><span class="far fa-calendar-alt mr-2"></span>15 March 2020</span></div><div class="card-body"><h3 class="h5 card-title">We partnered up with Google</h3><p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary btn-sm">Learn More</a></div><div class="card-footer"><a href="#" data-toggle="tooltip" data-placement="top" title="" data-original-title="23k followers"><img class="avatar-sm mr-2 img-fluid rounded-circle" src="./assets/img/team/profile-picture-2.jpg" alt="Moore avatar"> Jo J. Moore</a></div></div></div><div class="col-12 col-lg-6"><div class="card bg-primary shadow-inset border-light"><div class="card-body p-5"><h3 class="h4 card-title mb-3">We partnered up with Google</h3><span class="card-text small"><span class="far fa-calendar-alt mr-2"></span>15 March 2020</span><p class="card-text mt-4">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p><div class="d-flex align-items-center"><a href="#" class="btn btn-primary btn-sm mr-3">Learn More</a> <a href="#" class="small"><span class="far fa-comments mr-2"></span>21</a></div></div></div></div></div></div></div><section class="section section-lg pt-0"><div class="container"><div class="row"><div class="col text-center"><h2 class="h5 mb-7">Profile Cards</h2></div></div><div class="row justify-content-between"><div class="col-12 col-md-6 col-lg-4 mb-6 mb-md-5"><div class="profile-card mb-5"><div class="card bg-primary shadow-inset border-light text-center"><div class="card-header"><div class="profile-image bg-primary shadow-inset border border-light rounded mx-auto p-3 mt-n6"><img src="./assets/img/team/profile-picture-4.jpg" class="card-img-top rounded" alt="Leos Portrait"></div></div><div class="card-body pb-5"><h3 class="h5 mb-2">Jose Leos</h3><span class="h6 font-weight-normal text-gray mb-3">Co-Founder</span><ul class="list-unstyled d-flex justify-content-center mt-3 mb-4"><li><a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3"><span class="fab fa-facebook-f"></span></a></li><li><a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3"><span class="fab fa-twitter"></span></a></li><li><a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3"><span class="fab fa-slack-hash"></span></a></li><li><a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3"><span class="fab fa-dribbble"></span></a></li></ul><a class="btn btn-sm btn-primary mr-3" href="#"><span class="fas fa-user-plus mr-1"></span> Follow </a><a class="btn btn-sm btn-primary" href="#">Message</a></div></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-6 mb-md-5"><div class="profile-card mb-5"><div class="card bg-primary shadow-soft border-light"><div class="profile-image bg-primary shadow-inset border border-light rounded p-3 ml-3 mt-n5"><img src="./assets/img/team/profile-picture-3.jpg" class="card-img-top rounded" alt="Bonnie Avatar"></div><div class="card-body"><h3 class="h5 mb-2">Bonnie Green</h3><span class="h6 font-weight-normal text-gray mb-3">Web Designer</span><ul class="list-unstyled d-flex my-3"><li><a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3"><span class="fab fa-facebook-f"></span></a></li><li><a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3"><span class="fab fa-twitter"></span></a></li><li><a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3"><span class="fab fa-slack-hash"></span></a></li><li><a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3"><span class="fab fa-dribbble"></span></a></li></ul><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-4 mb-md-5"><div class="profile-card mb-5"><div class="card bg-primary shadow-soft border-light"><div class="profile-image bg-primary shadow-inset border border-light rounded-circle p-3 ml-3 mt-n5"><img src="./assets/img/team/profile-picture-1.jpg" class="card-img-top rounded-circle" alt="Christopher Avatar"></div><div class="card-body"><h3 class="h5 mb-2">Christopher Wood</h3><span class="h6 font-weight-normal text-gray mb-3">Marketing</span><ul class="list-unstyled d-flex my-3"><li><a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3"><span class="fab fa-facebook-f"></span></a></li><li><a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3"><span class="fab fa-twitter"></span></a></li><li><a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3"><span class="fab fa-slack-hash"></span></a></li><li><a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3"><span class="fab fa-dribbble"></span></a></li></ul><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-5 mb-md-0"><div class="card bg-primary shadow-soft border-light"><div class="card-header p-4"><img src="./assets/img/team/profile-picture-4.jpg" class="card-img-top rounded" alt="Wood Portrait"></div><div class="card-body pt-2"><h3 class="h5 mb-2">Christopher Wood</h3><span class="h6 font-weight-normal text-gray mb-4">Co-Founder Themesberg</span><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p><ul class="list-unstyled d-flex my-3"><li><a href="#" target="_blank" aria-label="facebook social link" class="icon icon-xs icon-facebook mr-3"><span class="fab fa-facebook-f"></span></a></li><li><a href="#" target="_blank" aria-label="twitter social link" class="icon icon-xs icon-twitter mr-3"><span class="fab fa-twitter"></span></a></li><li><a href="#" target="_blank" aria-label="slack social link" class="icon icon-xs icon-slack mr-3"><span class="fab fa-slack-hash"></span></a></li><li><a href="#" target="_blank" aria-label="dribbble social link" class="icon icon-xs icon-dribbble mr-3"><span class="fab fa-dribbble"></span></a></li></ul></div></div></div></div></div></section><div class="section section-lg pt-0"><div class="container"><div class="row"><div class="col text-center"><h2 class="h5 mb-7">Pricing Cards</h2></div></div><div class="row mb-5"><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0"><div class="card bg-primary shadow-soft border-light text-center py-4"><div class="card-header p-3"><h3 class="text-gray mb-4">Basic</h3><span class="d-block"><span class="display-1 font-weight-bold"><span class="align-top font-medium">$</span>19 </span><span class="d-block text-gray font-small">/ month</span></span></div><div class="card-body"><ul class="list-unstyled mb-4"><li class="list-item pb-3"><strong>1</strong> free domain</li><li class="list-item pb-3">Storage space: <strong>5GB</strong></li><li class="list-item pb-3"><strong>100k</strong> monthly visitors</li><li class="list-item pb-3">One-click staging site</li><li class="list-item pb-3">Search engine wizard</li><li class="list-item pb-3">Community support</li></ul><button type="button" class="btn btn-primary btn-block">Start Starter</button></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0"><div class="card bg-primary shadow-soft border-light p-4"><div class="card-header border-bottom text-center"><span class="d-block"><span class="display-1 font-weight-bold"><span class="align-top font-medium">$</span>19 </span><span class="text-gray font-small">/ month</span></span></div><div class="card-body"><p>Faster sites deliver better business results for your clients.</p><ul class="list-unstyled mb-4"><li class="list-item pb-2"><strong>Full Support</strong> No</li><li class="list-item pb-2"><strong>Storage</strong> 50 GB</li><li class="list-item"><strong>Monthly Visitors</strong> 400k</li></ul><button type="button" class="btn btn-primary btn-block"><span class="fas fa-cart-plus mr-3"></span>Add to Cart</button></div></div></div></div><div class="row mb-5"><div class="col-12 col-lg-6 mb-5 mb-lg-0"><div class="card bg-primary shadow-soft border-light"><div class="row no-gutters align-items-center"><div class="col-sm-5"><div class="card-header text-center pb-0"><h3 class="mb-0">Basic</h3><span class="d-block my-3"><span class="display-2 font-weight-bold"><span class="align-baseline font-medium">$</span>19 </span></span><button type="button" class="btn btn-sm btn-primary btn-block">Add to Cart</button></div></div><div class="col-sm-7"><div class="card-body pb-0"><ul class="list-group list-group-flush price-list mb-4"><li class="list-group-item border-primary pb-1"><span class="fas fa-headset"></span>Community support</li><li class="list-group-item border-primary pb-1"><span class="far fa-hdd"></span>15 GB SSD storage</li><li class="list-group-item border-primary pb-1"><span class="far fa-paper-plane"></span>One-click staging site</li><li class="list-group-item border-primary pb-1"><span class="far fa-envelope"></span>10 E-mail accounts</li><li class="list-group-item border-0"><span class="fas fa-users"></span>Team size: 1-5 developers</li></ul></div></div></div></div></div><div class="col-12 col-lg-6"><div class="card bg-primary shadow-inset border-light p-3"><div class="card-body shadow-soft border border-light rounded p-4"><h4 class="mb-3">Regular</h4><div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="price display-2 text-dark mb-0">199</span></div><p class="mb-4">So, get Website Backup and stop worrying about data loss. Get back to doing what you do best – running your business and making money.</p><button type="button" class="btn btn-primary btn-block rounded-bottom">Add to Cart</button></div></div></div></div></div></div><div class="section section-lg pt-0"><div class="container"><div class="row"><div class="col text-center"><h2 class="h5 mb-7">Call to Action Cards</h2></div></div><div class="row justify-content-center"><div class="col-12 col-lg-10"><div class="card bg-primary shadow-soft border-light mb-6"><div class="card-body px-5 py-5 text-center text-md-left"><div class="row align-items-center"><div class="col-md-6"><h2 class="mb-3">Get in touch</h2><p class="mb-0">If you need any help with our products or services, choose one of the following ways to contact us.</p></div><div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right"><a href="#" class="btn btn-primary"><span class="mr-1"><span class="fas fa-headphones"></span> </span>Contact Us</a></div></div></div></div></div><div class="col-12 col-lg-10"><div class="card bg-primary shadow-soft border-light px-4 py-1 mb-6"><div class="card-body text-center text-md-left"><div class="row align-items-center"><div class="col-md-6"><h2 class="mb-3">Become one of us</h2><p class="mb-4">Do you want to join our team and work remotely from anywhere you'd like? We can’t wait to hear from you!</p><a href="#" class="btn btn-primary"><span class="mr-1"><span class="fas fa-file-invoice"></span> </span>Check Careers</a></div><div class="col-12 col-md-6 mt-4 mt-md-0 text-md-right"><img src="./assets/img/illustrations/reading-side.svg" alt="illustration"></div></div></div></div></div><div class="col-12"><div class="card bg-primary shadow-soft border-light px-4 py-5 text-center mb-5"><div class="card-header pb-0"><h2 class="h1 mb-3">Ready to change your life?</h2></div><div class="card-body pt-2 px-0 px-lg-7"><p class="mb-5 lead">Download Rocket today and take the first step to organize your routine, achieve your personal goals and reflect on your life.</p><a class="btn btn-lg btn-primary mr-md-3 mb-3 mb-sm-0" href="#"><div class="d-flex align-items-center"><span class="icon icon-lg mr-3"><span class="fab fa-apple"></span></span><div class="d-block text-left"><small class="font-small">Download on the</small><div class="h5 mb-0">App Store</div></div></div></a><a class="btn btn-lg btn-primary" href="#"><div class="d-flex align-items-center"><span class="icon icon-lg mr-3"><span class="fab fa-google-play"></span></span><div class="d-block text-left"><small class="font-small">Download on the</small><div class="h5 mb-0">Google Play</div></div></div></a></div></div></div><div class="col-12"><div class="card bg-primary shadow-soft border-light px-4 py-5"><div class="card-header pb-0 text-center"><h2 class="h1 mb-3">Get the most out of your network.</h2><p class="mb-5 lead">Contact management designed for teams and individuals</p></div><div class="card-body pt-2 px-0 px-lg-7"><div class="row justify-content-center"><div class="col-12 col-md-8"><div class="form-group"><label class="h6 font-weight-light text-gray" for="subscribeInputEmail">Email address</label><div class="d-flex flex-row justify-content-center"><div class="input-group"><input class="form-control form-control-xl border-light" id="subscribeInputEmail" placeholder="example@company.com" type="email"><div class="input-group-prepend"><button type="submit" class="btn btn-primary rounded-right">Subscribe</button></div></div></div></div></div></div></div></div></div></div></div></div><div class="section section-lg pt-0"><div class="container"><div class="row"><div class="col text-center"><h2 class="h5 mb-7">Login & Register</h2></div></div><div class="row justify-content-md-around"><div class="col-12 col-md-6 col-lg-5 mb-5 mb-lg-0"><div class="card bg-primary shadow-soft border-light p-4"><div class="card-header text-center pb-0"><h2 class="h4">Sign in to our platform</h2><span>Login here using your username and password</span></div><div class="card-body"><form action="#" class="mt-4"><div class="form-group"><label for="exampleInputIcon333">Your email</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-envelope"></span></span></div><input class="form-control" id="exampleInputIcon333" placeholder="example@company.com" type="text" aria-label="email adress"></div></div><div class="form-group"><div class="form-group"><label for="exampleInputPassword777">Password</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-unlock-alt"></span></span></div><input class="form-control" id="exampleInputPassword777" placeholder="Password" type="password" aria-label="Password" required></div></div><div class="d-block d-sm-flex justify-content-between align-items-center mb-4"><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck545"> <label class="form-check-label" for="defaultCheck545">Remember me</label></div><div><a href="#" class="small text-right">Lost password?</a></div></div></div><button type="submit" class="btn btn-block btn-primary">Sign in</button></form><div class="mt-3 mb-4 text-center"><span class="font-weight-normal">or login with</span></div><div class="btn-wrapper my-4 text-center"><button class="btn btn-primary btn-pill btn-icon-only text-facebook mr-2" type="button" aria-label="facebook button" title="facebook button"><span aria-hidden="true" class="fab fa-facebook-f"></span></button> <button class="btn btn-primary btn-pill btn-icon-only text-twitter mr-2" type="button" aria-label="twitter button" title="twitter button"><span aria-hidden="true" class="fab fa-twitter"></span></button> <button class="btn btn-primary btn-pill btn-icon-only text-facebook" type="button" aria-label="github button" title="github button"><span aria-hidden="true" class="fab fa-github"></span></button></div><div class="d-block d-sm-flex justify-content-center align-items-center mt-4"><span class="font-weight-normal">Not registered? <a href="#" class="font-weight-bold">Create account</a></span></div></div></div></div><div class="col-12 col-md-6 col-lg-5 mb-5 mb-lg-0"><div class="card bg-primary shadow-soft border-light p-4"><div class="card-header text-center pb-0"><h2 class="mb-0 h5">Create Account</h2></div><div class="card-body"><form action="#"><div class="form-group"><label for="exampleInputIcon999">Your email</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-envelope"></span></span></div><input class="form-control" id="exampleInputIcon999" placeholder="example@company.com" type="text" aria-label="email adress"></div></div><div class="form-group"><div class="form-group"><label for="exampleInputPassword345">Password</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-unlock-alt"></span></span></div><input class="form-control" id="exampleInputPassword345" placeholder="Password" type="password" aria-label="Password" required></div></div><div class="form-group"><label for="exampleConfirmPassword712">Confirm Password</label><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-unlock-alt"></span></span></div><input class="form-control" id="exampleConfirmPassword712" placeholder="Confirm password" type="password" aria-label="Password" required></div></div><div class="form-check mb-4"><input class="form-check-input" type="checkbox" value="" id="defaultCheck634"> <label class="form-check-label" for="defaultCheck634">I agree to the <a href="#">terms and conditions</a></label></div></div><button type="submit" class="btn btn-block btn-primary">Sign in</button></form><div class="mt-3 mb-4 text-center"><span class="font-weight-normal">or</span></div><div class="btn-wrapper my-4 text-center"><button class="btn btn-primary btn-pill btn-icon-only text-facebook mr-2" type="button" aria-label="facebook button" title="facebook button"><span aria-hidden="true" class="fab fa-facebook-f"></span></button> <button class="btn btn-primary btn-pill btn-icon-only text-twitter mr-2" type="button" aria-label="twitter button" title="twitter button"><span aria-hidden="true" class="fab fa-twitter"></span></button> <button class="btn btn-primary btn-pill btn-icon-only text-facebook" type="button" aria-label="github button" title="github button"><span aria-hidden="true" class="fab fa-github"></span></button></div><div class="d-block d-sm-flex justify-content-center align-items-center mt-4"><span class="font-weight-normal">Already have an account? <a href="#" class="font-weight-bold">Login here</a></span></div></div></div></div></div></div></div><section class="section bg-primary pt-0 section-lg"><div class="container"><div class="row"><div class="col text-center"><h2 class="h5 text-center mb-6">Basic Carousels</h2></div></div><div class="row justify-content-center"><div class="col-md-10"><div id="Carousel1" class="carousel slide shadow-soft border border-light p-4 rounded" data-ride="carousel"><div class="carousel-inner rounded"><div class="carousel-item active"><img src="./assets/img/carousel/image-1.jpg" class="d-block w-100" alt="slide1"></div><div class="carousel-item"><img src="./assets/img/carousel/image-2.jpg" class="d-block w-100" alt="slide2"></div><div class="carousel-item"><img src="./assets/img/carousel/image-3.jpg" class="d-block w-100" alt="slide3"></div></div></div></div></div><div class="row"><div class="col text-center"><h2 class="h5 text-center mt-5 mb-6">With Controls</h2></div></div><div class="row justify-content-center"><div class="col-md-10"><div id="Carousel2" class="carousel slide shadow-soft border border-light p-4 rounded" data-ride="carousel"><div class="carousel-inner rounded"><div class="carousel-item active"><img class="d-block w-100" src="./assets/img/carousel/image-1.jpg" alt="First slide"></div><div class="carousel-item"><img class="d-block w-100" src="./assets/img/carousel/image-2.jpg" alt="Second slide"></div><div class="carousel-item"><img class="d-block w-100" src="./assets/img/carousel/image-3.jpg" alt="Third slide"></div></div><a class="carousel-control-prev" href="#Carousel2" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a><a class="carousel-control-next" href="#Carousel2" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span></a></div></div></div><div class="row"><div class="col text-center"><h2 class="h5 text-center mt-6 mb-5">Indicators & controls</h2></div></div><div class="row justify-content-center"><div class="col-md-10"><div id="Carousel3" class="carousel slide shadow-soft border border-light p-4 rounded" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#Carousel3" data-slide-to="0" class="active"></li><li data-target="#Carousel3" data-slide-to="1"></li><li data-target="#Carousel3" data-slide-to="2"></li></ol><div class="carousel-inner rounded"><div class="carousel-item active"><img class="d-block w-100" src="./assets/img/carousel/image-1.jpg" alt="First slide"></div><div class="carousel-item"><img class="d-block w-100" src="./assets/img/carousel/image-2.jpg" alt="Second slide"></div><div class="carousel-item"><img class="d-block w-100" src="./assets/img/carousel/image-3.jpg" alt="Third slide"></div></div><a class="carousel-control-prev" href="#Carousel3" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a><a class="carousel-control-next" href="#Carousel3" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span></a></div></div></div><div class="row"><div class="col text-center"><h2 class="h5 text-center mt-6 mb-5">With captions</h2></div></div><div class="row justify-content-center"><div class="col-md-10"><div id="Carousel4" class="carousel slide shadow-soft border border-light p-4 rounded" data-ride="carousel"><ol class="carousel-indicators"><li data-target="#Carousel4" data-slide-to="0" class="active"></li><li data-target="#Carousel4" data-slide-to="1"></li><li data-target="#Carousel4" data-slide-to="2"></li></ol><div class="carousel-inner rounded"><div class="carousel-item overlay-primary active"><img class="d-block w-100" src="./assets/img/carousel/image-2.jpg" alt="First slide"><div class="carousel-caption d-none d-md-block text-dark"><h3 class="h5">First Title</h3><p>Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.</p></div></div><div class="carousel-item overlay-primary"><img class="d-block w-100" src="./assets/img/carousel/image-3.jpg" alt="Second slide"><div class="carousel-caption d-none d-md-block text-dark"><h3 class="h5">Second Title</h3><p>Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.</p></div></div><div class="carousel-item overlay-primary"><img class="d-block w-100" src="./assets/img/carousel/image-1.jpg" alt="Third slide"><div class="carousel-caption d-none d-md-block text-dark"><h3 class="h5">Third Title</h3><p>Start your development with a Pixel Design System for Bootstrap 4. It is creative and it features many components that can help you create amazing websites.</p></div></div></div><a class="carousel-control-prev" href="#Carousel4" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a><a class="carousel-control-next" href="#Carousel4" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span></a></div></div></div></div></section><section class="section bg-primary pt-0 section-lg"><div class="container"><div class="row"><div class="col"><h2 class="h5 mb-6">Inset Shadow</h2></div></div><div class="row"><div class="col-12"><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-gray"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-dark"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-success"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-info"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-danger"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav></div></div><div class="row"><div class="col"><h2 class="h5 mt-6 mb-5">Transparent background</h2></div></div><div class="row"><div class="col-12"><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-gray breadcrumb-transparent"><li class="breadcrumb-item active" aria-current="page">Home</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-gray breadcrumb-transparent"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item active" aria-current="page">Library</li></ol></nav><nav aria-label="breadcrumb"><ol class="breadcrumb breadcrumb-gray breadcrumb-transparent"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol></nav></div></div></div></section><div class="section section-lg bg-primary pt-0 components-section"><div class="container"><div class="row justify-content-center"><div class="col-lg-12"><div class="mb-3"><h2 class="h5">Main Buttons</h2></div> <button class="btn btn-primary" type="button">Button</button> <button class="btn btn-primary" type="button"><span class="mr-1"><span class="fas fa-book-open"></span></span> Icon Left</button> <button class="btn btn-primary" type="button">Icon Right <span class="ml-1"><span class="fas fa-book-open"></span></span></button> <button class="btn btn-icon-only btn-primary" type="button" aria-label="love button" title="love button"><span aria-hidden="true" class="far fa-heart"></span></button><div class="mb-3 mt-5"><h3 class="h5">Round Main Buttons</h3></div> <button class="btn btn-pill btn-primary" type="button">Button</button> <button class="btn btn-pill btn-primary" type="button"><span class="mr-1"><span class="fas fa-cog"></span></span> Icon Left</button> <button class="btn btn-pill btn-primary" type="button">Icon Right <span class="ml-1"><span class="fas fa-cog"></span></span></button> <button class="btn btn-icon-only btn-pill btn-primary" type="button" aria-label="up button" title="up button"><span aria-hidden="true" class="far fa-thumbs-up"></span></button><div class="mb-3 mt-5"><h3 class="h5">Animated Buttons</h3></div><button class="btn btn-primary animate-up-2" type="button">Animate up</button> <button class="btn btn-primary animate-right-3" type="button">Animate right</button> <button class="btn btn-primary animate-down-2" type="button">Animate down</button> <button class="btn btn-primary animate-left-3" type="button">Animate left</button><div class="mb-3 mt-5"><h3 class="h5">Loading Buttons</h3></div> <button class="btn btn-primary" type="button" disabled="disabled"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="sr-only">Loading...</span></button> <button class="btn btn-primary" type="button" disabled="disabled"><span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="ml-1">Loading...</span></button> <button class="btn btn-secondary" type="button" disabled="disabled"><span class="ml-1">Loading...</span> <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span></button><div class="mb-3 mt-5"><h3 class="h5 font-weight-bold mb-3">Dropdown buttons</h3><div class="dropdown"><div class="btn-group mr-2 mb-2"><button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-angle-down dropdown-arrow"></span> <span class="sr-only">Toggle Dropdown</span></button><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div></div><div class="btn-group mb-2 mr-2"><button type="button" class="btn btn-tertiary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="fas fa-angle-down dropdown-arrow"></span> <span class="sr-only">Toggle Dropdown</span></button><div class="dropdown-menu"><a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a><div class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a></div></div></div><div class="mb-3 mt-5"><h3 class="h5">Link Buttons</h3></div> <a href="#" class="text-dark font-weight-bold mr-3">Primary</a> <a href="#" class="text-dark font-weight-bold mr-3"><span class="mr-1"><span class="fas fa-link"></span></span> Icon Left </a><a href="#" class="text-dark font-weight-bold">Icon Right <span class="ml-1"><span class="fas fa-link"></span></span> </a><div class="mb-3 mt-5"><h3 class="h5">Sizes</h3></div> <button class="btn btn-sm btn-primary" type="button">Small</button> <button class="btn btn-primary" type="button">Regular</button> <button class="btn btn-lg btn-primary" type="button">Large Button</button><div class="mb-4 mt-5"><h3 class="h5">Choose your color</h3></div> <button class="btn btn-primary text-dark" type="button">Secondary</button> <button class="btn btn-primary text-secondary" type="button">Secondary</button> <button class="btn btn-primary text-info" type="button">Info</button> <button class="btn btn-primary text-success" type="button">Success</button> <button class="btn btn-primary text-danger" type="button">Danger</button> <button class="btn btn-primary text-dark" type="button">Dark</button> <button class="btn btn-primary text-gray" type="button">Gray</button><div class="mb-3 mt-5"><small class="text-uppercase font-weight-bold">Links</small></div> <a href="#" class="text-default mr-3">Default</a> <a href="#" class="text-secondary mr-3">Secondary</a> <a href="#" class="text-tertiary mr-3">Tertiary</a> <a href="#" class="text-info mr-3">Info</a> <a href="#" class="text-success mr-3">Success</a> <a href="#" class="text-danger mr-3">Danger</a> <a href="#" class="text-dark mr-3">Dark</a> <a href="#" class="text-gray">Gray</a></div><div class="row"><div class="col-lg-4 col-md-6"><div class="mb-4 mt-5"><h3 class="h5 font-weight-bold">Social Buttons</h3></div><button class="btn btn-facebook" type="button"><span class="mr-1"><span class="fab fa-facebook-f"></span></span> Login with Facebook</button><br><button class="btn btn-pinterest" type="button"><span class="mr-1"><span class="fab fa-pinterest-p"></span></span> Share on Pinterest</button><br><button class="btn btn-github" type="button"><span class="mr-1"><span class="fab fa-github-alt"></span></span> Login with GitHub</button><br><button class="btn btn-twitch" type="button"><span class="mr-1"><span class="fab fa-twitch"></span></span> Subscribe Now</button></div><div class="col-lg-4 col-md-6"><div class="mb-4 mt-5"><h3 class="h5 font-weight-bold">Round Social Buttons</h3></div><button class="btn btn-pill btn-facebook" type="button"><span class="mr-1"><span class="fab fa-facebook-f"></span></span> Login with Facebook</button><br><button class="btn btn-pill btn-pinterest" type="button"><span class="mr-1"><span class="fab fa-pinterest-p"></span></span> Share on Pinterest</button><br><button class="btn btn-pill btn-github" type="button"><span class="mr-1"><span class="fab fa-github-alt"></span></span> Login with GitHub</button><br><button class="btn btn-pill btn-twitch" type="button"><span class="mr-1"><span class="fab fa-twitch"></span></span> Subscribe Now</button></div><div class="col-lg-1 col-md-3"><div class="mb-4 mt-5"><h3 class="h5">Square</h3></div><button class="btn btn-icon-only btn-facebook" type="button" aria-label="facebook button" title="facebook button"><span aria-hidden="true" class="fab fa-facebook"></span></button> <button class="btn btn-icon-only btn-pinterest" type="button" aria-label="pinterest button" title="pinterest button"><span aria-hidden="true" class="fab fa-pinterest-p"></span></button> <button class="btn btn-icon-only btn-youtube" type="button" aria-label="youtube button" title="youtube button"><span aria-hidden="true" class="fab fa-youtube"></span></button> <button class="btn btn-icon-only btn-github" type="button" aria-label="github button" title="github button"><span aria-hidden="true" class="fab fa-github-alt"></span></button> <button class="btn btn-icon-only btn-twitch" type="button" aria-label="twitch button" title="twitch button"><span aria-hidden="true" class="fab fa-twitch"></span></button> <button class="btn btn-icon-only btn-paypal" type="button" aria-label="paypal button" title="paypal button"><span aria-hidden="true" class="fab fa-paypal"></span></button> <button class="btn btn-icon-only btn-behance" type="button" aria-label="behance button" title="behance button"><span aria-hidden="true" class="fab fa-behance"></span></button></div><div class="col-lg-1 col-md-2"><div class="mb-4 mt-5"><h3 class="h5">Circle</h3></div><button class="btn btn-icon-only btn-pill btn-facebook" type="button" aria-label="facebook button" title="facebook button"><span aria-hidden="true" class="fab fa-facebook"></span></button> <button class="btn btn-icon-only btn-pill btn-pinterest" type="button" aria-label="pinterest button" title="pinterest button"><span aria-hidden="true" class="fab fa-pinterest-p"></span></button> <button class="btn btn-icon-only btn-pill btn-youtube" type="button" aria-label="youtube button" title="youtube button"><span aria-hidden="true" class="fab fa-youtube"></span></button> <button class="btn btn-icon-only btn-pill btn-github" type="button" aria-label="github button" title="github button"><span aria-hidden="true" class="fab fa-github-alt"></span></button> <button class="btn btn-icon-only btn-pill btn-twitch" type="button" aria-label="twitch button" title="twitch button"><span aria-hidden="true" class="fab fa-twitch"></span></button> <button class="btn btn-icon-only btn-pill btn-paypal" type="button" aria-label="paypal button" title="paypal button"><span aria-hidden="true" class="fab fa-paypal"></span></button> <button class="btn btn-icon-only btn-pill btn-behance" type="button" aria-label="behance button" title="behance button"><span aria-hidden="true" class="fab fa-behance"></span></button></div></div></div></div></div></div><div class="section section-lg bg-primary pt-0 pb-0"><div class="container"><div class="row"><div class="col"><h2 class="h5">Default Forms</h2></div></div></div></div><div class="section section-lg pt-4"><div class="container"><div class="row mb-4 mb-lg-5"><div class="col-lg-4 col-sm-6"><div class="form-group mb-4"><label for="exampleInputEmail67">Email address</label> <input type="email" class="form-control" id="exampleInputEmail67" aria-describedby="emailHelp"> <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small></div><div class="form-group"><label for="exampleInputIcon1">Icon Left</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-search"></span></span></div><input class="form-control" id="exampleInputIcon1" placeholder="Icon Left" type="text" aria-label="Input with icon left"></div></div><div class="form-group"><label for="exampleInputIcon2">Icon Right</label><div class="input-group mb-4"><input class="form-control" id="exampleInputIcon2" placeholder="Icon Right" aria-label="Input group" type="text"><div class="input-group-append"><span class="input-group-text"><span class="fas fa-search"></span></span></div></div></div><div class="form-group"><label for="exampleInputPassword1">Password</label><div class="input-group mb-4"><input class="form-control" id="exampleInputPassword1" placeholder="Password" type="password" aria-label="Password"><div class="input-group-append"><span class="input-group-text"><span class="fas fa-unlock-alt"></span></span></div></div></div></div><div class="col-lg-4 col-sm-6"><fieldset disabled="disabled"><legend class="h6">Disabled Inputs</legend><div class="form-group"><label for="disabledTextInput">Name</label> <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input"></div><div class="form-group"><label for="disabledSelect">Disabled select menu</label> <select id="disabledSelect" class="form-control"><option>Disabled select</option></select></div></fieldset><div class="form-group"><label class="my-1 mr-2" for="inlineFormCustomSelectPref">Country</label> <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref"><option selected="selected">Choose...</option><option value="1">United States</option><option value="2">Germany</option><option value="3">Canada</option></select></div><div class="form-group"><label for="exampleFormControlTextarea1">Example textarea</label> <textarea class="form-control" placeholder="Enter your message..." id="exampleFormControlTextarea1" rows="4"></textarea></div></div><div class="col-lg-4 col-sm-6"><div class="form-group"><label for="validationServer01">First name</label> <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required><div class="valid-feedback">Looks good!</div></div><div class="form-group mb-4"><label for="validationServerUsername">Username</label> <input type="text" class="form-control is-invalid" id="validationServerUsername" required><div class="invalid-feedback">Please choose a username.</div></div><div class="custom-file"><input type="file" class="custom-file-input" id="customFile" aria-label="File upload"> <label class="custom-file-label" for="customFile">Choose file</label></div></div></div><h3 class="h5">Range Sliders</h3><div class="row mb-4 mb-lg-5"><div class="col-lg-6 col-sm-6"><div class="input-slider-container"><div id="input-slider-forms" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div><div class="row mt-3 d-none"><div class="col-6"><span class="range-slider-value" data-range-value-low="200"></span></div></div></div></div><div class="col-lg-6 col-sm-6"><div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div><div class="row d-none"><div class="col-6"><span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span></div><div class="col-6 text-right"><span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span></div></div></div></div><div class="row mb-4 mb-lg-5"><div class="col-3 col-lg-2"><div id="input-slider-vertical-1" data-range-value-min="100" data-range-value-max="500"></div><div class="row d-none"><div class="col-6"><span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-3"></span></div><div class="col-6 text-right"><span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-3"></span></div></div></div><div class="col-3 col-lg-2"><div id="input-slider-vertical-2" data-range-value-min="100" data-range-value-max="500"></div><div class="row d-none"><div class="col-6"><span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low-4"></span></div><div class="col-6 text-right"><span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high-4"></span></div></div></div></div><div class="row mb-5"><div class="col-lg-3 col-md-6"><div class="mb-3"><span class="h6 font-weight-bold">Checkboxes Square</span></div><div class="form-check square-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck111" checked="checked"> <label class="form-check-label" for="defaultCheck111">Active checkbox</label></div><div class="form-check square-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck222"> <label class="form-check-label" for="defaultCheck222">Option 1</label></div><div class="form-check square-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck333"> <label class="form-check-label" for="defaultCheck333">Option 2</label></div><div class="form-check square-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck444" disabled="disabled"> <label class="form-check-label" for="defaultCheck444">Disabled checkbox</label></div></div><div class="col-lg-3 col-md-6"><div class="mb-3"><span class="h6 font-weight-bold">Checkboxes Round</span></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck555" checked="checked"> <label class="form-check-label" for="defaultCheck555">Active checkbox</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck666"> <label class="form-check-label" for="defaultCheck666">Option 1</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck777"> <label class="form-check-label" for="defaultCheck777">Option 2</label></div><div class="form-check"><input class="form-check-input" type="checkbox" value="" id="defaultCheck888" disabled="disabled"> <label class="form-check-label" for="defaultCheck888">Disabled checkbox</label></div></div><div class="col-lg-3 col-sm-6 mt-4 mt-md-0"><fieldset><legend class="h6">Radios</legend><div class="form-check"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked="checked"> <label class="form-check-label" for="exampleRadios1">Default radio</label></div><div class="form-check"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2"> <label class="form-check-label" for="exampleRadios2">Second default radio</label></div><div class="form-check"><input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled="disabled"> <label class="form-check-label" for="exampleRadios3">Disabled radio</label></div></fieldset></div><div class="col-lg-3 col-sm-6 mt-4 mt-md-0"><div class="mb-3"><span class="h6 font-weight-bold">Switches</span></div><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" id="customSwitch1"> <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label></div><div class="custom-control custom-switch"><input type="checkbox" class="custom-control-input" disabled="disabled" id="customSwitch2"> <label class="custom-control-label" for="customSwitch2">Disabled switch element</label></div></div></div><div class="row mb-4 mb-lg-5"><div class="col-12 col-md-4"><div class="form-group"><label class="h6" for="exampleInputDate1">Choose a date</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="far fa-calendar-alt"></span></span></div><input class="form-control datepicker" id="exampleInputDate1" placeholder="Select date" type="text" aria-label="Date with icon left"></div></div></div><div class="col-12 col-md-8"><div class="input-daterange datepicker row align-items-center"><div class="col"><label class="h6" for="exampleInputDate2">From</label><div class="form-group"><div class="input-group input-group-border"><div class="input-group-prepend"><span class="input-group-text"><span class="far fa-calendar-alt"></span></span></div><input class="form-control datepicker" id="exampleInputDate2" placeholder="Start date" type="text"></div></div></div><div class="col"><div class="form-group"><label class="h6" for="exampleInputDate3">To</label><div class="input-group input-group-border"><div class="input-group-prepend"><span class="input-group-text"><span class="far fa-calendar-alt"></span></span></div><input class="form-control datepicker" id="exampleInputDate3" placeholder="End date" type="text"></div></div></div></div></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row mt-4"><div class="col-md-4"> <button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-default">Default</button><div class="modal fade" id="modal-default" tabindex="-1" role="dialog" aria-labelledby="modal-default" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-header"><h2 class="h6 modal-title mb-0" id="modal-title-default">Terms of Service</h2><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><p>With less than a month to go before the European Union enacts new consumer privacy laws for its citizens, companies around the world are updating their terms of service agreements to comply.</p><p>The European Union’s General Data Protection Regulation (G.D.P.R.) goes into effect on May 25 and is meant to ensure a common set of data rights in the European Union. It requires organizations to notify users as soon as possible of high-risk data breaches that could personally affect them.</p></div><div class="modal-footer"><button type="button" class="btn btn-sm btn-primary">I Got It</button> <button type="button" class="btn btn-primary text-danger ml-auto" data-dismiss="modal">Close</button></div></div></div></div></div><div class="col-md-4"> <button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-notification">Notification</button><div class="modal fade" id="modal-notification" tabindex="-1" role="dialog" aria-labelledby="modal-notification" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content bg-primary"><div class="modal-header"><p class="modal-title" id="modal-title-notification">A new experience, personalized for you.</p><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><div class="py-3 text-center"><span class="modal-icon display-1-lg"><span class="far fa-envelope-open"></span></span><h2 class="h4 my-3">Important message!</h2><p>Do you know that you can assign status and relation to a company right in the visit list?.</p></div></div><div class="modal-footer"><button type="button" class="btn btn-sm btn-primary">Go to Inbox</button></div></div></div></div></div><div class="col-md-4"> <button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-form">Sign In</button><div class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-form" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-body p-0"><div class="card bg-primary shadow-soft border-light p-4"><button type="button" class="close ml-auto" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><div class="card-header text-center pb-0"><h2 class="h4">Sign in to our platform</h2><span>Login here using your username and password</span></div><div class="card-body"><form action="#" class="mt-4"><div class="form-group"><label for="exampleInputIcon3">Your email</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-envelope"></span></span></div><input class="form-control" id="exampleInputIcon3" placeholder="example@company.com" type="text" aria-label="email adress"></div></div><div class="form-group"><div class="form-group"><label for="exampleInputPassword6">Password</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-unlock-alt"></span></span></div><input class="form-control" id="exampleInputPassword6" placeholder="Password" type="password" aria-label="Password" required></div></div><div class="d-block d-sm-flex justify-content-between align-items-center mb-4"><div class="form-check mb-2 mb-sm-0"><input class="form-check-input" type="checkbox" value="" id="defaultCheck5"> <label class="form-check-label" for="defaultCheck5">Remember me</label></div><div><a href="#" class="small text-right">Lost password?</a></div></div></div><button type="submit" class="btn btn-block btn-primary">Sign in</button></form><div class="mt-3 mb-4 text-center"><span class="font-weight-normal">or login with</span></div><div class="btn-wrapper my-4 text-center"><button class="btn btn-icon-only btn-pill btn-outline-light text-facebook mr-2" type="button" aria-label="facebook button" title="facebook button"><span aria-hidden="true" class="fab fa-facebook-f"></span></button> <button class="btn btn-icon-only btn-pill btn-outline-light text-twitter mr-2" type="button" aria-label="twitter button" title="twitter button"><span aria-hidden="true" class="fab fa-twitter"></span></button> <button class="btn btn-icon-only btn-pill btn-outline-light text-facebook" type="button" aria-label="github button" title="github button"><span aria-hidden="true" class="fab fa-github"></span></button></div><div class="d-block d-sm-flex justify-content-center align-items-center mt-4"><span class="font-weight-normal">Not registered? <a href="#" class="font-weight-bold">Create account</a></span></div></div></div></div></div></div></div></div><div class="col-md-4"> <button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-form-signup">Sign Up</button><div class="modal fade" id="modal-form-signup" tabindex="-1" role="dialog" aria-labelledby="modal-form-signup" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content"><div class="modal-body p-0"><div class="card bg-primary shadow-soft border-light p-4"><button type="button" class="close ml-auto" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><div class="card-header text-center pb-0"><h2 class="mb-0 h5">Create Account</h2></div><div class="card-body"><form action="#"><div class="form-group"><label for="exampleInputIcon4">Your email</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-envelope"></span></span></div><input class="form-control" id="exampleInputIcon4" placeholder="example@company.com" type="text" aria-label="email adress"></div></div><div class="form-group"><div class="form-group"><label for="exampleInputPassword7">Password</label><div class="input-group mb-4"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-unlock-alt"></span></span></div><input class="form-control" id="exampleInputPassword7" placeholder="Password" type="password" aria-label="Password" required></div></div><div class="form-group"><label for="exampleConfirmPassword7">Confirm Password</label><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><span class="fas fa-unlock-alt"></span></span></div><input class="form-control" id="exampleConfirmPassword7" placeholder="Confirm password" type="password" aria-label="Password" required></div></div><div class="form-check mb-4"><input class="form-check-input" type="checkbox" value="" id="defaultCheck6"> <label class="form-check-label" for="defaultCheck6">I agree to the <a href="#">terms and conditions</a></label></div></div><button type="submit" class="btn btn-block btn-primary">Sign in</button></form><div class="mt-3 mb-4 text-center"><span class="font-weight-normal">or</span></div><div class="btn-wrapper my-4 text-center"><button class="btn btn-icon-only btn-pill btn-outline-light text-facebook mr-2" type="button" aria-label="facebook button" title="facebook button"><span aria-hidden="true" class="fab fa-facebook-f"></span></button> <button class="btn btn-icon-only btn-pill btn-outline-light text-twitter mr-2" type="button" aria-label="twitter button" title="twitter button"><span aria-hidden="true" class="fab fa-twitter"></span></button> <button class="btn btn-icon-only btn-pill btn-outline-light text-facebook" type="button" aria-label="github button" title="github button"><span aria-hidden="true" class="fab fa-github"></span></button></div><div class="d-block d-sm-flex justify-content-center align-items-center mt-4"><span class="font-weight-normal">Already have an account? <a href="#" class="font-weight-bold">Login here</a></span></div></div></div></div></div></div></div></div><div class="col-md-4"> <button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-achievement">Achievement</button><div class="modal fade" id="modal-achievement" tabindex="-1" role="dialog" aria-labelledby="modal-achievement" aria-hidden="true"><div class="modal-dialog modal-dialog-centered" role="document"><div class="modal-content shadow-soft"><div class="modal-header mx-auto"><span class="lead mb-0">You just unlocked a new badge</span> <button type="button" class="close ml-auto" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body"><div class="py-3 text-center"><span class="modal-icon icon icon-dark display-1-lg"><span class="fas fa-medal"></span></span><h2 class="h4 modal-title my-2">Author Level 5</h2><p>One Thousand Dollars! Well done - heads are turning your way.</p><div class="progress-wrapper"><div class="progress"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div></div></div><div class="modal-footer"><button type="button" class="btn btn-sm btn-primary">All badges</button></div></div></div></div></div><div class="col-md-4"> <button type="button" class="btn btn-block btn-primary mb-4" data-toggle="modal" data-target="#modal-subscribe">Subscribe</button><div class="modal fade" id="modal-subscribe" tabindex="-1" role="dialog" aria-labelledby="modal-subscribe" aria-hidden="true"><div class="modal-dialog modal-dialog-centered modal-lg" role="document"><div class="modal-content shadow-soft"><div class="modal-header"><button type="button" class="close ml-auto" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="modal-body px-6"><div class="py-3"><div class="text-center"><span class="modal-icon icon icon-lg display-1-lg"><span class="fas fa-envelope-open-text"></span></span><h2 class="h4 modal-title my-2">Join our 1,360,462 subscribers</h2><p class="mb-4">Get exclusive access to freebies, premium products and news.</p></div><div class="form-group"><label for="exampleInputEmail6">Email address</label><div class="d-sm-flex flex-column flex-sm-row mb-3 justify-content-center"><input type="text" id="exampleInputEmail6" placeholder="Enter your email adress here" class="mr-sm-1 mb-2 mb-sm-0 form-control form-control-lg"> <button type="submit" class="ml-sm-1 btn btn-primary">Subscribe</button></div></div></div></div><div class="modal-footer z-2 mx-auto text-center"><p class="text-gray">We’ll never share your details with third parties.<br class="visible-md">View our <a href="#">Privacy Policy</a> for more info.</p></div></div></div></div></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row mb-4"><div class="col-md-4"><span class="h5">Example</span></div></div><div class="row"><div class="col-md-10"><div class="nav-wrapper position-relative"><ul class="nav nav-pills nav-fill flex-column flex-sm-row"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">Home</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Profile</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Settings</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Messages</a></li></ul></div></div></div><div class="row mt-5 mb-4"><div class="col-md-4"><span class="h5">Round Pill</span></div></div><div class="row"><div class="col-md-10"><div class="nav-wrapper position-relative"><ul class="nav nav-pills rounded nav-fill flex-column flex-md-row"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#">Home</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Profile</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Settings</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#">Messages</a></li></ul></div></div></div><div class="row mt-5 mb-4"><div class="col-md-4"><span class="h5">Pills with Icons</span></div></div><div class="row"><div class="col-md-10"><div class="nav-wrapper position-relative"><ul class="nav nav-pills nav-fill flex-column flex-md-row"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#"><span class="fas fa-tachometer-alt mr-2"></span>Dashboard</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-user-circle mr-2"></span>Profile</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-sun mr-2"></span>Settings</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-comments mr-2"></span>Messages</a></li></ul></div></div></div><div class="row mt-5"><div class="col-md-10"><div class="nav-wrapper position-relative"><ul class="nav nav-pills rounded nav-fill flex-column flex-md-row"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" data-toggle="tab" href="#"><span class="fas fa-tachometer-alt mr-2"></span>Dashboard</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-user-circle mr-2"></span>Profile</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-sun mr-2"></span>Settings</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="far fa-comments mr-2"></span>Messages</a></li></ul></div></div></div><div class="row mt-5 mb-4"><div class="col-md-4"><span class="h5">Pills with color variation</span></div></div><div class="row"><div class="col-md-12"><div class="nav-wrapper position-relative"><ul class="nav nav-pills nav-fill flex-column flex-md-row"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" href="#"><span class="icon-success"><span class="fas fa-tachometer-alt mr-2"></span>Dashboard</span></a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="icon-secondary"><span class="far fa-user-circle mr-2"></span>Profile</span></a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="icon-tertiary"><span class="far fa-sun mr-2"></span>Settings</span></a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" data-toggle="tab" href="#"><span class="icon-info"><span class="far fa-comments mr-2"></span>Messages</span></a></li></ul></div></div></div><div class="row mt-5 mb-4"><div class="col-md-4"><span class="h5">Circle Pills</span></div></div><div class="row"><div class="col"><div class="nav-wrapper position-relative"><ul class="nav nav-pills nav-pill-circle flex-column flex-md-row"><li class="nav-item"><a class="nav-link active" aria-label="first navigation tab" data-toggle="tab" href="#"><span class="nav-link-icon d-block"><span class="far fa-user"></span></span></a></li><li class="nav-item"><a class="nav-link" aria-label="second navigation tab" data-toggle="tab" href="#"><span class="nav-link-icon d-block"><span class="far fa-lightbulb"></span></span></a></li><li class="nav-item"><a class="nav-link" aria-label="third navigation tab" data-toggle="tab" href="#"><span class="nav-link-icon d-block"><span class="far fa-sun"></span></span></a></li><li class="nav-item"><a class="nav-link" aria-label="fourth navigation tab" data-toggle="tab" href="#"><span class="nav-link-icon d-block"><span class="far fa-paper-plane"></span></span></a></li><li class="nav-item"><a class="nav-link" aria-label="fifth navigation tab" data-toggle="tab" href="#"><span class="nav-link-icon d-block"><span class="far fa-comments mr-2"></span></span></a></li></ul></div></div></div></div></div><div class="section bg-primary pt-0 section-md"><div class="container"><div class="row mt-4"><div class="col-md-6"><div class="mb-4"><span class="h6 font-weight-bold">Pagination with icon-nav</span></div><nav aria-label="Blog page navigation"><ul class="pagination"><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a></li></ul></nav></div><div class="col-md-6"><div class="mt-4 mb-4 mt-sm-0"><span class="h6 font-weight-bold">Pagination with text-nav</span></div><nav aria-label="Products page navigation"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav></div></div><div class="row mt-4"><div class="col-lg-6"><div class="mb-4"><span class="h6 font-weight-bold">Disabled and active states</span></div><nav aria-label="Templates page navigation"><ul class="pagination"><li class="page-item disabled"><a class="page-link" aria-label="first link" tabindex="-1" href="#">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#">Next</a></li></ul></nav></div><div class="col-lg-6"><div class="mt-4 mb-4 mt-sm-0"><span class="h6 font-weight-bold">Choose your size</span></div><nav aria-label="Default page navigation"><ul class="pagination pagination-lg"><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a></li></ul></nav><nav aria-label="Themesberg page navigation"><ul class="pagination"><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a></li></ul></nav><nav aria-label="Posts navigation example"><ul class="pagination pagination-sm"><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a></li></ul></nav></div></div></div></div><div class="section bg-primary pt-0 section-md"><div class="container"><div class="row mt-4"><div class="col-md-6"><div class="mb-4"><span class="h6 font-weight-bold">Pagination with icon-nav</span></div><nav aria-label="Blog page navigation"><ul class="pagination"><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a></li></ul></nav></div><div class="col-md-6"><div class="mt-4 mb-4 mt-sm-0"><span class="h6 font-weight-bold">Pagination with text-nav</span></div><nav aria-label="Products page navigation"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav></div></div><div class="row mt-4"><div class="col-lg-6"><div class="mb-4"><span class="h6 font-weight-bold">Disabled and active states</span></div><nav aria-label="Templates page navigation"><ul class="pagination"><li class="page-item disabled"><a class="page-link" aria-label="first link" tabindex="-1" href="#">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#">Next</a></li></ul></nav></div><div class="col-lg-6"><div class="mt-4 mb-4 mt-sm-0"><span class="h6 font-weight-bold">Choose your size</span></div><nav aria-label="Default page navigation"><ul class="pagination pagination-lg"><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a></li></ul></nav><nav aria-label="Themesberg page navigation"><ul class="pagination"><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a></li></ul></nav><nav aria-label="Posts navigation example"><ul class="pagination pagination-sm"><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-left"></span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" aria-label="first link" href="#"><span class="fas fa-angle-double-right"></span></a></li></ul></nav></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row justify-content-between"><div class="col-12 col-lg-5 mb-5 mb-lg-0"><h2 class="mb-5 h5">Choose your color</h2><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-dark">Dark Color</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-gray">Gray Color</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-gray" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-success">Success Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-info">Info Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-danger">Danger Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div></div><div class="col-12 col-lg-5"><div class="mb-5"><span class="h5">Stripped Progress Bars</span></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-dark">Dark Color</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar progress-bar-striped bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-gray">Gray Color</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar progress-bar-striped bg-gray" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-success">Success Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-info">Info Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar progress-bar-striped bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-danger">Danger Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar progress-bar-striped bg-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div></div></div><div class="row justify-content-between"><div class="col-12 col-lg-5"><div class="mt-5 mb-4"><span class="h5">Inset Tooltip</span></div><div class="progress-wrapper"><div class="progress-info"><h3 class="h4 progress-tooltip rounded p-2">Dark color</h3><div class="progress-percentage"><span>40%</span></div></div><div class="progress"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><h3 class="h4 progress-tooltip rounded p-2">Gray color</h3><div class="progress-percentage"><span>40%</span></div></div><div class="progress"><div class="progress-bar bg-gray" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><h3 class="h4 progress-tooltip rounded p-2">Success Color</h3><div class="progress-percentage"><span>40%</span></div></div><div class="progress"><div class="progress-bar bg-success" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><h3 class="h4 progress-tooltip rounded p-2">Info color</h3><div class="progress-percentage"><span>40%</span></div></div><div class="progress"><div class="progress-bar bg-info" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><h3 class="h4 progress-tooltip rounded p-2">Danger color</h3><div class="progress-percentage"><span>40%</span></div></div><div class="progress"><div class="progress-bar bg-danger" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div></div></div><div class="col-lg-5"><div class="mt-5 mb-4"><span class="h5">Choose your size</span></div><div class="progress-wrapper"><div class="progress-info info-xl"><div class="progress-label"><span class="text-dark">XL Progress Bar</span></div><div class="progress-percentage"><span>40%</span></div></div><div class="progress progress-xl"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info info-xl"><div class="progress-label"><span class="text-dark">LG Progress Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress progress-lg"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-dark">MD Progress Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div><div class="progress-wrapper"><div class="progress-info"><div class="progress-label"><span class="text-dark">SM Progress Bar</span></div><div class="progress-percentage"><span>60%</span></div></div><div class="progress progress-sm"><div class="progress-bar bg-dark" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div></div></div></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row justify-content-center"><div class="col-lg-12"><div class="mb-4"><span class="h5">Default table</span></div><div class="mb-5"><table class="table shadow-soft rounded"><tr><th class="border-0" scope="col" id="class">Class</th><th class="border-0" scope="col" id="teacher">Teacher</th><th class="border-0" scope="col" id="males">Males</th><th class="border-0" scope="col" id="females">Females</th></tr><tr><th scope="row" id="firstyear" rowspan="2">First Year</th><th scope="row" id="Bolter" headers="firstyear teacher">D. Bolter</th><td headers="firstyear Bolter males">5</td><td headers="firstyear Bolter females">4</td></tr><tr><th scope="row" id="Cheetham" headers="firstyear teacher">A. Cheetham</th><td headers="firstyear Cheetham males">7</td><td headers="firstyear Cheetham females">9</td></tr><tr><th scope="row" id="secondyear" rowspan="3">Second Year</th><th scope="row" id="Lam" headers="secondyear teacher">M. Lam</th><td headers="secondyear Lam males">3</td><td headers="secondyear Lam females">9</td></tr><tr><th scope="row" id="Crossy" headers="secondyear teacher">S. Crossy</th><td headers="secondyear Crossy males">4</td><td headers="secondyear Crossy females">3</td></tr><tr><th scope="row" id="Forsyth" headers="secondyear teacher">A. Forsyth</th><td headers="secondyear Forsyth males">6</td><td headers="secondyear Forsyth females">9</td></tr></table></div><div class="mb-5"><div class="mb-4"><span class="h5">Hoverable rows</span></div><table class="table table-hover shadow-inset rounded"><tr><th class="border-0" scope="col" id="class3">Class</th><th class="border-0" scope="col" id="teacher3">Teacher</th><th class="border-0" scope="col" id="males3">Males</th><th class="border-0" scope="col" id="females3">Females</th></tr><tr><th scope="row" id="firstyear3" rowspan="2">First Year</th><th scope="row" id="Bolter3" headers="firstyear3 teacher3">D. Bolter</th><td headers="firstyear3 Bolter3 males3">5</td><td headers="firstyear3 Bolter3 females3">4</td></tr><tr><th scope="row" id="Cheetham3" headers="firstyear3 teacher3">A. Cheetham</th><td headers="firstyear3 Cheetham3 males3">7</td><td headers="firstyear3 Cheetham3 females3">9</td></tr><tr><th scope="row" id="secondyear3" rowspan="3">Second Year</th><th scope="row" id="Lam3" headers="secondyear3 teacher3">M. Lam</th><td headers="secondyear3 Lam3 males3">3</td><td headers="secondyear3 Lam3 females3">9</td></tr><tr><th scope="row" id="Crossy3" headers="secondyear3 teacher3">S. Crossy</th><td headers="secondyear3 Crossy3 males3">4</td><td headers="secondyear3 Crossy3 females3">3</td></tr><tr><th scope="row" id="Forsyth3" headers="secondyear3 teacher3">A. Forsyth</th><td headers="secondyear3 Forsyth3 males3">6</td><td headers="secondyear3 Forsyth3 females3">9</td></tr></table></div><div class="mb-5"><div class="mb-4"><span class="h5">Responsive Table</span></div><div class="table-responsive-sm shadow-soft rounded"><table class="table table-striped"><tr><th class="border-0" scope="col" id="class2">Class</th><th class="border-0" scope="col" id="teacher2">Teacher</th><th class="border-0" scope="col" id="males2">Males</th><th class="border-0" scope="col" id="females2">Females</th></tr><tr><th scope="row" id="firstyear2" rowspan="2">First Year</th><th scope="row" id="Bolter2" headers="firstyear2 teacher2">D. Bolter</th><td headers="firstyear2 Bolter2 males2">5</td><td headers="firstyear2 Bolter2 females2">4</td></tr><tr><th scope="row" id="Cheetham2" headers="firstyear2 teacher2">A. Cheetham</th><td headers="firstyear2 Cheetham2 males2">7</td><td headers="firstyear2 Cheetham2 females2">9</td></tr><tr><th scope="row" id="secondyear2" rowspan="3">Second Year</th><th scope="row" id="Lam2" headers="secondyear2 teacher2">M. Lam</th><td headers="secondyear2 Lam2 males2">3</td><td headers="secondyear2 Lam2 females2">9</td></tr><tr><th scope="row" id="Crossy2" headers="secondyear2 teacher2">S. Crossy</th><td headers="secondyear2 Crossy2 males2">4</td><td headers="secondyear2 Crossy2 females2">3</td></tr><tr><th scope="row" id="Forsyth2" headers="secondyear2 teacher2">A. Forsyth</th><td headers="secondyear2 Forsyth2 males2">6</td><td headers="secondyear2 Forsyth2 females2">9</td></tr></table></div></div></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row"><div class="col-md-4"><div class="mb-5"><span class="font-weight-bold">Tab Style 1</span></div></div></div><div class="row"><div class="col-md-10 col-lg-8"><div class="nav-wrapper position-relative mb-4"><ul class="nav nav-pills flex-column flex-sm-row" id="tabs-text" role="tablist"><li class="nav-item mr-sm-3 mr-md-0"><a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-text-1-tab" data-toggle="tab" href="#tabs-text-1" role="tab" aria-controls="tabs-text-1" aria-selected="true">Account</a></li><li class="nav-item mr-sm-3 mr-md-0"><a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-2-tab" data-toggle="tab" href="#tabs-text-2" role="tab" aria-controls="tabs-text-2" aria-selected="false">Profile</a></li><li class="nav-item mr-sm-3 mr-md-0"><a class="nav-link mb-sm-3 mb-md-0" id="tabs-text-3-tab" data-toggle="tab" href="#tabs-text-3" role="tab" aria-controls="tabs-text-3" aria-selected="false">Messages</a></li></ul></div><div class="card shadow-inset bg-primary border-light p-4 rounded"><div class="card-body p-0"><div class="tab-content" id="tabcontent1"><div class="tab-pane fade show active" id="tabs-text-1" role="tabpanel" aria-labelledby="tabs-text-1-tab"><p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div><div class="tab-pane fade" id="tabs-text-2" role="tabpanel" aria-labelledby="tabs-text-2-tab"><p>Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div><div class="tab-pane fade" id="tabs-text-3" role="tabpanel" aria-labelledby="tabs-text-3-tab"><p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div></div></div></div></div></div><div class="row"><div class="col-md-4"><div class="mt-5 mb-5"><span class="font-weight-bold">Tab With Icons</span></div></div></div><div class="row"><div class="col-md-10 col-lg-8"><div class="nav-wrapper position-relative mb-4"><ul class="nav nav-pills nav-fill flex-column flex-md-row" id="tabs-icons-text" role="tablist"><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0 active" id="tabs-icons-text-1-tab" data-toggle="tab" href="#tabs-icons-text-1" role="tab" aria-controls="tabs-icons-text-1" aria-selected="true"><i class="fas fa-tint"></i>Design</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-2-tab" data-toggle="tab" href="#tabs-icons-text-2" role="tab" aria-controls="tabs-icons-text-2" aria-selected="false"><i class="fas fa-bug"></i>Code</a></li><li class="nav-item"><a class="nav-link mb-sm-3 mb-md-0" id="tabs-icons-text-3-tab" data-toggle="tab" href="#tabs-icons-text-3" role="tab" aria-controls="tabs-icons-text-3" aria-selected="false"><i class="fas fa-user-astronaut"></i>UX / UI</a></li></ul></div><div class="card shadow-inset bg-primary border-light p-4 rounded"><div class="card-body p-0"><div class="tab-content" id="tabcontent2"><div class="tab-pane fade show active" id="tabs-icons-text-1" role="tabpanel" aria-labelledby="tabs-icons-text-1-tab"><p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div><div class="tab-pane fade" id="tabs-icons-text-2" role="tabpanel" aria-labelledby="tabs-icons-text-2-tab"><p>Photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div><div class="tab-pane fade" id="tabs-icons-text-3" role="tabpanel" aria-labelledby="tabs-icons-text-3-tab"><p>Exercitation photo booth stumptown tote bag Banksy, elit small batch freegan sed. Craft beer elit seitan exercitation, photo booth et 8-bit kale chips proident chillwave deep v laborum. Aliquip veniam delectus, Marfa eiusmod Pinterest in do umami readymade swag.</p><p>Day handsome addition horrible sensible goodness two contempt. Evening for married his account removal. Estimable me disposing of be moonlight cordially curiosity.</p></div></div></div></div></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row mt-4"><div class="col-md-6 col-lg-4"><div class="toast fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header text-dark"><span class="fab fa-bootstrap"></span> <strong class="mr-auto ml-2">Neumorphism</strong> <small class="text-gray">11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div></div><div class="col-md-6 col-lg-4"><div class="toast bg-primary shadow-inset text-dark fade show" role="alert" aria-live="assertive" aria-atomic="true"><div class="toast-header text-dark"><span class="fab fa-bootstrap"></span> <strong class="mr-auto ml-2">Neumorphism</strong> <small>11 mins ago</small> <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close"><span aria-hidden="true">×</span></button></div><div class="toast-body">Hello, world! This is a toast message.</div></div></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row mt-5"><div class="col-lg-12 d-block d-md-flex justify-content-around"><button type="button" class="btn btn-primary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button> <button type="button" class="btn btn-primary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button> <button type="button" class="btn btn-primary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button> <button type="button" class="btn btn-primary btn-sm mr-4 mb-4" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button></div></div></div></div><div class="section bg-primary pt-0 section-lg"><div class="container"><div class="row"><div class="col-md-12"><h1>h1. Bootstrap heading</h1><h2>h2. Bootstrap heading</h2><h3>h3. Bootstrap heading</h3><h4>h4. Bootstrap heading</h4><h5>h5. Bootstrap heading</h5><h6>h6. Bootstrap heading</h6></div></div><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><span class="h6 font-weight-bold">Customizing headings</span></div></div></div><div class="row"><div class="col-md-12"><h1>Fancy display heading <small class="text-muted">With faded secondary text</small></h1><h2>Fancy display heading <small class="text-muted">With faded secondary text</small></h2><h3>Fancy display heading <small class="text-muted">With faded secondary text</small></h3><h4>Fancy display heading <small class="text-muted">With faded secondary text</small></h4><h5>Fancy display heading <small class="text-muted">With faded secondary text</small></h5><h6>Fancy display heading <small class="text-muted">With faded secondary text</small></h6></div></div><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><span class="h6 font-weight-bold">Display headings</span></div></div></div><div class="row"><div class="col-md-12"><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1></div></div><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><span class="h6 font-weight-bold">Paragraphs</span></div></div></div><div class="row"><div class="col-md-6"><div class="mb-3"><span class="h6 font-weight-bold">Simple paragraph</span></div><p>Start your development with a Pixel Design System for Bootstrap 4.Themesberg makes beautiful products to help people with creative ideas succeed.Our company empowers millions of people.</p></div><div class="col-md-6"><div class="mt-5 mb-3 mt-sm-0"><span class="h6 font-weight-bold">Lead paragraph</span></div><p class="lead">Start your development with a Pixel Design System for Bootstrap 4.Themesberg makes beautiful products to help people with creative ideas succeed.Our company empowers millions of people.</p></div></div><div class="row mt-4 mb-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Dark text</small></div><div class="col-sm-10"><p class="text-dark mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Secondary text</small></div><div class="col-sm-10"><p class="text-secondary mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Tertiary text</small></div><div class="col-sm-10"><p class="text-tertiary mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Info text</small></div><div class="col-sm-10"><p class="text-info mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Danger text</small></div><div class="col-sm-10"><p class="text-danger mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row py-3 align-items-center"><div class="col-sm-2"><small class="text-uppercase text-muted">Success text</small></div><div class="col-sm-10"><p class="text-success mb-0">Design is not just what it looks like and feels like. Design is how it works.</p></div></div><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><span class="h6">Blockquote</span></div></div></div><div class="row"><div class="col-md-8"><blockquote class="blockquote text-center">Themesberg makes beautiful products to help people with creative ideas succeed. Our company empowers millions of people.<footer class="blockquote-footer mt-3 text-dark">Zoltan Szőgyényi</footer></blockquote></div></div><div class="row"><div class="col-md-4"><div class="mt-6 mb-5"><span class="h6">Lists</span></div></div></div><div class="row"><div class="col-md-6"><div class="mb-3"><span class="h6">Unordered</span></div><ul><li>Minutes of the last meeting</li><li>Do we need yet more meetings?</li><li>Any other business<ul><li>Programming</li><li>Web Design</li><li>Database</li></ul></li><li>Something funny</li></ul></div><div class="col-md-6"><div class="mt-5 mb-3 mt-sm-0"><span class="h6 font-weight-bold">Ordered</span></div><ol><li>Minutes of the last meeting</li><li>Do we need yet more meetings?</li><li>Any other business<ol><li>Programming</li><li>Web Design</li><li>Database</li></ol></li><li>Something funny</li></ol></div></div></div></div><section class="section section-md bg-soft"><div class="container"><div class="row justify-content-center mb-5 mb-lg-6"><div class="col-12 text-center"><h2 class="h1 px-lg-5">5 neumorphic example pages</h2></div></div><div class="row"><div class="col-6 col-lg-4 mb-5"><a href="./html/pages/about.html" class="page-preview scale-up-hover-2"><img class="shadow-soft rounded scale" src=".//assets/img/presentation/all-pages/about.jpg" alt="About company page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center">About<span class="fas fa-external-link-alt ml-2"></span></h3></div></a></div><div class="col-6 col-lg-4 mb-5"><a href="./html/pages/pricing.html" class="page-preview scale-up-hover-2"><img class="shadow-soft rounded scale" src=".//assets/img/presentation/all-pages/pricing.jpg" alt="Pricing page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center">Pricing<span class="fas fa-external-link-alt ml-2"></span></h3></div></a></div><div class="col-6 col-lg-4 mb-5"><a href="./html/pages/contact.html" class="page-preview scale-up-hover-2"><img class="shadow-soft rounded scale" src=".//assets/img/presentation/all-pages/contact.jpg" alt="Contact page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center">Contact<span class="fas fa-external-link-alt ml-2"></span></h3></div></a></div></div><div class="row"><div class="col-12"><h2 class="mb-5">Special pages</h2></div><div class="col-6 col-lg-4 mb-5"><a href="./html/pages/sign-in.html" class="page-preview scale-up-hover-2"><img class="shadow-soft rounded scale" src=".//assets/img/presentation/all-pages/sign-in.jpg" alt="Sign in page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center">Sign in<span class="fas fa-external-link-alt ml-2"></span></h3></div></a></div><div class="col-6 col-lg-4 mb-5"><a href="./html/pages/sign-up.html" class="page-preview scale-up-hover-2"><img class="shadow-soft rounded scale" src=".//assets/img/presentation/all-pages/sign-up.jpg" alt="Sign up page preview"><div class="text-center show-on-hover"><h3 class="h6 m-0 text-center">Sign up<span class="fas fa-external-link-alt ml-2"></span></h3></div></a></div></div></div></section><section class="section section-lg bg-soft"><div class="container"><div class="row justify-content-center"><div class="col-lg-8 text-center"><h1 class="font-weight-light">Notable <span class="font-weight-bold">features</span></h1><p class="lead">You get all Bootstrap components fully customized. Besides, you receive numerous plugins out of the box and ready to use</p></div></div><div class="row mt-6"><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><span class="fab fa-bootstrap"></span></div><h2 class="h5 my-3">Latest Bootstrap</h2><p>A responsive and mobile-first theme built with the world's most popular CSS framework</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><span class="fab fa-sass"></span></div><h2 class="h5 my-3">Build with Sass</h2><p>Change one variable and the theme adapts. Colors, fonts, sizes, buttons... you name it</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><span class="fas fa-mobile-alt"></span></div><h2 class="h5 my-3">Responsive Design</h2><p>Did you know 53% of the world web traffic is mobile? Neumorphism UI is fully responsive and mobile first</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><span class="fas fa-puzzle-piece"></span></div><h2 class="h5 my-3">Modular approach</h2><p>Nicely customized components that can be reused anytime and anywhere in your project</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><span class="fab fa-gulp"></span></div><h2 class="h5 my-3">Gulp & BrowserSync</h2><p>With our custom Gulp commands & BrowserSync we offer a seemless and fast workflow for your project</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><span class="fas fa-file-alt"></span></div><h2 class="h5 my-3">Well documented</h2><p>Our kit is delivered with very detailed documentation, describing all components, styles and usages</p></div></div><div class="col-md-4"><div class="icon-box text-center"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><span class="fas fa-tachometer-alt"></span></div><h2 class="h5 my-3">Google PageSpeed</h2><p>Neumorphism UI has 80+ scores on Google PageSpeed Insights to offer you and your clients a fast website</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><span class="fas fa-image"></span></div><h2 class="h5 my-3">SVG illustrations</h2><p>Photography and Illustration SVGs are included in the download package and are free to use</p></div></div><div class="col-md-4"><div class="icon-box text-center mb-5"><div class="icon icon-shape icon-shape-sm shadow-soft border border-light rounded-circle"><img class="navbar-brand-dark" style="height: 20px;" src="./assets/img/brand/dark.svg" alt="Neumorphism logo"></div><h2 class="h5 my-3">Neumorphic design</h2><p>We crafted each component with great care so it represents the latest neumorphic design trend</p></div></div></div></div></section><section class="section section-lg bg-soft"><div class="container"><div class="row justify-content-center mb-5 mb-lg-6"><div class="col-12 text-center"><h2 class="h1 px-lg-5">What's inside?</h2><p class="lead px-lg-8">We have carefully crafted the perfect folder structure to ensure that finding the files you're looking for are easily reachable and well organized.</p></div></div><div class="row d-flex align-items-center"><div class="col-12 col-lg-6 mb-4"><div class="d-none d-lg-block mt-5"><h3 class="h4">You need only HTML, CSS and Javascript?</h3><p class="lead mb-4">Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p><a href="https://themesberg.com/docs/neumorphism-ui/getting-started/file-structure/" target="_blank" class="btn btn-primary"><span class="fas fa-book mr-2"></span> File Structure</a></div></div><div class="col-12 col-lg-6 order-lg-first d-flex justify-content-center"><ul class="d-block fmw-100 list-style-none folder-structure"><li data-toggle="tooltip" data-placement="left" title="Main folder that you will be working with"><span class="fas fa-folder mr-2"></span>src</li><li><ul class="list-style-none pl-4"><li data-toggle="tooltip" data-placement="left" title="CSS, Images, Fonts and Javascript"><span class="fas fa-folder mr-2"></span> assets</li><li data-toggle="tooltip" data-placement="left" title="HTML templates"><span class="fas fa-folder mr-2"></span> html</li><li data-toggle="tooltip" data-placement="left" title="Partials are HTML snippets that are included in multiple pages, such as the menu or footer"><span class="fas fa-folder mr-2"></span> partials</li><li data-toggle="tooltip" data-placement="left" title="Sass source files"><span class="fas fa-folder mr-2"></span> scss</li><li data-toggle="tooltip" data-placement="left" title="The page you're looking at right now. Call it inception."><span class="fab fa-html5 mr-2 text-secondary"></span> index.html</li></ul></li><li data-toggle="tooltip" data-placement="left" title="Neumorphism UI with only HTML, CSS and Javascript"><span class="fas fa-folder mr-2 text-muted"></span> html&css</li><li data-toggle="tooltip" data-placement="left" title="Temporary folder that is created when serving files with BrowserSync"><span class="fas fa-folder text-muted mr-2"></span>.temp</li><li data-toggle="tooltip" data-placement="left" title="Minified version of the project"><span class="fas fa-folder mr-2 text-muted"></span> dist</li><li data-toggle="tooltip" data-placement="left" title="Project dependencies from package.json"><span class="fas fa-folder text-muted mr-2"></span> node_modules</li><li data-toggle="tooltip" data-placement="left" title="Development workflow commands. We have them well documented."><span class="fab fa-js-square mr-2 text-warning"></span> gulpfile.js</li><li data-toggle="tooltip" data-placement="left" title="Project details and dependencies."><span class="fas fa-file-code mr-2 text-tertiary"></span> package.json</li><li data-toggle="tooltip" data-placement="left" title="No project can miss a README :)"><span class="fas fa-file-code mr-2 text-tertiary"></span> README.md</li><li data-toggle="tooltip" data-placement="left" title="This file ensures that generated files and folder are ignored by Git. (eg. node_modules)"><span class="fas fa-file-code mr-2 text-tertiary"></span> .gitignore</li></ul></div><div class="col-12 mt-5 d-lg-none"><h3 class="h5">You need only HTML, CSS and Javascript?</h3><p>Don't worry, we got you covered. We have a folder called <code class="text-danger">html&css</code> which includes only the basic HTML5, CSS3 and Javascript technologies.</p></div></div></div></section><section class="section section-lg bg-soft"><div class="container"><div class="row justify-content-center text-center"><div class="col-lg-10 col-xl-12"><h1 class="font-weight-light mb-4">WCAG 2.1 accessible <span class="font-weight-bold">color scheme</span></h1><p class="lead">We've enhanced the color settings<br>to comply with the latest accessibility standards</p></div></div><div class="row mt-6"><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-light bg-light p-5 text-center mb-4"><div class="color-shape rounded bg-soft m-auto"></div><div class="mt-4"><h2 class="h5 text-dark">Primary:</h2><span class="font-weight-bold text-dark">#174F84</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-light bg-soft p-5 text-center mb-4"><div class="color-shape rounded bg-secondary m-auto"></div><div class="mt-4"><h2 class="h5 text-dark">Secondary:</h2><span class="font-weight-bold text-dark">#10AB7C</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-light bg-soft p-5 text-center mb-4"><div class="color-shape rounded bg-info m-auto"></div><div class="mt-4 text-dark"><h2 class="h5">Info:</h2><span class="font-weight-bold text-dark">#1E90FF</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-light bg-soft p-5 text-center mb-4"><div class="color-shape rounded bg-warning m-auto"></div><div class="mt-4 text-dark"><h2 class="h5">Warning:</h2><span class="font-weight-bold text-dark">#F5B759</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-light bg-soft p-5 text-center mb-4"><div class="color-shape rounded bg-success m-auto"></div><div class="mt-4 text-dark"><h2 class="h5">Success:</h2><span class="font-weight-bold text-dark">#00BF9A</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-light bg-soft p-5 text-center mb-4"><div class="color-shape rounded bg-danger m-auto"></div><div class="mt-4 text-dark"><h2 class="h5">Danger:</h2><span class="font-weight-bold text-dark">#FA5252</span></div></div></div><div class="col-md-6 col-sm-6 col-lg-3"><div class="card shadow-soft border-light bg-soft p-5 text-center mb-4"><div class="color-shape rounded bg-dark m-auto"></div><div class="mt-4"><h2 class="h5 text-dark">Dark:</h2><span class="font-weight-bold text-dark">#2A354F</span></div></div></div></div></div></section><section class="section section-lg bg-soft"><div class="container"><div class="row justify-content-center text-center text-dark mb-5"><div class="col-lg-9 col-xl-8"><h2 class="h1 font-weight-light mb-3">Less <span class="font-weight-bold">work</span>, more <span class="font-weight-bold">flow</span>.</h2><p class="lead">Boost productivity with BrowserSync. SCSS changes are reflected instantly and pages scroll and refresh on devices as you work.</p></div></div><div class="row justify-content-center mb-6"><div class="col-md-10 col-xl-9"><div class="position-relative"><div class="rounded shadow-soft border border-light bg-soft p-4 mb-2"><div class="mb-3"><div class="font-weight-normal">> $ npm install</div><div class="text-muted">Everything’s installed!</div></div><div class="mb-3"><div class="font-weight-normal">> $ gulp</div><div class="text-muted">SCSS watching</div><div class="text-muted">LiveReload started</div><div class="text-muted">Opening localhost:3000</div></div><div><div class="font-weight-normal">> $ that's it?</div><div class="text-muted">It's that simple!</div></div></div></div><div class="alert alert-dark shadow-soft position-relative mt-4"><span class="fas fa-question-circle mr-2"></span> Looks unfamiliar? Don’t worry! Our <a class="text-dark font-weight-bold text-underline" href="https://themesberg.com/docs/neumorphism-ui/getting-started/quick-start/" target="_blank">documentation</a> has got you covered.</div></div></div></div></section><section class="section section-lg overflow-hidden"><div class="container"><div class="row"><div class="col-12 col-lg-8"><h2 class="h1 font-weight-light mb-3"><strong>Open source</strong> project</h2><p class="lead mb-4">Neumorphism UI is an open source UI Kit that is licensed under the MIT License. Consider giving us a star on the official Github repository to spread the news!</p><div class="d-flex align-items-center"><a href="https://github.com/themesberg/neumorphism" target="_blank" class="btn btn-primary mr-4"><span class="fab fa-github mr-1"></span> View on GitHub </a><div class="mt-2"> <a class="github-button" href="https://github.com/themesberg/neumorphism-ui" data-color-scheme="no-preference: dark; light: light; dark: light;" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star themesberg/neumorphism-ui on GitHub">Star</a></div></div></div><div class="col-12 col-lg-4"><div class="github-big-icon"><span class="fab fa-github"></span></div></div></div><div class="row mt-6"><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0"><div class="card bg-soft shadow-soft border-light p-4"><div class="card-header pb-0"><span class="d-block"><span class="h2 font-weight-bold align-top">Free Demo</span></span></div><div class="card-body"><ul class="list-group list-group-flush price-list"><li class="list-group-item bg-soft pl-0"><strong>200</strong> Components</li><li class="list-group-item bg-soft pl-0"><strong>5</strong> Example Pages</li><li class="list-group-item bg-soft pl-0"><span class="text-danger"><span class="fas fa-times-circle"></span></span> Uncoventional cards</li><li class="list-group-item bg-soft pl-0"><span class="text-danger"><span class="fas fa-times-circle"></span></span> Timelines</li><li class="list-group-item bg-soft pl-0"><span class="text-danger"><span class="fas fa-times-circle"></span></span> E-commerce</li><li class="list-group-item bg-soft pl-0"><span class="text-danger"><span class="fas fa-times-circle"></span></span> Widgets</li><li class="list-group-item bg-soft pl-0 pb-0"><span class="text-danger"><span class="fas fa-times-circle"></span></span> Premium Support</li></ul></div></div></div><div class="col-12 col-md-6 col-lg-4 mb-5 mb-lg-0 mt-lg-n4"><div class="card bg-soft shadow-soft border-light p-4"><div class="card-header pb-0"><span class="d-block"><span class="h2 font-weight-bold align-top">Pro Version</span></span></div><div class="card-body"><ul class="list-group list-group-flush price-list"><li class="list-group-item bg-soft pl-0"><strong>1000+</strong> Components</li><li class="list-group-item bg-soft pl-0"><strong>13</strong> Example Pages</li><li class="list-group-item bg-soft pl-0"><span class="text-success"><span class="fas fa-check-circle"></span></span> Uncoventional cards</li><li class="list-group-item bg-soft pl-0"><span class="text-success"><span class="fas fa-check-circle"></span></span> Timelines</li><li class="list-group-item bg-soft pl-0"><span class="text-success"><span class="fas fa-check-circle"></span></span> E-commerce</li><li class="list-group-item bg-soft pl-0"><span class="text-success"><span class="fas fa-check-circle"></span></span> Widgets</li><li class="list-group-item bg-soft border-0 pl-0 pb-0"><span class="text-success"><span class="fas fa-check-circle"></span></span> Premium Support</li></ul><a href="https://themesberg.com/product/ui-kits/neumorphism-ui-pro" target="_blank" class="btn btn-block btn-primary text-secondary mt-4 mr-3"><i class="far fa-paper-plane mr-2"></i> Upgrade to PRO</a></div></div></div></div></div></section></main><a id="producthunt-badge" href="https://www.producthunt.com/posts/neumorphism-ui?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-neumorphism-ui" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=200908&theme=dark" alt="Neumorphism UI - Neumorphism inspired UI web components, sections and pages | Product Hunt Embed" style="width: 250px; height: 54px;" width="250px" height="54px"></a><footer class="d-flex pb-5 pt-6 pt-md-7 border-top border-light bg-primary"><div class="container"><div class="row"><div class="col-lg-4"><p><strong>Neumorphism UI PRO</strong> is a premium Bootstrap UI Kit built based on the newest design trend called Neumorphism.</p><ul class="d-flex list-unstyled mb-5 mb-lg-0"><li class="mr-2"><a href="https://twitter.com/themesberg" target="_blank" class="btn btn-icon-only btn-pill btn-primary" aria-label="twitter social link" data-toggle="tooltip" data-placement="top" title="Follow @themesberg on Twitter"><span aria-hidden="true" class="fab fa-twitter"></span></a></li><li class="mr-2"><a href="https://www.facebook.com/themesberg/" target="_blank" class="btn btn-icon-only btn-pill btn-primary" aria-label="facebook social link" data-toggle="tooltip" data-placement="top" title="Like @themesberg on Facebook"><span aria-hidden="true" class="fab fa-facebook"></span></a></li><li class="mr-2"><a href="https://github.com/themesberg" target="_blank" class="btn btn-icon-only btn-pill btn-primary" aria-label="github social link" data-toggle="tooltip" data-placement="top" title="Open source projects"><span aria-hidden="true" class="fab fa-github"></span></a></li><li><a href="https://dribbble.com/themesberg" target="_blank" class="btn btn-icon-only btn-pill btn-primary" aria-label="dribbble social link" data-toggle="tooltip" data-placement="top" title="Follow us on Dribbble"><span aria-hidden="true" class="fab fa-dribbble"></span></a></li></ul></div><div class="col-6 col-lg-2 mb-5 mb-lg-0"><h5>Themesberg</h5><ul class="footer-links list-unstyled mt-2"><li class="mb-1"><a class="p-2" target="_blank" href="https://themesberg.com/blog">Blog</a></li><li class="mb-1"><a class="p-2" target="_blank" href="https://themesberg.com/products">Products</a></li><li class="mb-1"><a class="p-2" target="_blank" href="https://themesberg.com/about">About Us</a></li><li><a class="p-2" target="_blank" href="https://themesberg.com/contact">Contact Us</a></li></ul></div><div class="col-6 col-lg-2 mb-5 mb-lg-0"><h5>Other</h5><ul class="footer-links list-unstyled mt-2"><li class="mb-1"><a class="p-2" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/overview/" target="_blank">Docs <span class="badge badge-gray text-uppercase ml-2">v1.0</span></a></li><li class="mb-1"><a class="p-2" href="https://themesberg.com/docs/pixel-bootstrap/getting-started/changelog" target="_blank">Changelog</a></li><li class="mb-1"><a class="p-2" target="_blank" href="https://themesberg.com/licensing">License</a></li><li><a class="p-2" target="_blank" href="https://github.com/themesberg/pixel-bootstrap-ui-kit/issues">Support</a></li></ul></div><div class="col-12 col-lg-4 mb-5 mb-lg-0"><h5>Subscribe</h5><p class="text-gray font-small mt-2">Join our mailing list. We write rarely, but only the best content.</p><form action="#"><div class="form-row mb-2"><div class="col-12"><label class="h6 font-weight-normal d-none" for="exampleInputEmail3">Email address</label> <input type="email" class="form-control mb-2" placeholder="example@company.com" name="email" aria-label="Subscribe form" id="exampleInputEmail3" required></div><div class="col-12"><button type="submit" class="btn btn-primary btn-block" data-loading-text="Sending"><span>Subscribe</span></button></div></div></form><p class="text-gray font-small m-0">We’ll never share your details. See our <a class="text-black" href="#">Privacy Policy</a></p></div></div><hr class="my-5"><div class="row"><div class="col"><a href="https://themesberg.com" target="_blank" class="d-flex justify-content-center"><img src="./assets/img/themesberg.svg" height="25" class="mb-3" alt="Themesberg Logo"></a><div class="d-flex text-center justify-content-center align-items-center" role="contentinfo"><p class="font-weight-normal font-small mb-0">Copyright © Themesberg <span class="current-year">2020</span>. All rights reserved.</p></div></div></div></div></footer><script src="./vendor/jquery/dist/jquery.min.js"></script><script src="./vendor/popper.js/dist/umd/popper.min.js"></script><script src="./vendor/bootstrap/dist/js/bootstrap.min.js"></script><script src="./vendor/headroom.js/dist/headroom.min.js"></script><script src="./vendor/onscreen/dist/on-screen.umd.min.js"></script><script src="./vendor/nouislider/distribute/nouislider.min.js"></script><script src="./vendor/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script><script src="./vendor/waypoints/lib/jquery.waypoints.min.js"></script><script src="./vendor/jarallax/dist/jarallax.min.js"></script><script src="./vendor/jquery.counterup/jquery.counterup.min.js"></script><script src="./vendor/jquery-countdown/dist/jquery.countdown.min.js"></script><script src="./vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script><script src="./vendor/prismjs/prism.js"></script><script async defer="defer" src="https://buttons.github.io/buttons.js"></script><script src="./assets/js/neumorphism.js"></script></body></html>