<!DOCTYPE html>
<html lang="en" class="ko_Theme ko_ThemeHeader--section">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="generator" content="Kopage">
	<meta name="description" content="Become Website•im member, create unlimited websites, logos, landing pages, SEO-pages, marketing pages, unlimited courses and more!">
	<meta name="keywords" content="">

	<title>WEBSITE•IM Unlimited Website Builder</title>

	<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin><link rel="dns-prefetch" href="https://fonts.googleapis.com" crossorigin>
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link rel="dns-prefetch" href="https://fonts.gstatic.com" crossorigin>
	<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin><link rel="dns-prefetch" href="https://cdn.jsdelivr.net" crossorigin>

	<base href="/">
	<link rel="shortcut icon" href="//website.im/editor_images/favicon.custom.png">
	<link rel="apple-touch-icon" href="//website.im/editor_images/favicon.custom.png">

	<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js" type="text/javascript"></script>

	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="//website.im/inc/live.css?v=4.7.10" type="text/css" rel="stylesheet"><link href="//fonts.googleapis.com/css?family=Manrope:200,400,700&amp;subset=latin-ext&amp;display=swap" rel="stylesheet" type="text/css">
	

	<!--[if lt IE 9]><script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script><script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script><![endif]-->

	<style>:root{--ui-color-accent: #179BD7;--ui-color-accent-75: rgba(23,155,215,0.7);--ui-color-accent-50: rgba(23,155,215,0.5);--ui-color-accent-25: rgba(23,155,215,0.25);--ui-color-accent-light: rgba(23,155,215,0.1);--ui-color-stripes-accent:repeating-linear-gradient(
	-45deg,#005f9b,#179BD7 20px,#005f9b 20px,#005f9b 50px,#179BD7 50px,#179BD7 65px);--ui-color-leftmenu:#333944;}</style>

	<!--The Open Graph-->
	
	<meta property="og:title" content="WEBSITE•IM Unlimited Website Builder">
	<meta property="og:type" content="website">
	<meta property="og:image" content="https://website.im/data/files/og.webp">
	<meta property="og:url" content="https://website.im/?rel=supersiteme">
	<meta name="twitter:image" content="https://website.im/data/files/og.webp">
	<meta name="twitter:card" content="summary_large_image">

<style>.ko_Theme .topmenu a:hover, .ko_Theme .topmenu .active a {background:inherit}.ko_Theme .menuHolder li a {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;line-height: 1;color: inherit;text-shadow: none}.ko_Theme .menuHolder li {display: inline-block;padding:0}.ko_Theme .menuHolder{ flex-flow: row wrap}.ko_Theme .menuHolder,.ko_Theme #headerMenu{padding:0}.ko_Theme .logoHolder #logoReplacer h2,.ko_Theme .logoHolder a,.ko_Theme .logoHolder {line-height:1;padding:0;margin:0;height:auto}.ko_Theme .logoHolder img{max-height:auto}.ko_Theme #headerMenu .container {/*overflow:auto;*/display:flex;flex-direction: row;justify-content: space-between;align-items: center}:root{--color1:#9722a3;--color2:#2291a3;--color1_rgb: 151,34,163;--color1_hsl: 294,65%,39%;--color1_hs: 294,65%;--color1_h: 294;--color1_s: 65%;--color1_l: 39%;--color1_25:#e5c8e8;--color1_50:#cb91d1;--color1_75:#b159ba;--color1_125:#711a7a;--color1_150:#4c1152;--color1_175:#260929;--color2_rgb: 34,145,163;--color2_hsl: 188,65%,39%;--color2_hs: 188,65%;--color2_h: 188;--color2_s: 65%;--color2_l: 39%;--color2_25:#c8e4e8;--color2_50:#91c8d1;--color2_75:#59adba;--color2_125:#1a6d7a;--color2_150:#114952;--color2_175:#092429;--color1_bw:rgba(255,255,255,0.8);--color1_25_bw:rgba(0,0,0,0.8);--color1_50_bw:rgba(255,255,255,0.8);--color1_75_bw:rgba(255,255,255,0.8);--color1_125_bw:rgba(255,255,255,0.8);--color1_150_bw:rgba(255,255,255,0.8);--color1_175_bw:rgba(255,255,255,0.8);--color2_bw:rgba(255,255,255,0.8);--color2_25_bw:rgba(0,0,0,0.8);--color2_50_bw:rgba(0,0,0,0.8);--color2_75_bw:rgba(255,255,255,0.8);--color2_125_bw:rgba(255,255,255,0.8);--color2_150_bw:rgba(255,255,255,0.8);--color2_175_bw:rgba(255,255,255,0.8);;--font1:Manrope;--font2:-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;--font3:Helvetica Neue,sans-serif;--color1_rgb: 151,34,163;--color1_hsl: 294,65%,39%;--color1_hs: 294,65%;--color1_h: 294;--color1_s: 65%;--color1_l: 39%;--color1_25:#e5c8e8;--color1_50:#cb91d1;--color1_75:#b159ba;--color1_125:#711a7a;--color1_150:#4c1152;--color1_175:#260929;--color2_rgb: 34,145,163;--color2_hsl: 188,65%,39%;--color2_hs: 188,65%;--color2_h: 188;--color2_s: 65%;--color2_l: 39%;--color2_25:#c8e4e8;--color2_50:#91c8d1;--color2_75:#59adba;--color2_125:#1a6d7a;--color2_150:#114952;--color2_175:#092429;--color1_bw:rgba(255,255,255,0.8);--color1_25_bw:rgba(0,0,0,0.8);--color1_50_bw:rgba(255,255,255,0.8);--color1_75_bw:rgba(255,255,255,0.8);--color1_125_bw:rgba(255,255,255,0.8);--color1_150_bw:rgba(255,255,255,0.8);--color1_175_bw:rgba(255,255,255,0.8);--color2_bw:rgba(255,255,255,0.8);--color2_25_bw:rgba(0,0,0,0.8);--color2_50_bw:rgba(0,0,0,0.8);--color2_75_bw:rgba(255,255,255,0.8);--color2_125_bw:rgba(255,255,255,0.8);--color2_150_bw:rgba(255,255,255,0.8);--color2_175_bw:rgba(255,255,255,0.8);}#contentArea .koColor {color:#9722a3;}ul.koCheckList li:before {background:#9722a3;}.ko_Theme #website .btn-primary {background-color:var(--color1);border-color:var(--color1);}.ko_Theme #website .btn-outline-primary {color:var(--color1);border-color:var(--color1);}.ko_Theme #website .btn-outline-primary:hover {background-color:var(--color1);color:var(--color1_bw);border-color:var(--color1);}#website .page-item.active .page-link {background-color:#9722a3;color:var(--color1_bw);border-color:var(--color1);}#contentArea a:not(.btn),#contentArea a.btn-link {color:var(--color1)}#website.koMenu .tab-pane:not(.tab-pane-menu):not(.tab-pane-footer) a:not(.btn):not(.koMenuButton),#website.koMenu a.btn-link {color:var(--color1)}#website .keditDark .keditWhite a:not(.btn):not(.page-link),#website .keditDark .keditWhite a.btn.btn-link{color:var(--color1)}.ko_Theme #contentArea, .ko_Theme .koThemeDark #contentArea .whiteShadowContainer {color:rgba(0, 0, 0, .8);}#contentArea h1, #contentArea h2, #contentArea h3,#contentArea h1 a, #contentArea h2 a, #contentArea h3 a, .koThemeDark #contentArea .whiteShadowContainer strong, .koThemeDark #contentArea .whiteShadowContainer h1, .koThemeDark #contentArea .whiteShadowContainer h2, .koThemeDark #contentArea .whiteShadowContainer h3{color: rgb(0, 0, 0);}#contentArea h4, #contentArea h5, #contentArea h6,#contentArea h4 a, #contentArea h5 a, #contentArea h6 a, .koThemeDark #contentArea .whiteShadowContainer strong, .koThemeDark #contentArea .whiteShadowContainer h4, .koThemeDark #contentArea .whiteShadowContainer h5, .koThemeDark #contentArea .whiteShadowContainer h6 {color: rgb(0, 0, 0);}.ko_Theme #website #footerContent {color: rgba(0, 0, 0, 0.6);}.ko_Theme #website #footerContent h1,.ko_Theme #website #footerContent h2,.ko_Theme #website #footerContent h3,.ko_Theme #website #footerContent h4,.ko_Theme #website #footerContent h5,.ko_Theme #website #footerContent h6 {color: rgb(0, 0, 0);}.ko_Theme #website, .ko_Theme #website p{font-family:var(--font2),sans-serif;}.ko_Theme #website a.btn, .ko_Theme #website button.btn{font-family:var(--font2),sans-serif;}.ko_Theme #website h1,.ko_Theme #website h2,.ko_Theme #website h3{font-family:var(--font1),sans-serif;font-weight:700}.ko_Theme #website h4,.ko_Theme #website h5,.ko_Theme #website h6{font-family:var(--font1),sans-serif;font-weight:700}.ko_Theme #website .topmenu{font-family:var(--font1),sans-serif;font-weight:700}.ko_Theme #website .logoHolder .logoContents{font-family:var(--font2),sans-serif;font-weight:700}.ko_Theme #website #footerContent {font-family:var(--font2),sans-serif;}.ko_Theme #website #footerContent h1,.ko_Theme #website #footerContent h2,.ko_Theme #website #footerContent h3,.ko_Theme #website #footerContent h4,.ko_Theme #website #footerContent h5,.ko_Theme #website #footerContent h6 {font-family:var(--font2),sans-serif;}.ko_Theme .menuHolder li.topmenuSocial > span{margin-top:0px;}.ko_Theme #headerContent:not(.koZeroPadding),.ko_Theme #subpageHeaderContent:not(.koZeroPadding){}.ko_Theme #headerMenu{/*overflow:auto;*//*display:flex;flex-direction: row;justify-content: space-between;align-items: center;*/background:rgb(255, 255, 255);padding:20px;margin:0px 0px 0px 0px;border:0px solid var(--color1);border-radius:0px;;}.ko_Theme .logoHolder{padding:20px 0px 20px 0px;;white-space: nowrap;}.ko_Theme .logoHolder .logoContents{font-size:24px;color:rgb(0, 0, 0);display: flex;align-items: center;min-height:30px;}@media (max-width: 768px){.ko_Theme .logoHolder .logoContents{font-size:22px;}}.ko_Theme .menuHolder {width:100%;padding-left:30px}.ko_Theme .menuHolder .accents_start {margin-left:auto}.ko_Theme .menuHolder li:first-of-type {margin-left:auto}.ko_Theme .logoHolder img{max-height:30px;height:30px;min-height:30px;}.ko_Theme .menuHolder { display: flex;}.ko_Theme .menuHolder li{}.ko_Theme .menuHolder li a{font-size:20px;color:#000000;padding:10px 0px 10px 0px;margin:0px 10px 0px 10px;border-radius:0px;border:solid transparent;border-width:0px 0px 4px 0px;transition:0.2s all;}.ko_Theme .menuHolder li.active a,.ko_Theme .menuHolder li a:hover{border-color:var(--color1);}.ko_Theme .menuHolder li.accent1 a,.ko_Theme .menuHolder li.accent1.active a{font-size:18px;color:rgb(255, 255, 255);background:var(--color1);padding:12px 24px 12px 24px;margin:0px 3px 0px 3px;border-radius:50px;border:0px solid ;}.ko_Theme .menuHolder li.accent1.active a,.ko_Theme .menuHolder li.accent1 a:hover{background:var(--color1_125);}.ko_Theme .menuHolder li.accent2 a,.ko_Theme .menuHolder li.accent2.active a{font-size:18px;color:#2a2a2a;background:#ffffff;padding:12px 24px 12px 24px;margin:0px 3px 0px 3px;border-radius:50px;border:1px solid #c5c5c5;}.ko_Theme .menuHolder li.accent2.active a,.ko_Theme .menuHolder li.accent2 a:hover{color:#000000;background:#f7f7f7;}.ko_Theme .menuHolder li.topmenuSocial a{color:rgb(0, 0, 0)}  .topmenu li:last-of-type a{ 
box-shadow:0 0 0 3px var(--color1_25)
}</style>
</head>
<body class="" ><style>.priceUSD,.priceEUR,.priceCHF,.priceGBP{display:none}.priceEUR{display:inline-block}</style>
<script>
  
  $(function(){
    
    $('.topmenu li:eq(-1) a span').html('Start for Free <i class="fas fa-angle-right ms-2"></i>');
    $('.topmenu li:eq(-2) a span').html('<svg style="width:18px;height:18px;margin-top:-2px;margin-left:-4px" class="me-2" viewBox="0 0 24 24"><path fill="#4285f4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path><path fill="#34a853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path><path fill="#fbbc05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path><path fill="#ea4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path></svg> Join with Google');
    //$('.topmenu li:eq(-3) a span').html('<span style="display:none;">More</span><em class="fas fa-ellipsis-vertical"></em>');
    //$('.topmenu').addClass('show');
  
  });

</script>

<style>
    .koUnderline2::after {
  height: 10%!important;
  background: var(--color1)!important;
}
h2    .koUnderline2::after {
    
  bottom: 0!important;
    
    }
    
    #footerContent a {
  color: rgba(0, 0, 0, 0.7);
}
    
    #footerContent a:hover{
  color: rgba(0, 0, 0, 1);
}
    
    
.koCheckListTight{font-size:15px;}  
ul.koCheckListTight li {
  padding-left: 30px;
    
}
ul.koCheckListTight li::before{
    width: 20px;
}

    
</style>
<div id="websiteLoading" onclick="var elem = document.getElementById('websiteLoading');elem.parentNode.removeChild(elem);" onkeyup="var elem = document.getElementById('websiteLoading');elem.parentNode.removeChild(elem);" class="isLoading isLoading-1"><div style="background:white;position:absolute;top:0;left:0;right:0;bottom:0;height:100%;width:100%" class="d-none"></div><noscript><style>#websiteLoading{display:none!important}body{visibility:visible!important;overflow:auto!important}</style></noscript><style>		body{overflow:hidden}		body.body{visibility:visible;overflow:auto}		#websiteLoading{visibility:visible;position:fixed;top:0;left:0;right:0;bottom:0;transition:0.5s all;z-index:100000;background: linear-gradient(135deg, rgba(255,255,255,.95) 20%, rgba(255,255,255,.5), rgba(255,255,255,.95) 80%);cursor:wait}		#websiteLoading.isLoading-1{background:#fff;}		#websiteLoading.isLoaded{opacity:0;cursor:default;pointer-events:none}		@-webkit-keyframes koLoadingRotation {		to {			-webkit-transform: rotate(360deg);					transform: rotate(360deg);		}		}		@keyframes koLoadingRotation {		to {			-webkit-transform: rotate(360deg);					transform: rotate(360deg);		}		}		.isLoading .spinner {		-webkit-animation: koLoadingRotation 1.5s linear infinite;				animation: koLoadingRotation 1.5s linear infinite;			/*will-change: transform;*/		}		.isLoading .spinner .path {		-webkit-animation: dash 1.5s ease-in-out infinite;				animation: dash 1.5s ease-in-out infinite;		}		@-webkit-keyframes dash {		0% {			stroke-dasharray: 1, 150;			stroke-dashoffset: 0;			stroke:var(--color1);		}		50% {			stroke-dasharray: 90, 150;			stroke-dashoffset: -35;			stroke:var(--color2);		}		100% {			stroke-dasharray: 90, 150;			stroke-dashoffset: -124;			stroke:var(--color1);		}		}		@keyframes dash {		0% {			stroke-dasharray: 1, 150;			stroke-dashoffset: 0;			stroke:var(--color1);		}		50% {			stroke-dasharray: 90, 150;			stroke-dashoffset: -35;			stroke:var(--color2);		}		100% {			stroke-dasharray: 90, 150;			stroke-dashoffset: -124;			stroke:var(--color1);		}		}		#websiteLoading::after {			content:"";			background: #fff;			border-radius:100%;			box-shadow: 5px 5px 50px rgba(0,0,0,0.1);			position: absolute;			top: 50%;			left: 50%;			margin: -57px 0 0 -57px;			width: 114px;			height: 114px;		}		</style><svg class="spinner" viewBox="0 0 50 50" style="z-index: 2;position: absolute;top: 50%;left: 50%;width:120px;height:120px;	  margin: -60px 0 0 -60px;"><circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="2" style="stroke: #ccc; stroke: var(--color1);stroke-linecap: round;"></circle></svg></div><div id="website" class=""><header id="header"><div id="headerMenu"><div class="container"><div class="logoHolder skiptranslate"><a href="/" class="logo"><span class="logoContents"><img src="data/files/websiteim.svg" id="websiteLogo" alt="Website•im"></span></a></div>

	<ul class="menuHolder topmenu" role="navigation">
		<li class="item_active active"><a href="https://website.im"><span>Website Builder</span></a></li>
		<li><a href="templates"><span>Templates</span></a></li>
		<li><a href="pricing"><span>Pricing</span></a></li>
		<li><a href="contact"><span>Contact</span></a></li>
		<li class="accent2 accents_start"><a href="https://member.website.im/dashboard/login?google"><span>Join with Google</span></a></li>
		<li class="accent1"><a href="https://member.website.im/dashboard/login"><span>Start for Free</span></a></li>
		
	</ul>

</div></div></header><main class="WxEditableArea" id="contentArea"><div id="contentAreaElement" class="kelement"></div><section id="kpg_858985" data-keditor="1" class="kedit" data-padding="100-20" style=";padding-top:100px;padding-bottom:20px"><div class="container"><div class="row"><div class="col-lg text-center mx-auto col-lg-12"><div class="col-container"><div style="color: var(--color1);border-radius: 100px;font-size: 14px;padding: 5px 15px;background: hsl(var(--color1_hs),95%);" class="d-inline-flex koPreTitle mt-2 mb-4 keditable">Easy to use • Click-to-edit</div><h1 style="--kedit-fsx: 1.80;" class="mt-2 mb-2 keditable">Create a Website</h1><div class="mb-5 mx-auto mt-0 keditable" style="font-size: 28px; max-width: 48rem;">AI-powered to start. Easy and editable&nbsp;<b><span class="koUnderline2">by you.</span></b></div>
    
    
    
				<div class="kapp kapp-holder keditLayout_1" data-app="paste">
					
				<div data-zzzz style="--bs-gutter-x: 1.5rem;--bs-gutter-y: 0;"><form class="position-relative w-100 mx-auto" style="max-width:750px;text-align:left;" action="https://member.website.im/ai" target=_blank method=post>


    
    <style>
        .aistart_themes{
            background:linear-gradient(to bottom,#f5f5f5,#fff);
            background:#f5f6f7;
            color:#333!important;
            transition:0.2s all;
            box-shadow:inset 0 0px 15px -5px rgba(0,0,0,0.1);
        }
        .aistart_themes:hover{
            color:#000!important;
            box-shadow:inset 0 7px 15px -5px rgba(0,0,0,0.1)
        }
        .aistart_prompt {align-items:center;gap:7px;}
        .aistart_prompt span {padding-left:25px}
        .aistart_prompt svg{
            
            color:var(--color1);
            height:25px;
            width:25px;
            position:absolute;
            left:27px;
            top:17px;

        }
        #websiteIdea:focus{
            background:linear-gradient( to right,#f5f6f7,#fff);
            box-shadow:none;

        }

    </style>
    <div style="background:linear-gradient(45deg, var(--color1), hsl(var(--color1_hs),50%),#fff 40%);padding:3px;border-radius:30px 33px 40px 37px;;">
        <div style="background:#fff;padding:2px;border-radius:27px 30px 35px 35px;;">
    <label
    for="websiteIdea"
    class="aistart_prompt"
    style="
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-bottom:#fff;position:relative;z-index:2;
        padding:20px 40px 10px;
        border-radius:25px 25px 0 0;background:#fff;
        font-size:16px;
        font-weight:bold;
        display:inline-flex;cursor:default;">
        
        
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" viewBox="0 0 256 256"><path d="M208,144a15.78,15.78,0,0,1-10.42,14.94L146,178l-19,51.62a15.92,15.92,0,0,1-29.88,0L78,178l-51.62-19a15.92,15.92,0,0,1,0-29.88L78,110l19-51.62a15.92,15.92,0,0,1,29.88,0L146,110l51.62,19A15.78,15.78,0,0,1,208,144ZM152,48h16V64a8,8,0,0,0,16,0V48h16a8,8,0,0,0,0-16H184V16a8,8,0,0,0-16,0V32H152a8,8,0,0,0,0,16Zm88,32h-8V72a8,8,0,0,0-16,0v8h-8a8,8,0,0,0,0,16h8v8a8,8,0,0,0,16,0V96h8a8,8,0,0,0,0-16Z"></path></svg>
        
        <span>Start with AI</span>
    
        </label>

    <a
    class="aistart_themes"
    href="https://demo.website.im/?demo=" target="_blank"
    style="

        padding:10px 30px;
        border-radius:15px 15px 0 0;
        font-size:16px;
        display:inline-flex">Choose a Template</a>

    <div class="form-control" style="margin-top:-1px;border-radius:0 33px 33px 33px;padding:7px;position:relative;z-index:1">
    <textarea

    class="form-control"
    style="border:none;width: 100%; height: 200px; border-radius:27px; line-height: 24px;   resize: none;font-size: 22px;padding: 35px;"
    spellcheck="false"


    required id="websiteIdea" name="websiteIdea" 
    
    data-placeholders='[
    "Create a website for my company",
    "Family restaurant in Paris",
    "Consulting company in Boston",
    "Online marketing agency",
    "Construction company in Austin"]'
    
    placeholder="Consulting company in Boston"
    autocomplete="off"

    ></textarea><button type="submit" style="box-shadow:0 0 5px 5px #fff;position:absolute;bottom:10px;right:10px;padding: 10px 30px !important;"
    class="btn btn-dark btn-lg rounded-pill ">Create a Website<i class="fas fa-arrow-right ms-3"></i></button>
    </div>
    </div>
    </div>
    

</form>

<script>
$(document).ready(function () {
    const $textarea = $('#websiteIdea');
    const placeholders = JSON.parse($textarea.attr('data-placeholders'));
    let index = 0;
    let charIndex = 0;
    let typing = true;
    let currentText = placeholders[index];

    function updatePlaceholder(text) {
        $textarea.attr('placeholder', text + '|'); // Always append cursor
    }

    function typeCycle() {
        if (typing) {
            if (charIndex < currentText.length) {
                charIndex++;
                updatePlaceholder(currentText.substring(0, charIndex));
                setTimeout(typeCycle, 1 + Math.random() * 100); // Natural typing
            } else {
                // Done typing, wait before deleting
                setTimeout(() => {
                    typing = false;
                    typeCycle();
                }, 500); // Pause before deleting
            }
        } else {
            if (charIndex > 0) {
                charIndex--;
                updatePlaceholder(currentText.substring(0, charIndex));
                setTimeout(typeCycle, 1 + Math.random() * 50); // Natural deleting
            } else {
                // Move to next placeholder
                index = (index + 1) % placeholders.length;
                currentText = placeholders[index];
                typing = true;
                typeCycle();
            }
        }
    }

    typeCycle();
});
</script>
</div>
                    
				</div>
    
				
    
    
    <div class="koButtons d-flex mt-4 mb-2 text-center">
        
        
    
    </div>
    
    
    <div style="font-size: 16px;" class="mx-5 mt-3 mb-2 text-center lh-1 keditable"><a href="https://demo.website.im/?demo=" target="_blank">Live Demo</a>
   • 100.000+ websites published!
</div>
    
    
    </div></div></div></div></section>
<section id="kpg_75863" class="kedit overflow-visible" data-padding="20-100" style=";padding-top:20px;padding-bottom:100px"><div class="no-container position-static">
								<!--<script src="https://cdn.jsdelivr.net/npm/usal@1.3.1/usal.min.js"></script>-->
<script>
  if(!$('body').hasClass('inAdminPlus')){

    var s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = 'https://cdn.jsdelivr.net/npm/usal@1.3.1/usal.min.js';
    
      document.body.appendChild(s);

  }
  </script>
<link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/keen-slider@6.8.5/keen-slider.min.css"
    />

<style>

  .keen-slider{padding:25px 0}

  /*
[class^="number-slide"] div,
[class*=" number-slide"] div
*/
.keen-slider__slide div{
  background: grey;
  display: flex;
  align-items: start;
  align-content: center;
  justify-content: space-between;
  font-size: 50px;
  color: #fff;
  font-weight: 500;
  min-height: 300px;
  max-height: 100vh;
}
.keen-slider__slide {
  min-width:300px;
  /*max-width:300px;*/
overflow:visible!important;
}
.keen-slider__slide div{
  
  /*max-width:300px;*/

  border-radius:30px;
  padding:15px;
  flex-flow:column;
  transition:ease-out 0.2s;
  transition:  0.2s var(--animationTiming1);

      
}
.keen-slider__slide strong {

  font-weight:normal;
  line-height:1;
  padding:20px;
  min-width:300px;
  white-space:nowrap
}
.keen-slider__slide .btn {

  padding:10px 15px;
  font-size:18px;
  font-weight:bold;
  border-radius:30px;
  display:flex;
  width:100%;
  justify-content:center;
  background:#000;
  color:#fff;

}
.keen-slider__slide.number-slide1 div,
.number-slide1 .popup-header { 
  background: rgb(64, 175, 255);
  background: linear-gradient(
    128deg,
    rgba(64, 175, 255, 1) 0%,
    rgba(63, 97, 255, 1) 100%
  );
}
svg.number-slide1{

  fill:url(#gradient-number-slide1) rgb(64, 175, 255);
  
}

.keen-slider__slide.number-slide2 div,
.number-slide2 .popup-header {
  background: rgb(255, 75, 64);
  background: linear-gradient(
    128deg,
    rgba(255, 154, 63, 1) 0%,
    rgba(255, 75, 64, 1) 100%
  );
}
svg.number-slide2{

  fill:url(#gradient-number-slide2) rgb(255, 75, 64);
  
}

.keen-slider__slide.number-slide3 div,
.number-slide3 .popup-header {
  background: rgb(182, 255, 64);
  background: linear-gradient(
    128deg,
    rgba(182, 255, 64, 1) 0%,
    rgba(63, 255, 71, 1) 100%
  );
  background: linear-gradient(
    128deg,
    rgba(189, 255, 83, 1) 0%,
    rgba(43, 250, 82, 1) 100%
  );
}
svg.number-slide3{

  fill:url(#gradient-number-slide3) rgb(182, 255, 64);
  
}

.keen-slider__slide.number-slide4 div,
.number-slide4 .popup-header {
  background: rgb(64, 255, 242);
  background: linear-gradient(
    128deg,
    rgba(64, 255, 242, 1) 0%,
    rgba(63, 188, 255, 1) 100%
  );
}
svg.number-slide4{

  fill:url(#gradient-number-slide4) rgb(64, 255, 242);
  
}

.keen-slider__slide.number-slide5 div,
.number-slide5 .popup-header {
  background: rgb(255, 64, 156);
  background: linear-gradient(
    128deg,
    rgba(255, 64, 156, 1) 0%,
    rgba(255, 63, 63, 1) 100%
  );
}
svg.number-slide5{

  fill:url(#gradient-number-slide5) rgb(255, 64, 156);
  
}

.keen-slider__slide.number-slide6 div,
.number-slide6 .popup-header {
  background: rgb(64, 76, 255);
  background: linear-gradient(
    128deg,
    rgba(64, 76, 255, 1) 0%,
    rgba(174, 63, 255, 1) 100%
  );
}
svg.number-slide6{

  fill:url(#gradient-number-slide6) rgb(64, 76, 255);
  
}





.navigation-wrapper {
  position: relative;
}

.arrow {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  fill: #fff;
  cursor: pointer;
}

.arrow--left {
  
  left: 15px;
  fill: "#fff";
  --background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' ><path d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' ></path></svg>");
}

.arrow--right {
  left: auto;
  right: 15px;
  --background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg'  viewBox='0 0 24 24' ><path d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'></path></svg>");
}

/*
.arrow--disabled.arrow--left {
  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' ><path d='M16.67 0l2.83 2.829-9.339 9.175 9.339 9.167-2.83 2.829-12.17-11.996z' ></path></svg>");
}

.arrow--disabled.arrow--right {
  background-image: url("data:image/svg+xml, <svg xmlns='http://www.w3.org/2000/svg' fill='grey' viewBox='0 0 24 24' ><path d='M5 3l3.057-3 11.943 12-11.943 12-3.057-3 9-9z'></path></svg>");
}*/

.arrow i{pointer-events:none}
.arrow {

  display:flex;align-items:center;justify-content:center;
  font-size:20px;
  
  height: 60px;
  width: 60px;
  border-radius: 50px;
  background:#fff;
  /*background: linear-gradient(to right,violet,black) !important;*/
  box-shadow: 0 0 25px -15px rgba(0,0,0,0.75);

  transition:all 0.2s ease-out
}
#website:has(.keen-slider:hover) .arrow.arrow--left,
#website:has(.arrow:hover) .arrow.arrow--left{
  
  left: 25px;
  
}


#website:has(.keen-slider:hover) .arrow.arrow--right,

#website:has(.arrow:hover) .arrow.arrow--right {
  right: 25px;
}

.arrow:hover{
  
  
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 0 35px -15px rgba(0,0,0,0.85);
  
  }

  .keen-slider__slide:hover div{transform:scale(1.05)}
</style>

<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <defs>

    <linearGradient id="gradient-number-slide1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="rgb(64, 175, 255)"></stop>
      <stop offset="100%" stop-color="rgb(63, 97, 255)"></stop>
    </linearGradient>

    <linearGradient id="gradient-number-slide2" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="rgb(255, 154, 63)"></stop>
      <stop offset="100%" stop-color="rgb(255, 75, 64)"></stop>
    </linearGradient>

    <linearGradient id="gradient-number-slide4" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="rgb(64, 255, 242)"></stop>
      <stop offset="100%" stop-color="rgb(63, 188, 255)"></stop>
    </linearGradient>

    <linearGradient id="gradient-number-slide5" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="rgb(255, 64, 156)"></stop>
      <stop offset="100%" stop-color="rgb(255, 63, 63)"></stop>
    </linearGradient>

    <linearGradient id="gradient-number-slide3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="rgb(189, 255, 83)"></stop>
      <stop offset="100%" stop-color="rgb(43, 250, 82)"></stop>
    </linearGradient>
    <linearGradient id="gradient-number-slide6" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="#404cff"></stop>
      <stop offset="100%" stop-color="#ae3fff"></stop>
    </linearGradient>
  </defs>
</svg>

<div id="my-keen-slider" class="keen-slider"

style=" mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 25px,
   rgba(0, 0, 0, 1) 15%, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) calc(100vw - 25px) );">
      
      <div class="keen-slider__slide number-slide4" data-list="list_nextidea">
        
        <div>
          <strong>Your<br>Next<br>Idea</strong>
        
          
        <a href="#" class="btn">More Info</a>
      
        </div>

      </div>
      
      <div class="keen-slider__slide number-slide1" data-list="list_waitinglist">
        
        <div>
          
          <strong>Waiting<br>List</strong>
        <a href="#" class="btn">Create</a>

        </div>

      </div>
      <div class="keen-slider__slide number-slide2" data-list="list_personalpage">
        
        
        <div style="position:relative;overflow:hidden">
          <strong style="position:relative;z-index:2">Personal<br>Website</strong>

          <style>
            .slideDetails:before{

              content:"";
              content:none;
              position:absolute;bottom:0;left:0;right:0;top:0;
              background:linear-gradient(145deg,transparent 50%,rgba(0,0,0,0.25),rgba(0,0,0,0.5),rgba(0,0,0,0.75));
              
              z-index:0;
              opacity:0;
              transition:0.2s opacity;
              

            }
            .keen-slider__slide div{cursor:pointer}
            .keen-slider__slide:hover .slideDetails:before{opacity:1}
            .slideDetails{
              font-size:18px;
              padding:0 20px 30px;
          }
            .slideDetails span {position:relative;z-index:2;
            
            /*mix-blend-mode: overlay;*/
            line-height:1.2;
            transform:translateY(5px);
            display:block;
            opacity:0;
            transition:0.2s all;
            color:rgba(255,255,255,1);
            text-shadow:1px 1px 5px rgba(0,0,0,0.25)

          }
                      .keen-slider__slide:hover .slideDetails span{opacity:1;transform:none}

          </style>
          <span class="slideDetails">
            <span>Create a personal website for you, your family or community.</span>
          </span>


          <a href="#" class="btn">Create</a>

        </div>

      </div>
      <div class="keen-slider__slide number-slide6" data-list="list_logo">
        
        <div>
          
          <strong>Logo</strong>
          <span class="slideDetails">
            <span>Create a logo for your website with our Logo Generator.</span>
          </span>
          
        <a href="#" class="btn">Create</a>

        </div>
      
      </div>
      <div class="keen-slider__slide number-slide3" data-id="businessWebsitePopup" data-list="list_website">
        
        <div>
          
          <strong>Business<br>Website</strong>
          <a href="javascript:void(null)" class="btn">Create</a>

        </div>

      </div>
      <div class="keen-slider__slide number-slide4" data-list="list_landingpage">
        
        <div>
          
          <strong>Landing<br>Page</strong>
        <a href="#" class="btn">Create</a>

        </div>


      </div>
      <div class="keen-slider__slide number-slide5" data-list="list_portfolio">
        
        <div>
          
          <strong>Portfolio</strong>
        <a href="#" class="btn">Create</a>

        </div>

      </div>
      <div class="keen-slider__slide number-slide6" data-list="list_gallery">
        
        <div>
          
          <strong>Photo<br>Gallery</strong>
        <a href="#" class="btn">Create</a>

        </div>

      </div>
      <div class="keen-slider__slide number-slide5" data-list="list_form">
        
        <div>
          
          <strong>Contact<br>Form</strong>
          <a href="#" class="btn">Create</a>

        </div>

      </div>
      <div class="keen-slider__slide number-slide6" data-list="list_blog">
        
        <div>
          
          <strong>Blog</strong>
          <a href="#" class="btn">Create</a>

        </div>

      </div>

      <div class="keen-slider__slide number-slide4" data-list="list_course">
        
        <div>
          
          <strong>Online<br>Course</strong>
          <a href="#" class="btn">Create</a>

        </div>
      
      </div>
      <div class="keen-slider__slide number-slide5" data-list="list_wiki">
        
        <div>
          <strong>Knowledge<br>base</strong>
        <a href="#" class="btn">Create</a>

        </div>
      
      </div>
      <div class="keen-slider__slide number-slide6" data-list="list_wiki">
        
        <div>

          <strong>WIKI</strong>
          <a href="#" class="btn">Create</a>

        </div>
      
      </div>
      <div class="keen-slider__slide number-slide1" data-list="list_embedpdf">
        
        <div>
          
          <strong>PDF<br>viewer</strong>
          <a href="#" class="btn">Create</a>

        </div>
      
      </div>
      <div class="keen-slider__slide number-slide2" data-list="list_directory">
        
        <div>
          
          <strong>Directory</strong>
          <a href="#" class="btn">Create</a>

        </div>
      
      </div>
    </div>


    <style>

:root{

  --animationTiming1:linear(0, 0.453 7.8%, 0.803 16.1%, 1.048 24.9%, 1.132 29.5%, 1.194 34.4%, 1.227 38.4%, 1.245 42.5%, 1.25 46.9%, 1.242 51.7%, 1.2 60.5%, 1.038 84.9%, 1.009 92.5%, 1);
}
.getStartedButton:hover{transform:scale(1.1)}
.getStartedButton{
  
  
  position:relative;z-index:1;

  border:none;
  padding-top:30px!important;
  padding-bottom:30px!important;
 
  transition: 0.3s transform var(--animationTiming1)

}

.getStartedButton:after,
.getStartedButton:before{

content:"";
position:absolute;
top:3px;left:3px;
width:calc(100% - 6px);
height:calc(100% - 6px);
/*
background:linear-gradient(to right,#7546ff,#a640ff);
  background: linear-gradient(90deg, #ff3a82, #5233ff);
  */
  background:#000;
  box-shadow:0 0 0 4px #fff;
border-radius:100px;
z-index:-1;

}

.getStartedButton:after {

top:-4px;left:-4px;
width:calc(100% + 8px);
height:calc(100% + 8px);

    background: linear-gradient(90deg, #ff3a82, #5233ff);
    background: linear-gradient(to bottom, var(--color1), hsl(var(--color1_hs),95%));
    /*mask-image:linear-gradient(to right,transparent,black);*/
    z-index:-2;


  mask-image: linear-gradient(-45deg, transparent , black 30%,black 70%,transparent);
  mask-repeat: no-repeat;
  animation: rightToLeft 5s ease-in-out infinite;
}

.getStartedButton:hover:after{

  animation: none;
  mask-image: none;

}

@keyframes rightToLeft {

  0% {
    mask-position: -400px -300px;
    opacity:1;
  }
  30% {
    mask-position: -400px 0;
    opacity:1;
  }
  80% {
    mask-position: 600px 0;
    opacity:0;
  }
  100% {
    mask-position: 600px 300px;
    opacity:0
  }

}

  /* --- Popup --- */
  .popup-overlay {
    position: fixed;
    inset: 0;
    display: block;
    align-items: center;
    justify-content: center;
    z-index: 99999999;
    
    pointer-events:none;
  }

  .popup-overlay.active{

    pointer-events:auto;

  }


  .popup-overlay-bg{

    pointer-events:none;
    background:red;
    position: fixed;
    top:0;left:0;width:100vw;height:100vh;

    backdrop-filter: blur(3px) grayscale(1);
    background: rgba(0, 0, 0, 0.5);
    opacity:0;
    transition:0.3s all;

  }
  .popup-overlay.active .popup-overlay-bg{

    opacity:1;

  }

  .popup {
    position: absolute;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    opacity: 0;
    transform-origin: top left;
    transition: all 0.5s linear(0, 0.012 0.9%, 0.05 2%, 0.411 9.2%, 0.517 11.8%, 0.611 14.6%, 0.694 17.7%, 0.765 21.1%, 0.824 24.8%, 0.872 28.9%, 0.91 33.4%, 0.939 38.4%, 0.977 50.9%, 0.994 68.4%, 1);

    max-width:600px;
  }

  .popup-header,.popup-content {
    padding: 30px;
    width:100%;

    
  }



  .popup-header h2 {

    line-height:1;
    padding:20px;
    min-width:300px;
    white-space:nowrap;
    color:#fff!important;
    font-size: 50px;
  }


  .popup-content .col-lg{
    
    width:100%;
    flex: auto;

  } 

  .popup-content .position-absolute-expand{
    display:none!important;
  }
   /* position-absolute-expand-middle-scale keditPointerEvents_off lazy entered loaded */

  .popup-content{

    overflow-y: auto;

  } 
  .popup-content h2 {

  margin-top: 50px !important;
  font-size: 15px;
  margin-bottom: 0px !important;
  color: var(--color1) !important;
  text-transform: uppercase;
  letter-spacing: 1px !important;

  }
  .popup-content h5 {
  margin-bottom: 30px !important;
  font-size: 22px !important;

  }

  .popup-close svg {width:100%;height:100%;;}
  .popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    

    cursor: pointer;
    border:none;
    background:transparent;
    height:50px;
    width:50px;
    color:#fff;
    opacity:0.7;
    transition: opacity 0.2s
  }

  .popup-close:hover{opacity:1}
  
  .popup{flex-flow:column}


</style>

<div class="popup-overlay" id="popup-overlay">
  <div class="popup-overlay-bg"></div>

  <div class="popup" id="testlogoPopup">
    <button class="popup-close" type="button">&times;</button>
    <div class="popup-header">
      <h2>Logo</h2>
    </div>
      
  </div>

  <div class="popup" id="businessWebsitePopup">
    <button class="popup-close" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="-0.5 -0.5 16 16" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" id="X--Streamline-Feather" height="16" width="16">
        <path d="M11.25 3.75 3.75 11.25" stroke-width="1"></path>
        <path d="m3.75 3.75 7.5 7.5" stroke-width="1"></path>
      </svg>

    </button>
    <div class="popup-header">
      <h2>Business Website</h2>
    </div>
    <div class="popup-content">
      
    </div>

      

  </div>
</div>


<script>
  // 🔹 Popup logic

  var slider;

  const popupOverlay = document.getElementById("popup-overlay");
  const popup = document.getElementById("popup");
  //const popupClose = document.getElementById("popup-close");




//const popupOverlay = document.getElementById("popup-overlay"); // jeden wspólny overlay
let activePopup = null; // aktualnie otwarty popup element
let activeSlide = null; // slajd, z którego popup wystartował
var isUserDragging=false;

function openPopupFromSlide(slide) {
  
  isUserDragging = true
  //alert(slide.classList)
  //const background = window.getComputedStyle(slide);
    //const bgImage = background.backgroundImage;
  //const bgColor = background.backgroundColor;


  //alert(bgColor + bgImage)

  var popupId = slide.dataset.id;
  if (!popupId) {
    
    popupId='businessWebsitePopup';
    // return;

  }
  
  var popupListItem = slide.dataset.list;
  if (!popupListItem) {
    
    popupListItem='list_website';
    // return;

  }


  const popup = document.getElementById(popupId);
  if (!popup) return;

  activePopup = popup;
  activeSlide = slide;
  isPopupOpen = true;
  


  const titleElement = slide.querySelector("strong");
  if (titleElement) {
    const popupTitle = popup.querySelector("h2");
    if (popupTitle) popupTitle.innerHTML = titleElement.innerHTML;
  }

  const popupContentElement = popup.querySelector(".popup-content");

  if (popupContentElement){
    popupContentElement.innerHTML = $('#'+popupListItem).html();

    $('.popup-content .btn-color1').each(function(){

      $(this).removeClass('btn-color1').addClass('btn-dark');
      

      //$(this).attr('src',$(this).attr('data-src')).removeClass('lazy');

    });

      if(typeof lazyLoadInstance!=="undefined")
        lazyLoadInstance.update();


        setTimeout(function(){popupContentElement.scrollTo(0,0)},250);

  }


  //clearTimeout(autoplayTimer);

  const rect = slide.getBoundingClientRect();

  //popupOverlay.style.display = "flex";
  popupOverlay.classList.add("active");

  popup.style.display = "flex";
  popup.style.width = rect.width + "px";
  popup.style.height = rect.height + "px";
  popup.style.left = rect.left + "px";
  popup.style.top = rect.top + "px";
  popup.style.opacity = "1";

  //alert(slide.classList)
  //popup.classList.add('number-slide6');

  // Funkcja, która znajdzie klasę w stylu "number-slideX"
  function getNumberSlideClass(el) {
    return Array.from(el.classList).find(cls => cls.startsWith("number-slide"));
  }

  // 🔹 Dodanie klasy do popupu
  function applySlideClassToPopup(slide, popup) {
    const numberClass = getNumberSlideClass(slide);
    if (numberClass) {
      popup.classList.add(numberClass);
    }
  }

  // 🔹 Usuwanie wszystkich "number-slide*" klas z popupu
  function removeNumberSlideClasses(popup) {
    popup.classList.forEach(cls => {
      if (cls.startsWith("number-slide")) {
        popup.classList.remove(cls);
      }
    });
  }
  // przy zamykaniu popupu
  removeNumberSlideClasses(popup);
  applySlideClassToPopup(slide, popup);


  // wymuszenie reflow przed tweenem
  void popup.offsetWidth;

  popup.style.width = window.innerWidth / 2 + "px";
  popup.style.height = (window.innerHeight - 30) + "px";
  popup.style.left = "15px";
  popup.style.top = "15px";
}

// --- zamknięcie klawiszem ESC ---
document.addEventListener("keydown", (e) => {
  if (e.key === "Escape" && activePopup) {
    closeActivePopup();
  }
});

// Obsługa przycisków na slajdach
document.querySelectorAll("#my-keen-slider .keen-slider__slide").forEach((slide) => {
  //alert('123')
  //const btn = slide.querySelector(".btn");
  const btn = slide.querySelector("div");
  if (!btn) return;

  btn.addEventListener("click", (e) => {
    
    e.preventDefault();
    e.stopPropagation();
    openPopupFromSlide(slide);
  });
});


/*
  // Znajdź konkretny slajd "Business Website"
  const businessSlide = Array.from(
    document.querySelectorAll("#my-keen-slider .keen-slider__slide")
  ).find((el) => el.textContent.includes("Business"));

  const businessBtn = businessSlide.querySelector(".btn");

  */

  let sliderStopped = false;
  let sliderPaused = false; // kontrola autoplayu (już używana wcześniej)


  // 🔸 Funkcja zatrzymująca slider
  function stopSlider() {
    
    sliderPaused=true;

    if (!sliderStopped && slider) {
      sliderStopped = true;
      //slider.pause();
    }
  }

  // 🔸 Funkcja wznawiająca slider
  function resumeSlider() {
    if (sliderStopped && slider) {
      sliderStopped = false;
      //slider.play();
    }
  }

  // 🔸 Funkcja otwierająca popup z animacją tween
  function openPopup() {

          //smoothTransition(99999999999999, 20, 1000) // 20 kroków, 1000ms

    //stopSlider();
      clearInterval(transitionTimer)

    // Pobierz pozycję i rozmiar slajdu
    const rect = businessSlide.getBoundingClientRect();

    // Ustaw popup w miejscu slajdu (start)
    popup.style.display = "block";
    popup.style.width = rect.width + "px";
    popup.style.height = rect.height + "px";
    popup.style.left = rect.left + "px";
    popup.style.top = rect.top + "px";
    popup.style.opacity = "1";
    popupOverlay.style.display = "flex";

    // Wymuś reflow, żeby animacja się uruchomiła
    void popup.offsetWidth;

    // Przejście do docelowego rozmiaru (lewa połowa ekranu)
    popup.style.width = window.innerWidth / 2 + "px";
    popup.style.height = window.innerHeight + "px";
    popup.style.left = "0";
    popup.style.top = "0";
  }

  


  function closeActivePopup() {
  if (!activePopup || !activeSlide) return;

  const rect = activeSlide.getBoundingClientRect();

  activePopup.style.width = rect.width + "px";
  activePopup.style.height = rect.height + "px";
  activePopup.style.left = rect.left + "px";
  activePopup.style.top = rect.top + "px";
  activePopup.style.opacity = "0";

    popupOverlay.classList.remove("active");
  setTimeout(() => {
    //popupOverlay.style.display = "none";
    activePopup.style.display = "none";
    activePopup = null;
    activeSlide = null;
    isPopupOpen = false;
    //startAutoplay();
  }, 300);
}

// Obsługa kliknięcia w overlay (zamknięcie)
popupOverlay.addEventListener("click", (e) => {
  if (e.target === popupOverlay) closeActivePopup();
});

// Obsługa kliknięcia w przycisk close w popupie
document.querySelectorAll(".popup .popup-close").forEach((btn) => {
  btn.addEventListener("click", (e) => {
    e.stopPropagation();
    closeActivePopup();
  });
});



  // Eventy
 /*
  businessBtn.addEventListener("click", (e) => {
    
      e.preventDefault();
      e.stopPropagation(); // <== TO USUWA "drgnięcie" i problem z drugim kliknięciem

    openPopup();
  });
  */

  //popupClose.addEventListener("click", closePopup);

  // Dodatkowo: kliknięcie poza popup też zamyka
  /*popupOverlay.addEventListener("click", (e) => {
    if (e.target === popupOverlay) closePopup();
  });
  */
</script>


    <script src="https://cdn.jsdelivr.net/npm/keen-slider@6.8.5/keen-slider.min.js"></script>
    <script>

        
  // trzymamy jeden obiekt animacji, zmieniamy jego duration w locie
  let currentAnimation = { duration: 50000, easing: (t) => t }
  
  const SLOW_DURATION = 150000
  const NORMAL_DURATION = 50000

// Jeśli użytkownik zaczyna pointerdown na elementach interaktywnych, stopPropagation już mamy.
// Tu nasłuchujemy globalnie na kontenerze slidera dla pointerdown/pointerup.
// Ustawiamy isUserDragging na true przy pointerdown, false przy pointerup/cancel.
// Ważne: ignorujemy pointerdown, gdy wydarzenie powstało nad interaktywnym elementem (button/link/input).
function isInteractiveTarget(target) {
  return !!target.closest("a, button, input, textarea, select, .btn");
}
              
      function navigation(slider) {
  let wrapper, dots, arrowLeft, arrowRight

  function markup(remove) {
    wrapperMarkup(remove)
    dotMarkup(remove)
    arrowMarkup(remove)
  }

  function removeElement(elment) {
    elment.parentNode.removeChild(elment)
  }
  function createDiv(className) {
    var div = document.createElement("div")
    var classNames = className.split(" ")
    classNames.forEach((name) => div.classList.add(name))
    return div
  }

  function arrowMarkup(remove) {
    if (remove) {
      removeElement(arrowLeft)
      removeElement(arrowRight)
      return
    }
    arrowLeft = createDiv("arrow arrow--left");
    arrowLeft.innerHTML='<i class="fas fa-angle-left"></i>';
    arrowLeft.addEventListener("click", () => slider.prev())
    arrowRight = createDiv("arrow arrow--right")
    arrowRight.innerHTML='<i class="fas fa-angle-right"></i>';
    arrowRight.addEventListener("click", () => slider.next())

    wrapper.appendChild(arrowLeft)
    wrapper.appendChild(arrowRight)
  }

  function wrapperMarkup(remove) {
    if (remove) {
      var parent = wrapper.parentNode
      while (wrapper.firstChild)
        parent.insertBefore(wrapper.firstChild, wrapper)
      removeElement(wrapper)
      return
    }
    wrapper = createDiv("navigation-wrapper")
    slider.container.parentNode.appendChild(wrapper)
    wrapper.appendChild(slider.container)
  }

  function dotMarkup(remove) {
    if (remove) {
      removeElement(dots)
      return
    }
      
  }

  function updateClasses() {
    var slide = slider.track.details.rel
    slide === 0
      ? arrowLeft.classList.add("arrow--disabled")
      : arrowLeft.classList.remove("arrow--disabled")
    slide === slider.track.details.slides.length - 1
      ? arrowRight.classList.add("arrow--disabled")
      : arrowRight.classList.remove("arrow--disabled")
      
  }

  slider.on("created", () => {
    markup()
    updateClasses()
  })
  slider.on("optionsChanged", () => {
    console.log(2)
    markup(true)
    markup()
    updateClasses()
  })
  slider.on("slideChanged", () => {
    updateClasses()
  })
  slider.on("destroyed", () => {
    markup(true)
  })
}


      function WheelControls(slider) {
        var touchTimeout
        var position
        var wheelActive

        function dispatch(e, name) {
          position.x -= e.deltaX
          position.y -= e.deltaY
          slider.container.dispatchEvent(
            new CustomEvent(name, {
              detail: {
                x: position.x,
                y: position.y,
              },
            })
          )
        }

        function wheelStart(e) {
          position = {
            x: e.pageX,
            y: e.pageY,
          }
          dispatch(e, "ksDragStart")
        }

        function wheel(e) {
          dispatch(e, "ksDrag")
        }

        function wheelEnd(e) {
          dispatch(e, "ksDragEnd")
        }
        
        function eventWheel(e) {
          // Sprawdzamy, czy użytkownik przewija bardziej w poziomie czy pionie
          const horizontalScroll = Math.abs(e.deltaX) > Math.abs(e.deltaY);

          // Tylko jeśli dominuje ruch poziomy — zatrzymujemy scroll strony
          if (horizontalScroll) {
            e.preventDefault();

            if (!wheelActive) {
              wheelStart(e);
              wheelActive = true;
            }

            wheel(e);
            clearTimeout(touchTimeout);
            touchTimeout = setTimeout(() => {
              wheelActive = false;
              wheelEnd(e);
            }, 50);
          }
        }

        slider.on("created", () => {
          slider.container.addEventListener("wheel", eventWheel, {
            passive: false,
          })
        })
      }

      slider = new KeenSlider(
        "#my-keen-slider",
        {
          
        loop: true,
        mode: "free",
            
            
        created(s) {
          s.moveToIdx(5, true, currentAnimation)
        },
        updated(s) {
          s.moveToIdx(s.track.details.abs + 5, true, currentAnimation)
        },
        animationEnded(s) {
          s.moveToIdx(s.track.details.abs + 5, true, currentAnimation)
        },
            
            
          rubberband: false,
        
          slides: {
            
            perView: "auto",
            spacing: 15
          
          },
          //v//ertical: true,
        },
        [WheelControls,navigation]
      );

      
        // --- obsługa hover: zmieniamy tylko duration obiektu currentAnimation
  ///const sliderEl = document.querySelector("#my-keen-slider")

  /*
  sliderEl.addEventListener("mouseenter", () => {
    currentAnimation.duration = SLOW_DURATION
    // restartujemy bieżącą animację aby natychmiast zastosować nowe duration
    try {
      slider.moveToIdx(slider.track.details.abs + 5, true, currentAnimation)
    } catch (e) {
      // w razie gdyby access do track nie był gotowy — ignorujemy
      console.warn("Cannot restart animation on mouseenter:", e)
    }
  })

  sliderEl.addEventListener("mouseleave", () => {
    currentAnimation.duration = NORMAL_DURATION
    try {
      slider.moveToIdx(slider.track.details.abs + 5, true, currentAnimation)
    } catch (e) {
      console.warn("Cannot restart animation on mouseleave:", e)
    }
  })

  */


  // timer przejścia (żeby nie robić nakładających się przejść)
let transitionTimer = null

// płynne przejście trwa maksymalnie 1000ms (1s)
function OLDsmoothTransition(toDuration, steps = 20, totalTime = 1000) {
  // zabezpieczenie: wyczyść poprzedni timer
  if (transitionTimer) {
    clearInterval(transitionTimer)
    transitionTimer = null
  }

  const from = currentAnimation.duration
  const diff = toDuration - from
  let step = 0
  const interval = Math.max(10, Math.round(totalTime / steps))

  transitionTimer = setInterval(() => {
    step++
    const t = step / steps
    // easeInOut (gładkie przyspieszenie -> zwolnienie)
    const eased = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t
    currentAnimation.duration = from + diff * eased

    // restart animacji z nowym duration — to sprawia, że prędkość się płynnie dopasuje
    try {
      slider.moveToIdx(slider.track.details.abs + 5, true, currentAnimation)
    } catch (e) {
      // jeśli track nie jest jeszcze gotowy, ignorujemy (bez crasha)
      // console.warn("moveToIdx failed during smoothTransition:", e)
    }

    if (step >= steps) {
      clearInterval(transitionTimer)
      transitionTimer = null
      // upewnij się, że na koniec ustawimy dokładnie docelową wartość
      currentAnimation.duration = toDuration
      try {
        slider.moveToIdx(slider.track.details.abs + 5, true, currentAnimation)
      } catch (e) {}
    }
  }, interval)

}

// Podłącz eventy hover do slider elementu
const sliderEl = document.querySelector("#my-keen-slider")

sliderEl.addEventListener("pointerdown", (e) => {
  if (isInteractiveTarget(e.target)) return; // klik na buttony traktujemy jako nie-drag tu
  isUserDragging = true;
  // w czasie dragu zatrzymujemy autoplay
  sliderPaused = true;
});

window.addEventListener("pointerup", (e) => {
  // kończymy drag (nawet jeśli pointerup poza sliderem)
  if (isUserDragging) {
    isUserDragging = false;
    // wznow autoplay po małym delayu, aby dać Keen czas na settle
    setTimeout(() => {
      sliderPaused = false;
    }, 120); // 120ms - drobne opóźnienie stabilizujące
  }
});
window.addEventListener("pointercancel", () => {
  isUserDragging = false;
  sliderPaused = false;
});


sliderEl.addEventListener("mouseenter", () => {
  smoothTransition(SLOW_DURATION, 20, 1000) // 20 kroków, 1000ms
})

sliderEl.addEventListener("mouseleave", () => {
  smoothTransition(NORMAL_DURATION, 20, 1000)
})


  const slides = document.querySelectorAll("#my-keen-slider .keen-slider__slide");

  let lastOffset = Math.floor(Math.random() * 101); // pierwszy losowo 0–100

  slides.forEach((slide, index) => {
    let offset;
    // Losuj tak długo, aż różnica względem poprzedniego >= 25 px
    do {
      offset = Math.floor(Math.random() * 101); // 0–100 px
    } while (Math.abs(offset - lastOffset) < 25);

    slide.style.marginTop = `${offset}px`;
    lastOffset = offset;
  });


/* ---------- Dopasowanie smoothTransition: nie restartuj moveToIdx podczas dragu ---------- */
function smoothTransition(toDuration, steps = 20, totalTime = 1000) {
  // zabezpieczenie: wyczyść poprzedni timer
  if (transitionTimer) {
    clearInterval(transitionTimer);
    transitionTimer = null;
  }

  const from = currentAnimation.duration;
  const diff = toDuration - from;
  let step = 0;
  const interval = Math.max(10, Math.round(totalTime / steps));

  transitionTimer = setInterval(() => {
    step++;
    const t = step / steps;
    const eased = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
    currentAnimation.duration = from + diff * eased;

    // Jeśli użytkownik przeciąga — NIE restartujemy moveToIdx (to powoduje konflikty)
    if (!isUserDragging) {
      try {
        // Restartujemy animację tylko gdy nie ma dragu
        slider.moveToIdx(slider.track.details.abs + 5, true, currentAnimation);
      } catch (e) {
        // ignore
      }
    }

    if (step >= steps) {
      clearInterval(transitionTimer);
      transitionTimer = null;
      currentAnimation.duration = toDuration;
      if (!isUserDragging) {
        try {
          slider.moveToIdx(slider.track.details.abs + 5, true, currentAnimation);
        } catch (e) {}
      }
    }
  }, interval);
}

/* ---------- Jeśli Keen emituje dragStart/dragEnd, obsłuż je dodatkowo ---------- */
try {
  slider.on && slider.on("dragStart", () => {
    isUserDragging = true;
    sliderPaused = true;
    // anuluj przejście animacji, żeby nie kolidował
    if (transitionTimer) { clearInterval(transitionTimer); transitionTimer = null; }
  });
  slider.on && slider.on("dragEnd", () => {
    isUserDragging = false;
    setTimeout(() => { sliderPaused = false; }, 120);
  });
} catch (e) {
  // ignoruj - nie wszystkie wersje Keen muszą emitować te eventy
}

/* ---------- Autoplay: sprawdzamy sliderPaused zanim przesuniemy ---------- */
/* Jeśli masz już swoją funkcję autoplay (np. moveToIdx co X), upewnij się, że
   sprawdza sliderPaused przed wykonaniem moveToIdx. Przykładowy autoplay: */

   /*
(function setupAutoplay() {
  let timeout;
  function next() {
    // jeśli użytkownik przeciąga, nie wykonujemy ruchu teraz
    if (!sliderPaused && !isUserDragging) {
      try {
        slider.moveToIdx(slider.track.details.abs + 5, true, currentAnimation);
      } catch (e) {}
    }
    clearTimeout(timeout);
    timeout = setTimeout(next, 2000); // twój interwał autoplay
  }
  next();
})();
*/
    </script>
      </div></section>
<section data-pcid="4001.1" id="kpg_34844612" data-keditor="1" class="kedit" data-bgradient="#EEEFF5/#ffffff/1" style="background: linear-gradient(to bottom,#EEEFF5,#ffffff);"><div class="container">
    <div class="row">
        <div class="col-lg col-items-middle col-lg-12 text-center">
            <div class="col-container">
  
  <div style="color: var(--color1);border-radius: 100px;font-size: 14px;padding: 5px 15px;/*! background: hsl(var(--color1_hs),95%); */" class="mx-auto w-auto d-inline-flex koPreTitle mt-2 mb-2 keditable">website builders club</div>
  
                <h2 class="mt-2 mb-2 keditable">Join our Community<br>of website builders, like you</h2>
                
                
                
            </div>
        </div><div class="col-lg col-items-middle">
            <div class="col-container">
                <h2 class="mt-2 mb-4 keditable">Teach. Learn. Share.<br>Hire or Get Hired.</h2>
                
                <ul class="koCheckList mt-4 mb-4 koCheckList-f058 keditable"><li><b>Create and share your websites</b><br>Invite other community members to help you with the website, or help other members. Create websites and share them as templates.</li><li><b>Learn and earn experience badges</b><br>Become an expert and share your expertise with other members. Offer help. Get help. Earn experience badges and complete our courses to achieve career-changing certificates.</li><li><b>Take advantage of member benefits</b><br>Become a proud member, create unlimited websites, marketing pages, SEO pages and more. Invite more members and create your own network.</li></ul>
                
            </div>
        </div>
        <div class="col-lg col-items-middle">
            <div class="col-container">
                <div class="mt-2 mb-2 kimgRatio"><img title="" alt="" class="img-fluid lazy" data-src="data/files/community-team.png"></div>
            </div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.1" id="kpg_30330113" data-keditor="1" class="kedit" data-bgradient="#EEEFF5/#ffffff/1" style="background: linear-gradient(to bottom,#EEEFF5,#ffffff);"><div class="container">
    <div class="row">
        
        <div class="col-lg col-items-middle">
            <div class="col-container">
                <div class="kimgRatio2 mt-2 mb-2"><img title="" alt="" class="img-fluid lazy" data-src="data/files/start-team.png"></div>
            </div>
        </div>
    <div class="col-lg col-items-middle">
            <div class="col-container">
                <h2 class="mt-2 mb-4 keditable">Unlimited Websites,<br>Easy Start</h2>
                
                <ul class="koCheckList mt-4 mb-4 koCheckList-f058 keditable"><li><b>Create a website. Or two. Or as many as you ever need.</b><br>Become a member and take advantage of benefits, unlimited websites are just the beginning.</li><li><b>Static technology for the world's fastest websites.</b><br>Amazing speed and flexibility with static-first technology and lightning fast global&nbsp;content delivery network.</li><li><b>Intuitive, AI-assisted website builder</b><br>Create websites more easily than ever before and enjoy managing your websites in the future. Drag and drop, point and click. Finally, a website builder you'll love to use.</li></ul>
                
            </div>
        </div></div>
</div></section>
<section data-pcid="4080.2" id="kpg_21999" data-keditor="1" class="kedit keditDark lazy entered loaded" data-background="data/files/photos/1649962843028-54905316eb21-cc74cc10.jpg" data-src="data/files/photos/1649962843028-54905316eb21-cc74cc10.jpg" style="background: url() no-repeat 50% 0;background-size:cover;"><div class="container">
    <div class="row g-6">
        <div class="col-lg col-items-middle text-left col-lg-1">
            <div class="col-container"></div>
        </div>
        <div class="col-lg col-items-middle text-right col-lg-6">
            <div class="col-container">
                
                <div class="koPreTitle mt-2 mb-2 keditable">Features &amp; Benefits of <span style="color: rgb(255, 255, 255);">Website•im</span></div><div style="font-size: 30px;" class="mt-2 mb-2 keditable"><div>Become a member and never look back.</div><div>Create your next website with <b><span style="color: rgb(255, 255, 255);">Website•im</span></b>, and all other websites you will ever need.</div></div>
                
            </div>
        </div>
        <div class="col-lg col-items-middle text-left col-lg-1">
            <div class="col-container">
                <div class="koSeparator koSeparatorBlock h-100 koSeparatorLeft" data-bg="rgba(255, 255, 255, .3)" style="background: rgba(255, 255, 255, 0.3); height: 452.4px; width: 2px; margin-top: 0px; margin-bottom: 0px;"></div>
            </div>
        </div>
        <div class="col-lg col-items-middle text-left col-lg-4">
            <div class="col-container"></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_website" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                <span data-usal="zoomin blur" class="position-absolute-expand">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide3 position-absolute-expand position-absolute-expand-middle keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg style="position:absolute;top:0;" xmlns="http://www.w3.org/2000/svg" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                </span>
                
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/content.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
            </div>
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Build a Website. No code.</h2>
                
                <h5 class="mt-2 mb-2 keditable">Create unlimited websites for less than your Netflix bill</h5><div class="mt-2 mb-2 keditable"><div>The only website builder that gives you true freedom: one membership, unlimited websites. No per-site fees. Create, publish, and host (or download) as many static, blazing-fast websites as you want - for you, for clients, for fun, for profit.</div></div>
                
            <ul class="koCheckList mt-4 mb-4 keditable" data-usal="split-item split-delay-100"><li>AI website in 30 seconds: just type a prompt and watch magic happen</li><li>Hundreds of stunning templates (to start with)</li><li>Intuitive and easy to use:&nbsp;Drag-and-drop blocks, galleries, forms, blogs, courses, directories, portfolios and more!</li><li>Packed with features and powerful</li><li>Unlimited sites, unlimited pages,&nbsp;custom domains, free SSL</li><li>Static + global CDN and&nbsp;SEO-optimized out of the box</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/website-builder" class="btn btn-color1 btn-lg rounded-pill">Create a Website<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_gallery" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide6 position-absolute-expand position-absolute-expand-middle keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middlekeditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/gallery.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Create a Gallery</h2>
                
                <h5 class="mt-2 mb-2 keditable">Drop Photos. Watch Magic Happen.</h5><div class="mt-2 mb-2 keditable">The photo gallery that makes your visitors stop scrolling (and Start Buying).&nbsp;Tired of wrestling with clunky upload dialogs, endless resizing, and galleries that look like they were built in 2009?</div>
                
            <div class="mt-2 mb-2 keditable">Meet the <b>Website•im Photo Gallery</b>: the easiest, most jaw-dropping way to showcase your work.</div><ul class="koCheckList mt-4 mb-4 keditable"><li>Drag photos straight from your desktop and drop them on the gallery module.</li><li>Your photos auto-optimize, lazy-load, and look pixel-perfect on phones, tablets, desktops.</li><li>Lightbox? Built-in. Captions? One click. Zoom? Of course.</li><li>Zero code. Zero plugins. Zero headaches.</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/photo-gallery" class="btn btn-color1 btn-lg rounded-pill">Create a Photo Gallery<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_personalpage" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide2 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/personal.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Create a Personal Page</h2>
                
                <h5 class="mt-2 mb-2 keditable">Build a personal website that feels like You</h5><div class="mt-2 mb-2 keditable"><div>Your name. Your story. Your rules:&nbsp;<b>Website•im Personal Website</b>&nbsp;turns "I need a site" into a polished, lightning-fast, unforgettable online home in minutes! No coding, no per-site fees. One membership, unlimited personal sites (portfolio, résumé, speaking page, wedding site, side-hustle, whatever)</div></div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Start with AI or pick from 200+ stunning templates</li><li>Drag-and-drop your photos, bio, social links, contact form, embed a calendar</li><li>Publish and done! You now own&nbsp;one of the fastest, most secure personal sites on the internet.</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/personal-website" class="btn btn-color1 btn-lg rounded-pill">Create a Personal Website<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_logo" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide6 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/logo2.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Generate a Company Logo</h2><h5 class="mt-2 mb-2 keditable">Your Perfect Logo in Seconds (Not Weeks)</h5>
                
                <div class="mt-2 mb-2 keditable">Professional branding shouldn't cost thousands or take weeks. <b>Website•im&nbsp;Logo Maker</b> delivers agency-quality logos in under a minute, included free for every member.</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Choose from pre-made logo designs</li><li>Generate logo ideas with AI</li><li>Customize drag &amp; drop editor, update fonts, colors or shapes</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/logo" class="btn btn-color1 btn-lg rounded-pill">Design a Logo<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_form" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide5 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/form.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Create a Contact Form</h2><h5 class="mt-2 mb-2 keditable">Turn every visitor into a lead</h5>
                
                <div class="mt-2 mb-2 keditable"><div>Tired of forms that look unprofessional, break on mobile, get spammed and vanish into the void? Say hello to the <b>Website•im Form Maker</b>,&nbsp;simple form generator that turns curious visitors into red-hot leads, automatically.</div></div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Add a Contact Form to your website</li><li>Edit with Drag &amp; Drop, add more fields and customize</li><li>Receive email and capture leads.</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/form" class="btn btn-color1 btn-lg rounded-pill">Create a Contact form<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_landingpage" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide4 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/landingpage.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Convert with Landing Pages</h2>
                
                <h5 class="mt-2 mb-2 keditable">The Landing Page feature that makes every visitor take action.</h5><div class="mt-2 mb-2 keditable">Turn any page into a High-Converting Landing Page Machine with <b>Website•im Landing Pages</b>,&nbsp;every single page you create is already a full-power, distraction-free and lightning-fast landing page: ready to sell courses, book calls, collect emails, or launch products the moment you hit publish.</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Hide header and footer globally or per-page with one toggle</li><li>Full-screen hero sections, countdown timers, embedded videos, smart forms, testimonials, pricing tables - all drag-and-drop</li><li>Static + CDN = lightning fast worldwide load: Google ranks it, visitors trust it, conversions explode!</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/landing-page" class="btn btn-color1 btn-lg rounded-pill">Create a Landing Page<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_portfolio" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide5 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/gallery.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Publish a Portfolio</h2>
                
                <h5 class="mt-2 mb-2 keditable">Show your work like the Pro you are</h5><div class="mt-2 mb-2 keditable">The <b>Website•im Portfolio</b> wins you clients before you even speak: turns any of your sites into a jaw-dropping, lightning-fast and SEO-friendly showcase.</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Drop your images, choose your layout and publish.</li><li>Lightbox galleries with zoom, captions, and swipe on mobile</li><li>Before/after sliders, video embeds, downloadable assets</li><li>Fully SEO-optimized project pages Google loves</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/portfolio" class="btn btn-color1 btn-lg rounded-pill">Create a Portfolio<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_blog" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide6 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/blog.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Post a Blog</h2>
                
                <h5 class="mt-2 mb-2 keditable">Blog like a pro without the tech nightmares</h5><div class="mt-2 mb-2 keditable">No slow installations. No plugin conflicts or security patches. <b>Website•im Blog</b> module gives you a gorgeous, blazing-fast and SEO-friendly blog that's ready to rank and ready to make you money.</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Write your content</li><li>Publish and&nbsp;watch rankings (and traffic) explode</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/blog" class="btn btn-color1 btn-lg rounded-pill">Start Posting<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_course" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            <div style="/*! height: 100%; */" class="col-container">

                
                
                <span data-usal="zoomin blur" style="/*! max-height: 100%; *//*! height: 100%; *//*! display: block; */padding: 100px;height: 100%;width: 100%;" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide4 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/course.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Teach with Courses</h2><h5 class="mt-2 mb-2 keditable">Launch your own Mini-Course in hours, not months</h5>
                
                <div class="mt-2 mb-2 keditable">Turn your expertise into Online Courses with <b>Website•im Course</b> module.&nbsp;Your knowledge is already worth thousands, stop leaving money on the table.</div>
                
            <br><ul class="koCheckList mt-4 mb-4 keditable"><li>Add lessons and organize content into&nbsp;modules</li><li>Edit text, add videos, checklists and more</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/course" class="btn btn-color1 btn-lg rounded-pill">Create a Course<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_wiki" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide5 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/wiki.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Document your knowledge</h2>
                
                <h5 class="mt-2 mb-2 keditable">Wiki module that turns chaos into clarity</h5><div class="mt-2 mb-2 keditable">No more scattered Google Docs, outdated Notion pages, or paying for tools nobody can find anything in. <b>Website•im Wiki</b> module lets you create a beautiful, searchable, professional knowledge base (or internal docs, help center, SOP library, product manual and more!)</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Lightning-fast search across all articles</li><li>Clean, readable typography that works perfectly on mobile</li><li>SEO-friendly URLs so Google sends you free traffic</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/docs" class="btn btn-color1 btn-lg rounded-pill">Create Docs<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_directory" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide2 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/directory.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Curate a Directory</h2>
                
                <h5 class="mt-2 mb-2 keditable">Turn your website into a Directory, attract traffic &amp; revenue</h5><div class="mt-2 mb-2 keditable">Membership directories, business listings, resource hubs, vendor catalogs, job boards, real estate listings - whatever you want to catalog, <b>Website•im Directory</b> module turns it into a beautiful, searchable, money-making machine in minutes.</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Add the Directory block onto any page</li><li>Add your items (title, description, image, tags, as many as you want)</li><li>Fully responsive, modern design that works on mobile</li><li>SEO-optimized listing pages Google loves</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/directory" class="btn btn-color1 btn-lg rounded-pill">Create a Directory<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_embedpdf" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide1 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/gallery.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Publish PDF Documents</h2><h5 class="mt-2 mb-2 keditable">Embed PDFs that look native (and actually get read)</h5>
                
                <div class="mt-2 mb-2 keditable">No more "Download PDF" buttons or sending visitors to Google Drive or Dropbox links. With <b>Website•im PDF Embed</b>, you upload any PDF once - brochure, menu, e-book or pricing guide, and it instantly becomes a beautiful, scrollable, mobile-perfect viewer right inside your page.</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Fully responsive (looks great on phones, tablets, desktops)</li><li>Lightning-fast and SEO-friendly</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/pdf" class="btn btn-color1 btn-lg rounded-pill">Publish a PDF<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_waitinglist" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide6 position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/waitlist.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Start a Waiting List</h2>
                
                <h5 class="mt-2 mb-2 keditable">The Waiting List Module That Turns Hype Into Revenue</h5><div class="mt-2 mb-2 keditable">Launches, new products, drop dates - nothing creates urgency like a beautiful countdown timer paired with a simple signup form:&nbsp;<b>Website•im Waiting List</b> gives you both in one drag-and-drop block. Zero code. Zero plugins. Just pure conversion magic.</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Set a launching date</li><li>Customize the copy and publish!</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/waitlist" class="btn btn-color1 btn-lg rounded-pill">Create a Waiting Line<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4001.5" id="list_nextidea" data-keditor="1" class="kedit"><div class="container">
    <div class="row g-7">
        

        <div class="col-lg col-items-middle">
            
            
            
            <div class="col-container">

                
                
                <span data-usal="zoomin blur" class="position-absolute-expand">
                
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="31.87 24.22 141.65 149.52" class="number-slide4 position-absolute-expand position-absolute-expand-middle keditPointerEvents_off">                      <path d="M64.3,-38.2C77,-15.2,76.4,14.3,63.5,36.4C50.6,58.5,25.3,73.1,-1.1,73.7C-27.5,74.4,-55,61,-64.3,41C-73.6,21,-64.7,-5.6,-50.9,-29.2C-37.2,-52.8,-18.6,-73.5,3.6,-75.6C25.8,-77.6,51.7,-61.2,64.3,-38.2Z" transform="translate(100 100)"></path> </svg>

                
                <svg xmlns="http://www.w3.org/2000/svg" style="mix-blend-mode: overlay;" viewBox="18.05 40.35 151.48 144.02" class="position-absolute-expand position-absolute-expand-middle-scale keditPointerEvents_off">   <path d="M55.6,-28.5C68,-10.6,71.3,16.3,60.5,39.1C49.8,62,24.9,80.9,-1.7,81.8C-28.2,82.8,-56.4,65.8,-69.9,41.4C-83.4,17,-82.3,-14.9,-68.2,-33.8C-54.1,-52.6,-27,-58.4,-2.7,-56.9C21.6,-55.3,43.2,-46.3,55.6,-28.5Z" transform="translate(100 100)" style="fill: none;" stroke="rgba(0,0,0,0.1)"></path> </svg>
                
                </span>
  
  
  
                <div class="js-video-holder mt-2 mb-2 keditRelativeHigher">
                  <div class="kvideo-centered">  
                    
                    <video autoplay="" loop="" muted="" disablepictureinpicture="" playsinline="" style="box-shadow: 10px 10px 100px rgba(0,0,0,0.3),10px 10px 30px -15px black;" class="rounded-3 lazy" width="1280" height="720" data-src="data/files/nextidea.mp4"></video>
            
                    </div>
                    
                    
                    </div>
                
                
                
                
            </div>
            
            
            
        </div><div class="col-lg col-items-middle">
            <div class="col-container" data-usal="split-item split-delay-100">

                <h2 style="--kedit-fsx: 1.20;" class="mt-2 mb-2 keditable">Your next project!</h2>
                
                <h5 class="mt-2 mb-2 keditable">Your next project doesn't fit in a box?</h5><div class="mt-2 mb-2 keditable">The "Anything" Builder that&nbsp;lets your wildest ideas breathe. <b>Website•im</b> already has the pieces. You're not limited to features. You're limited only by your imagination.</div>
                
            <ul class="koCheckList mt-4 mb-4 keditable"><li>Professional looking website for your business, personal website, blog</li><li>Start with AI (describe your crazy idea and get a custom site in 30 seconds) or start blank</li><li>Drag in whatever blocks you need: forms, galleries, countdowns, blogs, wikis, directories, embeds, custom code or create your own, custom blocks</li><li>Connect the dots exactly how you want and publish</li><li>Lightning-fast, unhackable, unlimited static websites + CDN means each of your creations loads under 1 second worldwide.</li></ul><div class="koButtons d-flex mt-4 mb-2"><a href="start/member" class="btn btn-color1 btn-lg rounded-pill">Become a Member<i class="fas fa-arrow-right ms-2"></i></a></div></div>
        </div>
    </div>
</div></section>
<section data-pcid="4080.3" id="kpg_251853" data-keditor="1" class="kedit lazy entered loaded" data-background="data/files/photos/1731582338361-f5d4101e3a25-cc74cc10.jpg" data-src="data/files/photos/1731582338361-f5d4101e3a25-cc74cc10.jpg" style="background: url() no-repeat 50% 0;background-size:cover;"><div class="container">
    <div class="row g-5">
        
        
        <div class="col-lg col-items-middle text-left col-lg-7">
            <div class="col-container">
                <div class="koPreTitle mt-2 mb-0 keditable">technical side of <span style="color: rgb(0, 0, 0);">Website</span><span style="color: var(--color1);">•</span><span style="color: rgb(0, 0, 0);">im</span></div>
                <div style="font-size: 26px;" class="mb-2 mt-0 keditable">How did the idea of unlimited websites become possible?</div>
                
            </div>
        </div>
        <div class="col-lg col-items-middle text-left col-lg-5">
            <div class="col-container"></div>
        </div><div class="col-lg col-items-middle text-left col-lg-12">
            <div class="col-container"></div>
        </div>
        
        
        
        
         <div class="col-lg col-items-top">
                            <div class="col-container bg-light rounded p-4 h-100">
                                <div class="kimgIcon mt-2 mb-2"><span class="koIconHolder koIconStyle22 koIconSize100"><i class="koIcon undefined fas fa-1"></i></span></div>
                                <h5 class="mt-4 mb-4 keditable">Member Dashboard</h5>
                                <div class="mt-2 mb-2 keditable">You start in the member dashboard, it's where you create, clone, edit or delete your websites.</div>
                            </div>
                        </div><div class="col-lg col-items-top">
                            <div class="col-container bg-light rounded p-4 h-100">
                                <div class="kimgIcon mt-2 mb-2"><span class="koIconHolder koIconStyle22 koIconSize100"><i class="koIcon undefined fas fa-2"></i></span></div>
                                <h5 class="mt-4 mb-4 keditable">Website Editor</h5>
                                <div class="mt-2 mb-2 keditable">From your member dashboard, you can easily sign in to any of your websites as website admin. When your website changes are ready, publish it.</div>
                            </div>
                        </div><div class="col-lg col-items-top">
                            <div class="col-container bg-light rounded p-4 h-100">
                                <div class="kimgIcon mt-2 mb-2"><span class="koIconHolder koIconStyle22 koIconSize100"><i class="koIcon undefined fas fa-3"></i></span></div>
                                <h5 class="mt-4 mb-4 keditable">Live Website</h5>
                                <div class="mt-2 mb-2 keditable">Once you publish your website, it's converted to a set of static files and uploaded to the closest Content Delivery Network, and replicated from there.</div>
                            </div>
                        </div>
                        
                        
        
        
        
    </div>
</div></section>
<section data-pcid="4036.11" id="kpg_810843" class="kedit keditRow">

<div class="container">
    <div class="row">
        <div class="col-lg-4 keditColumn">
            <section id="kedit_zhfhopd11" data-keditor="1" class="kedit"><div class="container">
                    <div class="row">
                        <div class="col-lg">
                            <div class="col-container">
                                
                                <h2 class="mt-2 mb-2 keditable">Global audience.<br>Global storage.</h2>
                                
                                <div class="koSeparator koSeparatorBlock koSeparatorLeft" data-bg="" style="height: 5px; width: 150px; margin-top: 20px; margin-bottom: 20px"></div><div class="mt-2 mb-2 keditable">Supercharge your web presence with lightning fast global <b>content delivery network</b>. Deliver consistent experience to your website visitors, no matter where they are!</div>
                                
                            </div>
                        </div>
                    </div>
                </div></section>
        </div>
        <div class="col-lg-8 keditColumn">
            <section id="kedit_w4jd5cotv" data-keditor="1" class="kedit">
                <div class="container">
                    <div class="row">
                        <div class="col-lg col-items-top col-lg-6">
                            <div class="col-container bg-light rounded p-4 h-100">
                                <div class="kimgIcon mt-2 mb-2"><span class="koIconHolder koIconStyle8 koIconSize100"><i class="koIcon undefined fas fa-gauge-high"></i></span></div>
                                <h5 class="mt-4 mb-4 keditable">Performance</h5>
                                <div class="mt-2 mb-2 keditable">Take performance&nbsp;to the next level&nbsp;with powerful features designed for efficient global caching and content optimization.</div>
                            </div>
                        </div>
                        <div class="col-lg col-items-top col-lg-6">
                            <div class="col-container bg-light rounded p-4 h-100">
                                <div class="kimgIcon mt-2 mb-2"><span class="koIconHolder koIconStyle8 koIconSize100"><i class="koIcon undefined fas fa-diagram-project"></i></span></div>
                                <h5 class="mt-4 mb-4 keditable">Network</h5>
                                <div class="mt-2 mb-2 keditable">Direct line to one of the fastest networks in the world, designed for true planet-scale reach that's always just a step away from your users.<br></div>
                            </div>
                        </div>
                        <div class="col-lg col-items-top col-lg-6">
                            <div class="col-container bg-light rounded p-4 h-100">
                                <div class="kimgIcon mt-2 mb-2"><span class="koIconHolder koIconStyle8 koIconSize100"><i class="koIcon undefined fas fa-shield-halved"></i></span></div>
                                <h5 class="mt-4 mb-4 keditable">Security</h5>
                                <div class="mt-2 mb-2 keditable">Robust security features, stop bad bots and block attacks before they ever reach your website, stay safe at all times.<br></div>
                            </div>
                        </div>
                        <div class="col-lg col-items-top col-lg-6">
                            <div class="col-container bg-light rounded p-4 h-100">
                                <div class="kimgIcon mt-2 mb-2"><span class="koIconHolder koIconStyle8 koIconSize100"><i class="koIcon undefined fas fa-building-columns"></i></span></div>
                                <h5 class="mt-4 mb-4 keditable">Perma-Cache</h5>
                                <div class="mt-2 mb-2 keditable">Keep your website files global - permanently store your files on the edge. Guarantee excellent performance for every visitor, every time.</div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </div>
</div>

</section>
<section id="kpg_909810" data-keditor="1" class="kedit"><div class="container">
			<div class="row">

			
			
			<div class="col-lg text-center col-lg-12">
			<div class="col-container">
                
	
	<div class="row g-7">
  <div style="min-width: 200px;" class="col-auto">
<div style="font-size: 14px;" class="koPreTitle mt-3 mb-3 keditable">Technology Partner</div>

<div class="mt-2 mb-2 kimgRatio text-start"><img alt="" title="" style="width: 100%;" class="img-fluid kimgfilter3 bg-white px-5 py-3 lazy" data-src="https://bunny.net/static/bunnynet-dark-d6a41260b1e4b665cb2dc413e3eb84ca.svg"></div>


</div>
  <div class="col">
                
                
                
                
                <h2 class="mt-2 mb-2 keditable">⚡️&nbsp;&nbsp;Global network built for the speed of light&nbsp;&nbsp;⚡️</h2><div class="mt-2 mb-2 keditable" style="font-size: 20px;">Powered by a network built for resilience, security, and scale, so your users get a smooth, seamless experience every time they connect. With a presence across 6 continents and 82 countries (and counting), performance follows them everywhere.<br></div>
                
                
                </div>
</div>
                
			</div>
			</div><div class="col-lg text-center">
			<div class="col-container">
                
                
                
                
                
                <h2 class="mt-2 mb-2 keditable" data-usal="count-[24]" style="--kedit-fsx: 1.25;">24 ms</h2>
                
                
                
                
			<div class="mt-2 mb-2 keditable">Average Global Latency</div></div>
			</div><div class="col-lg text-center">
			<div class="col-container">
                
                
                
                
                
                <h2 class="mt-2 mb-2 keditable" data-usal="count-[119]" style="--kedit-fsx: 1.25;">119+</h2><div class="mt-2 mb-2 keditable">Global PoPs</div>
                
                
                
                
                
			</div>
			</div><div class="col-lg text-center">
			<div class="col-container">
                
                
                
                
                
                <h2 class="mt-2 mb-2 keditable" data-usal="count-[250]" style="--kedit-fsx: 1.25;">250 Tbps+</h2><div class="mt-2 mb-2 keditable">Network Capacity<br></div>
                
                
                
                
                
			</div>
			</div><div class="col-lg text-center">
			<div class="col-container">
                
                
                
                
                
                <h2 class="mt-2 mb-2 keditable" data-usal="count-[1.5]" style="--kedit-fsx: 1.25;">1.5+ mil</h2><div class="mt-2 mb-2 keditable">Powering Websites Worldwide</div>
                
                
                
                
			</div>
			</div><div class="col-lg text-center col-lg-12">
			<div class="col-container">
                
                
                
                
                
                
                
                
                
                
                
			<div class="js-video-holder"><div class="">
                
                <video loop="" autoplay="" muted="" disablepictureinpicture="" playsinline="" style="visibility: visible;" class="mw-100 lazy" data-src="https://Bunny-Reddit.b-cdn.net/globe%20animation_2.webm"></video>
                
                </div></div></div>
			</div>
			
			</div>
			</div><span class="d-none keditable"></span></section>
<section id="kpg_471439" data-keditor="1" class="kedit"><div class="container">
			<div class="row">

			<div class="col-lg text-center col-lg-12">
			<div class="col-container">
				<div class="koPreTitle mt-2 mb-2 keditable">FAQS</div><h2 class="mt-2 mb-2 keditable">Frequently Asked Questions</h2>
				<div class="mt-2 mb-2 keditable"><div>Explore these questions to understand how becoming a <b>Website•im Member</b>&nbsp;</div><div>can transform your website building experience and boost your productivity.</div></div>
				
			</div>
			</div><div class="col-lg">
			<div class="col-container">
				<ul class="koCheckList mt-4 mb-4 koCheckList-f059 keditable"><li><b>What exactly does Website•im do?</b><br><br>Website•im is a Website Builder app in the first place. It allows you to create, publishing, downloading as many websites as you need for as long as you are a member of our community.<br><br></li><li><strong>How do I create websites that look awesome with Website•im?</strong><br><br>With Website•im, you can start creating your websites with one of pre-made themes or with AI assistant, all you have to do is write in a few words what kind of website this is and in 30 seconds you'll be ready to edit your new website. You can add more subpages, contents or apps, change colors, fonts to ones you like better, making each of your websites feel more like yours.<br><br></li><li><strong>Can I say goodbye to WordPress and Wix?</strong><br><br> Probably, yes! Stop paying separate subscriptions for each of your websites. In most cases, you can create new version of your website with Website•im and publish with us. One website, two websites, or as many websites as you, your family, friends or customers need.</li></ul>
				
				
			</div>
			</div><div class="col-lg">
			<div class="col-container">
				<ul class="koCheckList mt-4 mb-4 koCheckList-f059 keditable"><li><strong>Can I get help or personal assistance?</strong><br><br>Yes, we have a growing knowledge base with features explained and how-tos. You can always submit a support ticket if you discover a bug to fix, have some feedback, or just get lost. But the best is the power of Website•im Community, where you can hire other members who may speak your language or even have their office close to you.<br><br></li><li><b>How can Website•im offer unlimited websites?</b><br><br>Once a website is published, it's static and served from the Content Delivery Network. Static websites not only load faster, but require much less CPU-power. Real server is in use only when dynamic actions are processed, like contact form.<br><br></li><li><strong>Can I offer my own services to other Website•im Members?</strong><br><br>Definitely! Once you become a member, you can share your profile and experience with other members and get hired. You can hire other members, create website themes or content blocks other members can use.</li></ul>
				
				
			</div>
			</div>
			
			
			
			</div>
			</div></section>
<section data-pcid="4061.3" id="kpg_277975" data-keditor="1" class="kedit" data-bgcolor="#000000" style="background:#000000"><div class="container">
    <div class="row">
        <div class="col-lg  col-lg-11">
            <div class="col-container bg-white p-5 keditWhite kimgfilter3 text-center">
                
                <h2 class="mb-2 mt-3 keditable" style="--kedit-fsx: 1.65;">Start Creating Websites</h2>
                <div style="font-size: 22px;" class="mt-2 mb-2 mr-5 ml-5 keditable"><div>Become a Member, Create Unlimited Websites, Landing Pages, Logos: it's just a beginning.</div></div>
                
                
                
                
                
                
                
            <div class="koButtons d-flex mb-2 mt-5"><a href="https://member.website.im/dashboard/login" class="btn btn-color1 btn-xl rounded-pill">Get Started<i class="fas fa-arrow-right ms-3"></i></a></div></div>
        <a href="https://betalist.com/startups/website-im?utm_campaign=badge-website-im&amp;utm_medium=badge&amp;utm_source=badge-featured" class="mt-3 d-inline-flex">
  <img alt="WEBSITE•IM - Build unlimited fast static websites with AI and templates | BetaList" width="156" height="54" style="width: 156px; height: 54px" class="lazy" data-src="https://betalist.com/badges/featured?id=149665&amp;theme=dark"></a>
</div>
    </div>
    
    
    
          
        
    
    
    
    
</div></section></main><footer id="footerContent"><section data-pcid="5500.1" id="kedit_a6905apb8" data-keditor="1" class="kedit keditFooter" data-padding="70-50" style=";padding-top:70px;padding-bottom:50px"><div class="container">
	<div class="row g-3 justify-content-between">
		
        
        

			<div class="col-lg col-lg-auto">
			<div class="col-container">
				<h5 class="mt-2 mb-2 keditable">Products</h5>
				
				<div class="koButtons d-flex text-start align-content-start flex-column mt-4 mb-2">
					<a href="https://website.im/#list_website" class="py-0 px-0 btn btn-link align-self-start">Website Builder</a><a href="https://website.im/#list_gallery" class="py-0 px-0 btn btn-link align-self-start">Photo Gallery</a><a href="https://website.im/#list_logo" class="py-0 px-0 btn btn-link align-self-start">Logo Generator</a><a href="https://website.im/#list_course" class="py-0 px-0 btn btn-link align-self-start">Course Creator</a><a href="https://website.im/#list_wiki" class="py-0 px-0 btn btn-link align-self-start">Documentation Maker</a><a href="https://website.im/#list_landingpage" class="py-0 px-0 btn btn-link align-self-start">Landing Page Generator</a><a href="https://website.im/#list_portfolio" class="py-0 px-0 btn btn-link align-self-start">Portfolio Builder</a>
					
				</div>
			</div>
			</div><div class="col-lg col-lg-auto">
			<div class="col-container">
				<h5 class="mt-2 mb-2 keditable">Use Cases</h5>
				
				<div class="koButtons d-flex text-start align-content-start flex-column mt-4 mb-2">
					<a href="https://website.im/#list_website" class="py-0 px-0 btn btn-link align-self-start">Website Builder</a><a href="https://website.im/#list_personalpage" class="py-0 px-0 btn btn-link align-self-start">Personal Pages</a><a href="https://website.im/#list_logo" class="py-0 px-0 btn btn-link align-self-start">Logo Maker</a><a href="https://website.im/#list_nextidea" class="py-0 px-0 btn btn-link align-self-start">SEO Pages</a>
					
				</div>
			</div>
			</div><div class="col-lg col-lg-auto">
			<div class="col-container">
				<h5 class="mt-2 mb-2 keditable">Compare</h5>
				
				<div class="koButtons d-flex text-start align-content-start flex-column mt-4 mb-2">
					<a href="compare-wordpress" class="py-0 px-0 btn btn-link align-self-start">Wordpress vs Website•im</a><a href="compare-wix" class="py-0 px-0 btn btn-link align-self-start">Wix vs Website•im</a>
					
				</div>
			</div>
			</div><div class="col-lg col-lg-auto">
			<div class="col-container">
				<h5 class="mt-2 mb-2 keditable">Online Tools</h5>
				
				<div class="koButtons d-flex text-start align-content-start flex-column mt-4 mb-2">
					<a href="domain-idea-generator" class="py-0 px-0 btn btn-link align-self-start">Domain Idea Generator</a><a href="online-image-editor" class="py-0 px-0 btn btn-link align-self-start">Online Image Editor</a><a href="colors-from-photo" class="py-0 px-0 btn btn-link align-self-start">Colors from Photo</a><a href="image-compressor" class="py-0 px-0 btn btn-link align-self-start">Image Compressor</a>
					
				</div>
			</div>
			</div><div class="col-lg col-lg-auto">
			<div class="col-container">
				<h5 class="mt-2 mb-2 keditable">Website Widgets</h5>
				
				<div class="koButtons d-flex text-start align-content-start flex-column mt-4 mb-2">
					<a href="whatsapp" class="py-0 px-0 btn btn-link align-self-start">Whatsapp Button</a><a href="snow" class="py-0 px-0 btn btn-link align-self-start">Snow Effect</a><a href="sparkles" class="py-0 px-0 btn btn-link align-self-start">Sparkles</a><a href="confetti" class="py-0 px-0 btn btn-link align-self-start">Confetti</a>
					
				</div>
			</div>
			</div><div class="col-lg col-lg-auto">
			<div class="col-container">
				<h5 class="mt-2 mb-2 keditable">Company</h5>
				
				<div class="koButtons d-flex text-start align-content-start flex-column mt-4 mb-2">
					<a href="about-us" class="py-0 px-0 btn btn-link align-self-start">About us</a><a href="affiliate-program" class="py-0 px-0 btn btn-link align-self-start">Affiliate Program</a><a href="press-media" class="py-0 px-0 btn btn-link align-self-start">Press &amp; Media</a><a href="contact" class="py-0 px-0 btn btn-link align-self-start">Contact</a>
					
				</div>
			</div>
			</div>
			
			
			
        
        
        
        
		<div class="col-lg-12 text-center">
			<div class="col-container">
				<div data-width="100" style="height: 1px; width: 100%; margin-top: 0px; margin-bottom: 0px;" data-bg="" class="koSeparator koSeparatorBlock"></div>
			</div>
		</div>
        
        
		<div class="col-lg-auto col-items-middle">
			<div class="col-container">
                
                <div class="kimgRatio">
					<img class="img-fluid keditFooterLogo lazy" alt="Website•im Logo" title="" data-src="data/files/websiteim.svg">
				</div>
                
                
			</div>
		</div>
        
        <div class="col-lg col-items-middle">
			<div class="col-container"><div data-width="100" style="background: rgba(0, 0, 0, 0.2); height: 1px; width: 100%; margin-top: 0px; margin-bottom: 0px;" data-bg="rgba(0, 0, 0, .2)" class="koSeparator koSeparatorBlock"></div></div></div>
        
		<div class="col-lg-auto">
			<div class="col-container">
				<div class="mt-2 mb-2">
					<div class="kapp kapp-holder" data-app="footer app"><div class="footerHolder" id="keditFooterModule"><div class="social_fa social_bw social_bwh social_footer"><a aria-label="Go to Facebook" target="_blank" href="https://www.facebook.com/website.im"><i class="fab fa-facebook-square fa-2x fa-fw"></i></a><a aria-label="Go to Twitter" target="_blank" href="https://x.com/WebsiteIM"><i class="fab fa-x-twitter fa-2x fa-fw"></i></a><a aria-label="Go to YouTube" target="_blank" href="https://www.youtube.com/@WebsiteIM"><i class="fab fa-youtube fa-2x fa-fw"></i></a><a aria-label="Go to Instagram" target="_blank" href="https://instagram.com/website.im"><i class="fab fa-instagram fa-2x fa-fw"></i></a></div></div></div>
				</div>
			</div>
		</div>
					
					<div class="w-100 m-0"></div>
        
        
        <div class="col-lg text-start">
			<div class="col-container">
            
            
				<div class="mt-0 mb-2 keditable"><a href="terms-of-use">Terms</a>&nbsp; •&nbsp; <a href="privacy-policy">Privacy</a>&nbsp; &nbsp;</div>
                
                </div>
            
            
            
		</div>
        
        <div class="col-lg text-lg-end">
			<div class="col-container">
            
            
				<div class="mt-0 mb-2 keditable">Copyright ©2026 Website•im, All Rights Reserved</div>
                
                </div>
            
            
            
		</div>
        
        
        
	</div>
</div></section></footer></div><a id="scrollToTop" aria-label="Scroll to Top Button" href="javascript:void(null)"><i class="fa fa-fw fa-arrow-up"></i></a><script data-id="websiteLoading">$(document).ready(function(){

						$('#websiteLoading').removeClass('isLoading-1');
						setTimeout(function(){

							var c=$('#websiteLoading');
							if(c.length>0){
								//$('body').attr('id','body');
								$('body').addClass('body');
								$('#websiteLoading').addClass('isLoaded');
								setTimeout(function(){$('#websiteLoading').remove()},1000);
							}

						},3000);
					});window.onload = function(){$('#websiteLoading').addClass('isLoaded');
				//$('body').attr('id','body');
				$('body').addClass('body');
				setTimeout(function(){$('#websiteLoading').remove()},500);$(document).keyup(function(e){if((e.ctrlKey || e.metaKey)&&e.keyCode==27){window.location.href="?modal=login";}});};</script><script>var koSiteName="Website•im";$(function(){$(".koLeftMenuOpener").removeClass("invisible");})</script><div id="searchHolder">
		<form method="get" action="">
			<div>Search</div>
			<input type="text" autocomplete="off" name="search" aria-label="Search Form" id="searchInput" class="form-control">
			<button type="submit" class="btn btn-color1" aria-label="Search"><i class="fas fa-search"></i></button>
			<button type="reset" class="btn btn-light" onclick="$('#searchHolder').removeClass('active')"><i class="fas fa-times"></i></button>
		</form></div><script>var magnificPopupInit=function(){$('a.lightbox').magnificPopup({type:'image',gallery:{enabled:true}});}</script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css"><script async src="https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js" onload="magnificPopupInit()"></script>

<script>var jQueryChecker_interval,jQueryChecker_count=0;$(function(){jQueryChecker_interval=window.setInterval(function(){if(typeof window.$ === "undefined" && typeof window.jQuery === "function"){console.log("jQuery ($) has been lost, restoring...");window.$=window.jQuery}jQueryChecker_count++;if(jQueryChecker_count>10)clearInterval(jQueryChecker_interval)},1000)})</script><div class="cookie-consent" style="display:none"><div class="d-flex flex-column w-100"><div class="w-100" id="cookieConsentTitle">This website may use cookies and external scripts. <a href="privacy-policy">More information</a></div><div class="bg-light p-3 rounded d-none" id="cookieConsentSettings"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="cookieConsentCheckboxDisabled" checked disabled><label class="form-check-label" for="cookieConsentCheckboxDisabled">Necessary</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="cookieConsentCheckbox2"><label class="form-check-label" for="cookieConsentCheckbox2">Preferences</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="cookieConsentCheckbox3"><label class="form-check-label" for="cookieConsentCheckbox3">Statistics</label></div><div class="form-check form-switch"><input class="form-check-input" type="checkbox" role="switch" id="cookieConsentCheckbox4"><label class="form-check-label" for="cookieConsentCheckbox4">Marketing</label></div><hr><button class="btn btn-sm btn-outline-primary" onclick="createCookieInfo(0);"><i class="fa-solid fa-check me-2"></i>Save changes</button></div><hr><div class="d-none d-md-flex"><button class="btn btn-light" onclick="$('#cookieConsentSettings,#cookieConsentTitle').toggleClass('d-none');"><i class="fa-solid fa-sliders me-2"></i>Settings</button><button class="btn btn-light ms-auto me-1" onclick="createCookieInfo(1);">Reject</button><button class="btn btn-color1" onclick="createCookieInfo(1234);"><i class="fa-solid fa-check me-2"></i>Accept all cookies</button></div><div class="d-block d-md-none"><button class="btn btn-primary d-block w-100" onclick="createCookieInfo(1234);"><i class="fa-solid fa-check me-2"></i>Accept all cookies</button><button class="btn btn-outline-secondary d-block w-100 my-1" onclick="$('#cookieConsentSettings,#cookieConsentTitle').toggleClass('d-none');"><i class="fa-solid fa-gear me-2"></i>Settings</button><button class="btn btn-outline-secondary d-block w-100" onclick="createCookieInfo(1);"><i class="fa-solid fa-xmark me-2"></i>Reject</button></div></div></div><script>

	if(document.cookie.indexOf('cookieConsentAgree')<0){
		
		document.querySelector('.cookie-consent').removeAttribute('style');

	}

	function createCookieInfo(type){

		var cookieValue='0';

		if(type == 1234){

			// all types of cookies are allowed

			$('#cookieConsentCheckbox2,#cookieConsentCheckbox3,#cookieConsentCheckbox4').prop('checked',true);

			cookieValue+='1234';

		} else if(type == 0){

			// custom settings

			cookieValue+='1';

			if($('#cookieConsentCheckbox2').prop('checked') === true)
				cookieValue+='2';

			if($('#cookieConsentCheckbox3').prop('checked') === true)
				cookieValue+='3';

			if($('#cookieConsentCheckbox4').prop('checked') === true)
				cookieValue+='4';


		} else {

			// only necessary

			$('#cookieConsentCheckbox2,#cookieConsentCheckbox3,#cookieConsentCheckbox4').prop('checked',false);

			cookieValue+='1';

		}

		var name='cookieConsentAgree';

        var date = new Date();
        date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    	document.cookie = escape(name) + "=" + escape(cookieValue) + expires + "; path=/";

		$(".cookie-consent").fadeOut();
		
	}

	</script>
    <script src="https://cdn.jsdelivr.net/npm/instant.page@5.2.0/instantpage.min.js" type="module" defer></script><script>var menuCaption = "Select a page";</script><script type="text/javascript" src="//website.im/inc/live.js?4.7.10" async></script><link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
	<!-- AOS (Animate on Scroll) -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css">
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.min.js" defer></script><script>$(function(){AOS.init({offset:-10,delay:100,duration:800,easing:'ease',anchorPlacement:'top-bottom'});})</script><script>$(function(e){var a = 400,s = e('#scrollToTop');e(window).scroll(function(){e(this).scrollTop() > a ? s.addClass('active') : s.removeClass('active')}), s.on('click',function(a){s.removeClass('active');e('body,html').animate({scrollTop: 0});})})</script><script type="text/javascript">$(function(){var dataText="supermode=stats&page=/?rel=supersiteme&referrer=";$.ajax({type: "POST",url: "index.php",data: dataText,success: function(data) {}});});</script><script type="text/javascript" id="jsMenusSetup">window.addEventListener('load',function(){ddlevelsmenu.setup("1", "topbar","0","0");});</script>
</body></html>