Mobirise AI Website Builder

<!DOCTYPE html> <html class="desktop mbr-site-loaded"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="generator" content="Mobirise v5.9.3, mobirise.com"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> <link rel="shortcut icon" href="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/images/logo5.png" type="image/x-icon"> <meta name="description" content="Text-to-Website AI Generator. Create awesome websites with simple prompts. Type in any language. Export in a zip."> <title>Mobirise AI Website Builder</title> <link rel="stylesheet" href="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" href="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/bootstrap/css/bootstrap-grid.min.css"> <link rel="stylesheet" href="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/bootstrap/css/bootstrap-reboot.min.css"> <link rel="stylesheet" href="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/dropdown/css/style.css"> <link rel="stylesheet" href="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/web/assets/mobirise-icons2/mobirise2.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700&display=swap&display=swap"> </noscript> <link rel="preload" as="style" href="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/mobirise/css/mbr-additional.css"> <link rel="stylesheet" href="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/mobirise/css/mbr-additional.css" type="text/css"> <script> const APP_URL = location.protocol === 'file:' ? 'http://localhost:8080' : 'https://lab-mobirise-ai.ui-api.com'; </script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-NC3ND8L4DC"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'G-NC3ND8L4DC'); </script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PFK425');</script>   <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-5LHKHD2N');</script>  </head> <body> <style> body { overflow: hidden; } .btn-primary { color: #ffffff !important; background-color: #40b0bf !important; border-color: #40b0bf !important; } .btn-primary:hover { color: #ffffff !important; background-color: #3a9eac !important; border-color: #3a9eac !important; } .btn-primary[disabled] { color: #ffffff !important; background-color: #40b0bf !important; border-color: #40b0bf !important; opacity: 0.65; } textarea { resize: none; } .form-control:hover { border-color: #40b0bf !important; } .form-control:focus { border-color: #40b0bf !important; } @media (max-width:767px) { .form-control { border-radius: 20px !important } .btn { width: 100%; } } #aiWizardAlert { background-color: #0000005e; } #aiWizard .modal-dialog, #feedbackModal .modal-dialog, #aiWizardAlert .modal-dialog { transition: 0.2s; } small { font-size: 1rem; } .modal-header { justify-content: start; align-items: flex-start; position: relative; } /* .modal-header span { font-size: 0.7rem; color: red; margin-left:0.5rem; } */ .modal-header p { position: absolute; bottom: -10px; font-size: 0.8rem; color: #9b9b9b; } .modal-content { border-radius: 16px !important; } .modal-body { @media(max-width:767px) { padding: 1rem; } } .modal-footer { @media(max-width:767px) { padding: 1rem; } } .modal-footer { @media(min-width:768px) { padding: 1rem; } } .modal h1 { font-size: 2rem; line-height: 1.5; } .modal .form-control { border-radius: 10px !important; font-size: 1.2rem; line-height: 1.5; padding: 1rem; } .modal label { font-size: 1.2rem; } .modal button { font-size: 1.2rem; margin-bottom: 1rem; margin: 0; border-radius: 10px !important; padding: 1rem 1.5rem !important; } .modal button { font-size: 1rem; padding: 1rem !important; } .modal .mbr-section-btn { margin: 0; } #downloadButton { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; width: 100%; } #downloadButton .d-flex { justify-content: flex-end; } #generatedSite { width: 100vw; height: 100vh; } #downloadButton button { margin: 0.5rem; box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.4); } section { display: none; animation: expand; animation-duration: 5000ms; filter: blur(20px) } section:nth-child(-n + 15) { animation-duration: 2000ms; } @keyframes expand { from { opacity: 0; } to { opacity: 1; } } </style> <div class="container" id="aiWizard" tabindex="-1"> <div class="row justify-content-center align-items-center" style="height: 100vh;"> <div class="col-12 col-md-8"> <div class="form-header position-relative mb-3"> <h1 class="form-title display-5 mb-0" style="line-height: 1.1;"> Mobirise AI </h1> <p style="margin-bottom:10px;color:#9b9b9b;">Website Builder</p> <div class="position-absolute bottom-0 end-0"> <a target=”_blank” href="https://www.youtube.com/watch?v=aScbCwP-Mbk" style="color: #40b0bf">Watch Video Help</a> </div> </div>  <div class="form-body display-7"> <form method="get" action="https://a.mobirise.com/ai.html"> <div class="mb-3"> <label for="aiPromt" class="form-label text mb-4">Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.</label> <textarea placeholder="We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor." class="form-control text p-3 p-md-4" name="prompt" id="aiPromt" rows="6"></textarea> </div> <div class="mbr-section-btn text-center text-md-end" style="padding: 0"> <button type="submit" disabled class="btn btn-primary display-7 text">✨ Generate Website</button> </div> </form> </div> </div> </div> </div> <div class="modal" id="feedbackModal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content" style="height:auto"> <div class="modal-header"> <h2 class="modal-title display-5">Mobirise AI</h2><p>Website Builder</p> </div> <div class="modal-body mbr-form display-7" data-form-type="formoid"> <form action="https://mobirise.eu/" method="POST" class="mbr-form form-with-styler" data-form-title="Form Name"> <input type="hidden" name="email" data-form-email="true" value="PGj+GEov8iMy+Ke8sIBGF6nuoHJrzBCe9smyOiLpt0yJHKIxgmX5GLv9kdKniA28KAe9YRt3NdVTZBrAuq5nQ7fyHVRjfR4mfTd1tBzd8bh7CUaYHveTNlBIDrM77KaI.rgAHm/H2GHH+v+nrQIsc34uQZmo7f7nsxf7srfRKXLsEAmDIGVHUpBhXOM4FX3DT64jtFVSqnUoWUKZICjmDUOoAWFYcBZtdFwElc+7vQ5QycL3YW8amXn9v9ROW15oe"> <div class="row"> <div hidden="hidden" data-form-alert="" class="alert alert-success col-12 text">Thanks for filling out the form!</div> <div hidden="hidden" data-form-alert-danger="" class="alert alert-danger col-12 text">Oops...! some problem!</div> </div> <div class="row"> <div class="col-12 form-group mb-3" data-for="textarea"> <label class="form-label text">To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!</label> <textarea name="textarea" placeholder="" data-form-field="textarea" class="form-control" id="textarea-form02-3"></textarea> </div> <div class="col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn text-end"> <button type="submit" disabled class="btn btn-primary display-7 text">Send message</button> </div> </div> </form> </div> </div> </div> </div> <script src="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/bootstrap/js/bootstrap.bundle.min.js"></script> <script src="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/embla/embla.min.js"></script> <script src="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/smoothscroll/smooth-scroll.js"></script> <script data-src="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/embla/script.js"></script> <script data-src="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/theme/js/script.js"></script> <script src="https://1fdrtej1r.ui-api.com/labs/mobirise-ai/assets/startm5/formoid/formoid.min.js"></script> <script> const translates = (() => { const locales = { zh: { "Generate Page": "生成页面", "Generating Page...": "生成页面...", "Creating pallete...": "创建调色板", "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.": "详细描述网站的内容、提供的服务、幕后人员、优势和特长。您可以使用任何语言撰写。", "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.": "北京免费送花,1-3小时送达, 鲜花网领军企业, 全程3重权益保障", "Something went wrong": "出了问题", "Try Again": "再试一次", "Loading...": "正在加载...", "Generate New": "再次生成", "Download this page in zip": "下载本页压缩包", "Your prompt is too short, add more details.": "您的提示太短，请添加更多细节。", "Open temp url": "打开临时网址", "Send message": "发送信息", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "要继续阅读，请留下评论。您喜欢这样的结果吗？帮助我们发展！", "Thanks for filling out the form!": "感谢您填写表格！", "Oops...! some problem!": "哎呀......！出问题了！", "Your prompt is too long, shorten it.": "您的提示太长，请缩短。", "Upgrade": "升级" }, en: { "Generate Page": "Generate Page", "Generating Page...": "Generating Page...", "Creating pallete...": "Creating pallete...", "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.": "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.", "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.": "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.", "Something went wrong": "Something went wrong", "Try Again": "Try Again", "Loading...": "Loading...", "Generate New": "Generate New", "Download this page in zip": "Download this page in zip", "Your prompt is too short, add more details.": "Your prompt is too short, add more details.", "Open temp url": "Open temp url", "Send message": "Send message", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!", "Thanks for filling out the form!": "Thanks for filling out the form!", "Oops...! some problem!": "Oops...! some problem!", "Send message": "Send message", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!", "Thanks for filling out the form!": "Thanks for filling out the form!", "Oops...! some problem!": "Oops...! some problem!", "Your prompt is too long, shorten it.": "Your prompt is too long, shorten it.", "Upgrade": "Upgrade" }, es: { "Generate Page": "Generar página", "Generating Page...": "Generar página...", "Creating pallete...": "Creación de pal...", "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.": "Describa detalladamente de qué tratará su sitio, qué ofrecerá, quién está detrás, sus ventajas y especialidades. Puede escribir en cualquier idioma.", "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.": "Alquiler de patinetes eléctricos en Barcelona desde 10€. Distintos modelos para adulto y niños.", "Something went wrong": "Algo salió mal", "Try Again": "Inténtalo de nuevo", "Loading...": "Cargando...", "Generate New": "Generar de nuevo", "Download this page in zip": "Descargar esta página en zip", "Your prompt is too short, add more details.": "Su mensaje es demasiado corto, añada más detalles.", "Open temp url": "Abrir url temporal", "Send message": "Enviar mensaje", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "Para continuar, deje su comentario. ¿Le ha gustado el resultado, qué se podría mejorar? ¡Ayúdenos a evolucionar!", "Thanks for filling out the form!": "Gracias por rellenar el formulario.", "Oops...! some problem!": "¡Uy...! ¡Algún problema!", "Your prompt is too long, shorten it.": "Su mensaje es demasiado largo, acórtelo.", "Upgrade": "Mejora" }, ar: { "Generate Page": "إنشاء الصفحة", "Generating Page...": "جارٍ إنشاء الصفحة...", "Creating pallete...": "إنشاء لوحة...", "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.": "قم بوصف تفصيلي لما ستفعله في موقعك، وما الذي تقدمه، وما هي مميزاته، وميزاته، وميزاته الخاصة. يمكنك الكتابة بأي لغة.", "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.": "وكالات عقارية رائدة مقرها في أبوظبي. نحن نقدم خدمات عقارية بأعلى جودة في سوق الإمارات العربية المتحدة.", "Something went wrong": "هناك خطأ ما", "Try Again": "حاول ثانية", "Loading...": "تحميل...", "Generate New": "توليد مرة أخرى", "Download this page in zip": "قم بتنزيل هذه الصفحة في ملف مضغوط", "Your prompt is too short, add more details.": "مطالبتك قصيرة جدًا، قم بإضافة المزيد من التفاصيل.", "Open temp url": "فتح عنوان URL المؤقت", "Send message": "أرسل رسالة", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "للمتابعة يرجى ترك التعليق. هل أعجبتك النتيجة، ما الذي يمكن تحسينه؟ ساعدونا على التطور!", "Thanks for filling out the form!": "شكرا لملء النموذج!", "Oops...! some problem!": "أُووبس...! بعض المشاكل!", "Your prompt is too long, shorten it.": "مطالبتك طويلة جدًا، قم بتقصيرها.", "Upgrade": "ترقية" }, fr: { "Generate Page": "Générer une page", "Generating Page...": "Générer une page...", "Creating pallete...": "Création de palettes...", "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.": "Décrivez en détail le contenu de votre site, ce qu'il offrira, qui en est à l'origine, vos avantages et vos spécialités. Vous pouvez écrire dans n'importe quelle langue.", "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.": "L'une des boulangeries les plus réputées de Toulouse. Notre équipe est fière de proposer des croissants appétissants, des pains au levain uniques et d'utiliser les meilleurs ingrédients.", "Something went wrong": "Quelque chose n'a pas fonctionné", "Try Again": "Réessayer", "Loading...": "Chargement...", "Generate New": "Générer à nouveau", "Download this page in zip": "Télécharger cette page en format zip", "Your prompt is too short, add more details.": "Votre texte est trop court, ajoutez plus de détails.", "Open temp url": "Ouvrir l'url temporaire", "Send message": "Envoyer un message", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "Pour continuer, veuillez laisser un commentaire. Le résultat vous a plu, qu'est-ce qui pourrait être amélioré ? Aidez-nous à évoluer !", "Thanks for filling out the form!": "Merci de remplir le formulaire !", "Oops...! some problem!": "Oups... ! un problème !", "Your prompt is too long, shorten it.": "Votre message est trop long, raccourcissez-le.", "Upgrade": "Mise à niveau" }, ru: { "Generate Page": "Генерировать страницу", "Generating Page...": "Создание страницы...", "Creating pallete...": "Создание палитры...", "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.": "Подробно опишите, о чем будет ваш сайт, что он будет предлагать, кто за ним стоит, ваши преимущества и особенности. Вы можете писать на любом языке.", "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.": "БородаНС - легендарный барбершоп в Новосибирске. Основные услуги - мужские стрижки, опасное бритье.", "Something went wrong": "Что-то пошло не так", "Try Again": "Попробовать еще раз", "Loading...": " Загрузка...", "Generate New": "Попробовать еще раз", "Download this page in zip": "Загрузить эту страницу в формате zip", "Your prompt is too short, add more details.": "Ваш запрос слишком короткий, добавьте больше деталей.", "Open temp url": "Открыть временный сайт", "Send message": "Отправить сообщение", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "Чтобы продолжить, пожалуйста, оставьте отзыв. Понравился ли вам результат, что можно улучшить? Помогите нам развиваться!", "Thanks for filling out the form!": "Спасибо за заполнение формы!", "Oops...! some problem!": "Упс...! Какая-то проблема!", "Your prompt is too long, shorten it.": "Ваш запрос слишком длинный, сократите его.", "Upgrade": "Купить план" }, pt: { "Generate Page": "Gerar página", "Generating Page...": "Geração de página...", "Creating pallete...": "Criar uma palete...", "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.": "Descreva em pormenor o que será o seu sítio, o que oferecerá, quem está por detrás dele, as suas vantagens e especialidades. Pode escrever em qualquer língua.", "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.": "A academia FitRio está em funcionamento no Rio de Janeiro desde 2003. Oferecemos um serviço completo e perfeito para atender a toda a família.", "Something went wrong": "Algo correu mal", "Try Again": "Tentar de novo", "Loading...": "Carregando...", "Generate New": "Gerar novamente", "Download this page in zip": "Descarregar esta página em formato zip", "Your prompt is too short, add more details.": "O seu texto é demasiado curto, acrescente mais pormenores.", "Open temp url": "Abrir url temporário", "Send message": "Enviar mensagem", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "Para continuar, deixe um comentário. Gostou do resultado, o que poderia ser melhorado? Ajude-nos a evoluir!", "Thanks for filling out the form!": "Obrigado por preencher o formulário!", "Oops...! some problem!": "Oops...! algum problema!", "Your prompt is too long, shorten it.": "O seu prompt é demasiado longo, encurte-o.", "Upgrade": "Atualização" }, de: { "Generate Page": "Seite generieren", "Generating Page...": "Seite generieren....", "Creating pallete...": "Erstellen von Paletten...", "Describe in detail what your site will be about, what it will offer, who is behind it, your benefits and specialties. You can write in any language.": "Beschreiben Sie detailliert, worum es auf Ihrer Website gehen wird, was sie bietet, wer dahinter steht, Ihre Vorteile und Besonderheiten. Sie können in jeder Sprache schreiben.", "We are Craft22, a team of skilled artisans from Brooklyn, NY. We offer a wide range of handmade crafts, from custom jewelry to home decor.": "Unsere Bäckerei bietet Apfelstrudel und Käsebrötchen nach Großmutters Art.", "Something went wrong": "Etwas ist schief gelaufen", "Try Again": "Erneut versuchen", "Loading...": "Laden...", "Generate New": "Erneut generieren", "Download this page in zip": "Diese Seite im Zip-Format herunterladen", "Your prompt is too short, add more details.": "Ihre Aufforderung ist zu kurz, fügen Sie mehr Details hinzu.", "Open temp url": "Temporäre Url öffnen", "Send message": "Nachricht senden", "To continue please leave a review. Did you like the result, what could be improved? Help us to evolve!": "Um fortzufahren, hinterlassen Sie bitte eine Bewertung. Hat Ihnen das Ergebnis gefallen, was könnte verbessert werden? Helfen Sie uns, uns weiterzuentwickeln!", "Thanks for filling out the form!": "Vielen Dank für das Ausfüllen des Formulars!", "Oops...! some problem!": "Ups...! ein Problem!", "Your prompt is too long, shorten it.": "Ihre Aufforderung ist zu lang, kürzen Sie sie.", "Upgrade": "Upgrade" } } return { currentLanguage() { return navigator.language || navigator.userLanguage || 'en-EN'; }, t(str) { const lang = this.currentLanguage().slice(0, 2); return locales[lang] ? (locales[lang][str] || str) : str; } } })(); document.querySelectorAll('.text').forEach(node => { if (node.innerHTML.length) node.innerText = translates.t(node.innerText) if (node.placeholder?.length) node.placeholder = translates.t(node.placeholder) //node.innerText = translates.t(node.innerText) }) </script> <script> const sectionsList = { menu: ` <style> .cid-qwe1 { z-index: 1000; width: 100%; position: relative; } .cid-qwe1 .dropdown-item:before { font-family: Moririse2 !important; content: "\e966"; display: inline-block; width: 0; position: absolute; left: 1rem; top: 0.5rem; margin-right: 0.5rem; line-height: 1; font-size: inherit; vertical-align: middle; text-align: center; overflow: hidden; transform: scale(0, 1); transition: all 0.25s ease-in-out; } @media (max-width: 767px) { .cid-qwe1 .navbar-toggler { transform: scale(0.8); } } .cid-qwe1 .navbar-brand { flex-shrink: 0; align-items: center; margin-right: 0; padding: 10px 0; transition: all 0.3s; word-break: break-word; z-index: 1; } .cid-qwe1 .navbar-brand img { max-width: 100%; max-height: 100%; border-radius: 0px !important; } .cid-qwe1 .navbar-brand .navbar-caption { line-height: inherit !important; } .cid-qwe1 .navbar-brand .navbar-logo a { outline: none; } .cid-qwe1 .navbar-nav { margin: auto; margin-left: 0; margin-left: auto; } .cid-qwe1 .navbar-nav .nav-item { padding: 0 !important; transition: .3s all !important; } .cid-qwe1 .navbar-nav .nav-item .nav-link { padding: 16px !important; margin: 0 !important; border-radius: 1rem !important; transition: .3s all !important; } .cid-qwe1 .navbar-nav .nav-item .nav-link:hover { background-color: rgba(27, 31, 10, 0.06); } .cid-qwe1 .navbar-nav .open .nav-link::after { transform: rotate(180deg); } @media (min-width: 992px) { .cid-qwe1 .navbar-nav .open .nav-link::before { content: ""; width: 100%; height: 20px; top: 100%; background: transparent; position: absolute; } } .cid-qwe1 .navbar-nav .dropdown-item { padding: 12px !important; border-radius: 0.5rem !important; margin: 0 8px !important; transition: .3s all !important; } .cid-qwe1 .navbar-nav .dropdown-item:hover { background-color: rgba(27, 31, 10, 0.06); } @media (min-width: 992px) { .cid-qwe1 .navbar-nav { padding-left: 1.5rem; } } .cid-qwe1 .nav-link { width: fit-content; position: relative; } .cid-qwe1 .navbar-logo { padding-left: 2rem; margin: 0 !important; } @media (max-width: 767px) { .cid-qwe1 .navbar-logo { padding-left: 1rem; } } .cid-qwe1 .navbar-caption { padding-left: 1rem; padding-right: .5rem; } @media (max-width: 767px) { .cid-qwe1 .nav-dropdown { padding-bottom: 0.5rem; } } .cid-qwe1 .nav-dropdown .link.dropdown-toggle::after { margin-left: 0.5rem; margin-top: 0.2rem; transition: .3s all; } .cid-qwe1 .container { display: flex; height: 90px; padding: 0.5rem 0.6rem; flex-wrap: nowrap; background: rgba(255, 255, 255, 0.8) !important; left: 0; right: 0; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: flex-end; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-radius: 100vw; margin-top: 1rem; background-color: #ffffff; box-shadow: 0 30px 60px 0 rgba(27, 31, 10, 0.08); } @media (max-width: 992px) { .cid-qwe1 .container { padding-right: 2rem; } } @media (max-width: 767px) { .cid-qwe1 .container { width: 95%; height: 56px !important; padding-right: 1rem; margin-top: 0rem; } } .cid-qwe1 .iconfont-wrapper { color: #000000 !important; font-size: 1.5rem; padding-right: 0.5rem; } .cid-qwe1 .dropdown-menu { flex-wrap: wrap; flex-direction: column; max-width: 100%; padding: 12px 4px !important; border-radius: 1.5rem; transition: .3s all !important; min-width: auto; background: #ffffff; background: rgba(255, 255, 255, 0.8) !important; } .cid-qwe1 .nav-item:focus, .cid-qwe1 .nav-link:focus { outline: none; } .cid-qwe1 .dropdown .dropdown-menu .dropdown-item { width: auto; transition: all 0.25s ease-in-out; } .cid-qwe1 .dropdown .dropdown-menu .dropdown-item::after { right: 0.5rem; } .cid-qwe1 .dropdown .dropdown-menu .dropdown-item .mbr-iconfont { margin-right: 0.5rem; vertical-align: sub; } .cid-qwe1 .dropdown .dropdown-menu .dropdown-item .mbr-iconfont:before { display: inline-block; transform: scale(1, 1); transition: all 0.25s ease-in-out; } .cid-qwe1 .collapsed .dropdown-menu .dropdown-item:before { display: none; } .cid-qwe1 .collapsed .dropdown .dropdown-menu .dropdown-item { padding: 0.235em 1.5em 0.235em 1.5em !important; transition: none; margin: 0 !important; } .cid-qwe1 .navbar { min-height: 90px; transition: all 0.3s; border-bottom: 1px solid transparent; background: transparent !important; padding: 0 !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; } .cid-qwe1 .navbar.opened { transition: all 0.3s; } .cid-qwe1 .navbar .dropdown-item { padding: 0.5rem 1.8rem; } .cid-qwe1 .navbar .navbar-logo img { width: auto; } .cid-qwe1 .navbar .navbar-collapse { z-index: 1; justify-content: flex-end; } .cid-qwe1 .navbar.collapsed { justify-content: center; } .cid-qwe1 .navbar.collapsed .nav-item .nav-link::before { display: none; } .cid-qwe1 .navbar.collapsed.opened .dropdown-menu { top: 0; } @media (min-width: 992px) { .cid-qwe1 .navbar.collapsed.opened:not(.navbar-short) .navbar-collapse { max-height: calc(98.5vh - 3rem); } } .cid-qwe1 .navbar.collapsed .dropdown-menu .dropdown-submenu { left: 0 !important; } .cid-qwe1 .navbar.collapsed .dropdown-menu .dropdown-item:after { right: auto; } .cid-qwe1 .navbar.collapsed .dropdown-menu .dropdown-toggle[data-toggle="dropdown-submenu"]:after { margin-left: 0.5rem; margin-top: 0.2rem; border-top: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; border-bottom: 0; top: 41%; } .cid-qwe1 .navbar.collapsed ul.navbar-nav li { margin: auto; } .cid-qwe1 .navbar.collapsed .dropdown-menu .dropdown-item { padding: 0.25rem 1.5rem; text-align: center; } .cid-qwe1 .navbar.collapsed .icons-menu { padding-left: 0; padding-right: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; } @media (max-width: 767px) { .cid-qwe1 .navbar { min-height: 72px; } .cid-qwe1 .navbar .navbar-logo img { height: 2rem !important; } } @media (max-width: 991px) { .cid-qwe1 .navbar .nav-item .nav-link::before { display: none; } .cid-qwe1 .navbar.opened .dropdown-menu { top: 0; } .cid-qwe1 .navbar .dropdown-menu .dropdown-submenu { left: 0 !important; } .cid-qwe1 .navbar .dropdown-menu .dropdown-item:after { right: auto; } .cid-qwe1 .navbar .dropdown-menu .dropdown-toggle[data-toggle="dropdown-submenu"]:after { margin-left: 0.5rem; margin-top: 0.2rem; border-top: 0.35em solid; border-right: 0.35em solid transparent; border-left: 0.35em solid transparent; border-bottom: 0; top: 40%; } .cid-qwe1 .navbar .dropdown-menu .dropdown-item { padding: 0.25rem 1.5rem !important; text-align: center; } .cid-qwe1 .navbar .navbar-brand { flex-shrink: initial; flex-basis: auto; word-break: break-word; padding-right: 10px; } .cid-qwe1 .navbar .navbar-toggler { flex-basis: auto; } .cid-qwe1 .navbar .icons-menu { padding-left: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; } } .cid-qwe1 .navbar.navbar-short .navbar-logo img { height: 2rem; } .cid-qwe1 .dropdown-item.active, .cid-qwe1 .dropdown-item:active { background-color: transparent; } .cid-qwe1 .navbar-expand-lg .navbar-nav .nav-link { padding: 0; } .cid-qwe1 .nav-dropdown .link.dropdown-toggle { margin-right: 1.667em; } .cid-qwe1 .nav-dropdown .link.dropdown-toggle[aria-expanded="true"] { margin-right: 0; padding: 0.667em 1.667em; } .cid-qwe1 .navbar.navbar-expand-lg .dropdown .dropdown-menu { background: #ffffff; } .cid-qwe1 .navbar.navbar-expand-lg .dropdown .dropdown-menu .dropdown-submenu { margin: 0; left: 105%; transform: none; top: -12px; } .cid-qwe1 .navbar .dropdown.open > .dropdown-menu { display: flex; } .cid-qwe1 ul.navbar-nav { flex-wrap: wrap; } .cid-qwe1 .navbar-buttons { text-align: center; min-width: 140px; } @media (max-width: 992px) { .cid-qwe1 .navbar-buttons { text-align: left; } } .cid-qwe1 button.navbar-toggler { outline: none; width: 31px; height: 20px; cursor: pointer; transition: all 0.2s; position: relative; align-self: center; } .cid-qwe1 button.navbar-toggler .hamburger span { position: absolute; right: 0; width: 30px; height: 2px; border-right: 5px; background-color: #000000; } .cid-qwe1 button.navbar-toggler .hamburger span:nth-child(1) { top: 0; transition: all 0.2s; } .cid-qwe1 button.navbar-toggler .hamburger span:nth-child(2) { top: 8px; transition: all 0.15s; } .cid-qwe1 button.navbar-toggler .hamburger span:nth-child(3) { top: 8px; transition: all 0.15s; } .cid-qwe1 button.navbar-toggler .hamburger span:nth-child(4) { top: 16px; transition: all 0.2s; } .cid-qwe1 nav.opened .hamburger span:nth-child(1) { top: 8px; width: 0; opacity: 0; right: 50%; transition: all 0.2s; } .cid-qwe1 nav.opened .hamburger span:nth-child(2) { transform: rotate(45deg); transition: all 0.25s; } .cid-qwe1 nav.opened .hamburger span:nth-child(3) { transform: rotate(-45deg); transition: all 0.25s; } .cid-qwe1 nav.opened .hamburger span:nth-child(4) { top: 8px; width: 0; opacity: 0; right: 50%; transition: all 0.2s; } .cid-qwe1 .navbar-dropdown { padding: 0 1rem; } .cid-qwe1 a.nav-link { display: flex; align-items: center; justify-content: center; } .cid-qwe1 .icons-menu { flex-wrap: nowrap; display: flex; justify-content: center; padding-left: 1rem; padding-right: 1rem; padding-top: 0.3rem; text-align: center; } @media (max-width: 992px) { .cid-qwe1 .icons-menu { justify-content: flex-start; margin-bottom: .5rem; } } @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .cid-qwe1 .navbar { height: 70px; } .cid-qwe1 .navbar.opened { height: auto; } .cid-qwe1 .nav-item .nav-link:hover::before { width: 175%; max-width: calc(100% + 2rem); left: -1rem; } } .cid-qwe1 .navbar .dropdown > .dropdown-menu { display: none; width: max-content; max-width: 500px !important; transform: translateX(-50%); top: calc(100% + 20px); left: 50%; } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown-item { line-height: 1 !important; } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown .dropdown-item { align-items: center; display: flex; height: max-content !important; min-height: max-content !important; } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown .dropdown-item::after { display: inline-block; position: static; margin-left: 0.5rem; margin-top: 0; margin-right: 0; margin-bottom: 0; transition: .3s all; transform: rotate(-90deg); } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown.open .dropdown-item::after { transform: rotate(0deg); } .cid-qwe1 .mbr-section-btn { margin: -0.6rem -0.6rem; } .cid-qwe1 .navbar-toggler { margin-left: 12px; margin-right: 8px; order: 1000; } @media (max-width: 991px) { .cid-qwe1 .navbar-brand { margin-right: auto; } .cid-qwe1 .navbar-collapse { z-index: -1 !important; position: absolute; top: 110%; left: 0; width: 100%; padding: 1rem; border-radius: 1.5rem; background: #ffffff; opacity: 1; border-color: rgba(255, 255, 255, 0.8) !important; background: rgba(255, 255, 255, 0.8) !important; backdrop-filter: blur(8px); } .cid-qwe1 .navbar-nav .nav-item .nav-link::after { margin-left: 10px; } .cid-qwe1 .navbar-nav .dropdown-item:hover { background-color: rgba(27, 31, 10, 0.06); } .cid-qwe1 .navbar .dropdown > .dropdown-menu { max-width: 100% !important; transform: translateX(0); top: 10px; left: 0; padding: 8px !important; border-radius: 1rem; background-color: rgba(27, 31, 10, 0.04) !important; } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown-item { padding: 8px !important; line-height: 1 !important; margin-bottom: 4px !important; } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown .dropdown-item { align-items: center; display: flex; height: max-content !important; min-height: max-content !important; } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown .dropdown-item::after { display: inline-block; position: static; margin-left: 0.5rem; margin-top: 0; margin-right: 0; margin-bottom: 0; transition: .3s all; transform: rotate(0deg); } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown.open .dropdown-item::after { transform: rotate(180deg); } .cid-qwe1 .navbar .dropdown > .dropdown-menu .dropdown-submenu { position: static; width: 100%; max-width: 100% !important; transform: translateX(0) !important; top: 0; left: 0; padding: 8px !important; border-radius: 1rem; background-color: rgba(27, 31, 10, 0.04) !important; } .cid-qwe1 .navbar .dropdown.open > .dropdown-menu { display: flex !important; flex-direction: column; align-items: flex-start; } } @media (max-width: 575px) { .cid-qwe1 .navbar-collapse { padding: 1rem; } } </style> <section data-bs-version="5.1" class="menu menu2 cid-qwe1" once="menu" id="menu02-0"> <nav class="navbar navbar-dropdown navbar-fixed-top navbar-expand-lg"> <div class="container"> <div class="navbar-brand"> <span class="navbar-logo"> <a href="https://mobiri.se" class=""> <img src="" style="height: 3rem;"> </a> </span> <span class="navbar-caption-wrap"><a class="navbar-caption text-black display-4" href="https://mobiri.se">Mobirise</a></span> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarSupportedContent" data-bs-target="#navbarSupportedContent" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <div class="hamburger"> <span></span> <span></span> <span></span> <span></span> </div> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav nav-dropdown" data-app-modern-menu="true"><li class="nav-item"> <a class="nav-link link text-black display-4" href="https://mobiri.se">About</a> </li> <li class="nav-item"> <a class="nav-link link text-black display-4" href="https://mobiri.se" aria-expanded="false">Services</a> </li> <li class="nav-item"> <a class="nav-link link text-black display-4" href="https://mobiri.se">Contacts</a> </li></ul> <div class="icons-menu"> <a class="iconfont-wrapper" href="https://mobiri.se"> <span class="p-2 mbr-iconfont mobi-mbri-phone mobi-mbri"></span> </a> <a class="iconfont-wrapper" href="https://mobiri.se"> <span class="p-2 mbr-iconfont mobi-mbri-letter mobi-mbri"></span> </a> <a class="iconfont-wrapper" href="https://mobiri.se"> <span class="p-2 mbr-iconfont mobi-mbri-map-pin mobi-mbri"></span> </a> </div> <div class="navbar-buttons mbr-section-btn"> <a class="btn btn-primary display-4" href="https://mobiri.se"> Start Now!</a> </div> </div> </div> </nav> </section>`, hero_image: ` <style> .cid-tLmr5CNhuk { padding-top: 6rem; padding-bottom: 0rem; background-color: #9fdbf8; } .cid-tLmr5CNhuk .mbr-fallback-image.disabled { display: none; } .cid-tLmr5CNhuk .mbr-fallback-image { display: block; background-size: cover; background-position: center center; width: 100%; height: 100%; position: absolute; top: 0; } .cid-tLmr5CNhuk .image-wrap img { width: 100%; } @media (min-width: 992px) { .cid-tLmr5CNhuk .image-wrap img { display: block; margin: auto; width: 80%; } } </style> <section data-bs-version="5.1" class="header10 cid-tLmr5CNhuk" id="header10-19"> <div class="align-center container-fluid"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-9"> <h1 class="mbr-section-title mbr-fonts-style mb-3 display-1"> <strong>New Arrivals</strong> </h1> <div class="image-wrap mt-4"> <img src="" alt="" title=""> </div> </div> </div> </div> </section>`, generic_text: ` <style> .cid-qwe4 { padding-top: 6rem; padding-bottom: 6rem; background-color: transparent; } .cid-qwe4 .mbr-fallback-image.disabled { display: none; } .cid-qwe4 .mbr-fallback-image { display: block; background-size: cover; background-position: center center; width: 100%; height: 100%; position: absolute; top: 0; } @media (max-width: 767px) { .cid-qwe4 .image-wrapper { flex-direction: column; } .cid-qwe4 .image-wrapper img { margin: auto; margin-bottom: 1rem; } } .cid-qwe4 .card-box { max-width: 700px; padding-top: 2rem; margin-left: auto; margin-right: 0; } .cid-qwe4 img, .cid-qwe4 .item-img { width: 100%; height: 400px; object-fit: cover; } .cid-qwe4 .card-wrapper { background: #ffffff; } .cid-qwe4 .mbr-text, .cid-qwe4 .mbr-section-btn { color: #000000; } .cid-qwe4 .card-title, .cid-qwe4 .card-box { color: #232323; } @media (max-width: 767px) { .cid-qwe4 .card-content-text { padding: 1.5rem 1.5rem 1.5rem 1.5rem; } } @media (min-width: 768px) { .cid-qwe4 .card-content-text { padding: 2.25rem 2.25rem 2.25rem 2.25rem; } } </style> <section data-bs-version="5.1" class="article1 cid-qwe4" id="article01-0"> <div class="container"> <div class="row justify-content-center"> <div class="card col-md-12 col-lg-12"> <div class="card-wrapper"> <div class="row"> <div class="image-wrapper col-12 col-sm-6 justify-content-center"> <img src=""> </div> <div class="image-wrapper col-12 col-sm-6 justify-content-center"> <img src=""> </div> </div> <div class="card-box align-left mb-3 card-content-text"> <h4 class="card-title mbr-fonts-style mbr-white mb-0 display-5"> <strong>Eternal Art of Photography</strong> </h4> <p class="mbr-text mbr-fonts-style mt-3 mb-0 display-7">Photography, an eternal art, embraces tradition, creativity, and skill. It captures narratives through mesmerizing frames, linking generations. From shutter to showcase, it's a form of expression that celebrates uniqueness. Photography evokes delight and empowers us to create with our own perspectives. It immortalizes memories and defines trends, igniting the allure of creation.</p> </div> </div> </div> </div> </div> </section>`, features: ` <style> .cid-qwe3 { padding-top: 6rem; padding-bottom: 6rem; background-color: transparent; } .cid-qwe3 img, .cid-qwe3 .item-img { width: 100%; height: 100%; height: 300px; object-fit: cover; } .cid-qwe3 .item:focus, .cid-qwe3 span:focus { outline: none; } .cid-qwe3 .item { margin-bottom: 2rem; } @media (max-width: 767px) { .cid-qwe3 .item { margin-bottom: 1rem; } } .cid-qwe3 .item-wrapper { position: relative; background: #ffffff; height: 100%; display: flex; flex-flow: column nowrap; } .cid-qwe3 .item-wrapper .item-content { display: flex; flex-direction: column; height: 100%; } .cid-qwe3 .item-wrapper .item-footer { margin-top: auto; } @media (min-width: 992px) { .cid-qwe3 .item-wrapper .item-content { padding: 2.25rem; } } @media (max-width: 991px) { .cid-qwe3 .item-wrapper .item-content { padding: 1.5rem; } } .cid-qwe3 .mbr-section-title { color: #232323; } .cid-qwe3 .mbr-text, .cid-qwe3 .mbr-section-btn { text-align: center; } .cid-qwe3 .item-title { text-align: center; } .cid-qwe3 .content-head { max-width: 800px; } </style> <section data-bs-version="5.1" class="features6 cid-qwe3" id="features06-0"> <div class="container"> <div class="row justify-content-center"> <div class="col-12 content-head"> <div class="mbr-section-head mb-5"> <h4 class="mbr-section-title mbr-fonts-style align-center mb-0 display-2"> <strong>Art of Content Creation</strong> </h4> <div class="mbr-section-btn item-footer mt-4"><a href="" class="btn item-btn btn-secondary display-7">Get Started</a></div> </div> </div> </div> <div class="row"> <div class="item features-image col-12 col-md-6 col-lg-4"> <div class="item-wrapper"> <div class="item-img"> <img src=""> </div> <div class="item-content"> <p class="mbr-text mbr-fonts-style mt-2 display-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit turpis .</p> </div> </div> </div> <div class="item features-image col-12 col-md-6 col-lg-4"> <div class="item-wrapper"> <div class="item-img"> <img src=""> </div> <div class="item-content"> <p class="mbr-text mbr-fonts-style mt-2 display-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit turpis .</p> </div> </div> </div> <div class="item features-image col-12 col-md-6 col-lg-4"> <div class="item-wrapper"> <div class="item-img"> <img src=""> </div> <div class="item-content"> <p class="mbr-text mbr-fonts-style mt-2 display-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit turpis .</p> </div> </div> </div> </div> </div> </section>`, gallery: ` <style> .cid-qwe5 { padding-top: 6rem; padding-bottom: 6rem; background-color: transparent; } .cid-qwe5 .mbr-fallback-image.disabled { display: none; } .cid-qwe5 .mbr-fallback-image { display: block; background-size: cover; background-position: center center; width: 100%; height: 100%; position: absolute; top: 0; } .cid-qwe5 .item { margin-bottom: 2rem; } @media (max-width: 767px) { .cid-qwe5 .item { margin-bottom: 1rem; } } .cid-qwe5 .item-wrapper { height: 100%; position: relative; } .cid-qwe5 .item-wrapper img { height: 100%; object-fit: cover; } .cid-qwe5 .item-wrapper .icon-wrapper { pointer-events: none; position: absolute; width: 60px; height: 60px; font-size: 22px; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid transparent; border-radius: 50%; opacity: 0; color: #464845 !important; transform: translateX(-50%) translateY(-50%); background-color: #edefea !important; transition: 0.2s; } .cid-qwe5 .item-wrapper:hover .icon-wrapper { opacity: 1; } .cid-qwe5 .carousel-control, .cid-qwe5 .close { background: #1b1b1b; } .cid-qwe5 .carousel-control-prev { margin-left: 2.5rem; } .cid-qwe5 .carousel-control-prev span { margin-right: 5px; } .cid-qwe5 .carousel-control-next { margin-right: 2.5rem; } .cid-qwe5 .carousel-control-next span { margin-left: 5px; } .cid-qwe5 .close { position: fixed; opacity: 0.5; font-size: 22px; font-weight: 300; width: 60px; height: 60px; border-radius: 50%; color: #fff; top: 2.5rem; right: 2.5rem; border: 2px solid #fff; text-shadow: none; z-index: 5; transition: opacity 0.3s ease; font-family: 'Moririse2'; align-items: center; justify-content: center; display: flex; } .cid-qwe5 .close::before { content: '\e91a'; } .cid-qwe5 .close:hover { opacity: 1; background: #000; color: #fff; } .cid-qwe5 .carousel-control { display: flex; top: 50%; width: 60px; height: 60px; margin-top: -1.5rem; font-size: 22px; background-color: rgba(0, 0, 0, 0.5); border: 2px solid #fff; border-radius: 50%; transition: all 0.3s; } .cid-qwe5 .carousel-control.carousel-control-prev { left: 0; margin-left: 2.5rem; } .cid-qwe5 .carousel-control.carousel-control-next { right: 0; margin-right: 2.5rem; } @media (max-width: 767px) { .cid-qwe5 .carousel-control { top: auto; bottom: 1rem; } } .cid-qwe5 .carousel-indicators { position: absolute; bottom: 0; margin-bottom: 3px; } .cid-qwe5 .carousel-indicators li { max-width: 15px; height: 15px; width: 15px; max-height: 15px; margin: 3px; background-color: rgba(0, 0, 0, 0.5); border: 2px solid #fff; border-radius: 50%; opacity: 0.5; transition: all 0.3s; } .cid-qwe5 .carousel-indicators li.active, .cid-qwe5 .carousel-indicators li:hover { opacity: 0.9; } .cid-qwe5 .carousel-indicators li::after, .cid-qwe5 .carousel-indicators li::before { content: none; } .cid-qwe5 .carousel-indicators.ie-fix { left: 50%; display: block; width: 60%; margin-left: -30%; text-align: center; } @media (max-width: 768px) { .cid-qwe5 .carousel-indicators { display: none !important; } } @media (max-width: 991px) { .cid-qwe5 .carousel-indicators { margin-bottom: 3.625rem !important; padding-left: 2.5rem; padding-right: 2.5rem; } } @media (max-width: 767px) { .cid-qwe5 .carousel-indicators { display: none; } } .cid-qwe5 .carousel-inner { display: flex; align-items: center; } .cid-qwe5 .carousel-inner > .active { display: block; } .cid-qwe5 .carousel-control.left { left: 0; margin-left: 2.5rem; } .cid-qwe5 .carousel-control.right { right: 0; margin-right: 2.5rem; } .cid-qwe5 .carousel-control:hover { background: #1b1b1b; color: #fff; opacity: 1; } @media (max-width: 768px) { .cid-qwe5 .carousel-control, .cid-qwe5 .carousel-indicators, .cid-qwe5 .modal .close { position: fixed; } } @media (max-width: 767px) { .cid-qwe5 .mbr-slider .carousel-control { top: auto; bottom: 20px; } .cid-qwe5 .mbr-slider > .container .carousel-control { margin-bottom: 0; } } .cid-qwe5 .carousel-indicators .active, .cid-qwe5 .carousel-indicators li { width: 7px; height: 7px; margin: 3px; background: #000000; opacity: 0.5; border: 4px solid #000000; } .cid-qwe5 .carousel-indicators .active { background: #fff; } .cid-qwe5 .carousel-indicators li { max-width: 15px; max-height: 15px; border-radius: 50%; } .cid-qwe5 .modal { padding-left: 0 !important; position: fixed; overflow: hidden; padding-right: 0 !important; } .cid-qwe5 .modal-dialog { margin: 0 auto; max-width: 100%; padding-left: 1rem; padding-right: 1rem; } .cid-qwe5 .modal-content { border-radius: 0; border: none; background: transparent; } .cid-qwe5 .modal-body { padding: 0; display: flex; align-items: center; } .cid-qwe5 .modal-body img { width: 100%; object-fit: contain; max-height: calc(100vh - 1.75rem); } .cid-qwe5 .carousel { width: 100%; } .cid-qwe5 .modal-backdrop.in { opacity: 0.8; } .cid-qwe5 .modal.fade .modal-dialog { transition: margin-top 0.3s ease-out; } .cid-qwe5 .modal.fade .modal-dialog, .cid-qwe5 .modal.in .modal-dialog { transform: none; } .cid-qwe5 .mbr-gallery .item-wrapper { cursor: pointer; } .cid-qwe5 .content-head { max-width: 800px; } </style> <section data-bs-version="5.1" class="gallery1 mbr-gallery cid-qwe5" id="gallery01-0"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 content-head"> <div class="mb-5"> <h3 class="mbr-section-title mbr-fonts-style align-center m-0 display-2"><strong>Gallery with Popup Slider</strong></h3> </div> </div> </div> <div class="row mbr-gallery"> <div class="col-12 col-md-6 col-lg-3 item gallery-image"> <div class="item-wrapper mb-3" data-toggle="modal" data-bs-toggle="modal" data-target="#tPqwe5-modal" data-bs-target="#tPqwe5-modal"> <img class="w-100" src="" data-slide-to="0" data-bs-slide-to="0" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 item gallery-image"> <div class="item-wrapper mb-3" data-toggle="modal" data-bs-toggle="modal" data-target="#tPqwe5-modal" data-bs-target="#tPqwe5-modal"> <img class="w-100" src="" data-slide-to="1" data-bs-slide-to="1" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 item gallery-image"> <div class="item-wrapper mb-3" data-toggle="modal" data-bs-toggle="modal" data-target="#tPqwe5-modal" data-bs-target="#tPqwe5-modal"> <img class="w-100" src="" data-slide-to="2" data-bs-slide-to="2" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 item gallery-image"> <div class="item-wrapper mb-3" data-toggle="modal" data-bs-toggle="modal" data-target="#tPqwe5-modal" data-bs-target="#tPqwe5-modal"> <img class="w-100" src="" data-slide-to="3" data-bs-slide-to="3" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 item gallery-image"> <div class="item-wrapper mb-3" data-toggle="modal" data-bs-toggle="modal" data-target="#tPqwe5-modal" data-bs-target="#tPqwe5-modal"> <img class="w-100" src="" data-slide-to="4" data-bs-slide-to="4" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 item gallery-image"> <div class="item-wrapper mb-3" data-toggle="modal" data-bs-toggle="modal" data-target="#tPqwe5-modal" data-bs-target="#tPqwe5-modal"> <img class="w-100" src="" data-slide-to="5" data-bs-slide-to="5" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 item gallery-image"> <div class="item-wrapper mb-3" data-toggle="modal" data-bs-toggle="modal" data-target="#tPqwe5-modal" data-bs-target="#tPqwe5-modal"> <img class="w-100" src="" data-slide-to="6" data-bs-slide-to="6" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> </div> </div> <div class="col-12 col-md-6 col-lg-3 item gallery-image"> <div class="item-wrapper mb-3" data-toggle="modal" data-bs-toggle="modal" data-target="#tPqwe5-modal" data-bs-target="#tPqwe5-modal"> <img class="w-100" src="" data-slide-to="7" data-bs-slide-to="7" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"> <div class="icon-wrapper"> <span class="mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn"></span> </div> </div> </div> </div> <div class="modal mbr-slider" tabindex="-1" role="dialog" aria-hidden="true" id="tPqwe5-modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-body"> <div class="carousel slide" data-pause="false" data-bs-pause="false" id="lb-tPqwe5" data-interval="5000" data-bs-interval="5000"> <div class="carousel-inner"> <div class="carousel-item active"> <img class="d-block w-100" src=""> </div> <div class="carousel-item"> <img class="d-block w-100" src=""> </div> <div class="carousel-item"> <img class="d-block w-100" src=""> </div> <div class="carousel-item"> <img class="d-block w-100" src=""> </div> <div class="carousel-item"> <img class="d-block w-100" src=""> </div> <div class="carousel-item"> <img class="d-block w-100" src=""> </div> <div class="carousel-item"> <img class="d-block w-100" src=""> </div> <div class="carousel-item"> <img class="d-block w-100" src=""> </div> </div> <ol class="carousel-indicators"> <li data-slide-to="0" data-bs-slide-to="0" class="active" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"></li> <li data-slide-to="1" data-bs-slide-to="1" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"></li> <li data-slide-to="2" data-bs-slide-to="2" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"></li> <li data-slide-to="3" data-bs-slide-to="3" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"></li> <li data-slide-to="4" data-bs-slide-to="4" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"></li> <li data-slide-to="5" data-bs-slide-to="5" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"></li> <li data-slide-to="6" data-bs-slide-to="6" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"></li> <li data-slide-to="7" data-bs-slide-to="7" data-target="#lb-tPqwe5" data-bs-target="#lb-tPqwe5"></li> </ol> <a role="button" href="" class="close" data-dismiss="modal" data-bs-dismiss="modal" aria-label="Close"> </a> <a class="carousel-control-prev carousel-control" role="button" data-slide="prev" data-bs-slide="prev" href="#lb-tPqwe5"> <span class="mobi-mbri mobi-mbri-arrow-prev" aria-hidden="true"></span> <span class="sr-only visually-hidden">Previous</span> </a> <a class="carousel-control-next carousel-control" role="button" data-slide="next" data-bs-slide="next" href="#lb-tPqwe5"> <span class="mobi-mbri mobi-mbri-arrow-next" aria-hidden="true"></span> <span class="sr-only visually-hidden">Next</span> </a> </div> </div> </div> </div> </div> </div> </section>`, testimonials: ` <style> .cid-qwe6 { padding-top: 6rem; padding-bottom: 6rem; background-color: transparent; } .cid-qwe6 .mbr-fallback-image.disabled { display: none; } .cid-qwe6 .mbr-fallback-image { display: block; background-size: cover; background-position: center center; width: 100%; height: 100%; position: absolute; top: 0; } .cid-qwe6 p { line-height: 1.2; } .cid-qwe6 .embla__slide { display: flex; justify-content: center; position: relative; min-width: 770px; max-width: 570px; } @media (max-width: 768px) { .cid-qwe6 .embla__slide { min-width: 70%; max-width: initial; margin-left: 1rem !important; margin-right: 1rem !important; } } .cid-qwe6 .embla__button--next, .cid-qwe6 .embla__button--prev { display: flex; } .cid-qwe6 .embla__button { top: 50%; width: 60px; height: 60px; margin-top: -1.5rem; font-size: 22px; background-color: rgba(0, 0, 0, 0.5); color: #fff; border: 2px solid #fff; border-radius: 50%; transition: all 0.3s; position: absolute; display: flex; justify-content: center; align-items: center; } .cid-qwe6 .embla__button:disabled { cursor: default; display: none; } .cid-qwe6 .embla__button:hover { background: #000; color: rgba(255, 255, 255, 0.5); } .cid-qwe6 .embla__button.embla__button--prev { left: 0; margin-left: 2.5rem; } .cid-qwe6 .embla__button.embla__button--next { right: 0; margin-right: 2.5rem; } @media (max-width: 768px) { .cid-qwe6 .embla__button { top: auto; } } .cid-qwe6 .item-wrapper { height: 100%; } .cid-qwe6 .item-menu-overlay { border-radius: 2rem; } .cid-qwe6 .user_image { max-width: 600px; max-height: 400px; margin-bottom: 1.6rem; overflow: hidden; margin: 0 auto 2rem auto; } .cid-qwe6 .user_image img { width: 100%; max-height: 400px; object-fit: cover; } @media (max-width: 230px) { .cid-qwe6 .user_image { width: 100%; height: auto; } } .cid-qwe6 .embla { position: relative; width: 100%; } .cid-qwe6 .embla__viewport { overflow: hidden; width: 100%; } .cid-qwe6 .embla__viewport.is-draggable { cursor: grab; } .cid-qwe6 .embla__viewport.is-dragging { cursor: grabbing; } .cid-qwe6 .embla__container { display: flex; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -webkit-tap-highlight-color: transparent; } .cid-qwe6 .user_desk { color: #232323; } .cid-qwe6 .user_name { color: #232323; } </style> <section data-bs-version="5.1" class="slider2 mbr-embla cid-qwe6" id="slider02-0"> <div class="position-relative text-center"> <div class="embla" data-skip-snaps="true" data-align="center" data-auto-play-interval="5" data-draggable="true"> <div class="embla__viewport container-fluid"> <div class="embla__container"> <div class="embla__slide slider-image item" style="margin-left: 10rem; margin-right: 10rem;"> <div class="user"> <div class="user_image"> <div class="item-wrapper position-relative"> <img src=""> </div> </div> <div class="user_text mb-4"> <p class="mbr-fonts-style display-5"> <strong>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae rutrum metus. Integer velit nisl, ultrices id tempor ultrices enim."</strong> </p> </div> <div class="user_name mbr-fonts-style mb-2 display-7"> Catherine Bowling </div> <div class="user_desk mbr-fonts-style display-7"> Influencer </div> </div> </div> <div class="embla__slide slider-image item" style="margin-left: 10rem; margin-right: 10rem;"> <div class="user"> <div class="user_image"> <div class="item-wrapper position-relative"> <img src=""> </div> </div> <div class="user_text mb-4"> <p class="mbr-fonts-style display-5"> <strong>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae rutrum metus. Integer velit nisl, ultrices id tempor ultrices enim."</strong> </p> </div> <div class="user_name mbr-fonts-style mb-2 display-7"> Cynthia Diaz </div> <div class="user_desk mbr-fonts-style display-7"> Influencer </div> </div> </div> <div class="embla__slide slider-image item" style="margin-left: 10rem; margin-right: 10rem;"> <div class="user"> <div class="user_image"> <div class="item-wrapper position-relative"> <img src=""> </div> </div> <div class="user_text mb-4"> <p class="mbr-fonts-style display-5"> <strong>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vitae rutrum metus. Integer velit nisl, ultrices id tempor ultrices enim."</strong> </p> </div> <div class="user_name mbr-fonts-style mb-2 display-7"> Sharon Davis </div> <div class="user_desk mbr-fonts-style display-7"> Influencer </div> </div> </div> </div> </div> <button class="embla__button embla__button--prev"> <span class="mobi-mbri mobi-mbri-arrow-prev mbr-iconfont" aria-hidden="true"></span> <span class="sr-only visually-hidden visually-hidden visually-hidden">Previous</span> </button> <button class="embla__button embla__button--next"> <span class="mobi-mbri mobi-mbri-arrow-next mbr-iconfont" aria-hidden="true"></span> <span class="sr-only visually-hidden visually-hidden visually-hidden">Next</span> </button> </div> </div> </section>`, call_to_action: ` <style> .cid-qwe7 { padding-top: 6rem; padding-bottom: 6rem; background-image: url("https://source.unsplash.com/random"); } .cid-qwe7 .mbr-fallback-image.disabled { display: none; } .cid-qwe7 .mbr-fallback-image { display: block; background-size: cover; background-position: center center; width: 100%; height: 100%; position: absolute; top: 0; } .cid-qwe7 .card-wrapper { background: #ffffff; border-radius: 4px; } @media (max-width: 767px) { .cid-qwe7 .card-wrapper { padding: 2rem 1.5rem; margin-bottom: 1rem; } } @media (min-width: 768px) and (max-width: 991px) { .cid-qwe7 .card-wrapper { padding: 2.25rem; } } @media (min-width: 992px) { .cid-qwe7 .card-wrapper { padding: 4rem; } } .cid-qwe7 .mbr-text, .cid-qwe7 .mbr-section-btn { text-align: left; } .cid-qwe7 .card-title { text-align: left; } </style> <section data-bs-version="5.1" class="header14 cid-qwe7" id="header14-0"> <div class="container"> <div class="row justify-content-center"> <div class="card col-12 col-md-12 col-lg-8"> <div class="card-wrapper"> <div class="card-box align-center"> <h1 class="card-title mbr-fonts-style mb-4 display-1"> <strong>Create site now</strong> </h1> <div class="mbr-section-btn mt-4"> <a class="btn btn-warning display-7" href="https://mobiri.se">Start Now</a> </div> </div> </div> </div> </div> </div> </section> `, footer_mini: ` <style> .cid-qwe2 { padding-top: 30px; padding-bottom: 30px; background-color: #000000; overflow: hidden; } </style> <section data-bs-version="5.1" class="footer4 cid-qwe2" once="footers" id="footer04-0"> <div class="container"> <div class="media-container-row align-center mbr-white"> <div class="col-12"> <p class="mbr-text mb-0 mbr-fonts-style display-7"> © Copyright 2030 Mobirise - All Rights Reserved </p> </div> </div> </div> </section>` } async function request(url, options = {}) { const urlPrefix = /^https?:/i.test(url) ? '' : APP_URL const res = await fetch(urlPrefix + url, { mode: 'cors', redirect: 'manual', ...options }) const data = await res.json() if (res.ok) { return data } throw Object.assign(new Error(data.message), { code: data.type }) } function sleep(ms) { return new Promise((resolve) => setTimeout(resolve, ms)) } function random(min, max) { return Math.random() * (max - min) + min; } async function waitUntilPageIsReady(page, { maxErrors = 5 } = {}) { let errors = maxErrors while (true) { try { const status = await request(page.urls.statusCheck) if (status.name === 'READY') { return } if (status.name === 'ERROR') { throw Object.assign(new Error(status.reason), { code: 'PageFillError' }) } } catch (err) { if (err.code === 'PageFillError') { throw err } if (--errors <= 0) { throw err } } await sleep(random(4000, 10000)) } } async function waitUntilZipIsReady(zip, { maxErrors = 5 } = {}) { let errors = maxErrors while (true) { try { const status = await request(zip.job.url) if (status.state === 'COMPLETE') { const link = document.createElement('a'); link.setAttribute('href', status.result.downloadUrl); link.click(); return } if (status.state === 'CANCELLED') { throw Object.assign(new Error(status.reason), { code: 'NotFound' }) } } catch (err) { if (err.type === 'NotFound') { throw err } if (--errors <= 0) { throw err } } await sleep(random(4000, 10000)) } } async function createPage(data) { return request('/api/v1/pages', { method: 'POST', body: JSON.stringify(data) }) } const palettes = (() => { let promiseLoad const collection = {} return { load() { if (!promiseLoad) { promiseLoad = request('/api/v1/palettes').then((palettes) => { for (const palette of palettes) { collection[palette.id] = palette } }) } return promiseLoad }, find(paletteId) { return collection[paletteId] } } })(); const iframe = (() => { let iframeDom; return { create(src) { let generatedSiteIframe = document.createElement('iframe'); generatedSiteIframe.id = 'generatedSite'; generatedSiteIframe.setAttribute('frameborder', 0) generatedSiteIframe.setAttribute('height', '100%') generatedSiteIframe.setAttribute('width', '100%') generatedSiteIframe.src = src; document.body.append(generatedSiteIframe); }, hide() { document.getElementById(generatedSite).remove(); }, dom() { return iframeDom; } } })(); const feedback = (() => { let feedbackModal; return { show() { feedbackModal = new bootstrap.Modal(document.getElementById('feedbackModal'), { keyboard: false, }); feedbackModal.show(); }, hide() { feedbackModal.hide(); } } })(); const emailForm = (() => { let emailFormModal; return { create(page) { if (!document.getElementById('emailForm')) { const emailFormHtml = ` <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title" id="emailFormLabel">Mobirise AI</h1> <span>Experimental Alpha</span> <p>Website Builder</p> </div> <div class="modal-body"> <form> <div class="mb-3"> <label class="form-label">Send download link to:</label> <input type="email" name="email" placeholder="Your E-mail" class="form-control"> </div> <div class="mbr-section-btn d-flex justify-content-between" style="padding: 0"> <div class="d-flex align-items-center lh-sm" style="font-size: 0.75rem; max-width: 260px; color: #9b9b9b;"> <span>By continuing, you agree to our <a href="https://mobirise.com/terms.html" target="_blank">Terms of Service</a> and acknowledge that you read our <a href="https://mobirise.com/privacy.html" target="_blank">Privacy Policy</a> </span> </div> <button type="submit" class="btn btn-primary display-7 text">Send link</button> </div> </form> </div> </div> </div>` let emailFormDOM = document.createElement('div'); emailFormDOM.innerHTML = emailFormHtml; emailFormDOM.classList.add('modal'); emailFormDOM.classList.add('fade'); emailFormDOM.setAttribute('id', 'emailForm'); emailFormDOM.setAttribute('tabindex', '-1'); emailFormDOM.setAttribute('aria-labelledby', 'emailFormLabel'); emailFormDOM.setAttribute('aria-hidden', true); emailFormModal = new bootstrap.Modal(emailFormDOM); let form = emailFormDOM.querySelector('form'); let formButton = form.querySelector('.btn'); form.addEventListener('input', async (e) => { e.preventDefault(); e.stopPropagation(); if (e.target.value) formButton.disabled = false else formButton.disabled = true; }) form.addEventListener('submit', async (e) => { e.preventDefault(); e.stopPropagation(); try { await request('https://lab-mobirise-ai.ui-api.com/api/v1/pages/' + page.meta.id + '/zip', { method: 'POST', body: JSON.stringify({email: e.target[0].value}) }); emailForm.hide(); alert.create().show().text(translates.t('Thank you! Check your inbox now.')) } catch (error) { emailForm.hide(); alert.create('Ok').show().text(error.message) } }) } return this; }, show() { emailFormModal.show(); return this; }, hide() { emailFormModal.hide(); return this; } } })(); const downloadButton = (() => { let downloadButtonDom; return { create(page) { downloadButtonDom = document.createElement('div'); downloadButtonDom.id = 'downloadButton'; downloadButtonDom.innerHTML = ` <div class="d-flex pt-3 pb-3 pe-3"> <button type="button" class="btn refresh btn-primary-outline"><span>${translates.t('Generate New')}</span></button> <button type="button" class="btn btn-generate btn-primary"><span>${translates.t('Download this page in zip')}</span></button> </div>`; document.body.append(downloadButtonDom); let btn = downloadButtonDom.querySelector('.btn-generate'); downloadButtonDom.querySelector('.refresh').addEventListener('click', () => location.reload()); // downloadButtonDom.querySelector('.temp-url').addEventListener('click', () => { // emailForm.create(page).show(); // // let link = document.createElement('a') // // link.setAttribute('href', page.urls.public); // // link.setAttribute('target', '_blank') // // link.click(); // }) return btn; }, loading() { const btn = downloadButtonDom.querySelector('.btn-generate'); btn.querySelector('span').classList.add('visually-hidden'); btn.querySelector('span').setAttribute('role', 'status'); const spiner = document.createElement('span'); spiner.classList.add('spinner-border') spiner.setAttribute('aria-hidden', true) btn.append(spiner); }, loadingRemove() { downloadButtonDom.querySelector('.visually-hidden').classList.remove('visually-hidden'); downloadButtonDom.querySelector('.spinner-border').remove(); }, showEmailForm() { }, hide() { downloadButtonDom.remove(); } } })(); const sections = (() => { let fakeSections = [ { "id": "menu" }, { "id": "hero_image", }, { "id": "generic_text" }, { "id": "generic_text" }, { "id": "features", }, { "id": "generic_text", }, { "id": "gallery", }, { "id": "testimonials", }, { "id": "call_to_action", }, { "id": "footer_mini", } ] let fakeLoopSection = [ { "id": "generic_text" }, { "id": "features", }, { "id": "call_to_action", }, { "id": "gallery", }, { "id": "testimonials", } ] return { hide() { document.body.querySelectorAll('section').forEach(item => { item.setAttribute('hidden', true) }) }, show() { document.body.querySelectorAll('section').forEach(item => { item.removeAttribute('hidden') }) }, fakeRender(page) { let sections = document.querySelectorAll('section'); this.interval = setInterval(() => { let sectionHTML = document.createElement('div'); let a = Math.floor(Math.random() * fakeLoopSection.length); sectionHTML.innerHTML = sectionsList[fakeLoopSection[a].id]; let sectionStyle = sectionHTML.querySelector('style') let sectionDOM = sectionHTML.querySelector('section') sectionDOM.querySelectorAll('img').forEach((image, i) => { image.src = `https://source.unsplash.com/random?v=${Math.floor(Math.random() * 10000)}` }) sections[sections.length - 1].before(sectionStyle); sections[sections.length - 1].before(sectionDOM); sectionDOM.style.display = 'block'; window.scrollTo(0, document.body.scrollHeight - sections[sections.length - 1].clientHeight); }, 6000); return this; }, fakeRenderStop() { if (this.interval) clearInterval(this.interval); }, async render(page) { return new Promise((resolve, reject) => { document.body.querySelectorAll('section').forEach((section) => { section.remove(); }) let scriptSrcArray = [] const animationStart = () => { let timer = 0; fakeSections.forEach((section, i) => { timer++; (function () { let sectionHTML = document.createElement('div'); setTimeout(() => { sectionHTML.innerHTML = sectionsList[section.id]; let sectionStyle = sectionHTML.querySelector('style') let sectionDOM = sectionHTML.querySelector('section') sectionDOM.querySelectorAll('img').forEach((image, i) => { image.src = `https://source.unsplash.com/random?v=${Math.floor(Math.random() * 10000)}` }) document.body.append(sectionStyle); document.body.append(sectionDOM); sectionDOM.style.display = 'block'; window.scrollTo(0, document.body.scrollHeight); if (fakeSections[fakeSections.length - 1].id === section.id) { scriptSrcArray.forEach(src => { let newItem = document.createElement('script'); document.body.append(newItem) newItem.src = src; }) resolve(); } }, timer > 4 ? timer * 6000 : timer * 2000); })(); }); } animationStart(); document.querySelectorAll('script').forEach((item) => { if (item.dataset.src) { scriptSrcArray.push(item.dataset.src) item.remove(); } }) }); } } })(); const loader = (() => { let loaderElement; return { create() { loaderElement = document.createElement('div'); loaderElement.innerHTML = ` <div class="d-flex flex-wrap justify-content-center align-items-center text-center h-100"> <div> <p class="loaderText display-5 text-primary">${translates.t('Loading...')}</p> <div class="spinner-border text-primary" role="status"> <span class="visually-hidden">Loading...</span> </div> </div> </div>`; document.body.append(loaderElement); loaderElement.style.transition = '500ms'; loaderElement.style.zIndex = 1050; return this; }, text(text) { loaderElement.querySelector('.loaderText').innerText = text; }, show() { loaderElement.classList.add('modal-backdrop'); loaderElement.classList.add('show'); return this; }, hide() { loaderElement.style.backgroundColor = '#40b0bf'; loaderElement.style.opacity = 1; setTimeout(() => { loaderElement.style.opacity = 0; setTimeout(() => { loaderElement.classList.remove('modal-backdrop'); loaderElement.classList.remove('show'); loaderElement.remove(); }, 500); }, 500); return this; } } })(); const alert = (() => { let alertElement; return { create(buttonText) { let aiAlert = document.getElementById('aiWizardAlert'); if (aiAlert) aiAlert.remove(); alertElement = document.createElement('div'); alertElement.classList.add('modal'); alertElement.setAttribute('id', 'aiWizardAlert'); alertElement.setAttribute('tabindex', -1); alertElement.innerHTML = ` <div class="modal-dialog modal-dialog-centered"> <div class="modal-content" style="height:auto"> <div class="modal-header"> <h1 class="modal-title display-5">Mobirise AI</h1><span>Experimental Alpha</span><p>Website Builder</p> </div> <div class="modal-body display-7"> <div class="mb-3"> <p class="modal-text display-7">${translates.t('Something went wrong')}</p> </div> <div class="mbr-section-btn text-end" style="padding: 0;margin-left:-0.5rem;margin-right:-0.5rem"> <button style="margin-left:0.5rem; margin-right:0.5rem" ${(buttonText === 'Ok') ? 'data-bs-target="#aiWizard" ' : ''} data-bs-toggle="modal" data-bs-dismiss="modal" class="btn btn-primary display-7">${buttonText || translates.t('Ok')}</button> </div> </div> </div> </div>` if (Array.isArray(buttonText)) { alertElement.querySelector('button').remove(); buttonText.forEach((msg, i) => { let button = document.createElement('button'); button.setAttribute('style', 'margin-left:0.5rem;margin-right:0.5rem;') button.innerText = msg; //button.setAttribute('data-bs-toggle', 'modal'); button.setAttribute('data-bs-dismiss', 'modal'); if (msg === translates.t('Try Again')) { button.setAttribute('data-bs-target', '#aiWizard') button.addEventListener('click', () => { document.body.querySelectorAll('iframe').forEach((iframe) => { iframe.remove(); }) }) }; if (msg === translates.t('Upgrade')) { button.setAttribute('data-bs-target', '#aiWizard') button.addEventListener('click', () => { document.body.querySelectorAll('iframe').forEach((iframe) => { iframe.remove(); }); window.open(`https://mobirise.com/p/?u=${ sessionStorage.getItem('u') }`, '_blank'); }) }; button.classList.add('btn'); button.classList.add('btn-primary'); button.classList.add('display-7'); alertElement.querySelector('.mbr-section-btn').append(button) }) } document.body.append(alertElement); var myModal = new bootstrap.Modal(alertElement, { keyboard: false, backdrop: 'static' }) myModal.show(); return this; }, text(text) { var matches; if (matches = /than (\d+) free sites/.exec(text)) { alertElement.querySelector('.modal-text').innerHTML = 'You can\'t create more than ' + matches[1] + ' free sites. ' + 'Please remove some sites in <a target="_blank" href="https://a.mobirise.com">Mobirise Web</a> to create a new one.'; } else { alertElement.querySelector('.modal-text').innerText = text; } return this; }, show() { return this; }, hide() { let a = bootstrap.Modal.getInstance(alertElement); alertElement.remove(); return this; } } })(); const aiWizard = document.getElementById('aiWizard'); let wizardTextarea = aiWizard.querySelector('textarea'); let wizardButton = aiWizard.querySelector('button'); wizardTextarea.addEventListener('input', (e) => { let target = e.target; if ((e.target.value?.length || 0) <= 1 ) { wizardButton.disabled = true } else { wizardButton.disabled = false; } }) const feedbackForm = feedbackModal.querySelector('form'); feedbackForm.addEventListener('submit', (e) => { e.preventDefault(); e.stopPropagation(); if (e.target[1].value.length <= 10) { alert.create().text(translates.t('Your feedback message is too short, add more details.')); return; } feedbackForm.reset(); feedback.hide(); }) const textareaFeedbackButton = feedbackForm.querySelector('button'); const textareaFeedbackForm = feedbackForm.querySelector('textarea'); textareaFeedbackForm.addEventListener('focus', (e) => { let target = e.target; if (e.target.value.length <= 10 ) { textareaFeedbackButton.disabled = true } else { textareaFeedbackButton.disabled = false; } }) textareaFeedbackForm.addEventListener('input', (e) => { let target = e.target; if (e.target.value.length <= 10 ) { textareaFeedbackButton.disabled = true } else { textareaFeedbackButton.disabled = false; } }) const form = aiWizard.querySelector('form'); form.addEventListener('submit', function (e) { if (e.target[0].value?.length <= 10) { alert.create().text(translates.t('Your prompt is too short, add more details.')); } else if (e.target[0].value?.length >= 1000) { alert.create().text(translates.t('Your prompt is too long, shorten it.')); } else { return; } e.preventDefault(); }); const { searchParams } = new URL(document.location); if (searchParams.get('u')) { sessionStorage.setItem('u', searchParams.get('u')); } // Automaticaly insert prompt url parameter if exist let prompt = searchParams.get('prompt'); if (prompt) { document.getElementById('aiPromt').value = prompt document.querySelectorAll('#aiWizard button')[0].removeAttribute('disabled') }; let sessionError = sessionStorage.getItem('error'); if (sessionError) { sessionError = JSON.parse(sessionError); alert.create( [translates.t('Try Again'), ...(sessionError.type && sessionError.type === 'FeatureNotAvailable' ? [translates.t('Upgrade')] : [])]) .text(sessionError.message) sessionStorage.removeItem("error"); } if (searchParams.get('error')) { const errObject = { message: searchParams.get('error'), ...(searchParams.get('errorType') && { type: searchParams.get('errorType') }), }; sessionStorage.setItem('error', JSON.stringify(errObject)); searchParams.delete('error'); searchParams.delete('errorType'); window.location.replace(window.location.origin); } </script> <div class="modal mbr-popup cid-sbcUQOGIks fade" tabindex="-1" role="dialog" data-overlay-color="#000000" data-overlay-opacity="0.8" id="mbr-popup-d" aria-hidden="true" data-on-exit="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <section class="header6 cid-s6B29izaEe mbr-parallax-background" id="header6-3" style="padding-bottom: 3rem;"> <div class="mbr-overlay" style="opacity: 0.6; background-color: rgb(255, 255, 255);"></div> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-md-12 col-lg-9"> <h1 class="mbr-section-title mbr-fonts-style mb-3 display-5" style="text-transform: uppercase;"><strong>Free Ai Website Builder</strong></h1> <div class="modal-dialog" style="height: auto;"> <div class="modal-content"> <div class="modal-body display-7"> <form style="width: 100%;"> <div class="mb-3 aiTitle"> <textarea placeholder="What your site will be about? Write in any language." class="aiTextarea" id="aiPromt" rows="6"></textarea> </div> <a class="btn btn-warning display-7 aiPromt" href="https://ai.mobirise.com/?prompt=">Generate Website with AI</a> </form> </div> </div> </div> <h2 class="mbr-text mbr-fonts-style display-2 d-none"> Generate beautiful websites with the best AI website builder. </h2> </div> </div> </div> </section> <section class="content1 cid-s6FBEHSwgS" id="content1-f" style="padding-top:4rem;"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-10 col-lg-11 col-sm-10"> <h4 class="mbr-section-title mbr-fonts-style align-center mb-4 display-2"><strong>Get Started with AI</strong></h4> <span class="display-7">Use our cutting edge AI to turn your thoughts into an expressive online presentation! The only thing needed is your prompt, our technology generates both the content by writing for the webpage and then it designs images/structure of website. Customize to your heart's content with our AI website builder tailored for web design newbies. Enjoy custom designed digital with finesse — imagination meets precision, of designs making a professional and catchy website that will talk to your audience on its own.</span> </div> </div> </div> </section> <section class="content1 cid-s6FBEHSwgS" id="content1-f" style="padding-top:0rem;"> <div class="container"> <div class="row justify-content-center"> <div class="title col-12 col-md-10"> <h5 class="mbr-section-title mbr-fonts-style align-center mb-4 display-2"> <strong>Join 2,500,000+ happy users!</strong> </h5> </div> </div> </div> </section> <section class="header3 cid-s6FBEHSwgS" id="image3-g"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper" style="padding-bottom: 18.25%;display: flex;justify-content: center;"> <picture> <source data-srcset="assets52/images/clients.webp" type="image/webp"> <source data-srcset="assets52/images/clients.png" type="image/png"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets52/images/clients.png" alt="Happy Mobirise users creating beautiful websites"> </picture> </div> </div> </div> </div> </section> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD pt-5" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-5"><strong>Key features</strong></h3> </div> </div> </div> </section> <section class="clients2 cid-s6FxdMEeBF" id="clients2-b" style="padding-top:0rem"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">🌟</span><div class="card-box align-center"><h5 class="display-7"><b>Intuitive Drag-and-Drop Interface</b></h5><p class="display-4">This way speed can be improved and you can see it all takes place through the intuitive drag-and-drop system that makes design fit to web pages. The principles of a craft are executed creating an intuitive method for placing elements accurately, using the hand to balance that level between creative control and accessibility. More importantly, this removes the complex coding hurdles which is often required to create your own website and lets newbies know that they can develop their site from below while still providing enough for advanced users who want more customization. By facilitating this direct manipulation, the builder improves user engagement and affords immediate visual feedback along with a comprehensive picture of your site structure. With this elaborate yet user-friendly and powerful editing interface, everybody can design beautiful websites even you are a beginner.</p></div></div></div> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">🔍</span><div class="card-box align-center"><h5 class="display-7"><b>Responsive Design Tools</b></h5><p class="display-4">The builder utilizes advanced responsive design tools to make sure your website looks good on any device. It eases the discoverability of your website on all devices by auto-fitting layouts, pictures and content without losing visual consistency whether desktop screen or tablet. This feature makes your site look more professional and improves SEO. It enables users to see live how their design will look on other screen widths. It helps in developing fluid layouts, which ensure that businesses effectively target a broader audience and avoid high bounce rates while increasing engagement percentages among an increasingly mobile population.</p></div></div></div> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">⚙️</span><div class="card-box align-center"><h5 class="display-7"><b>Automated SEO Optimization</b></h5><p class="display-4">This is typically a complex task, but now made easy with the app combined automated SEO optimization. This feature deeply analyzes your content, improve it and make them fit the SEO best practices. It creates SEO-friendly URL, image optimizes and metadata which increases your visibility on the search engine. You can monitor the performance of your keywords and take necessary steps without moving out from this tool. AI-driven insights guide the builder, right down to those with little experience and knowledge in digital design will smoothly transit towards gaining more search result ranks road by providing organic traffic which contributes to productive business plans regarding online marketing.</p></div></div></div> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">🔑</span><div class="card-box align-center"><h5 class="display-7"><b>Secure Hosting Solutions</b></h5><p class="display-4">The developer coordinates a hosting solution, ever ensuring your site is safe and consistent. They safeguard sensitive data potential threats by accommodating cutting-edge SSL certificates and reinforcements security measures. This adds credibility and a sense of security to your users, something that is very important if you run a site where any financial or personal information may be shared. You even get automatic updates and backups to improve reliability as well. Allowing your site to scale up and stay live during growth, the platform offers a rock-solid infrastructure by which its partnered hosting providers guarantee scalability when you need it.</p></div></div></div> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">🎨</span><div class="card-box align-center"><h5 class="display-7"><b>Customizable Templates</b></h5><p class="display-4">Boasting a large selection of adaptable templates, the builder enables users to design custom digital storefronts that effectively reflect their brand. All of the templates on ThemeForest are created by professional web designers who specialize in modern styles and user-friendly formats for every type of business. Each one is more of the starting block, and provides flexibility via malleable designs, color schemes as well as typography. Such flexibility permits users to showcase their unique personality and corporate style in an uncomplicated manner on the net. Through predefined templates it speeds up the design process, and at the same time ensures high quality in both visual engagement as well as professionalism.</p></div></div></div> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">📊</span><div class="card-box align-center"><h5 class="display-7"><b>Integrated Analytics</b></h5><p class="display-4">Analytics empowers you to measure and understand your audience by seamlessly injecting analytics into its platform. This feature provides users with a holistic analysis of visitor behavior and captures such metrics as site traffic, page views, and conversion rates. Data is presented in an easy-to-understand way along with practical tips. Enables user to find trends, adjust marketing strategies and target content for users. The builder provides data that supports decision-making and the resultant normal site management to a strategic game in which advantageous growth opportunities are pursued, user experiences improved.</p></div></div></div> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">🤖</span><div class="card-box align-center"><h5 class="display-7"><b>AI Content Generation</b></h5><p class="display-4">Artificial intelligence content generation is a groundbreaking effort to simplify how users make and fill up their websites. Using advanced algorithms, it writes search engine (SEO) optimized words and engaging multimedia content custom-made for any business. This way they can automatically generate amazing blog posts, sell their product in the best light possible and not just be better at working on higher-level strategy. In addition to productivity, this allows creating output that meets the target group. And because the AI can comprehend and replicate different brand voices, a level of personalization is added to this type of connection that will help your customers feel you are invested in them while simultaneously strengthening your brands identity.</p></div></div></div> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">🌐</span><div class="card-box align-center"><h5 class="display-7"><b>Export and Publish Anywhere</b></h5><p class="display-4">If you want to be able to edit the json coding at any time then there is 'Seamlessly export / publish anywhere' and so on, giving a lot of flexibility. This power enables developers to carry projects outside their natural platform, providing them with complete control over files of his website. With pages created, you can move your sites to a preferred hosting platform or deploy them across channels so they integrate with other CMS tools. This feature allows for compatibility and migration with ease, providing a dynamic digital presence across an array of environments. A freedom first and highly extensible builder, that allows the user to control their digital assets in its way will bring them sustainably operational efficiency over time.</p></div></div></div> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">🚫</span><div class="card-box align-center"><h5 class="display-7"><b>Offline Mode</b></h5><p class="display-4">This builder also lets users get out of the annoying practice of just doing things on an online basis by incorporating offline mode. Although it amounts to a network target instead of an actual backup solution, AutoSave does mean that in project mode work continues even if there is temporary server failure, while all edits are saved locally should you want to later synchronize them between machines. Perfect for creatives on-the-go, especially in areas with limited connectivity so that work never really stops. Content without a connection Draft, Edit and Publish all witho worrying about your content because you know how progress is not lost each time the Internet goes down. The ability to use live paint in offline mode also adds even more flexibility and reliability for workers who need a fast solution on the go, underlining that the app is made entirely with accessibility and user control in mind.</p></div></div></div> </div> </div> </section> <section class="image3 cid-s6FCnXMbEk" id="image3-g"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <div class="image-wrapper" style="padding-bottom: 56.16%;"> <a href="https://mobirise.com/extensions/kit/"> <picture> <source data-srcset="assets52/images/temps-3.webp" type="image/webp"> <source data-srcset="assets52/images/temps-3.jpg" type="image/jpeg"> <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="assets52/images/temps-3.jpg" alt="How to create your own website for free? Use the collection of 9900 free html templates!"> </picture> </a> </div> </div> </div> </div> </section> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7"> <br><br> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-5"><strong>How to build websites?</strong></h3> </div> </div> </div> </section> <section class="features14 cid-s7smx8Hr5n" id="features14-1e"> <div class="container-fluid"> <div class="row justify-content-center"> <div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">1</span><div class="card-box"><h5 class="display-7"><b>Download and Install Mobirise</b></h5><p class="display-4">First download the Mobirise app from the official website. Go to the Download section for your OS and follow guided instructions on how to install. Check whether your machine meets all system requirements for a well installation process. After the installation has finished, open it so you can examine its intuitive interface. The Excluding the initial step is vital to have access to everything Mobirise offers for your web development venture.</p></div></div></div><div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">2</span><div class="card-box"><h5 class="display-7"><b>Select Your Starting Point</b></h5><p class="display-4">Once Mobirise is installed, think differently and more creatively. You can start with Mobirise AI to assist you with transition advances or pick any of the templates around different themes for business. When you fancy a challenge, then the blank screen is there for your creativity. What you decide at this point shapes the style and flow of your site building process, basically placing a map dot on your individual website journey.</p></div></div></div><div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">3</span><div class="card-box"><h5 class="display-7"><b>Go deeper into Mobirise's block library with more designs including headers, footers, galleries and forms. Simply drag and drop these components to build your site architecture. Customize every block—change colors, fonts and settings to reflect your brand identity. One of the most effective ways to do so — gives you the chance to turn rough structures into something unique.</p></div></div></div><div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">4</span><div class="card-box"><h5 class="display-7"><b>Capture Visuals and Text</b></h5><p class="display-4">Add visual appeal and story to your site. Upload images and videos suitable for the purpose of your site while keeping quality in mind. Create colorful words to your spirit clearly and in black ink. Use Mobirise's text editor to tweak typography, improve SEO and design content for convenient browsing. If the presence of your site is reflected in only a few words and associations.</p></div></div></div><div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">5</span><div class="card-box"><h5 class="display-7"><b>Preview and Fine-Tune</b></h5><p class="display-4">Always visualise the design and check all of your components work before going push live on them. Mobirise allows live-editing so you can easily switch between designing and preview mode. Report any layout/cards usability/performance mismatches or improvements This is your chance to make those final refinements, and ensure that everything ties together neatly when finished so the site shows out as you intended.</p></div></div></div><div class="card col-12 col-md-6 col-lg-4"><div class="card-wrapper"><span class="mbr-iconfont">6</span><div class="card-box"><h5 class="display-7"><b>Publish and Share</b></h5><p class="display-4">Finally, your site primed and raring to go as you launch that beauty. Mobirise enables you to publish your site directly on any hosting service, save a project and upload it via FTP or simply compile all output files into one folder for local deployment. Select the appropriate option that fits with your deployment strategy Once published, spread your site on social media and other forms of marketing to drive traffic through the door way you've created.</p></div></div></div> </div> </div> </section> <section class="header3 cid-s7VBR9WO2F mbr-parallax-background" id="header3-1i"> <div class="mbr-overlay" style="opacity: 0.4; background-color: rgb(255, 255, 255);"></div> <div class="align-center container"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <h3 class="mbr-section-title mbr-fonts-style mb-3 display-5" style="text-transform: uppercase;"><strong>Text-to-Website AI</strong></h3> <p class="mbr-text mbr-fonts-style display-7"> Mobirise Text-to-Website AI Builder is the first of its kind, it uses sophisticated Natural Language Processing (NLP) to turn text inputs into engaging content and responsive websites. This utilizes algorithms which are more advanced with the help of user-provided text and create smart layouts; design various elements, code them in HTML, CSS or Javascript. User centric, the AI Builder offers a no code experience servd through an unintuitive UI with immediate visual feedback to all interactions. Featuring multiple content elements, it tailors to the needs of individual users allowing any website that gets created in a manner suitable for your target audience but with modern feel. This ensures compatibility across devices,inclusive of adaptive enhancements. Get your free website now powered by AI using the form below </p> <div class="modal-dialog" style="height: auto;"> <div class="modal-content"> <div class="modal-body display-7 ai"> <form style="width: 100%;"> <div class="mb-3 aiTitle"> <textarea placeholder="What your site will be about? Write in any language." class="aiTextarea display-7" id="aiPromt" rows="6"></textarea> </div> <div class="mbr-section-btn" style="padding: 0 16px 16px 16px;"> <a class="btn btn-secondary display-7 aiPromt" href="https://ai.mobirise.com/?prompt="> Generate website with AI! </a> </div> </form> </div> </div> </div> </div> </div> </div> </section> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD pt-5" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-5"><strong>Edit locally, upload wherever</strong></h3> </div> </div> </div> </section> <div class="row row-content justify-content-center"> <div class="card py-4 col-md-7"> <div class="row justify-content-center nowrap"> <div class="col-md-10 col-lg-11 col-sm-10"> <div class="text-box display-7 align-center"> Build a place where you can live on digital terms: generate your website locally, via ftp, to *. mobirisesite. com or hooking up your own domain. Do not get locked in to one platform or provider Take ownership to full control of your site so that you can adjust it the way you want, aligning with how do you visualise running a website. Keep your publishing options diversified so that you do not lose the freedom of choosing how you wish to document yourself. </div> </div> </div> </div> </div> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7 mt-5"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-5"><strong>Popular AI website builder blocks</strong></h3> </div> </div> </div> </section> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7 mt-5"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-5"><strong>Who is the app for?</strong></h3> </div> </div> </div> </section> <div class="row row-content justify-content-center"> <div class="card py-4 col-md-7"> <div class="row justify-content-center nowrap"> <div class="col-md-10 col-lg-11 col-sm-10"> <div class="text-box display-7"> <ul> <ul> <li> <b> Entrepreneur </b> A lot of potential business owners use digital constructors to get their online activities started and moving faster with less work. Moving faster, using machine-designed combinations — MTuring off-the-shelf patterns and automatedgenerating templates.To design with the purpose scales without spending too much time. With first class launch capabilities, non-designers can compete without having to hire experience designers. They improve visibility with adaptive SEO suggestions. Entrepreneurs appreciate the automated analytics and performance insights, providing an unprecedented level of detail on online visitor engagements. Such kind of intelligent building suites is very important for those go-getters who do not have enough time competing in the open market. Cyber construction kits help independent professionals to collage the perfect personal portfolio — creative with no technical hassle. They can use drag-and-drop interfaces and create customized themes to present their work in all its glory. Should use of third-party plugins desired, a freelancer can realize improved functionality despite their nature-specific to the particular criteria. Its user-friendly interface make it an easy and quick way to get a unique presence online so that you can spend more time focusing on attracting clients. Ease of use in content management and great mobile-responsive design sets creatives whether self-employed or not that own this product will appreciate the frictionless experience when organizing their portfolios fitting different screens as well capturing trends. Freelancers needing a quick, online calling card will be hard-pressed to beat this wise website construction device. </li> <li> <b> Small Business Owner </b> Local entrepreneurs are going to need an inexpensive means of developing their online store, and a virtual site creator is the most enchanting method. Personalized e-commerce tools with easy inventory management allowed you to serve customers all around the world in a streamlined manner. Service chatbots integrated with would make these user interaction professional enough which helps in benefiting businesses. Purpose-built marketing tools to support customer outreach and retention efforts. The flexibility of pre-built modules means that changes to react in response to business expansion or a rebrand is agile. These are vital for small businesses offering a variety of digital platforms without having the need to hire dedicated web developers. Computational site structurers enable digital creators to showcase their content in a fashionable and functional manner. These builders offer many media and interactive tools to spark creativity. Built-in apps to upload and organize content makes it simple for their desire of always updated, engaging material. Its smart platform guarantees the fastest load times and smoothest navigation, providing unparalleled user-experience to your audience. Influencers and bloggers are both excited about the integrated analytics tools which make reach and engagement optimization a smooth process. They ensure creators can keep fresh, compelling web presences that suck in visitors. </li> <li> <b> Non-Profit Organizer </b> Several charitable associations need to depend on design frameworks powered electronically to raise the sorts of websites that their organizations deserve. They are launching donation pages at scale and managing events, complete with calendar integration on these platforms. Uncomplicated templates allow for powerful stories that promote community interaction. Performance wise, customer-donor interactions are enhanced with less worry about how your donations can reach the rest of the world through its flexible communication tool built-in and SEO friendly architecture. Added to that, the flexibility and ease of use allows it for non-technical organizations even being able to create a strong online presence. For them — non-profits, these intelligent platforms are mission-critical in order to reach more people and donors. </li> <li> <b> Educator </b> Teachers use digital web frames to build resourceful learning spaces that facilitate interactive patterns of learning. Through these platforms, educators can in effect build their virtual classrooms: embed course materials and features help teachers ensure students remain adequately engaged. It also allows for automated class updates and notifications to enable seamless structured communication. Design flexibility which adapts to various instructional strategies, assisting a wide range of learner needs. Mobile-responsive designs make resources available anywhere beyond traditional settings. These platforms allow the educators to go beyond traditional teaching techniques, imparting personalized rich and diverse educational experiences in line with the expectations of modern learners. Fans and amateurs rely on digitally guided web creators to take their passions or hobbies the next step further. It is very useful to operate blogs or forums through them, creating an active online group of readers and aficionados. Through clean templates and drag-and-drop, hobbyists have kept personal sites that are beautiful within a comprehensible layouts. Options to customize let them demonstrate creativity—or chronicle travels, from cooking wins to getaways. They are an organic part of any article and they get further coverage by fluid sharing on social media. These clever tools bridge the technology-passion gap effortlessly to creatively express oneself and bond with a likeminded community, all in the name of sport for hobbyists.</li> </ul> </ul> </div> </div> </div> </div> </div> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD pt-5" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-5"><strong>eCommerce ready</strong></h3> </div> </div> </div> </section> <div class="row row-content justify-content-center"> <div class="card py-4 col-md-7"> <div class="row justify-content-center nowrap"> <div class="col-md-10 col-lg-11 col-sm-10"> <div class="text-box display-7 align-center"> Download premium Mobirise Smart Cart and Simple Shop extensions with the latest e-commerce elements. Insert a shop into your platform, work with responsive products cards easily without drawing the line. See a streamlined order process where transactions are routed right to your preferred methods (e.g. WhatsApp, email etc) or payment gateways like Stripe/PayPal Use their easy to use, flexible solutions that turn your online footprint into a powerful selling platform. </div> </div> </div> </div> </div> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD mt-5 mb-4" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-5"><strong>Choosing the right AI website builder</strong></h3> </div> </div> </div> </section> <div class="row row-content justify-content-center"> <div class="card py-4 col-md-7"> <div class="row justify-content-center nowrap"> <div class="col-md-10 col-lg-11 col-sm-10"> <div class="text-box display-7"> <ul> <ul> <li> <b>Mobirise</b> Offering an excellent option for creating AI-based professional websites, Mobirise is convenient to leave the job with its offline drag-and-drop based builder. Mobirise AI provides recommendations for specific structures and even design elements most apt to suit your requirement. The bigger advantage is that it takes an actual printing operation and puts into a box with some of the best ease-of-use, making this printer ideal for beginners as well. Its extensibility with custom code ease, is favored by users. Software: Free, but there are fees for premium features It is slightly lacking in the number of templates available compared to other options, however this is balanced with quick setup times. Mobirise while doesn't rely so much on AI to keep the user creative in its features, offers a fair bit of suggestive inputs between being automatic and putting control into the hand of users.</li> <li> <b>Wix ADI</b> By the use of AI Design Intelligence, Wix is changing creation by allowing users to input into their designs. Being a pioneer in website automation, it provides the optimum features flexibility for beginners through great drag-and-drop functionality. It supports a range of industry-specific templates for flexibility PricingCompetitive pricing with free tier and paid plans. One downside is that it does not offer an extensive manual control over AI-generated designs leading to limited creative liberties. These users may be frustrated to discover that Wix ADI is a bit heavy-handed in its design automation, preventing them from feeling as though they can fully twist and tweak their site. All in all, its AI expertise allows to streamline intricate jobs which not only enhances user experience but also reduces design-time drastically. Instant Website at Speed with Durable AI — & it is powered by a set of AI techniques. This sophisticated system begins by asking a few questions of the user, to generate an intelligent site in minutes. The AI has a good aesthetic sense, which expands user mobility. At a fraction of the cost to what Durable offers, this AI-generated solution has more value and offerings. That said, there's only so much you can do with templates; high-end users may find that customization options are lacking for their specific needs. Nevertheless, AI is what makes Durable a wise pick for quick development and automatic processes that completely redefines web design with user input at the center. </li> <li> <b>Relume</b> Its groundbreaking site builder integrates AI tools to create an effortless design and content creation from your side that includes features like AI Writer, Slogan Generator. It is ideal for beginners with its user friendly interface. Relume Templates: versatile and creative for ANY industry, niche or project. As affordable as it is efficient, Relume remains low-cost without compromising on quality. However, a few users do occasionally mention that the custom elements are restrictive and can limit design creativity. Its strengths in AI, especially content generation algorithm make it the ideal choice for low coders that want to create a website without designers or financial resources. </li> <li> <b>8b AI</b> Focusing on efficiency, 8b employs AI to simplify site setup, asking relevant questions to tailor user-oriented designs. It assures ease of use, with an intuitive interface requiring minimal technical skill. The builder provides satisfactory adaptability for small business needs. While cost-effective, some advanced features require premium access. A downside is its feature set, which may be limiting for large-scale projects. 8b’s strength lies in delivering professional sites swiftly, making it a preferred option for entrepreneurs seeking fast, reliable results with minimal design hassles. Designed alongside OpenAI, ChatGPT is a first-ever AI-powered design assistant to help you through the flow of creating. It incorporates chat elements and maximizes usability by mimicking conversations people have in everyday life. ChatGPT is something that does not require high-tech knowledge and a flexible environment but at the same time it is quite straight forward. Attractively priced, it comes with all standard tools but doesn't offer the widest template selection or customization options. Its conversational AI is a double-edged-sold: On one side it makes interacting with the user easier, on another to some extend you lose certain technical controls. However, by basing one around dialogue ChatGPT brings an interactive spin to web design — something that has the potential transform how users work, making it fundamentally different from existing website builders.</li> <li> <b>Framer</b> Framer AI — A more balanced version of web design with a human assisted approach. Marrying machine learning with expert insights enables the builder to generate comprehensive, user-determined outcomes. Best for: Flexible- and easy-to-use API, perfect when your business requires custom-tailored solutions. But custom plans can get expensive, and the free tier is limited. Not as many custom coding options are available, according to some reviewers What sets Framer apart is this hybrid model — by utilizing AI without detracting from the value human expertise provides, both technology and taste guide design processes through their entire lifecycle from ideation to execution. One of the most powerful features is AI led cloning and relaunching existing pages to WordPress by automating tedious work saving times on design. The 10Web framework focus more on automation; particularly building new tools that will leverage all capabilities provided by machine learning algorithms in real life applications as follows: It has a user-friendly interface designed to easily turn ideas into practical applications. With that same flexibility in mind, 10Web seamlessly provides integration to all the popular WordPress tools. While its cost-effective even premium plans may be required for some tools. It falls short on advanced custom coding options and settings for things like core (like another builder plugin). It may have a few drawbacks, but it still excels at some key traits such as impressive AI-based cloning and good toolkits making — which makes 10Web an ideal option for those who lack any technical experience of website building or even develop-rich professionals who do not desire to spend all day configuring your web resources. </li> </ul> </ul> </div> </div> </div> </div> </div> <section class="header3 cid-s7VBR9WO2F mbr-parallax-background" id="header3-1i"> <div class="mbr-overlay" style="opacity: 0.4; background-color: rgb(255, 255, 255);"></div> <div class="align-center container"> <div class="row justify-content-center"> <div class="col-12 col-lg-12"> <h3 class="mbr-section-title mbr-fonts-style mb-3 display-5" style="text-transform: uppercase;"><strong>Free AI website builder</strong></h3> <p class="mbr-text mbr-fonts-style display-7"> Mobirise has a simple interface that enables everyone to make self-made, high-quality websites without having to know how to code. Mobirise offers Auto-AI technology to design where advanced AI creates elements, designs dynamic layouts with modern themes suitable for any purpose It innovate the way you build, starting the responsive web designing and working deeply it is handly —lightning fast solutions for building websites. This kind of site creation means that the data of each user is completely secure and can never be released, as it also works offline. Its rich library of plugins and extensions improves customization & usability. Start your no-code web design adventure by clicking the Generate Website button below powered with AI. </p> <div class="modal-dialog" style="height: auto;"> <div class="modal-content"> <div class="modal-body display-7 ai"> <form style="width: 100%;"> <div class="mb-3 aiTitle"> <textarea placeholder="What your site will be about? Write in any language." class="aiTextarea display-7" id="aiPromt" rows="6"></textarea> </div> <div class="mbr-section-btn" style="padding: 0 16px 16px 16px;"> <a class="btn btn-secondary display-7 aiPromt" href="https://ai.mobirise.com/?prompt="> Generate website with AI! </a> </div> </form> </div> </div> </div> </div> </div> </div> </section> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD pt-5" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 display-5"><strong>Edit code of any HTML blocks</strong></h3> </div> </div> </div> </section> <div class="row row-content justify-content-center"> <div class="card py-4 col-md-7"> <div class="row justify-content-center nowrap"> <div class="col-md-10 col-lg-11 col-sm-10"> <div class="text-box display-7 align-center"> Explore the infinite iterator with Mobirise extension for smart list composer Code Editor. Tweak CSS, inject scripts or modify the HTML code until you have built your digital masterpiece. This powerful tool allows you to go beyond the confines of classic templates and provides a playground for both creativity and precision. Make every pixel and tag your own, mold the website to be anything you can imagine with unprecedented freedom Improve your online identity by exercising the liberty to see beyond and remake website design in a way that makes sense for you. </div> </div> </div> </div> </div> <script type="application/ld+json"> { "@context" : "http://schema.org", "@type" : "SoftwareApplication", "name" : "Ai Website Builder", "screenshot" : "https://mobirise.com/sub-assets/images/step-2.jpg", "image" : [ "https://mobirise.com/sub-assets/images/free.jpg", "https://mobirise.com/sub-assets/images/user-friendly.jpg" ], "aggregateRating" : { "@type" : "AggregateRating", "ratingValue" : "4.8", "ratingCount" : "553" }, "author" : { "@type" : "Organization", "name" : "Mobirise Website Builder" }, "applicationCategory" : "BusinessApplication", "url" : "https://mobirise.com/", "downloadUrl" : "https://mobirise.com/history.html", "operatingSystem" : "Windows, MacOS, Android, Linux, AI", "softwareVersion" : "5.9", "offers" : { "@type" : "Offer", "price" : "0", "priceCurrency" : "USD" } } </script> <section data-bs-version="5" class="content4 cid-sEg5NgwGRD" id="content4-1u"> <div class="container"> <div class="row justify-content-center"> <div class="title col-md-12 col-lg-7"> <h3 class="mbr-section-title mbr-fonts-style align-center mb-4 mt-4 display-5"><strong>Frequently Asked Questions</strong></h3> </div> </div> </div> <div class="row row-content justify-content-center"> <div class="card py-4 col-md-7 mb-4"> <div class="row justify-content-center nowrap"> <div class="col-md-10 col-lg-11 col-sm-10"> <div class="text-box display-7"> <div itemscope="" itemtype="https://schema.org/FAQPage"> <div itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question"> <h4 itemprop="name">What is a digital site constructor?</h4> <div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div itemprop="text">A digital site constructor is a tool that leverages artificial intelligence to help users create professional websites without extensive coding knowledge. It streamlines the design process and offers user-friendly navigation.</div><br> </div> </div> <div itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question"> <h4 itemprop="name">How does an intelligent web builder save time?</h4> <div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div itemprop="text">An intelligent web builder accelerates the development cycle by automating layout design and content placement. It eliminates the need for manual adjustments, allowing you to focus on customization rather than technical details.</div><br> </div> </div> <div itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question"> <h4 itemprop="name">Can a smart site creator handle e-commerce features?</h4> <div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div itemprop="text">Yes, most smart site creators are equipped to incorporate e-commerce functionalities, offering tools for product catalogues, payment processing, and order management.</div><br> </div> </div> <div itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question"> <h4 itemprop="name">Is it possible to personalize my website using artificial web designers?</h4> <div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div itemprop="text">Absolutely, artificial web designers provide a range of customization options, from choosing themes and fonts to altering color schemes and adding personalized content, allowing for unique site creations.</div><br> </div> </div> <div itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question"> <h4 itemprop="name">Why should I consider <a href="https://mobirise.com/" class="text-info">Mobirise</a> for building my site?</h4> <div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div itemprop="text">Choosing <a href="https://mobirise.com/" class="text-info">Mobirise</a> offers a visually appealing and user-centric interface, ensuring an easy and effective website-building experience. Its offline functionality and flexible design modules make it a standout choice.</div><br> </div> </div> <div itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Question"> <h4 itemprop="name">Are websites generated by intuitive web tools SEO-friendly?</h4> <div itemprop="acceptedAnswer" itemscope="" itemtype="https://schema.org/Answer"> <div itemprop="text">Websites made with intuitive web tools are often structured to be SEO-friendly, providing options for meta tags, alt text, and clean URLs to improve search engine visibility.</div><br> </div> </div> </div> </div> </div> </div> </div> </div> </section> <div class="row row-content justify-content-center"> <div class="card py-4 col-md-7"> <div class="row justify-content-center nowrap"> <div class="col-md-10 col-lg-11 col-sm-10 align-center"> <div class="text-box display-7"> Create websites beautifully and seamlessly Build awesome, ultra-fast sites with thousands of pre-made blocks in an instant using our simple prompt. Requires no coding experience at all! Free for all uses. Grab this deal now and start to create your online presence — download now. </div> <div class="mbr-section-btn mt-4 mb-3"><a class="btn btn-primary display-7" href="https://mobirise.com/">Download Now!</a><a class="btn btn-secondary display-7" href="https://mobirise.com/#header13-1l">Learn More</a></div> </div> </div> </div> </div> <section class="footer4 cid-s7W1NSqRlx mbr-parallax-background" once="footers" id="footer4-1x"> <div class="mbr-overlay" style="opacity: 0.7; background-color: rgb(0, 0, 0);"></div> <div class="container"> <div class="row mbr-white"> <div class="col-12 col-md-6 col-lg-2 offset-lg-1"> <div class="media-wrap"> <a href="#"> <picture> <source srcset="assets52/images/logo.webp" type="image/webp"> <source srcset="assets52/images/logo.png" type="image/png"> <img src="assets52/images/logo.png" alt="Website Builder Logo"> </picture> </a> </div> </div> <div class="col-12 col-md-6 col-lg-3 offset-lg-2"> <p class="mbr-text mbr-fonts-style mb-4 display-7"> <a href="https://mobirise.com/about/" style="font-style: normal;">About</a> <a href="https://mobirise.com/help/" style="font-style: normal;" target="_blank">Help</a> <a href="http://forums.mobirise.com/" style="font-style: normal;">Forums</a> <a href="mailto:support@mobirise.com" style="font-style: normal; line-height: 1.6;">support@mobirise.com</a> Flight Forum 40, 5657 DB Eindhoven, Netherlands <br> Updated <time class="mbr-text" itemprop="dateModified" datetime="2024-10-22T06:02:40.691Z">2024-10-22</time> </p> </div> </div> </div> <div class="media-container-row"> <div class="col-10"> <hr> </div> </div> <div class="container"> <div class="media-container-row align-center mbr-white"> <div class="row row-copirayt"> <p class="mbr-text mb-0 mbr-fonts-style mbr-white align-center display-7">Mobirise® is a registered trademark. © 2024 Mobirise Free AI website builder - All Rights Reserved.<a href="https://mobirise.com/terms.html" style="font-style: normal; line-height: 1.6;">Terms</a>, <a href="https://mobirise.com/privacy.html" style="font-style: normal; line-height: 1.6;">Privacy</a> </p> </div> </div> </div> </section> <script type="application/ld+json"> { "@context": "http://schema.org", "@type": "Organization", "name": "Mobirise", "legalName": "Mobirise Ltd", "url": "https://mobirise.com/about/", "logo": "https://mobirise.com/assets52/images/logo.png", "foundingDate": "2015", "email": "support@mobirise.com", "address": { "@type": "PostalAddress", "streetAddress": "Flight Forum 40", "addressLocality": "Eindhoven", "postalCode": "5657 DB", "addressCountry": "Netherlands" }, "brand": {"@type": "Thing", "name": "Mobirise"}, "sameAs": [ "https://mobirise.com/", "https://www.facebook.com/Mobirise", "https://www.instagram.com/mobirise/", "https://www.youtube.com/c/mobirise", "https://twitter.com/mobirise" ] } </script> </div> </div> </div> </body> </html>

CINXE.COM

Mobirise AI Website Builder