Drag & Drop Website Builders

<!DOCTYPE html> <html lang="en" itemscope itemtype="http://schema.org/WebPage"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="apple-touch-icon" sizes="76x76" href="./assets/img/apple-icon.png"> <link rel="icon" type="image/png" href="./assets/img/favicon.png"> <title> Drag & Drop Website Builders </title>   <link rel="canonical" href="https://www.creative-tim.com/product/soft-ui-design-system-pro" />  <meta name="keywords" content="drag and drop, website builder, dashboard builder, creative tim, low code"> <meta name="description" content="Choose your favorite design and create website pages or admins for your business in minutes using our Drag & Drop online builders based on Bootstrap. It鈥檚 really simple!">  <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Drag & Drop Website Builders"> <meta name="twitter:description" content="Choose your favorite design and create website pages or admins for your business in minutes using our Drag & Drop online builders based on Bootstrap. It鈥檚 really simple!"> <meta name="twitter:creator" content="@creativetim"> <meta name="twitter:image" content="https://s3.amazonaws.com/creativetim_bucket/products/414/thumb/opt_sds_thumbnail.png">  <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Drag & Drop Website Builders" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://demos.creative-tim.com/soft-ui-design-system-pro/presentation.html" /> <meta property="og:image" content="https://s3.amazonaws.com/creativetim_bucket/products/414/thumb/opt_sds_thumbnail.png" /> <meta property="og:description" content="Choose your favorite design and create website pages or admins for your business in minutes using our Drag & Drop online builders based on Bootstrap. It鈥檚 really simple!" /> <meta property="og:site_name" content="Creative Tim" />  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet" /> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">  <link href="./assets/css/nucleo-icons.css" rel="stylesheet" /> <link href="./assets/css/nucleo-svg.css" rel="stylesheet" />  <script src="https://kit.fontawesome.com/42d5adcbca.js" crossorigin="anonymous"></script> <link href="./assets/css/nucleo-svg.css" rel="stylesheet" />  <link id="pagestyle" href="https://cdn.jsdelivr.net/gh/creativetimofficial/public-assets@master/builder/presentation/css/soft-design-system-pro.min.css" rel="stylesheet" />  <style> .async-hide { opacity: 0 !important } </style> <script> (function(a, s, y, n, c, h, i, d, e) { s.className += ' ' + y; h.start = 1 * new Date; h.end = i = function() { s.className = s.className.replace(RegExp(' ?' + y), '') }; (a[n] = a[n] || []).hide = h; setTimeout(function() { i(); h.end = null }, c); h.timeout = c; })(window, document.documentElement, 'async-hide', 'dataLayer', 4000, { 'GTM-K9BGS8K': true }); </script>  <script> (function(i, s, o, g, r, a, m) { i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, i[r].l = 1 * new Date(); a = s.createElement(o), m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m) })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga'); ga('create', 'UA-46172202-22', 'auto', { allowLinker: true }); ga('set', 'anonymizeIp', true); ga('require', 'GTM-K9BGS8K'); ga('require', 'displayfeatures'); ga('require', 'linker'); ga('linker:autoLink', ["2checkout.com", "avangate.com"]); </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-NKDMSK6'); </script>  </head> <body class="presentation-page">   <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NKDMSK6" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>   <div class="container-md container-fluid"> <div class="row"> <div class="col-12"> <nav class="navbar navbar-expand-lg shadow-none my-1 py-2"> <div class="container-fluid px-0"> <div class="navbar-brand font-weight-bolder ms-sm-3"> <div class="d-inline position-relative pe-1"> <a href="https://www.creative-tim.com/" target="_blank" class="w-45"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/logos/logo-creative-tim-black.png" class="w-sm-45 w-30" alt="Logo Creative Tim"/> </a> <hr class="vertical dark my-0"/> </div> <span class="text-uppercase text-darker ms-2">Builders</span> </div> <a href="#builders" class="btn btn-sm bg-gradient-primary text-capitalize mb-0 ms-auto d-lg-none d-block border-radius-sm px-3">See Builders</a> <button class="navbar-toggler shadow-none ms-md-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon mt-2"> <span class="navbar-toggler-bar bar1"></span> <span class="navbar-toggler-bar bar2"></span> <span class="navbar-toggler-bar bar3"></span> </span> </button> <div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation"> <ul class="navbar-nav navbar-nav-hover mx-auto"> <li class="nav-item mx-2"> <a href="https://www.creative-tim.com/" target="_blank" class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"> Marketplace </a> </li> <li class="nav-item dropdown dropdown-hover mx-2"> <a role="button" class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false"> Docs <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> <div class="dropdown-menu dropdown-menu-animation mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs"> <div class="d-none d-lg-block"> <ul class="list-group"> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" target="_blank" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/soft-ui-dashboard"> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Soft UI Dashboard</h6> </a> </li> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" target="_blank" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/soft-ui-design-system"> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Soft UI Design System</h6> </a> </li> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" target="_blank" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard"> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Material Dashboard</h6> </a> </li> </ul> </div> <div class="row d-lg-none"> <div class="col-md-12 g-0"> <ul class="list-group"> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" target="_blank" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/soft-ui-dashboard"> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Soft UI Dashboard</h6> </a> </li> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" target="_blank" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/soft-ui-design-system"> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Soft UI Design System</h6> </a> </li> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" target="_blank" href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-dashboard"> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Material Dashboard</h6> </a> </li> </ul> </div> </div> </div> </li> <li class="nav-item mx-2"> <a href="#pricing" class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"> Pricing </a> </li> <li class="nav-item mx-2"> <a href="https://www.creative-tim.com/contact-us" target="_blank" class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center"> Contact Us </a> </li> <li class="nav-item dropdown dropdown-hover mx-2"> <a role="button" class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" id="dropdownMenuDocs" data-bs-toggle="dropdown" aria-expanded="false"> My Account <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/img/down-arrow-dark.svg" alt="down-arrow" class="arrow ms-1"> </a> <div class="dropdown-menu dropdown-menu-animation mt-0 mt-lg-3 p-3 border-radius-lg" aria-labelledby="dropdownMenuDocs"> <div class="d-none d-lg-block"> <ul class="list-group"> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" href="https://builder.creative-tim.com/profile/account"> <div class="d-flex"> <div class="icon h-10 me-3 d-flex mt-1"> <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 46 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>customer-support</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1717.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(1.000000, 0.000000)"> <path class="color-background" d="M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z" opacity="0.59858631"></path> <path class="color-background" d="M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z"></path> <path class="color-background" d="M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z"></path> </g> </g> </g> </g> </svg> </div> <div> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Profile</h6> </div> </div> </a> </li> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" href="https://builder.creative-tim.com/profile/projects"> <div class="d-flex"> <div class="icon h-10 me-3 d-flex mt-1"> <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>box-3d-50</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(603.000000, 0.000000)"> <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"> </path> <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path> <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path> </g> </g> </g> </g> </svg> </div> <div> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">My Projects</h6> </div> </div> </a> </li> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" href="https://builder.creative-tim.com/profile/purchases"> <div class="d-flex"> <div class="icon h-10 me-3 d-flex mt-1"> <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 45 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>shop </title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1716.000000, -439.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(0.000000, 148.000000)"> <path class="color-background" d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z" opacity="0.598981585"></path> <path class="color-background" d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z"></path> </g> </g> </g> </g> </svg> </div> <div> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Purchases</h6> </div> </div> </a> </li> </ul> </div> <div class="row d-lg-none"> <div class="col-md-12 g-0"> <ul class="list-group"> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" href="https://builder.creative-tim.com/profile/account"> <div class="d-flex"> <div class="icon h-10 me-3 d-flex mt-1"> <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 46 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>customer-support</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1717.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(1.000000, 0.000000)"> <path class="color-background" d="M45,0 L26,0 C25.447,0 25,0.447 25,1 L25,20 C25,20.379 25.214,20.725 25.553,20.895 C25.694,20.965 25.848,21 26,21 C26.212,21 26.424,20.933 26.6,20.8 L34.333,15 L45,15 C45.553,15 46,14.553 46,14 L46,1 C46,0.447 45.553,0 45,0 Z" opacity="0.59858631"></path> <path class="color-background" d="M22.883,32.86 C20.761,32.012 17.324,31 13,31 C8.676,31 5.239,32.012 3.116,32.86 C1.224,33.619 0,35.438 0,37.494 L0,41 C0,41.553 0.447,42 1,42 L25,42 C25.553,42 26,41.553 26,41 L26,37.494 C26,35.438 24.776,33.619 22.883,32.86 Z"></path> <path class="color-background" d="M13,28 C17.432,28 21,22.529 21,18 C21,13.589 17.411,10 13,10 C8.589,10 5,13.589 5,18 C5,22.529 8.568,28 13,28 Z"></path> </g> </g> </g> </g> </svg> </div> <div> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Profile</h6> </div> </div> </a> </li> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" href="https://builder.creative-tim.com/profile/projects"> <div class="d-flex"> <div class="icon h-10 me-3 d-flex mt-1"> <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>box-3d-50</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(603.000000, 0.000000)"> <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"> </path> <path class="color-background" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z" opacity="0.7"></path> <path class="color-background" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z" opacity="0.7"></path> </g> </g> </g> </g> </svg> </div> <div> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">My Projects</h6> </div> </div> </a> </li> <li class="nav-item list-group-item border-0 p-0"> <a class="dropdown-item py-2 ps-3 border-radius-md" href="https://builder.creative-tim.com/profile/purchases"> <div class="d-flex"> <div class="icon h-10 me-3 d-flex mt-1"> <svg class="text-secondary" width="16px" height="16px" viewBox="0 0 45 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>shop </title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1716.000000, -439.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(0.000000, 148.000000)"> <path class="color-background" d="M46.7199583,10.7414583 L40.8449583,0.949791667 C40.4909749,0.360605034 39.8540131,0 39.1666667,0 L7.83333333,0 C7.1459869,0 6.50902508,0.360605034 6.15504167,0.949791667 L0.280041667,10.7414583 C0.0969176761,11.0460037 -1.23209662e-05,11.3946378 -1.23209662e-05,11.75 C-0.00758042603,16.0663731 3.48367543,19.5725301 7.80004167,19.5833333 L7.81570833,19.5833333 C9.75003686,19.5882688 11.6168794,18.8726691 13.0522917,17.5760417 C16.0171492,20.2556967 20.5292675,20.2556967 23.494125,17.5760417 C26.4604562,20.2616016 30.9794188,20.2616016 33.94575,17.5760417 C36.2421905,19.6477597 39.5441143,20.1708521 42.3684437,18.9103691 C45.1927731,17.649886 47.0084685,14.8428276 47.0000295,11.75 C47.0000295,11.3946378 46.9030823,11.0460037 46.7199583,10.7414583 Z" opacity="0.598981585"></path> <path class="color-background" d="M39.198,22.4912623 C37.3776246,22.4928106 35.5817531,22.0149171 33.951625,21.0951667 L33.92225,21.1107282 C31.1430221,22.6838032 27.9255001,22.9318916 24.9844167,21.7998837 C24.4750389,21.605469 23.9777983,21.3722567 23.4960833,21.1018359 L23.4745417,21.1129513 C20.6961809,22.6871153 17.4786145,22.9344611 14.5386667,21.7998837 C14.029926,21.6054643 13.533337,21.3722507 13.0522917,21.1018359 C11.4250962,22.0190609 9.63246555,22.4947009 7.81570833,22.4912623 C7.16510551,22.4842162 6.51607673,22.4173045 5.875,22.2911849 L5.875,44.7220845 C5.875,45.9498589 6.7517757,46.9451667 7.83333333,46.9451667 L19.5833333,46.9451667 L19.5833333,33.6066734 L27.4166667,33.6066734 L27.4166667,46.9451667 L39.1666667,46.9451667 C40.2482243,46.9451667 41.125,45.9498589 41.125,44.7220845 L41.125,22.2822926 C40.4887822,22.4116582 39.8442868,22.4815492 39.198,22.4912623 Z"></path> </g> </g> </g> </g> </svg> </div> <div> <h6 class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0">Purchases</h6> </div> </div> </a> </li> </ul> </div> </div> </div> </li> </ul> <ul class="navbar-nav d-lg-block d-none"> <li class="nav-item"> <a href="#builders" class="btn bg-gradient-primary border-radius-sm text-capitalize text-base mb-0 me-1">See Builders</a> </li> </ul> </div> </div> </nav>  </div> </div> </div> <header class="header-2"> <div class="page-header overflow-visible mx-4 mb-0 border-radius-md align-items-center pt-8 pb-7 bg-gradient-dark-radial"> <div class="container"> <div class="row"> <div class="col-xl-4 col-lg-5 col-sm-7 mx-lg-0 mx-auto"> <div class="border-radius-xl p-1 mb-3 position-relative"> <span class="mask bg-dark border-radius-xl z-index-1 opacity-5"></span> <div class="d-flex align-items-center z-index-2 position-relative"> <span class="badge bg-info badge-sm rounded-pill">New</span> <a href="#soft-ui-dashboard-tailwind-builder" class="text-white icon-move-right text-sm ms-2 w-100 d-flex align-items-center"> Soft UI Dashboard Tailwind Builder <i class="fas fa-chevron-right text-xs ms-auto me-2" aria-hidden="true"></i> </a> </div> </div> </div> </div> <div class="row mb-6"> <div class="col-xl-5 col-lg-6 my-auto text-lg-start text-center"> <h4 class="text-gradient text-primary font-weight-bolder font-jakarta">Build your own web project</h4> <h1 class="mb-3 display-5 font-weight-bolder text-white font-jakarta">Drag & Drop <br/> Website Builders</h1> <p class="font-weight-normal text-lg text-white mb-4"> Choose your favorite design and create website pages or admins for your business in minutes using our Drag & Drop online builders based on Bootstrap and Tailwind CSS. It鈥檚 really simple! </p> <a href="#builders" class="btn bg-gradient-primary text-capitalize border-radius-sm mb-lg-0 mb-5"> See builders </a> </div> <div class="col-lg-6 col-l-7 ms-auto text-center"> <iframe src="https://www.youtube.com/embed/HpgKEzXp1-8" title="Soft UI Design System Builder - Simple Low Code Website Builder" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" class="border-radius-xl w-100 h-100 mb-lg-0 mb-sm-9 mb-8" allowfullscreen></iframe> </div> </div> </div> </div> </header> <section class="pt-3 pb-4" id="count-stats"> <div class="container"> <div class="row"> <div class="col-lg-12 z-index-2 border-radius-xl mt-n7 mx-auto py-2 blur shadow-blur"> <div class="row"> <div class="col-md-4 position-relative"> <div class="py-3 px-lg-6 text-center"> <h1 class="text-gradient text-primary mb-0"><span id="state1" countTo="4">0</span></h1> <h5 class="mt-1 font-weight-bolder">Builders</h5> <p class="text-sm">Choose the interface type and the design line to create your website</p> </div> <hr class="vertical dark"> </div> <div class="col-md-4 position-relative"> <div class="py-3 px-lg-6 text-center"> <h1 class="text-gradient text-primary mb-0"><span id="state2" countTo="200">0</span>+</h1> <h5 class="mt-1 font-weight-bolder">Components</h5> <p class="text-sm">From buttons, to inputs, navbars, alerts or cards, you are covered</p> </div> <hr class="vertical dark"> </div> <div class="col-md-4"> <div class="py-3 px-lg-6 text-center"> <h1 class="text-gradient text-primary mb-0"><span id="state3" countTo="100">0</span>+</h1> <h5 class="mt-1 font-weight-bolder">Sections</h5> <p class="text-sm">Mix the sections, change the colors and unleash your creativity</p> </div> </div> </div> </div> </div> </div> </section> <section class="py-6"> <div class="container"> <div class="row"> <div class="col-lg-6 mx-auto text-center pb-4"> <h5 class="text-gradient text-primary font-weight-bolder">Drag & Drop Website Builders</h5> <h2>Cut development time in half</h2> <p class="text-lg">Pick the blocks, customize to fit your style and professional needs, then download the code. As simple as that!</p> </div> </div> <div class="row"> <div class="col-md-4"> <div class="p-3 text-center"> <div class="icon icon-shape bg-gradient-dark shadow mx-auto d-flex aling-items-center justify-content-center"> <svg width="20px" height="20px" viewBox="0 0 40 40" class="m-auto"version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>spaceship</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(4.000000, 301.000000)"> <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path> <path class="color-background" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path> <path class="color-background" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z" opacity="0.598539807"></path> <path class="color-background" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z" opacity="0.598539807"></path> </g> </g> </g> </g> </svg> </div> <h5 class="mt-4 text-lg font-weight-bolder">Choose the design</h5> <p>Build web projects from hundreds of components grouped into the most frequently-used categories, including navigations, headers, and more.</p> </div> </div> <div class="col-md-4"> <div class="p-3 text-center"> <div class="icon icon-shape bg-gradient-dark shadow mx-auto d-flex aling-items-center justify-content-center"> <svg width="20px" height="20px" viewBox="0 0 40 40" class="m-auto" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>settings</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-2020.000000, -442.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(304.000000, 151.000000)"> <polygon class="color-background" opacity="0.596981957" points="18.0883333 15.7316667 11.1783333 8.82166667 13.3333333 6.66666667 6.66666667 0 0 6.66666667 6.66666667 13.3333333 8.82166667 11.1783333 15.315 17.6716667"></polygon> <path class="color-background" d="M31.5666667,23.2333333 C31.0516667,23.2933333 30.53,23.3333333 30,23.3333333 C29.4916667,23.3333333 28.9866667,23.3033333 28.48,23.245 L22.4116667,30.7433333 L29.9416667,38.2733333 C32.2433333,40.575 35.9733333,40.575 38.275,38.2733333 L38.275,38.2733333 C40.5766667,35.9716667 40.5766667,32.2416667 38.275,29.94 L31.5666667,23.2333333 Z" opacity="0.596981957"></path> <path class="color-background" d="M33.785,11.285 L28.715,6.215 L34.0616667,0.868333333 C32.82,0.315 31.4483333,0 30,0 C24.4766667,0 20,4.47666667 20,10 C20,10.99 20.1483333,11.9433333 20.4166667,12.8466667 L2.435,27.3966667 C0.95,28.7083333 0.0633333333,30.595 0.00333333333,32.5733333 C-0.0583333333,34.5533333 0.71,36.4916667 2.11,37.89 C3.47,39.2516667 5.27833333,40 7.20166667,40 C9.26666667,40 11.2366667,39.1133333 12.6033333,37.565 L27.1533333,19.5833333 C28.0566667,19.8516667 29.01,20 30,20 C35.5233333,20 40,15.5233333 40,10 C40,8.55166667 39.685,7.18 39.1316667,5.93666667 L33.785,11.285 Z"></path> </g> </g> </g> </g> </svg> </div> <h5 class="mt-4 text-lg font-weight-bolder">Edit code and texts</h5> <p>Change text using double click and use our in-page code editor to adjust your elements.</p> </div> </div> <div class="col-md-4"> <div class="p-3 text-center"> <div class="icon icon-shape bg-gradient-dark shadow mx-auto d-flex aling-items-center justify-content-center"> <svg width="20px" height="20px" viewBox="0 0 40 44" class="m-auto" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>document</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1870.000000, -591.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(154.000000, 300.000000)"> <path class="color-background" d="M40,40 L36.3636364,40 L36.3636364,3.63636364 L5.45454545,3.63636364 L5.45454545,0 L38.1818182,0 C39.1854545,0 40,0.814545455 40,1.81818182 L40,40 Z" opacity="0.603585379"></path> <path class="color-background" d="M30.9090909,7.27272727 L1.81818182,7.27272727 C0.814545455,7.27272727 0,8.08727273 0,9.09090909 L0,41.8181818 C0,42.8218182 0.814545455,43.6363636 1.81818182,43.6363636 L30.9090909,43.6363636 C31.9127273,43.6363636 32.7272727,42.8218182 32.7272727,41.8181818 L32.7272727,9.09090909 C32.7272727,8.08727273 31.9127273,7.27272727 30.9090909,7.27272727 Z M18.1818182,34.5454545 L7.27272727,34.5454545 L7.27272727,30.9090909 L18.1818182,30.9090909 L18.1818182,34.5454545 Z M25.4545455,27.2727273 L7.27272727,27.2727273 L7.27272727,23.6363636 L25.4545455,23.6363636 L25.4545455,27.2727273 Z M25.4545455,20 L7.27272727,20 L7.27272727,16.3636364 L25.4545455,16.3636364 L25.4545455,20 Z"></path> </g> </g> </g> </g> </svg> </div> <h5 class="mt-4 text-lg font-weight-bolder">Download Source Code</h5> <p>Our builder is great for developers and also no-coders. You can download all the source files and then simply upload them on your website's server.</p> </div> </div> </div> </div> </section> <section class="mt-5 mb-8 pt-3" id="builders"> <div class="container"> <div class="row"> <div class="col-md-5 col-12 my-auto"> <h5 class="text-gradient text-primary font-weight-bolder">Backend UI</h5> <h2>Soft UI <br/> Dashboard Builder</h2> <p class="text-lg">Build the UI of your application's backend with our <br/> easy-to-use dashboard builder.</p> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Soft UI Design System by Creative Tim</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Pre-formatted sections</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Coded with Bootstrap</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Responsive Code</span> </div> </div> <a href="https://builder.creative-tim.com/builder-new-project?product=soft-ui-dashboard" target="_blank" class="btn bg-gradient-primary text-capitalize border-radius-sm mt-4">Try for Free</a> </div> <div class="col-md-7 col-12 my-auto ms-auto"> <a href="https://builder.creative-tim.com/builder-new-project?product=soft-ui-dashboard" target="_blank"> <img class="w-100 border-radius-lg" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/soft-dashboard-builder.png" alt="Soft Dashboard Builder"> </a> </div> </div> </div> </section> <section class="mt-5 mb-8"> <div class="container"> <div class="row"> <div class="col-md-7 col-12 my-auto me-auto px-4 order-lg-1 order-2"> <a href="https://builder.creative-tim.com/builder-new-project?product=soft-ui-design-system" target="_blank"> <img class="w-100 border-radius-lg" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/soft-design-builder.png" alt="Soft Design System Builder"> </a> </div> <div class="col-md-5 col-12 my-auto order-lg-2 order-1"> <h5 class="text-gradient text-primary font-weight-bolder">Frontend UI</h5> <h2>Soft UI <br/> Design System Builder</h2> <p class="text-lg">Grow your business online with our online builder for web pages.</p> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Soft UI Design System by Creative Tim</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Pre-formatted sections</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Coded with Bootstrap</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Responsive Code</span> </div> </div> <a href="https://builder.creative-tim.com/builder-new-project?product=soft-ui-design-system" target="_blank" class="btn bg-gradient-primary text-capitalize border-radius-sm mt-4">Try for Free</a> </div> </div> </div> </section> <section class="mt-5 mb-8"> <div class="container"> <div class="row"> <div class="col-md-5 col-12 my-auto"> <h5 class="text-gradient text-primary font-weight-bolder">Backend UI</h5> <h2>Material <br/> Dashboard Builder</h2> <p class="text-lg">Another design line to build the UI of your application's backend packed in an awesome builder.</p> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Material Design System by Creative Tim</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Pre-formatted sections</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Coded with Bootstrap</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Responsive Code</span> </div> </div> <a href="https://builder.creative-tim.com/builder-new-project?product=material-dashboard" target="_blank" class="btn bg-gradient-primary text-capitalize border-radius-sm mt-4">Try for Free</a> </div> <div class="col-md-7 col-12 my-auto ms-auto"> <a href="https://builder.creative-tim.com/builder-new-project?product=material-dashboard" target="_blank"> <img class="w-100 border-radius-lg" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/material-dashboard-builder.png" alt="Material Dashboard Builder"> </a> </div> </div> </div> </section> <section class="mt-5 mb-8 pt-5" id="soft-ui-dashboard-tailwind-builder"> <div class="container"> <div class="row"> <div class="col-md-7 col-12 my-auto me-auto px-4 order-lg-1 order-2"> <a href="https://builder.creative-tim.com/builder-new-project?product=soft-ui-dashboard-tailwind" target="_blank"> <img class="w-100 border-radius-lg" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/soft-ui-dashboard-builder-tailwind.png" alt="Soft UI Dashboard Tailwind Builder"> </a> </div> <div class="col-md-5 col-12 my-auto order-lg-2 order-1"> <div class="d-flex align-items-center mb-2"> <h5 class="text-gradient text-primary font-weight-bolder mb-0">Backend UI</h5> <span class="badge bg-info badge-sm rounded-pill ms-2">New</span> </div> <h2>Soft UI Dashboard <br/> Tailwind Builder</h2> <p class="text-lg">Build the UI of your application's backend with our easy-to-use dashboard builder based on Tailwind CSS.</p> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Soft UI Dashboard Tailwind by Creative Tim</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Pre-formatted sections</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Coded with Tailwind CSS</span> </div> </div> <div class="d-flex justify-content-lg-start align-items-center py-2"> <div class="icon icon-shape icon-xxs rounded-circle bg-gradient-dark d-flex align-items-center justify-content-center text-center"> <i class="fas fa-check opacity-10 mt-2" aria-hidden="true"></i> </div> <div> <span class="ps-2">Responsive Code</span> </div> </div> <a href="https://builder.creative-tim.com/builder-new-project?product=soft-ui-dashboard-tailwind" target="_blank" class="btn bg-gradient-primary text-capitalize border-radius-sm mt-4">Try for Free</a> </div> </div> </div> </section> <section class="pb-7 pt-3"> <div class="container"> <div class="row"> <div class="col-lg-6 mx-auto text-center pb-4"> <h5 class="text-gradient text-primary font-weight-bolder">Our Users</h5> <h2>What Customers Say</h2> <p class="text-lg">Not sure yet? See what our users say about our website builders!</p> </div> </div> <div class="row mt-4"> <div class="col-lg-4 col-md-8"> <div class="card card-plain"> <div class="card-body"> <div class="author"> <div class="name"> <h6 class="mb-0 font-weight-bolder">Nick Willever</h6> <div class="stats"> <i class="far fa-clock"></i> 1 day ago </div> </div> </div> <p class="mt-4">"This is an excellent product, the documentation is excellent and helped me get things done more efficiently."</p> <div class="rating mt-3"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> <div class="col-lg-4 col-md-8 ms-md-auto"> <div class="card bg-gradient-primary"> <div class="card-body"> <div class="author align-items-center"> <div class="name"> <h6 class="text-white mb-0 font-weight-bolder">Shailesh Kushwaha</h6> <div class="stats text-white"> <i class="far fa-clock"></i> 1 week ago </div> </div> </div> <p class="mt-4 text-white">"I found solution to all my design needs from Creative Tim. I use them as a freelancer in my hobby projects for fun! And its really affordable, very humble guys !!!"</p> <div class="rating mt-3"> <i class="fas fa-star text-white"></i> <i class="fas fa-star text-white"></i> <i class="fas fa-star text-white"></i> <i class="fas fa-star text-white"></i> <i class="fas fa-star text-white"></i> </div> </div> </div> </div> <div class="col-lg-4 col-md-8"> <div class="card card-plain"> <div class="card-body"> <div class="author"> <div class="name"> <h6 class="mb-0 font-weight-bolder">Samuel Kamuli</h6> <div class="stats"> <i class="far fa-clock"></i> 3 weeks ago </div> </div> </div> <p class="mt-4">"Great product. Helped me cut the time to set up a site. I used the components within instead of starting from scratch. I highly recommend for developers who want to spend more time on the backend!."</p> <div class="rating mt-3"> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> <i class="fas fa-star"></i> </div> </div> </div> </div> </div> <hr class="horizontal dark my-5"> <div class="row"> <div class="col-lg-2 col-md-4 col-6 ms-auto"> <img class="w-100 opacity-6" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/logos/gray-logos/logo-apple.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/logos/gray-logos/logo-facebook.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/logos/gray-logos/logo-behance.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6"> <img class="w-100 opacity-6" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/logos/gray-logos/logo-spotify.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6 ms-lg-0 ms-md-auto"> <img class="w-100 opacity-6" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/logos/gray-logos/logo-coinbase.svg" alt="Logo"> </div> <div class="col-lg-2 col-md-4 col-6 me-md-auto mx-md-0 mx-auto"> <img class="w-100 opacity-6" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/logos/gray-logos/logo-pinterest.svg" alt="Logo"> </div> </div> </div> </section> <section class="py-7 mb-5 position-relative"> <div class="container"> <div class="row mb-6"> <div class="col-lg-6 mx-auto text-center pb-4"> <h5 class="text-gradient text-primary font-weight-bolder">About Web Builders</h5> <h2>Why use a Website Builder?</h2> <p class="text-lg">Building a website shouldn鈥檛 be a daunting task. With a good online builder, you can have a website up and running in a flash.</p> </div> </div> <div class="row align-items-center"> <div class="col-xl-6 col-md-9"> <div class="row justify-content-start"> <h5 class="text-gradient text-primary font-weight-bolder">The Fast & Easy Solution</h5> <h3>Simplify the development process</h3> <p class="mb-6"> A website builder is explicitly devised to make web development and designing easier for individuals who do not possess technical or coding skills. </p> <div class="col-md-6 mb-3"> <div class="info d-flex"> <div> <div class="icon icon-shape border-radius-md icon-sm bg-gradient-dark d-flex aling-items-center justify-content-center"> <svg width="14px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>box-3d-50</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-2319.000000, -291.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(603.000000, 0.000000)"> <path class="color-background" d="M22.7597136,19.3090182 L38.8987031,11.2395234 C39.3926816,10.9925342 39.592906,10.3918611 39.3459167,9.89788265 C39.249157,9.70436312 39.0922432,9.5474453 38.8987261,9.45068056 L20.2741875,0.1378125 L20.2741875,0.1378125 C19.905375,-0.04725 19.469625,-0.04725 19.0995,0.1378125 L3.1011696,8.13815822 C2.60720568,8.38517662 2.40701679,8.98586148 2.6540352,9.4798254 C2.75080129,9.67332903 2.90771305,9.83023153 3.10122239,9.9269862 L21.8652864,19.3090182 C22.1468139,19.4497819 22.4781861,19.4497819 22.7597136,19.3090182 Z"></path> <path class="color-background opacity-6" d="M23.625,22.429159 L23.625,39.8805372 C23.625,40.4328219 24.0727153,40.8805372 24.625,40.8805372 C24.7802551,40.8805372 24.9333778,40.8443874 25.0722402,40.7749511 L41.2741875,32.673375 L41.2741875,32.673375 C41.719125,32.4515625 42,31.9974375 42,31.5 L42,14.241659 C42,13.6893742 41.5522847,13.241659 41,13.241659 C40.8447549,13.241659 40.6916418,13.2778041 40.5527864,13.3472318 L24.1777864,21.5347318 C23.8390024,21.7041238 23.625,22.0503869 23.625,22.429159 Z"></path> <path class="color-background opacity-6" d="M20.4472136,21.5347318 L1.4472136,12.0347318 C0.953235098,11.7877425 0.352562058,11.9879669 0.105572809,12.4819454 C0.0361450918,12.6208008 6.47121774e-16,12.7739139 0,12.929159 L0,30.1875 L0,30.1875 C0,30.6849375 0.280875,31.1390625 0.7258125,31.3621875 L19.5528096,40.7750766 C20.0467945,41.0220531 20.6474623,40.8218132 20.8944388,40.3278283 C20.963859,40.1889789 21,40.0358742 21,39.8806379 L21,22.429159 C21,22.0503869 20.7859976,21.7041238 20.4472136,21.5347318 Z"></path> </g> </g> </g> </g> </svg> </div> </div> <p class="ms-3 mt-n1"> No design talent required. Our ready-made designs are prepared by UI/UX experts. </p> </div> </div> <div class="col-md-6 mb-3"> <div class="info d-flex"> <div> <div class="icon icon-shape border-radius-md icon-sm bg-gradient-dark d-flex aling-items-center justify-content-center"> <svg width="14px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>spaceship</title> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g transform="translate(-1720.000000, -592.000000)" fill="#FFFFFF" fill-rule="nonzero"> <g transform="translate(1716.000000, 291.000000)"> <g transform="translate(4.000000, 301.000000)"> <path class="color-background" d="M39.3,0.706666667 C38.9660984,0.370464027 38.5048767,0.192278529 38.0316667,0.216666667 C14.6516667,1.43666667 6.015,22.2633333 5.93166667,22.4733333 C5.68236407,23.0926189 5.82664679,23.8009159 6.29833333,24.2733333 L15.7266667,33.7016667 C16.2013871,34.1756798 16.9140329,34.3188658 17.535,34.065 C17.7433333,33.98 38.4583333,25.2466667 39.7816667,1.97666667 C39.8087196,1.50414529 39.6335979,1.04240574 39.3,0.706666667 Z M25.69,19.0233333 C24.7367525,19.9768687 23.3029475,20.2622391 22.0572426,19.7463614 C20.8115377,19.2304837 19.9992882,18.0149658 19.9992882,16.6666667 C19.9992882,15.3183676 20.8115377,14.1028496 22.0572426,13.5869719 C23.3029475,13.0710943 24.7367525,13.3564646 25.69,14.31 C26.9912731,15.6116662 26.9912731,17.7216672 25.69,19.0233333 L25.69,19.0233333 Z"></path> <path class="color-background opacity-6" d="M1.855,31.4066667 C3.05106558,30.2024182 4.79973884,29.7296005 6.43969145,30.1670277 C8.07964407,30.6044549 9.36054508,31.8853559 9.7979723,33.5253085 C10.2353995,35.1652612 9.76258177,36.9139344 8.55833333,38.11 C6.70666667,39.9616667 0,40 0,40 C0,40 0,33.2566667 1.855,31.4066667 Z"></path> <path class="color-background opacity-6" d="M17.2616667,3.90166667 C12.4943643,3.07192755 7.62174065,4.61673894 4.20333333,8.04166667 C3.31200265,8.94126033 2.53706177,9.94913142 1.89666667,11.0416667 C1.5109569,11.6966059 1.61721591,12.5295394 2.155,13.0666667 L5.47,16.3833333 C8.55036617,11.4946947 12.5559074,7.25476565 17.2616667,3.90166667 L17.2616667,3.90166667 Z"></path> <path class="color-background opacity-6" d="M36.0983333,22.7383333 C36.9280725,27.5056357 35.3832611,32.3782594 31.9583333,35.7966667 C31.0587397,36.6879974 30.0508686,37.4629382 28.9583333,38.1033333 C28.3033941,38.4890431 27.4704606,38.3827841 26.9333333,37.845 L23.6166667,34.53 C28.5053053,31.4496338 32.7452344,27.4440926 36.0983333,22.7383333 L36.0983333,22.7383333 Z"></path> </g> </g> </g> </g> </svg> </div> </div> <p class="ms-3 mt-n1"> Easy-to-use. The Drag & Drop feature makes the creation process fast and fun! </p> </div> </div> <div class="col-md-6 mb-3"> <div class="info d-flex"> <div> <div class="icon icon-shape border-radius-md icon-sm bg-gradient-dark d-flex aling-items-center justify-content-center"> <svg width="14" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <circle cx="1.57542" cy="1.57542" r="1.57542" fill="white" /> <circle cx="1.57542" cy="5.7766" r="1.57542" fill="white" /> <circle cx="1.57542" cy="9.97765" r="1.57542" fill="white" /> <rect opacity="0.598912" x="4.20113" y="0.7229" width="10.3978" height="1.62794" rx="0.813969" fill="white" /> <rect opacity="0.598912" x="4.20113" y="4.92407" width="10.3978" height="1.62794" rx="0.813969" fill="white" /> <rect opacity="0.598912" x="4.20113" y="9.12524" width="10.3978" height="1.62794" rx="0.813969" fill="white" /> </svg> </div> </div> <p class="ms-3 mt-n1"> Time saving. All you need to <br/> do is add in your own <br/> content. </p> </div> </div> <div class="col-md-6 mb-3"> <div class="info d-flex"> <div> <div class="icon icon-shape border-radius-md icon-sm bg-gradient-dark d-flex aling-items-center justify-content-center"> <svg width="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.6" x="2" y="2" width="10" height="1" fill="white" /> <rect opacity="0.6" x="4" width="6" height="1" fill="white" /> <path fill-rule="evenodd" clip-rule="evenodd" d="M0.433333 4H12.5667C12.806 4 13 4.18655 13 4.41667V13.5833C13 13.8135 12.806 14 12.5667 14H0.433333C0.19401 14 0 13.8135 0 13.5833V4.41667C0 4.18655 0.19401 4 0.433333 4ZM9.1 9C9.33932 9 9.53333 8.81345 9.53333 8.58333V6.91667H8.66667V8.16667H4.33333V6.91667H3.46667V8.58333C3.46667 8.81345 3.66068 9 3.9 9H9.1Z" fill="white" /> </svg> </div> </div> <p class="ms-3 mt-n1"> High-quality code. Ready to be downloaded and uploaded in the website's server. </p> </div> </div> </div> </div> </div> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/web-builders.png" class="top-0 end-0 position-absolute mt-8 w-xl-auto w-40 d-md-block d-none" alt="Web Builders"> </div> </section> <section class="py-7" id="pricing"> <div class="container"> <div class="row"> <div class="col-lg-6 mx-auto text-center"> <h2 class="mb-0">Trusted by over</h2> <h2 class="text-gradient text-primary mb-3">2,040,000 web developers</h2> <p class="lead">The UI Kits, Templates and Dashboards that we've created are used in over 3,000,000+ web & mobile projects. You are in good company!</p> </div> </div> <div class="row"> <div class="col-sm-4 col-12 mx-auto text-center"> <div class="nav-wrapper mt-5"> <ul class="nav nav-pills nav-fill flex-row p-1 position-relative" id="tabs-pricing-4" role="tablist"> <li class="nav-item"> <a class="nav-link mb-0" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#monthly" role="tab" aria-controls="monthly" aria-selected="false"> Monthly </a> </li> <li class="nav-item"> <a class="nav-link mb-0 active" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#yearly" role="tab" aria-controls="yearly" aria-selected="true"> Annual </a> </li> </ul> </div> </div> </div> <div class="tab-content tab-space">  <div class="tab-pane" id="monthly"> <div class="row mt-5"> <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4 ms-sm-auto"> <div class="card shadow-none border h-100"> <div class="card-header text-sm-start text-center pt-4 pb-3 px-4"> <h5 class="mb-1">Demo</h5> <h3 class="font-weight-bolder mt-3"> FREE </h3> <a href="https://builder.creative-tim.com/builder" class="btn btn-sm btn-outline-dark w-100 border-radius-md mt-4 mb-2">Free demo</a> </div> <hr class="horizontal dark my-0"> <div class="card-body"> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Builders</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Export Code</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Pro Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to New Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Pages</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Projects</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Exports</span> </div> </div> </div> </div> </div> <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4"> <div class="card shadow-none border h-100"> <div class="card-header text-sm-start text-center pt-4 pb-3 px-4"> <h5 class="mb-1">Basic</h5> <h3 class="font-weight-bolder mt-3"> <small class="text-secondary font-weight-bold"><strike>$19</strike></small> $9 <small class="text-sm text-secondary font-weight-bold">/ month</small> </h3> <a href="https://builder.creative-tim.com/pricing?basic-monthly" class="btn btn-sm bg-gradient-dark w-100 border-radius-md mt-4 mb-2">Buy now</a> </div> <hr class="horizontal dark my-0"> <div class="card-body"> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Builders</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Export Code</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Pro Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to New Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Pages</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Projects</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Exports</span> </div> </div> </div> </div> </div> <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4 me-sm-auto ms-lg-0 mx-auto"> <div class="card shadow-none border h-100"> <div class="card-header text-sm-start text-center pt-4 pb-3 px-4"> <h5 class="mb-1">Premium</h5> <h3 class="font-weight-bolder mt-3"> <small class="text-secondary font-weight-bold"><strike>$39</strike></small> $19 <small class="text-sm text-secondary font-weight-bold">/ month</small> </h3> <a href="https://builder.creative-tim.com/pricing?premium-monthly" class="btn btn-sm bg-gradient-dark w-100 border-radius-md mt-4 mb-2">Buy now</a> </div> <hr class="horizontal dark my-0"> <div class="card-body"> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Builders</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Export Code</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Pro Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to New Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Pages</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Projects</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Exports</span> </div> </div> </div> </div> </div> </div> </div>   <div class="tab-pane active" id="yearly"> <div class="row mt-5"> <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4 ms-sm-auto"> <div class="card shadow-none border h-100"> <div class="card-header text-sm-start text-center pt-4 pb-3 px-4"> <h5 class="mb-1">Demo</h5> <h3 class="font-weight-bolder mt-3"> FREE </h3> <a href="https://builder.creative-tim.com/builder" class="btn btn-sm btn-outline-dark w-100 border-radius-md mt-4 mb-2">Free demo</a> </div> <hr class="horizontal dark my-0"> <div class="card-body"> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Builders</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Export Code</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Pro Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to New Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Pages</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Projects</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Exports</span> </div> </div> </div> </div> </div> <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4"> <div class="card shadow-none border h-100"> <div class="card-header text-sm-start text-center pt-4 pb-3 px-4"> <h5 class="mb-1">Basic</h5> <h3 class="font-weight-bolder mt-3"> <small class="text-secondary font-weight-bold"><strike>$239</strike></small> <span class="text-danger">$49</span> <small class="text-sm text-secondary font-weight-bold">/ year</small> </h3> <a href="https://builder.creative-tim.com/pricing?basic-yearly" class="btn btn-sm bg-gradient-dark w-100 border-radius-md mt-4 mb-2">Buy now</a> </div> <hr class="horizontal dark my-0"> <div class="card-body"> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Builders</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Export Code</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Pro Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to New Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Pages</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Projects</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-minus text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Exports</span> </div> </div> </div> </div> </div> <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4 me-sm-auto ms-lg-0 mx-auto"> <div class="card shadow-none border h-100"> <div class="card-header text-sm-start text-center pt-4 pb-3 px-4"> <h5 class="mb-1">Premium</h5> <h3 class="font-weight-bolder mt-3"> <small class="text-secondary font-weight-bold"><strike>$479</strike></small> <span class="text-danger">$99</span> <small class="text-sm text-secondary font-weight-bold">/ year</small> </h3> <a href="https://builder.creative-tim.com/pricing?premium-yearly" class="btn btn-sm bg-gradient-dark w-100 border-radius-md mt-4 mb-2">Buy now</a> </div> <hr class="horizontal dark my-0"> <div class="card-body"> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Builders</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Export Code</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to Pro Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Access to New Components</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Pages</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Projects</span> </div> </div> <div class="d-flex pb-3"> <div> <i class="fas fa-check text-success text-sm"></i> </div> <div class="ps-3"> <span class="text-sm">Unlimited Exports</span> </div> </div> </div> </div> </div> </div> </div>  </div> <div class="col-10 mx-auto"> <div class="row"> <div class="col-lg-10 mx-auto text-center mt-5"> <p>If you purchase a discounted option, that option will be frozen for your account, that means you will pay the same amount after we finish the Discount Campaign. For example if you paid 9$/month and we will switch to 19$/month after the campaign, you will still pay 9$/month for an unlimited time.</p> </div> <div class="col-lg-6 mx-auto"> <p class="text-center d-flex justify-content-center"> <img class="me-2" style="width:15px;" src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/img/money-back-icon.svg">30 Days money back.</p> <p class="text-center"> <i class="fa fa-lock"></i> Secured Payment by <b> Stripe</b> with: <br> <i class="fa fa-cc-visa fa-2x mt-2 mr-1"></i> <i class="fa fa-cc-mastercard fa-2x mt-2 mr-1"></i> <i class="fa fa-cc-amex fa-2x mt-2 mr-1"></i> </p> </div> </div> </div> </div> </div> </section> <section class="py-4"> <div class="container"> <div class="row my-5"> <div class="col-md-6 mx-auto text-center"> <h5 class="text-gradient text-primary font-weight-bolder">FAQ</h5> <h2>Frequently Asked Questions</h2> <p>See below what other users asked.</p> </div> </div> <div class="row"> <div class="col-md-8 mx-auto"> <div class="accordion" id="accordionRental"> <div class="accordion-item mb-3"> <h5 class="accordion-header" id="headingOne"> <button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> What is a website builder? <i class="collapse-close fa fa-chevron-down text-xs pt-1 position-absolute end-0 me-3"></i> <i class="collapse-open fa fa-chevron-up text-xs pt-1 position-absolute end-0 me-3"></i> </button> </h5> <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionRental"> <div class="accordion-body"> A website builder is a tool that allows you to create websites without having to edit any code (or with minimal code editing implications). You can do everything you need by yourself, without needing a designer or developer. </div> </div> </div> <div class="accordion-item mb-3"> <h5 class="accordion-header" id="headingTwo"> <button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> What is an admin builder? <i class="collapse-close fa fa-chevron-down text-xs pt-1 position-absolute end-0 me-3"></i> <i class="collapse-open fa fa-chevron-up text-xs pt-1 position-absolute end-0 me-3"></i> </button> </h5> <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionRental"> <div class="accordion-body"> An admin builder or dashboard builder is an website builder that helps you specifically create the user interface of the website's backend. Any application/website owner needs an admin to manage it. </div> </div> </div> <div class="accordion-item mb-3"> <h5 class="accordion-header" id="headingFour"> <button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> What is the difference between the 3 builders? <i class="collapse-close fa fa-chevron-down text-xs pt-1 position-absolute end-0 me-3"></i> <i class="collapse-open fa fa-chevron-up text-xs pt-1 position-absolute end-0 me-3"></i> </button> </h5> <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#accordionRental"> <div class="accordion-body"> The first difference consists in the builder type: Soft UI Dashboard Builder and Material Dashboard Builder are used to create admins (the backend user interface), whereas Soft UI Design System is used to create web pages (the frontend user interface). The second difference consists in the design lign: the first two builders come with Soft UI Design and the last one comes with Material Design. </div> </div> </div> <div class="accordion-item mb-3"> <h5 class="accordion-header" id="headingFifth"> <button class="accordion-button border-bottom font-weight-bold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFifth" aria-expanded="false" aria-controls="collapseFifth"> What does the free version include? <i class="collapse-close fa fa-chevron-down text-xs pt-1 position-absolute end-0 me-3"></i> <i class="collapse-open fa fa-chevron-up text-xs pt-1 position-absolute end-0 me-3"></i> </button> </h5> <div id="collapseFifth" class="accordion-collapse collapse" aria-labelledby="headingFifth" data-bs-parent="#accordionRental"> <div class="accordion-body"> With the free version you will have access only to the free components (limited number). </div> </div> </div> </div> </div> </div> </div> </section> <footer class="footer"> <hr class="horizontal dark mb-5"> <div class="container"> <div class=" row"> <div class="col-md-3 mb-4 ms-auto"> <div class="d-flex align-items-center"> <div class="d-inline position-relative pe-1 w-30"> <a href="https://www.creative-tim.com/" target="_blank" class="w-45"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/logos/logo-creative-tim-black.png" class="w-100" alt="Logo Creative Tim"/> </a> <hr class="vertical dark my-0"/> </div> <span class="text-uppercase text-darker font-weight-bolder text-sm ms-2">Builders</span> </div> <div> <h6 class="mt-3 mb-2 opacity-8">Social</h6> <ul class="d-flex flex-row ms-n3 nav"> <li class="nav-item"> <a class="nav-link pe-1" href="https://www.facebook.com/CreativeTim/" target="_blank"> <i class="fab fa-facebook text-lg opacity-8"></i> </a> </li> <li class="nav-item"> <a class="nav-link pe-1" href="https://twitter.com/creativetim" target="_blank"> <i class="fab fa-twitter text-lg opacity-8"></i> </a> </li> <li class="nav-item"> <a class="nav-link pe-1" href="https://dribbble.com/creativetim" target="_blank"> <i class="fab fa-dribbble text-lg opacity-8"></i> </a> </li> <li class="nav-item"> <a class="nav-link pe-1" href="https://github.com/creativetimofficial" target="_blank"> <i class="fab fa-github text-lg opacity-8"></i> </a> </li> <li class="nav-item"> <a class="nav-link pe-1" href="https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w" target="_blank"> <i class="fab fa-youtube text-lg opacity-8"></i> </a> </li> </ul> </div> </div> <div class="col-md-2 col-sm-6 col-6 mb-4"> <div> <h6 class="text-gradient text-primary text-sm">Company</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/presentation" target="_blank"> About Us </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/templates/free" target="_blank"> Freebies </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/templates/premium" target="_blank"> Premium Tools </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/blog" target="_blank"> Blog </a> </li> </ul> </div> </div> <div class="col-md-2 col-sm-6 col-6 mb-4"> <div> <h6 class="text-gradient text-primary text-sm">Resources</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link" href="https://iradesign.io/" target="_blank"> Illustrations </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/bits" target="_blank"> Bits & Snippets </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/affiliates/new" target="_blank"> Affiliate Program </a> </li> </ul> </div> </div> <div class="col-md-2 col-sm-6 col-6 mb-4"> <div> <h6 class="text-gradient text-primary text-sm">Help & Support</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/contact-us" target="_blank"> Contact Us </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/knowledge-center" target="_blank"> Knowledge Center </a> </li> <li class="nav-item"> <a class="nav-link" href="https://services.creative-tim.com/?ref=ct-soft-ui-footer" target="_blank"> Custom Development </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/sponsorships" target="_blank"> Sponsorships </a> </li> </ul> </div> </div> <div class="col-md-2 col-sm-6 col-6 mb-4 me-auto"> <div> <h6 class="text-gradient text-primary text-sm">Legal</h6> <ul class="flex-column ms-n3 nav"> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/terms" target="_blank"> Terms & Conditions </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/privacy" target="_blank"> Privacy Policy </a> </li> <li class="nav-item"> <a class="nav-link" href="https://www.creative-tim.com/license" target="_blank"> Licenses (EULA) </a> </li> </ul> </div> </div> <div class="col-12"> <div class="text-center"> <p class="my-4 text-sm"> All rights reserved. Copyright 漏 <script> document.write(new Date().getFullYear()) </script> Soft UI Design System by <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>. </p> </div> </div> </div> </div> </footer>  <script src="https://cdn.statically.io/gh/creativetimofficial/public-assets/ba3689e3/builder/presentation/js/soft-design-system-pro.min.js" type="text/javascript"></script> <script src="https://cdn.statically.io/gh/creativetimofficial/public-assets/ba3689e3/builder/presentation/js/core/bootstrap.min.js" type="text/javascript"></script> <script src="https://cdn.statically.io/gh/creativetimofficial/public-assets/ba3689e3/builder/presentation/js/plugins/perfect-scrollbar.min.js"></script>  <script src="https://cdn.statically.io/gh/creativetimofficial/public-assets/ba3689e3/builder/presentation/js/plugins/countup.min.js"></script>  <script src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/presentation/js/plugins/rellax.min.js"></script>  <script src="https://cdn.statically.io/gh/creativetimofficial/public-assets/ba3689e3/builder/presentation/js/soft-design-system-pro.min.js" type="text/javascript"></script> <script type="text/javascript"> if (document.getElementById('state1')) { const countUp = new CountUp('state1', document.getElementById("state1").getAttribute("countTo")); if (!countUp.error) { countUp.start(); } else { console.error(countUp.error); } } if (document.getElementById('state2')) { const countUp1 = new CountUp('state2', document.getElementById("state2").getAttribute("countTo")); if (!countUp1.error) { countUp1.start(); } else { console.error(countUp1.error); } } if (document.getElementById('state3')) { const countUp2 = new CountUp('state3', document.getElementById("state3").getAttribute("countTo")); if (!countUp2.error) { countUp2.start(); } else { console.error(countUp2.error); }; } </script> </body> </html>

CINXE.COM

Drag & Drop Website Builders