Argon Web Builder - Drag & Drop Online Editor by Creative Tim

<!DOCTYPE html> <html lang="en"> <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> Argon Web Builder - Drag & Drop Online Editor by Creative Tim </title>  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet"> <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">  <link href="./assets/css/nucleo-icons.css" rel="stylesheet" /> <link href="./assets/css/nucleo-svg.css" rel="stylesheet" />  <link href="./assets/css/font-awesome.css" rel="stylesheet" /> <link href="./assets/css/nucleo-svg.css" rel="stylesheet" />  <link href="./assets/css/argon-design-system.min.css?v=1.0.2" rel="stylesheet" />  <link rel="canonical" href="https://www.creative-tim.com/builder/argon" />  <meta name="keywords" content="creative tim, html builder, html css builder, web pages builder, bootstrap 4 builder, bootstrap 4, bootstrap 4 editor, css3 builder, bootstrap 4 editor, argon website builder, frontend, responsive bootstrap 4 editor"> <meta name="description" content="A powerful online tool for Bootstrap pages. It comes with a huge number of components and sections built by Creative Tim.">  <meta itemprop="name" content="Argon Low Code Builder - Drag & Drop Online Editor by Creative Tim"> <meta itemprop="description" content="A powerful online tool to create websites. It comes with a huge number of Bootstrap components and sections built by Creative Tim."> <meta itemprop="image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/argon/argon-thumbnail.jpg">  <meta name="twitter:card" content="product"> <meta name="twitter:site" content="@creativetim"> <meta name="twitter:title" content="Argon Low Code Builder - Drag & Drop Online Editor by Creative Tim"> <meta name="twitter:description" content="A powerful online tool to create websites. It comes with a huge number of Bootstrap components and sections built by Creative Tim."> <meta name="twitter:creator" content="@creativetim"> <meta name="twitter:image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/argon/argon-thumbnail-facebook-og.jpg">  <meta property="fb:app_id" content="655968634437471"> <meta property="og:title" content="Argon Low Code Builder - Drag & Drop Online Editor by Creative Tim" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://creative-tim.com/builder/argon" /> <meta property="og:image" content="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/builder/argon/argon-thumbnail-facebook-og.jpg" /> <meta property="og:description" content="A powerful online tool to create websites. It comes with a huge number of Bootstrap components and sections built by Creative Tim." /> <meta property="og:site_name" content="Creative Tim" />  <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>  <style> .btn.btn-twitter.btn-icon-only, .btn.btn-github.btn-icon-only, .btn.btn-facebook.btn-icon-only, .btn.btn-dribbble.btn-icon-only{ padding: 0 !important; } .display-1, .display-2{ line-height:1.2; } .page-header-presentation{ min-height: 85vh; } .creative-tim-brand{ text-transform: none; color: #32325d; font-size: 14px; font-weight: 400; margin-left: 2px; margin-bottom: 0; } .navbar-brand img{ height:27px; } .navbar{ padding: 0.75rem 1rem; } </style> </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>   <nav id="navbar-main" class="navbar navbar-expand-lg bg-white navbar-white headroom fixed-top"> <div class="container"> <a class="navbar-brand mr-lg-5" href="https://www.creative-tim.com/builder/argon"> <img src="./assets/img/brand/blue.png"> <p class="creative-tim-brand">by Creative Tim</p> </a> <button class="navbar-toggler" 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 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"> <img src="./assets/img/brand/blue.png"> </a> </div> <div class="col-6 collapse-close"> <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation"> <span></span> <span></span> </button> </div> </div> </div> <ul class="navbar-nav navbar-nav-hover align-items-lg-center ml-lg-auto"> <li class="nav-item"> <a href="https://demos.creative-tim.com/argon-design-system-pro/docs/1.0/getting-started/overview.html" target="_blank" class="nav-link"> <i class="ni ni-single-copy-04 d-lg-none"></i> <span class="nav-link-inner--text">Docs</span> </a> </li> <li class="nav-item"> <a href="#sectionBuy" class="nav-link"> <i class="ni ni-app d-lg-none"></i> <span class="nav-link-inner--text">Pricing</span> </a> </li> <li class="nav-item"> <a href="https://www.creative-tim.com/contact-us" class="nav-link"> <i class="ni ni-ui-04 d-lg-none"></i> <span class="nav-link-inner--text">Contact Us</span> </a> </li> <li class="nav-item"> <a href="https://app.creative-tim.com/editor" class="btn btn-dark"> <span class="nav-link-inner--text">Create Website</span> </a> </li> </ul> </div> </div> </nav>  <div class="wrapper">  <div class="section section-hero-sm"> <div class="separator separator-bottom separator-skew"> <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon> </svg> </div> <div class="page-header page-header-presentation"> <div class="container shape-container d-flex align-items-center"> <div class="row"> <div class="col-lg-10 col-12 mx-auto text-center"> <h1 class="display-2 font-weight-bolder mt-5">Simple Low Code Website Builder.</h1> <h2 class="lead mt-2">Create web pages for your Startup or Business in minutes using our Drag & Drop online builder based on Bootstrap. </h2> <div class="btn-wrapper mt-5"> <a href="https://app.creative-tim.com/editor" class="btn btn-dark btn-icon mb-5 mb-lg-0"> <span class="btn-inner--icon"><i class="fas fa-rocket"></i></span> <span class="btn-inner--text">Create Website</span> </a> </div> </div> <div class="col-lg-8 col-12 mx-auto"> <div class="video-container rounded-lg mt-5" style="background-color: #383838;"> <div class="ml-2 pl-1 py-1"> <div class="d-inline-flex align-items-center justify-content-center mr-1 bg-white rounded-circle" style="width: 10px; height: 10px;"></div> <div class="d-inline-flex align-items-center justify-content-center mr-1 bg-white rounded-circle" style="width: 10px; height: 10px;"></div> <div class="d-inline-flex align-items-center justify-content-center mr-1 bg-white rounded-circle" style="width: 10px; height: 10px;"></div> </div> <a href="https://app.creative-tim.com/editor"> <video poster="https://rawcdn.githack.com/creativetimofficial/public-assets/1719238b19bda1d866585ce2c7d30e7982f17f1d/builder/argon/video-placeholder.png" muted playsinline autoplay loop src="https://rawcdn.githack.com/creativetimofficial/public-assets/528d47967d746f37882932f970f0aa2b4056305a/builder/argon/builder.mov" class="w-100 mb-n3"></video> </a> </div> </div> </div> </div> </div> </div> <section class="section-info"> <div class="users-from"> <div class="users-from-content"> <img src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/who/microsoft.jpg" class="mb-5 mb-lg-0" style="width:80px;"> <img src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/who/at.jpg" class="mb-5 mb-lg-0" style="width:70px;"> <img src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/who/amazon.jpg" class="mb-5 mb-lg-0" style="width: 80px"> <img src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/who/cisco.jpg" class="mb-5 mb-lg-0" style="width: 75px;"> <img src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/who/sales.jpg" class="mb-5 mb-lg-0" style="width:75px;"> <img src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/who/ibm.jpg" class="mb-5 mb-lg-0" style="width:70px;"> <img src="https://s3.amazonaws.com/creativetim_bucket/tim_static_images/presentation-page/who/samsung.jpg" class="mb-5 mb-lg-0" style="width:80px;"> </div> </div> <div class="container"> <div class="row text-center justify-content-center"> <div class="col-lg-8"> <h6 class="lead-category text-success mt-5">100+ Design Blocks | 500+ Components</h6> <h3 class="display-3 font-weight-bolder">Cut development time in half</h3> <p class="lead mt-2">Speed up your development process in three easy steps using our web pages builder.</p> </div> </div> <div class="row mt-5"> <div class="col-lg-4 col-md-6 mt-5"> <div class="card card-blog bg-default"> <img class="img pattern rounded" src="assets/img/ill/p51.svg"> <div class="card-body"> <h4 class="display-5 text-white">1. Choose the blocks</h4> <p class="text-white mt-0">Build templates from hundreds of components grouped into the most frequently categories, including navigations, headers, and more.</p> </div> </div> </div> <div class="col-lg-4 col-md-6"> <div class="card card-blog bg-default"> <img class="img pattern rounded" src="assets/img/ill/p22.png"> <div class="card-body"> <h4 class="display-5 text-white">2. Customize Brand Colors</h4> <p class="text-white mt-0">Use our pickers for colors, Google Fonts, shadows and general settings without touching the code.</p> </div> </div> </div> <div class="col-lg-4 col-md-6 mt-5"> <div class="card card-blog bg-default"> <img class="img pattern rounded" src="assets/img/ill/p7.svg"> <div class="card-body"> <h4 class="display-5 text-white">3. Download Source Code</h4> <p class="text-white mt-0">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> </div> </section> <section class="section-basic-components"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-10 mb-md-5 pr-5"> <div class="icon icon-shape icon-shape-primary shadow rounded-circle mb-4 mt--3"> <i class="ni ni-app"></i> </div> <h2 class="display-3 font-weight-bolder">Choose from 100+ blocks<span class="text-primary"> Using Drag & Drop</span></h2> <p class="lead">We re-styled every Bootstrap element to match the Argon Design System style. All the Bootstrap components that you need in a development have been re-design with the new look.</p> <span class="badge badge-pill badge-default">Headers</span> <span class="badge badge-pill badge-default">Features</span> <span class="badge badge-pill badge-default">Blogs</span> <span class="badge badge-pill badge-default">Teams</span> <span class="badge badge-pill badge-default">Projects</span> <span class="badge badge-pill badge-default">Pricing</span> <span class="badge badge-pill badge-default">Testimonials</span> <span class="badge badge-pill badge-default">Contact Us</span> <span class="badge badge-pill badge-default">Tables</span> </div> <div class="col-lg-5 col-md-12 d-none d-lg-block"> <div class="image-container"> <img class="table-img shaddow" src="./assets/img/presentation-page/sections/feature-3.jpg" alt=""> <img class="coloured-card-btn-img shadow" src="./assets/img/presentation-page/sections/contact-1.jpg" alt=""> <img class="linkedin-btn-img shadow-lg" src="./assets/img/presentation-page/sections/header-2.jpg" alt=""> <img class="coloured-card-img shadow" src="./assets/img/presentation-page/sections/feature-1.jpg" alt=""> </div> </div> </div> </div> <div class="separator separator-bottom separator-skew"> <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon class="fill-dark" points="2560 0 2560 100 0 100"></polygon> </svg> </div> </section> <section class="section-content section-brand bg-dark"> <div class="container"> <div class="row"> <div class="col-lg-6 mt-md-5 order-md-2 order-lg-1 d-none d-lg-block"> <div class="image-container"> <img class="img shadow rounded img-theme-colors w-100" src="./assets/img/presentation-page/theme-colors.png"> <img class="img shadow rounded img-theme-fonts mt-5 w-100" src="./assets/img/presentation-page/theme-fonts.png"> <img class="img shadow rounded img-theme-css mt-5 w-100" src="./assets/img/presentation-page/theme-custom-css.png"> </div> </div> <div class="col-lg-6 mx-auto order-md-1"> <div class="section-description"> <div class="icon icon-shape icon-shape-white shadow rounded-circle mb-4 mt--3"> <i class="ni ni-atom text-white"></i> </div> <h3 class="display-3 text-white">Customize the brand<span class="text-danger"> Choosing colors and fonts</span></h3> <p class="lead text-gray">We know how valuable your time is. That is why we worked hard on the development of a tool that would be easy to use and which you could make use of without the need for any training. Customize anything without touching the codebase.</p> <a href="https://app.creative-tim.com/editor" class="text-danger">Try for Free! <i class="fas fa-arrow-alt-circle-right"></i></a> </div> </div> </div> </div> <div class="separator separator-bottom separator-skew"> <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon> </svg> </div> </section> <section class="section features-2 section-content section-download"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-5 col-md-8 text-left"> <div class="icon icon-shape icon-shape-primary shadow rounded-circle mb-4 mt-4"> <i class="ni ni-cloud-download-95"></i> </div> <h2 class="display-3 font-weight-bolder">Download<span class="text-primary"> The Source Code</span></h2> <p class="lead">When you select the appropriate components and Bootstrap settings, you can download source files in order to start combining front-end with back鈥慹nd. </p> <ul class="list-unstyled mt-5"> <li class="py-2"> <div class="d-flex align-items-center"> <div> <div class="badge badge-circle badge-primary mr-3"> <i class="ni ni-check-bold"></i> </div> </div> <div> <h6 class="mb-0">Bootstrap 4.x.x</h6> </div> </div> </li> <li class="py-2"> <div class="d-flex align-items-center"> <div> <div class="badge badge-circle badge-primary mr-3"> <i class="ni ni-check-bold"></i> </div> </div> <div> <h6 class="mb-0">SASS Variables</h6> </div> </div> </li> <li class="py-2"> <div class="d-flex align-items-center"> <div> <div class="badge badge-circle badge-primary mr-3"> <i class="ni ni-check-bold"></i> </div> </div> <div> <h6 class="mb-0">Access to HTML, JS and SCSS Files</h6> </div> </div> </li> </ul> </div> <div class="col-lg-6 col-md-12 ml-auto"> <div class="row"> <div class="col-lg-5 col-12"> <div class="info text-left bg-info shadow"> <div class="icon icon-shape bg-gradient-white shadow rounded-circle text-primary"> <i class="ni ni-mobile-button text-info"></i> </div> <h5 class="info-title text-white">Optimized for Mobile</h5> <p class="description">All the pages and sections work perfectly on mobile, tablets and desktops.</p> </div> </div> <div class="col-lg-5 col-12"> <div class="info text-left bg-danger info-raised shadow"> <div class="icon icon-shape bg-gradient-white shadow rounded-circle text-primary"> <i class="ni ni-laptop text-danger"></i> </div> <h5 class="info-title text-white">Retina Ready</h5> <p class="description">All the elements and icons that we used in the production look gorgeous on any type of screen.</p> </div> </div> </div> <div class="row"> <div class="col-lg-5 col-12"> <div class="info text-left bg-primary shadow"> <div class="icon icon-shape bg-gradient-white shadow rounded-circle text-primary"> <i class="ni ni-books text-primary"></i> </div> <h5 class="info-title text-white">Complex Documentation</h5> <p class="description">For those who want to digg deeper, we offer a full elements' documentation. </p> </div> </div> <div class="col-lg-5 col-12"> <div class="info text-left bg-warning info-raised shadow"> <div class="icon icon-shape bg-gradient-white shadow rounded-circle text-primary"> <i class="ni ni-single-copy-04 text-warning"></i> </div> <h5 class="info-title text-white">Optimized Code</h5> <p class="description">This product was built by developers for developers. All the classes and HTML elements are easy to be used.</p> </div> </div> </div> </div> </div> </div> </section>  <div class="section mt-5 bg-dark section-features-final" style="background-image: url('./assets/img/ill/1.svg')"> <div class="separator separator-top separator-skew separator-inverse"> <svg x="0" y="0" viewBox="0 0 2560 100" preserveAspectRatio="none" version="1.1" xmlns="http://www.w3.org/2000/svg"> <polygon class="fill-white" points="2560 0 2560 100 0 100"></polygon> </svg> </div> <div class="container"> <div class="row text-center justify-content-center"> <div class="col-lg-8"> <h3 class="display-3 text-white">Create something great<span class="text-success"> with the <b>Pages Builder</b></span></h3> <p class="lead text-white">We have built an editor that will help you move faster from building a layout to the refining stage so that you can have time to work on the details.</p> </div> </div> <div class="row row-grid mt-5"> <div class="col-md-4"> <div class="info bg-white"> <div class="icon icon-shape bg-dark rounded-circle text-white"> <i class="ni ni-building"></i> </div> <div class="description mt-3"> <h5 class="title">Responsive Design</h5> <p>No matter the size of the screen, the generated paged will fit perfectly to any device (mobile, tablet, desktop or TVs). Focus on the creative tasks, we do the rest.</p> </div> </div> <div class="info bg-white"> <div class="icon icon-shape bg-dark rounded-circle text-white"> <i class="ni ni-palette"></i> </div> <div class="description mt-3"> <h5 class="title">Awesome Pickers</h5> <p>All settings include an interface for a quicker implementation of values (color picker, Google Fonts, shadow builder, etc.).</p> </div> </div> </div> <div class="col-md-4"> <div class="info bg-white"> <div class="icon icon-shape bg-dark rounded-circle text-white"> <i class="ni ni-sound-wave"></i> </div> <div class="description mt-3"> <h5 class="title">Live Editor</h5> <p>When changing the settings in the customizer panel, the CSS code is compiled in real-time, and you can follow the changes live.</p> </div> </div> <div class="info bg-white"> <div class="icon icon-shape bg-dark rounded-circle text-white"> <i class="ni ni-align-left-2"></i> </div> <div class="description mt-3"> <h5 class="title">Full Source Code</h5> <p>When you select the appropriate components and Bootstrap settings, you can download source files in order to digg deeper into the variables and HTML elements.</p> </div> </div> </div> <div class="col-md-4"> <div class="info bg-white"> <div class="icon icon-shape bg-dark rounded-circle text-white"> <i class="ni ni-single-02"></i> </div> <div class="description mt-3"> <h5 class="title">Share with team</h5> <p>You can share the prepared project with other team members to review or use a link to check the project on mobile devices. All the pages are responsive.</p> </div> </div> <div class="info bg-white"> <div class="icon icon-shape bg-dark rounded-circle text-white"> <i class="ni ni-app"></i> </div> <div class="description mt-3"> <h5 class="title">Components & Blocks</h5> <p>Build web pages using our components and sections in minutes. This includes navigations, headers, footers, cards and more. </p> </div> </div> </div> </div> </div> </div> <section class="section-testimonials bg-secondary"> <div class="container"> <div class="row"> <div class="col-md-8 ml-auto mr-auto text-center"> <h3 class="display-3 font-weight-bolder mb-3">Trusted by 1,600,000+ <span class="text-primary">Web Developers & Companies</span></h3> <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> </section> <section class="section section-pricing pricing-5 bg-secondary" id="sectionBuy" style="background-image: url('./assets/img/ill/testimonial_bg.svg'); background-size:cover;"> <div class="container pt-2"> <div class="row d-none d-md-block d-lg-block d-xl-block"> <table class="card card-pricing-builder table-responsive"> <thead> <tr> <th></th> <th> <div class="pricing-title"> <img src="./assets/img/presentation-page/demo_box.jpg" class="w-100 ml-n3" alt=""> <h3>Demo</h3> <p class="pricing-description"> Try our Builder and get an overview of what you can create. </p> </div> </th> <th> <div class="pricing-title"> <img src="./assets/img/presentation-page/1month-box.jpg" class="w-100 ml-n3" alt=""> <h3>1 Month</h3> <p class="pricing-description"> Take the builder to a whole new level of experience and create projects in minutes. </p> </div> </th> <th> <div class="pricing-title"> <img src="./assets/img/presentation-page/3months-box.jpg" class="w-100 ml-n3" alt=""> <h3>3 Months</h3> <p class="pricing-description"> Take the builder to a whole new level of experience and create projects in minutes. </p> </div> </th> <th> <div class="pricing-title"> <img src="./assets/img/presentation-page/annual_box.jpg" class="w-100 ml-n3" alt=""> <h3>Annual</h3> <p class="pricing-description"> Build unlimited projects for you or for your clients while you reuse the existing codebase. </p> </div> </th> </tr> <tr> <th> <h6 class="font-weight-bold mb-0">Limited time <br><span class="text-danger"> 50% Discount</span></h6> </th> <th> <h6 class="mb-2 mt-4 font-weight-bold">Free</h6> </th> <th> <h4 class="mb-2 mt-4 font-weight-bold"><small class="text-dark-gray"><del>$29</del></small><span class="text-danger"> $14</span></h4> </th> <th> <h4 class="mb-2 mt-4 font-weight-bold"><small class="text-dark-gray"><del>$89</del></small><span class="text-danger"> $44</span></h4> </th> <th> <h4 class="mb-2 mt-4 font-weight-bold"><small class="text-dark-gray"><del>$249</del></small><span class="text-danger"> $124</span></h4> </th> </tr> <tr> <th></th> <th> <a href="https://app.creative-tim.com/editor" class="btn btn-pricing btn-add-cart btn-block btn-outline-dark">Free Demo</a> </th> <th> <a href="https://app.creative-tim.com/purchase?offer=monthly" class="btn btn-pricing btn-add-cart btn-block btn-dark">Buy now</a> </th> <th> <a href="https://app.creative-tim.com/purchase?offer=quarterly" class="btn btn-pricing btn-add-cart btn-block btn-outline-dark">Buy now</a> </th> <th> <a href="https://app.creative-tim.com/purchase?offer=annual" class="btn btn-pricing btn-add-cart btn-block btn-outline-dark">Buy now</a> </th> </tr> </thead> <tbody class="mt-4"> <tr> <td> <span class="bf-image-category">Full Access to all the Features </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> </tr> <tr> <td> <span class="bf-image-category" data-toggle="tooltip" data-placement="top" title="Keep your colors, typography and pages saved on your account for future usage.">Save unlimited projects  <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td> <span> <svg style="color: #b1b1b1; width:18px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" /> </svg> </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> </tr> <tr> <td> <span class="bf-image-category">Unlimited Exports  </span> </td> <td> <span> <svg style="color: #b1b1b1; width:18px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" /> </svg> </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> </tr> <tr> <td> <span class="bf-image-category" data-toggle="tooltip" data-placement="top" data-original-title="If you have any technical issues with the builder you will have access to our developers via Zendesk in 1-2 Business Days."><span></span>Technical Support  <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td> <span> <svg style="color: #b1b1b1; width:18px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" /> </svg> </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> </tr> <tr> <td> <span class="bf-image-category" data-toggle="tooltip" data-placement="top" title="You receive access to entire code for HTML, JS and SCSS files that you configured."><span></span>Access to Full Code  <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td> <span> <svg style="color: #b1b1b1; width:18px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" /> </svg> </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> </tr> <tr> <td> <span class="bf-image-category" data-toggle="tooltip" data-placement="top" title="You can share the prepared project with other team members to review or use a link to check the project on mobile devices."> Sharable preview  <i class="fa fa-info-circle" aria-hidden="true"></i></span> </td> <td> <span> <svg style="color: #b1b1b1; width:18px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" /> </svg> </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> </tr> <tr> <td> <span class="bf-image-category" data-toggle="tooltip" data-placement="top" title="You receive a .zip containing the entire project, the is responsive and ready to be deployed on your website.">Exportable sources  <i class="fa fa-info-circle" aria-hidden="true"></i> </span> </td> <td> <span> <svg style="color: #b1b1b1; width:18px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" /> </svg> </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> <td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td><td> <span> <svg style="width:20px;" xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /> </svg> </span> </td> </tr> </tbody> </table> </div> <div class="row d-block d-sm-block d-md-none d-lg-none d-xl-none"> <div class="col-md-4 col-12"> <div class="card"> <div class="card-header"> <img src="./argon/assets/img/presentation-page/demo_box.jpg" class="w-100 ml-n2 p-3" alt="demo_box"> </div> <div class="card-body text-center"> <h3 class="card-title">Demo</h3> <p class="card-description"> Try our Builder and get an overview of what you can create. Forget about old Templates/Themes.</p> <h2 class="card-subtitle mb-4"> Free </h2> <a href="https://app.creative-tim.com/editor" class="btn btn-pricing btn-add-cart btn-block btn-dark">Create Website</a> </div> </div> </div> <div class="col-md-4 col-12"> <div class="card"> <div class="card-header"> <img src="./argon/assets/img/presentation-page/1month-box.jpg" class="w-100 ml-n2 p-3" alt="1month_box"> </div> <div class="card-body text-center"> <h3 class="card-title">1 Month</h3> <p class="card-description"> Take the builder to a whole new level of experience and create projects in minutes.</p> <h2 class="card-subtitle mb-4"><small><del>$29</del></small><span class="text-danger"> $14 </span></h2> <a href="https://app.creative-tim.com/purchase?offer=monthly" class="btn btn-pricing btn-add-cart btn-block btn-dark">Buy now</a> </div> </div> </div> <div class="col-md-4 col-12"> <div class="card"> <div class="card-header"> <img src="./argon/assets/img/presentation-page/3months-box.jpg" class="w-100 ml-n2" alt="querterly-box"> </div> <div class="card-body text-center"> <h3 class="card-title">3 Months</h3> <p class="card-description"> Take the builder to a whole new level of experience and create projects in minutes.</p> <h2 class="card-subtitle mb-4"><small><del>$89</del></small><span class="text-danger"> $44</span></h2> <a href="https://app.creative-tim.com/purchase?offer=quarterly" class="btn btn-pricing btn-add-cart btn-block btn-primary">Buy now</a> </div> </div> </div> <div class="col-md-4 col-12"> <div class="card"> <div class="card-header"> <img src="./argon/assets/img/presentation-page/annual_box.jpg" class="w-100 ml-n2 p-3" alt="annual-box"> </div> <div class="card-body text-center"> <h3 class="card-title">Annual</h3> <p class="card-description"> Build unlimited projects for you or for your clients while you reuse the existing codebase.</p> <h2 class="card-subtitle mb-4"><small><del>$249</del></small><span class="text-danger"> $124</span></h2> <a href="https://app.creative-tim.com/purchase?offer=annual" class="btn btn-pricing btn-add-cart btn-block btn-dark">Buy now</a> </div> </div> </div> </div> <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 14$/month and we will switch to 29$/month after the campaign, you will still pay 14$/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="mr-2" style="width:15px;" src="./assets/img/presentation-page/money-back-icon.svg">30 Days money back.</p> <p class="text-center"> <i class="fa fa-lock"></i> Secured Payment by <b> Stripe & Paypal</b> with: <br> <i class="fa fa-cc-paypal fa-2x mt-2 mr-1"></i> <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> </section> <footer class="footer"> <div class="container"> <div class="row row-grid align-items-center mb-5"> <div class="col-lg-6"> <h3 class="text-primary font-weight-regular mb-2">Thank you for supporting us!</h3> <h4 class="mb-0 font-weight-light">Let's get in touch on any of these platforms.</h4> </div> <div class="col-lg-6 text-lg-right btn-wrapper"> <a target="_blank" href="https://twitter.com/creativetim" rel="nofollow" class="btn btn-icon-only btn-twitter rounded-circle" data-toggle="tooltip" data-original-title="Follow us"> <i class="fa fa-twitter"></i> </a> <a target="_blank" href="https://www.facebook.com/CreativeTim/" rel="nofollow" class="btn-icon-only rounded-circle btn btn-facebook" data-toggle="tooltip" data-original-title="Like us"> <i class="fab fa-facebook"></i> </a> <a target="_blank" href="https://dribbble.com/creativetim" rel="nofollow" class="btn btn-icon-only btn-dribbble rounded-circle" data-toggle="tooltip" data-original-title="Follow us"> <i class="fa fa-dribbble"></i> </a> <a target="_blank" href="https://github.com/creativetimofficial" rel="nofollow" class="btn btn-icon-only btn-github rounded-circle" data-toggle="tooltip" data-original-title="Star on Github"> <i class="fa fa-github"></i> </a> </div> </div> <hr> <div class="row align-items-center justify-content-md-between"> <div class="col-md-6"> <div class="copyright"> Copyright © <script> document.write(new Date().getFullYear()) </script> <a href="https://www.creative-tim.com" target="_blank">Creative Tim</a>. All rights reserved. </div> </div> <div class="col-md-6"> <ul class="nav nav-footer justify-content-end"> <li class="nav-item"> <a href="https://www.creative-tim.com" class="nav-link" target="_blank">Creative Tim</a> </li> <li class="nav-item"> <a href="https://www.creative-tim.com/presentation" class="nav-link" target="_blank">About Us</a> </li> <li class="nav-item"> <a href="https://www.creative-tim.com/blog" class="nav-link" target="_blank">Blog</a> </li> <li class="nav-item"> <a href="https://app.creative-tim.com/argon/static/files/terms-of-use.pdf" class="nav-link" target="_blank">Terms</a> </li> </ul> </div> </div> </div> </footer> </div>  <script src="./assets/js/core/jquery.min.js" type="text/javascript"></script> <script src="./assets/js/core/popper.min.js" type="text/javascript"></script> <script src="./assets/js/core/bootstrap.min.js" type="text/javascript"></script> <script src="./assets/js/argon-design-system.min.js?v=1.0.2" type="text/javascript"></script> <script> // Smooth Scrolling to Section // Select all links with hashes $('a[href*="#"]') // Remove links that don't actually link to anything .not('[href="#"]') .not('[href="#0"]') .click(function(event) { // On-page links if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { // Figure out element to scroll to var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); // Does a scroll target exist? if (target.length) { // Only prevent default if animation is actually gonna happen event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top }, 1000, function() { // Callback after animation // Must change focus! var $target = $(target); $target.focus(); if ($target.is(":focus")) { // Checking if the target was focused return false; } else { $target.attr('tabindex', '-1'); // Adding tabindex for elements not focusable $target.focus(); // Set focus again }; }); } } }); </script> </body> </html>

CINXE.COM

Argon Web Builder - Drag & Drop Online Editor by Creative Tim