File manager

File manager - Edit - /home/kridsana/webapp.cm.in.th/673190902/u67319090037/portfolio/project.mobirise

Back
{ "settings": { "name": "My Site", "currentPage": "page1.html", "theme": { "name": "startm5", "title": "StartM5", "styling": { "primaryColor": "#2b7a69", "secondaryColor": "#ffd7ef", "successColor": "#3a341c", "infoColor": "#320707", "warningColor": "#a0e2e1", "dangerColor": "#68c7c1", "mainFont": "Inter Tight", "display1Font": "TABLADE-Bold", "display1Size": 5, "display2Font": "CroissantThin-Regular", "display2Size": 4, "display5Font": "CroissantThin-Regular", "display5Size": 2, "display7Font": "CroissantThin-Regular", "display7Size": 1.4, "display4Font": "Inter Tight", "display4Size": "1.4", "isRoundedImages": true, "isRoundedButtons": true, "isLargeButtons": true, "isGhostButtonBorder": true, "underlinedLinks": true, "isAnimatedOnScroll": true, "isScrollToTopButton": false }, "additionalSetColors": [ "#794a3a", "#dd5341", "#f57f5b", "#68c7c1", "#faca78", "#ffa25b", "#2b7a69" ] }, "path": "@PROJECT_PATH@", "versionFirst": "5.8.25", "siteFonts": [ { "css": "'Inter Tight', sans-serif", "name": "Inter Tight", "url": "https://fonts.googleapis.com/css?family=Inter+Tight:100,200,300,400,500,600,700,800,900,100i,200i,300i,400i,500i,600i,700i,800i,900i" }, { "css": "'CroissantThin-Regular'", "name": "CroissantThin-Regular", "url": null, "file": "@PROJECT_PATH@/fonts/CroissantThin-Regular/font.ttf" }, { "css": "'TABLADE-Bold'", "name": "TABLADE-Bold", "url": null, "file": "@PROJECT_PATH@/fonts/TABLADE-Bold/font.ttf" } ], "uniqCompNum": 75, "versionPublish": "5.9.18", "imageResize": true, "chatbutton": {}, "favicon": false, "mbrsiteDomain": "ktjot1jvkl", "usedWebp": false, "cssOptimize": false, "lazyLoad": false, "robotsSwitcher": false, "sitemapSwitcher": false, "sitemapSwitcherAuto": false, "siteUrl": false, "cookiesAlert": false, "gdpr": false, "pwa-switcher": false, "screenshot": "screenshot.png", "publishChangesOnly": true, "publishEditFolder": true }, "pages": { "index.html": { "settings": { "main": true, "title": "Home", "meta_descr": "", "header_custom": "", "footer_custom": "", "html_before": "" }, "components": [ { "alias": false, "_styles": { "& when not (@fullScreen)": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)" }, "& when (@bg-type = 'image')": { "background-image": "url(@bg-value)" }, "& when (@bg-type = 'color')": { "background-color": "@bg-value" }, ".mbr-fallback-image.disabled": { "display": "none" }, ".mbr-fallback-image": { "display": "block", "background-size": "cover", "background-position": "center center", "width": "100%", "height": "100%", "position": "absolute", "bottom": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } }, ".topbg": { "position": "absolute", "bottom": "0", "left": "0", "width": "100%", "height": "30%", "background": "@topbg" }, ".mbr-section-title": { "color": "#000000" }, ".mbr-text, .mbr-section-btn": { "color": "#000000" } }, "_name": "header05", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"header5\" group=\"Headers\" data-bg-video=\"{{bg.type == 'video' && bg.value.url}}\" mbr-class=\"{\n 'mbr-fullscreen': fullScreen,\n 'mbr-parallax-background': bg.parallax}\">\n\t<mbr-parameters>\n\t\t<header>Size</header>\n\t\t<input type=\"checkbox\" title=\"Full Screen\" name=\"fullScreen\">\n\t\t<input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n\t\t<input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"12\" step=\"1\" value=\"12\" condition=\"fullScreen == false\">\n\t\t<input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"12\" step=\"1\" value=\"2\" condition=\"fullScreen == false\">\n\t\t<input type=\"range\" name=\"imageWidth\" title=\"Image Width\" min=\"4\" max=\"12\" step=\"1\" value=\"12\" condition=\"showImage\">\n\t\t<header>Show/Hide</header>\n\t\t<input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n\t\t<input type=\"checkbox\" title=\"Text\" name=\"showText\" checked>\n\t\t<input type=\"checkbox\" title=\"Buttons\" name=\"showButtons\" checked>\n\t\t<input type=\"checkbox\" title=\"Image\" name=\"showImage\" checked>\n\t\t<header>Background</header>\n\t\t<input type=\"checkbox\" title=\"Decoration\" name=\"doubleBg\" checked>\n\t\t<input type=\"color\" title=\"Color\" name=\"topbg\" value=\"#2b7a69\" condition=\"doubleBg\">\n\t\t<fieldset type=\"background\" name=\"bg\" parallax>\n\t\t\t<input type=\"image\" title=\"Image\" value=\"../_images/background3.jpg\" parallax>\n\t\t\t<input type=\"color\" title=\"Color\" value=\"#edefeb\" selected>\n\t\t\t<input type=\"video\" title=\"Video\" value=\"https://www.youtube.com/watch?v=RhlQvbvMg-0\">\n\t\t</fieldset>\n\t\t<header condition=\"bg.type === 'video'\">Fallback Image</header>\n\t\t<input type=\"image\" title=\"Fallback Image\" value=\"../_images/background13.jpg\" name=\"fallBackImage\" condition=\"bg.type === 'video'\">\n\t\t<input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\" checked>\n\t\t<input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffffff\" condition=\"overlay && bg.type !== 'color'\">\n\t\t<input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"1\" condition=\"overlay && bg.type !== 'color'\">\n\t</mbr-parameters>\n\n\t<div class=\"mbr-fallback-image disabled\" mbr-if=\"bg.type == 'video'\"></div>\n\t<div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\" opacity=\"{{overlayOpacity}}\" bg-color=\"{{overlayColor}}\"></div>\n\t<div class=\"topbg\" mbr-if=\"doubleBg\"></div>\n\t<div class=\"align-center\" mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n\t\t<div class=\"row justify-content-center\">\n\t\t\t<div class=\"col-md-12 col-lg-9\">\n\t\t\t\t<h1 class=\"mbr-section-title mbr-fonts-style mb-4\" data-app-selector=\".mbr-section-title\" mbr-theme-style=\"display-1\" mbr-if=\"showTitle\"><b>Create amazing websites</b></h1>\n\t\t\t\t<p class=\"mbr-text mbr-fonts-style mb-4\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".mbr-text, .mbr-section-btn\">Click any text to edit or style it. Select text to insert a link.\n<br>Click the blue icon at the top right corner (Block Parameters) of the block to hide/show buttons, text, title, and change the block background. Click the red \"+\" button at the bottom right corner to add a new block. Use the top left menu to create new pages, sites, and add new themes and extensions.</p>\n\t\t\t\t<div mbr-buttons mbr-theme-style=\"display-7\" class=\"mbr-section-btn mt-3\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove\"><a class=\"btn btn-primary\" href=\"index.html#form02-6\" data-app-placeholder=\"Type Text\">Start now</a> <a class=\"btn btn-primary-outline\" href=\"index.html#gallery02-v\" data-app-placeholder=\"Type Text\">Live demo</a></div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row mt-5 justify-content-center\">\n\t\t\t<div class=\"col-12 col-lg-{{imageWidth}}\" mbr-if=\"showImage\">\n\t\t\t\t<img src=\"../_images/hightlights/11.jpg\" alt=\"Mobirise Website Builder\" title>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>", "_cid": "tJS6uM4N87", "_anchor": "header05-1", "_PHPplaceholders": [], "_JSplaceholders": [], "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)", "& when (@bg-type = \"color\")": { "background-color": "@bg-value" }, "& when (@bg-type = \"image\")": { "background-image": "url(@bg-value)", "& when (@overlay)": { ".mbr-overlay": { "background": "@overlayColor", "opacity": "@overlayOpacity" } } }, "img, .item-img": { "width": "100%", "& when (@autoSize)": { "height": "100%", "object-fit": "cover", "& when (@showCardTitle)": { "height": "(@imageHeight * 100px)", "object-fit": "cover" }, "& when (@showCardSubtitle)": { "height": "(@imageHeight * 100px)", "object-fit": "cover" }, "& when (@showText)": { "height": "(@imageHeight * 100px)", "object-fit": "cover" }, "& when (@showButtons)": { "height": "(@imageHeight * 100px)", "object-fit": "cover" } } }, ".item:focus, span:focus": { "outline": "none" }, ".item": { "margin-bottom": "2rem" }, "@media (max-width: 767px)": { ".item": { "margin-bottom": "1rem" } }, "& when not (@spacing)": { ".row": { "margin-left": "0", "margin-right": "0" }, ".item": { "padding": "0", "margin": "0" } }, ".item-content": { "margin-top": "2rem", "padding": "0 2.25rem 2.25rem", "@media (max-width: 767px)": { "padding": "0 2rem 1.5rem", "margin-top": "1rem" }, "display": "flex", "flex-direction": "column", "height": "100%" }, ".item-wrapper": { "position": "relative", "background": "@cardsBg", "height": "100%", "display": "flex", "flex-flow": "column nowrap", ".item-footer": { "margin-top": "auto" } }, ".mbr-section-title": { "color": "#ffffff", "text-align": "center" }, ".item-title": { "text-align": "left" }, ".item-subtitle": { "text-align": "left" }, ".mbr-text, .item .mbr-section-btn": { "text-align": "left" }, ".content-head": { "max-width": "800px" }, ".mbr-section-subtitle, .mbr-section-head .mbr-section-btn": { "color": "#ffffff", "text-align": "center" } }, "_name": "features04", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"features4\" group=\"Features\">\n\t<mbr-parameters>\n\t\t<header>Size</header>\n\t\t<input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n\t\t<input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"10\" step=\"1\" value=\"4\">\n\t\t<input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n\t\t<select title=\"Columns\" name=\"cardsWidth\">\n\t\t\t<option value=\"12\">1</option>\n\t\t\t<option value=\"6\">2</option>\n\t\t\t<option value=\"4\" selected>3</option>\n\t\t\t<option value=\"3\">4</option>\n\t\t</select>\n\t\t<header>Show/Hide</header>\n\t\t<input type=\"checkbox\" name=\"showTitle\" title=\"Title\" checked>\n\t\t<input type=\"checkbox\" name=\"showSubtitle\" title=\"Subtitle\" checked>\n\t\t<input type=\"checkbox\" name=\"showmainButtons\" title=\"Buttons\">\n\t\t<header>Cards</header>\n\t\t<input type=\"checkbox\" name=\"autoSize\" title=\"Auto Size\" checked>\n\t\t<input type=\"range\" name=\"imageHeight\" title=\"Height\" min=\"1\" max=\"5\" step=\"1\" value=\"3\" condition=\"autoSize && !(showButtons==false && showCardSubtitle==false && showCardTitle==false && showText==false)\">\n\t\t<input type=\"checkbox\" title=\"Spacing\" name=\"spacing\" checked>\n\t\t<input type=\"checkbox\" name=\"showCardTitle\" title=\"Title\" checked>\n\t\t<input type=\"checkbox\" name=\"showCardSubtitle\" title=\"Subtitle\">\n\t\t<input type=\"checkbox\" name=\"showText\" title=\"Text\" checked>\n\t\t<input type=\"checkbox\" name=\"showButtons\" title=\"Buttons\" checked>\n\t\t<input type=\"color\" name=\"cardsBg\" title=\"BG\" value=\"#ffffff\">\n\t\t<header>Background</header>\n\t\t<fieldset type=\"background\" name=\"bg\" required>\n\t\t\t<input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\">\n\t\t\t<input type=\"color\" title=\"Color\" value=\"#2b7a69\" selected>\n\t\t</fieldset>\n\t\t<input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\" checked>\n\t\t<input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#fafafa\" condition=\"overlay && bg.type == 'image'\">\n\t\t<input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.1\" condition=\"overlay && bg.type == 'image'\">\n\t</mbr-parameters>\n\t<div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\"></div>\n\t<div mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n\t\t<div class=\"row justify-content-center\">\n\t\t\t<div class=\"col-12 content-head\">\n\t\t\t\t<div class=\"mbr-section-head mb-5\" mbr-if=\"showTitle \|\| showSubtitle \|\| showmainButton\">\n\t\t\t\t\t<h4 class=\"mbr-section-title mbr-fonts-style align-center mb-0\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\" data-app-selector=\".mbr-section-title\"><b>Our Services</b></h4>\n\t\t\t\t\t<h5 class=\"mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-4\" mbr-theme-style=\"display-7\" mbr-if=\"showSubtitle\" data-app-selector=\".mbr-section-subtitle, .mbr-section-head .mbr-section-btn\">Hover over pictures to add more cards or rearrange them with the Tools panel. Add multiple cards by selecting multiple images. You can set the number of columns in Block Parameters.</h5>\n\t\t\t\t\t<div class=\"mbr-section-btn align-center item-footer mb-0 mt-4\" mbr-if=\"showmainButtons\" data-toolbar=\"-mbrBtnMove,-mbrBtnAdd\" mbr-buttons mbr-theme-style=\"display-7\">\n\t\t\t\t\t\t<a href class=\"btn item-btn btn-primary\" data-app-placeholder=\"Type Text\">Get Started</a>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"row\">\n\t\t\t<div class=\"item features-image col-12 col-md-6 col-lg-{{cardsWidth}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<div class=\"item-img\">\n\t\t\t\t\t\t<img src=\"../_images/gallery/gallery03.jpg\" alt=\"Mobirise Website Builder\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"item-content\" mbr-if=\"showCardTitle \|\| showCardSubtitle \|\| showText \|\| showButtons\">\n\t\t\t\t\t\t<h5 class=\"item-title mbr-fonts-style\" mbr-theme-style=\"display-5\" data-app-selector=\".item-title\" mbr-if=\"showCardTitle\">\n\t\t\t\t\t\t\t<b>Marketing</b>\n\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t<h6 class=\"item-subtitle mbr-fonts-style\" mbr-theme-style=\"display-7\" data-app-selector=\".item-subtitle\" mbr-if=\"showCardSubtitle\">\n\t\t\t\t\t\t\t$5.00\n\t\t\t\t\t\t</h6>\n\t\t\t\t\t\t<p class=\"mbr-text mbr-fonts-style\" mbr-if=\"showText\" mbr-theme-style=\"display-7\" data-app-selector=\".mbr-text, .item .mbr-section-btn\">\n\t\t\t\t\t\t\tService Description. You can show/hide the title, subtitle, text, button in the Block Parameters\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div class=\"mbr-section-btn item-footer\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove,-mbrBtnAdd\" mbr-buttons mbr-theme-style=\"display-7\"><a href class=\"btn item-btn btn-primary\" data-app-placeholder=\"Type Text\">Learn more</a></div>\n\t\t\t\t\t</div>\n\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"item features-image col-12 col-md-6 col-lg-{{cardsWidth}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<div class=\"item-img\">\n\t\t\t\t\t\t<img src=\"../_images/gallery/gallery05.jpg\" alt=\"Mobirise Website Builder\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"item-content\" mbr-if=\"showCardTitle \|\| showCardSubtitle \|\| showText \|\| showButtons\">\n\t\t\t\t\t\t<h5 class=\"item-title mbr-fonts-style\" mbr-theme-style=\"display-5\" data-app-selector=\".item-title\" mbr-if=\"showCardTitle\">\n\t\t\t\t\t\t\t<b>Promotion</b>\n\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t<h6 class=\"item-subtitle mbr-fonts-style\" mbr-theme-style=\"display-7\" data-app-selector=\".item-subtitle\" mbr-if=\"showCardSubtitle\">\n\t\t\t\t\t\t\t$7.00\n\t\t\t\t\t\t</h6>\n\t\t\t\t\t\t<p class=\"mbr-text mbr-fonts-style\" mbr-if=\"showText\" mbr-theme-style=\"display-7\" data-app-selector=\".mbr-text, .item .mbr-section-btn\">\n\t\t\t\t\t\t\tService Description. You can show/hide the title, subtitle, text, button in the Block Parameters\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div class=\"mbr-section-btn item-footer\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove,-mbrBtnAdd\" mbr-buttons mbr-theme-style=\"display-7\"><a href class=\"btn item-btn btn-primary\" data-app-placeholder=\"Type Text\">Learn more</a></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"item features-image col-12 col-md-6 col-lg-{{cardsWidth}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<div class=\"item-img\">\n\t\t\t\t\t\t<img src=\"../_images/gallery/gallery02.jpg\" alt=\"Mobirise Website Builder\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"item-content\" mbr-if=\"showCardTitle \|\| showCardSubtitle \|\| showText \|\| showButtons\">\n\t\t\t\t\t\t<h5 class=\"item-title mbr-fonts-style\" mbr-theme-style=\"display-5\" data-app-selector=\".item-title\" mbr-if=\"showCardTitle\">\n\t\t\t\t\t\t\t<b>Branding</b>\n\t\t\t\t\t\t</h5>\n\t\t\t\t\t\t<h6 class=\"item-subtitle mbr-fonts-style\" mbr-theme-style=\"display-7\" data-app-selector=\".item-subtitle\" mbr-if=\"showCardSubtitle\">\n\t\t\t\t\t\t\t$10.00\n\t\t\t\t\t\t</h6>\n\t\t\t\t\t\t<p class=\"mbr-text mbr-fonts-style\" mbr-if=\"showText\" mbr-theme-style=\"display-7\" data-app-selector=\".mbr-text, .item .mbr-section-btn\">\n\t\t\t\t\t\t\tService Description. You can show/hide the title, subtitle, text, button in the Block Parameters<br>\n\t\t\t\t\t\t</p>\n\t\t\t\t\t\t<div class=\"mbr-section-btn item-footer\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove,-mbrBtnAdd\" mbr-buttons mbr-theme-style=\"display-7\"><a href class=\"btn item-btn btn-primary\" data-app-placeholder=\"Type Text\">Learn more</a></div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>", "_cid": "tMlEXTHLbS", "_anchor": "features04-w", "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)", "& when (@bg-type = 'color')": { "background-color": "@bg-value" }, "& when (@bg-type = 'image')": { "background-image": "url(@bg-value)" }, ".mbr-fallback-image.disabled": { "display": "none" }, ".mbr-fallback-image": { "display": "block", "background-size": "cover", "background-position": "center center", "width": "100%", "height": "100%", "position": "absolute", "top": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } }, "& when not (@spacing)": { ".row": { "margin-left": "0", "margin-right": "0" }, ".item": { "padding-left": "0", "padding-right": "0" } }, "& when (@spacing)": { ".item": { "margin-bottom": "2rem" }, "@media (max-width: 767px)": { ".item": { "margin-bottom": "1rem" } } }, ".item-wrapper": { "position": "relative", ".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" }, "&:hover": { ".icon-wrapper": { "opacity": "1" } } }, ".carousel-control, .close": { "background": "#1b1b1b" }, ".carousel-control-prev": { "margin-left": "2.5rem", "span": { "margin-right": "5px" } }, ".carousel-control-next": { "margin-right": "2.5rem", "span": { "margin-left": "5px" } }, ".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", "&::before": { "content": "'\\e91a'" }, "&:hover": { "opacity": "1", "background": "#000", "color": "#fff" } }, ".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", "&.carousel-control-prev": { "left": "0", "margin-left": "2.5rem" }, "&.carousel-control-next": { "right": "0", "margin-right": "2.5rem" }, "@media (max-width: 767px)": { "top": "auto", "bottom": "1rem" } }, ".carousel-indicators": { "position": "absolute", "bottom": "0", "margin-bottom": "3px", "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", "&.active, &:hover": { "opacity": "0.9" }, "&::after, &::before": { "content": "none" } }, "&.ie-fix": { "left": "50%", "display": "block", "width": "60%", "margin-left": "-30%", "text-align": "center" }, "@media (max-width: 768px)": { "display": "none !important" }, "@media (max-width: 991px)": { "margin-bottom": "3.625rem !important", "padding-left": "2.5rem", "padding-right": "2.5rem" }, "@media (max-width: 767px)": { "display": "none" } }, ".carousel-inner": { "display": "flex", "align-items": "center" }, ".carousel-inner > .active": { "display": "block" }, ".carousel-control.left": { "left": "0", "margin-left": "2.5rem" }, ".carousel-control.right": { "right": "0", "margin-right": "2.5rem" }, ".carousel-control:hover": { "background": "#1b1b1b", "color": "#fff", "opacity": "1" }, "@media (max-width: 768px)": { ".carousel-control, .carousel-indicators, .modal .close": { "position": "fixed" } }, "@media (max-width: 767px)": { ".mbr-slider .carousel-control": { "top": "auto", "bottom": "20px" }, ".mbr-slider > .container .carousel-control": { "margin-bottom": "0" } }, ".carousel-indicators .active, .carousel-indicators li": { "width": "7px", "height": "7px", "margin": "3px", "background": "#000000", "opacity": "0.5", "border": "4px solid #000000" }, ".carousel-indicators .active": { "background": "#fff" }, ".carousel-indicators li": { "max-width": "15px", "max-height": "15px", "border-radius": "50%" }, ".modal": { "padding-left": "0 !important", "position": "fixed", "overflow": "hidden", "padding-right": "0 !important" }, ".modal-dialog": { "margin": "0 auto", "max-width": "100%", "padding-left": "1rem", "padding-right": "1rem" }, ".modal-content": { "border-radius": "0", "border": "none", "background": "transparent" }, ".modal-body": { "padding": "0", "display": "flex", "align-items": "center", "img": { "width": "100%", "object-fit": "contain", "max-height": "~\"calc(100vh - 1.75rem)\"" } }, ".carousel": { "width": "100%" }, ".modal-backdrop.in": { "opacity": "0.8" }, ".modal.fade .modal-dialog": { "transition": "margin-top 0.3s ease-out" }, ".modal.fade .modal-dialog, .modal.in .modal-dialog": { "transform": "none" }, ".mbr-gallery .item-wrapper": { "cursor": "pointer" }, ".content-head": { "max-width": "800px" }, "H3": { "text-align": "center" }, "H4": { "text-align": "center" } }, "_name": "gallery02", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"gallery1 mbr-gallery\" plugins=\"Masonry, Gallery\" group=\"Sliders & Galleries\" data-bg-video=\"{{bg.type == 'video' && bg.value.url}}\">\n <mbr-parameters>\n <input type=\"id\" name=\"idGallery\">\n <header>Size</header>\n <input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\" checked>\n <input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n <input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n <select title=\"Columns\" name=\"cardsWidth\">\n <option value=\"12\">1</option>\n <option value=\"6\">2</option>\n <option value=\"4\">3</option>\n <option value=\"3\" selected>4</option>\n </select>\n <header>Show/Hide</header>\n <input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n <input type=\"checkbox\" title=\"Subtitle\" name=\"showSubtitle\" checked>\n <header>Images</header>\n <input type=\"checkbox\" title=\"Spacing\" name=\"spacing\" checked>\n <input type=\"checkbox\" title=\"Caption\" name=\"showItemSubtitle\">\n <header>Popup Slider</header>\n <input type=\"checkbox\" title=\"Fade Effect\" name=\"fade\">\n <input type=\"checkbox\" title=\"Autoplay\" name=\"autoplay\">\n <input type=\"range\" title=\"Interval\" name=\"interval\" min=\"3\" max=\"10\" value=\"5\" step=\"1\" condition=\"autoplay\">\n <header>Background</header>\n <fieldset type=\"background\" name=\"bg\" parallax>\n <input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\" parallax>\n <input type=\"color\" title=\"Color\" value=\"#edefeb\" selected>\n <input type=\"video\" title=\"Video\" value=\"https://vimeo.com/428046504\">\n </fieldset>\n <header condition=\"bg.type === 'video'\">Fallback Image</header>\n <input type=\"image\" title=\"Fallback Image\" value=\"../_images/background1.jpg\" name=\"fallBackImage\" condition=\"bg.type === 'video'\">\n <header condition=\"bg.type!=='color'\">Overlay</header>\n <input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" checked condition=\"bg.type !== 'color'\">\n <input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#fafafa\" condition=\"overlay && bg.type !== 'color'\">\n <input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.8\" condition=\"overlay && bg.type !== 'color'\">\n </mbr-parameters>\n\n <div class=\"mbr-fallback-image disabled\" mbr-if=\"bg.type == 'video'\"></div>\n <div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type!== 'color'\" mbr-style=\"{'opacity': overlayOpacity, 'background-color': overlayColor}\">\n </div>\n\n <div mbr-class=\"{'container': !fullWidth,\n 'container-fluid': fullWidth}\">\n <div class=\"row justify-content-center\">\n <div class=\"col-12 content-head\">\n <div class=\"mbr-section-head mb-5\" mbr-if=\"showTitle \|\| showSubtitle\">\n <h3 class=\"mbr-section-title mbr-fonts-style align-center m-0\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\"><b>Gallery with Masonry Grid and Popup Slider</b></h3>\n <h4 class=\"mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-4\" mbr-theme-style=\"display-7\" mbr-if=\"showSubtitle\">Use images of different sizes in this gallery. Click on the image to change it. Click on the + (Add Items) button to add multiple pictures at once.</h4>\n </div>\n </div>\n </div>\n <div class=\"row mbr-gallery mbr-masonry\" data-masonry=\"{"percentPosition": true }\">\n <div class=\"col-12 col-md-6 col-lg-{{cardsWidth}} item gallery-image\">\n <div class=\"item-wrapper\" data-toggle=\"modal\" data-bs-toggle=\"modal\" data-target=\"#{{idGallery}}-modal\" data-bs-target=\"#{{idGallery}}-modal\">\n <img class=\"w-100\" src=\"../_images/gallery/gallery03.jpg\" alt=\"Mobirise Website Builder\" data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"0\" data-bs-slide-to=\"0\">\n <div class=\"icon-wrapper\">\n <span class=\"mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn\"></span>\n </div>\n </div>\n <h6 class=\"mbr-item-subtitle mbr-fonts-style align-center mb-0 mt-3\" mbr-theme-style=\"display-7\" mbr-if=\"showItemSubtitle\">\n Image Caption and <a href=\"#\" class=\"text-primary\">Link</a>\n </h6>\n </div>\n <div class=\"col-12 col-md-6 col-lg-{{cardsWidth}} item gallery-image\">\n <div class=\"item-wrapper\" data-toggle=\"modal\" data-bs-toggle=\"modal\" data-target=\"#{{idGallery}}-modal\" data-bs-target=\"#{{idGallery}}-modal\">\n <img class=\"w-100\" src=\"../_images/gallery/gallery13.jpg\" alt=\"Mobirise Website Builder\" data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"0\" data-bs-slide-to=\"0\">\n <div class=\"icon-wrapper\">\n <span class=\"mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn\"></span>\n </div>\n </div>\n <h6 class=\"mbr-item-subtitle mbr-fonts-style align-center mb-0 mt-3\" mbr-theme-style=\"display-7\" mbr-if=\"showItemSubtitle\">\n Image Caption and <a href=\"#\" class=\"text-primary\">Link</a>\n </h6>\n </div>\n <div class=\"col-12 col-md-6 col-lg-{{cardsWidth}} item gallery-image\">\n <div class=\"item-wrapper\" data-toggle=\"modal\" data-bs-toggle=\"modal\" data-target=\"#{{idGallery}}-modal\" data-bs-target=\"#{{idGallery}}-modal\">\n <img class=\"w-100\" src=\"../_images/gallery/gallery10.jpg\" alt=\"Mobirise Website Builder\" data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"1\" data-bs-slide-to=\"1\">\n <div class=\"icon-wrapper\">\n <span class=\"mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn\"></span>\n </div>\n </div>\n <h6 class=\"mbr-item-subtitle mbr-fonts-style align-center mb-0 mt-3\" mbr-theme-style=\"display-7\" mbr-if=\"showItemSubtitle\">\n Image Caption and <a href=\"#\" class=\"text-primary\">Link</a>\n </h6>\n </div>\n <div class=\"col-12 col-md-6 col-lg-{{cardsWidth}} item gallery-image\">\n <div class=\"item-wrapper\" data-toggle=\"modal\" data-bs-toggle=\"modal\" data-target=\"#{{idGallery}}-modal\" data-bs-target=\"#{{idGallery}}-modal\">\n <img class=\"w-100\" src=\"../_images/gallery/gallery08.jpg\" alt=\"Mobirise Website Builder\" data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"2\" data-bs-slide-to=\"2\">\n <div class=\"icon-wrapper\">\n <span class=\"mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn\"></span>\n </div>\n </div>\n <h6 class=\"mbr-item-subtitle mbr-fonts-style align-center mb-0 mt-3\" mbr-theme-style=\"display-7\" mbr-if=\"showItemSubtitle\">\n Image Caption and <a href=\"#\" class=\"text-primary\">Link</a>\n </h6>\n </div>\n <div class=\"col-12 col-md-6 col-lg-{{cardsWidth}} item gallery-image\">\n <div class=\"item-wrapper\" data-toggle=\"modal\" data-bs-toggle=\"modal\" data-target=\"#{{idGallery}}-modal\" data-bs-target=\"#{{idGallery}}-modal\">\n <img class=\"w-100\" src=\"../_images/gallery/gallery06.jpg\" alt=\"Mobirise Website Builder\" data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"3\" data-bs-slide-to=\"3\">\n <div class=\"icon-wrapper\">\n <span class=\"mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn\"></span>\n </div>\n </div>\n <h6 class=\"mbr-item-subtitle mbr-fonts-style align-center mb-0 mt-3\" mbr-theme-style=\"display-7\" mbr-if=\"showItemSubtitle\">\n Image Caption and <a href=\"#\" class=\"text-primary\">Link</a>\n </h6>\n </div>\n <div class=\"col-12 col-md-6 col-lg-{{cardsWidth}} item gallery-image\">\n <div class=\"item-wrapper\" data-toggle=\"modal\" data-bs-toggle=\"modal\" data-target=\"#{{idGallery}}-modal\" data-bs-target=\"#{{idGallery}}-modal\">\n <img class=\"w-100\" src=\"../_images/gallery/gallery02.jpg\" alt=\"Mobirise Website Builder\" data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"3\" data-bs-slide-to=\"3\">\n <div class=\"icon-wrapper\">\n <span class=\"mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn\"></span>\n </div>\n </div>\n <h6 class=\"mbr-item-subtitle mbr-fonts-style align-center mb-0 mt-3\" mbr-theme-style=\"display-7\" mbr-if=\"showItemSubtitle\">\n Image Caption and <a href=\"#\" class=\"text-primary\">Link</a>\n </h6>\n </div>\n <div class=\"col-12 col-md-6 col-lg-{{cardsWidth}} item gallery-image\">\n <div class=\"item-wrapper\" data-toggle=\"modal\" data-bs-toggle=\"modal\" data-target=\"#{{idGallery}}-modal\" data-bs-target=\"#{{idGallery}}-modal\">\n <img class=\"w-100\" src=\"../_images/gallery/gallery01.jpg\" alt=\"Mobirise Website Builder\" data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"3\" data-bs-slide-to=\"3\">\n <div class=\"icon-wrapper\">\n <span class=\"mobi-mbri mobi-mbri-search mbr-iconfont mbr-iconfont-btn\"></span>\n </div>\n </div>\n <h6 class=\"mbr-item-subtitle mbr-fonts-style align-center mb-0 mt-3\" mbr-theme-style=\"display-7\" mbr-if=\"showItemSubtitle\">\n Image Caption and <a href=\"#\" class=\"text-primary\">Link</a>\n </h6>\n </div>\n </div>\n\n <div class=\"modal mbr-slider\" id=\"{{idGallery}}-modal\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n <div class=\"modal-dialog\" role=\"document\">\n <div class=\"modal-content\">\n <div class=\"modal-body\">\n <div id=\"lb-{{idGallery}}\" class=\"carousel slide\" mbr-class=\"{'carousel-fade': fade}\" data-ride=\"{{autoplay ? 'carousel' : false}}\" data-bs-ride=\"{{autoplay ? 'carousel' : false}}\" data-interval=\"{{interval1000}}\" data-bs-interval=\"{{interval1000}}\">\n <div class=\"carousel-inner\">\n <div class=\"carousel-item active\">\n <img class=\"d-block w-100\" src=\"../_images/gallery/gallery03.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"carousel-item\">\n <img class=\"d-block w-100\" src=\"../_images/gallery/gallery13.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"carousel-item\">\n <img class=\"d-block w-100\" src=\"../_images/gallery/gallery10.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"carousel-item\">\n <img class=\"d-block w-100\" src=\"../_images/gallery/gallery08.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"carousel-item\">\n <img class=\"d-block w-100\" src=\"../_images/gallery/gallery06.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"carousel-item\">\n <img class=\"d-block w-100\" src=\"../_images/gallery/gallery02.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"carousel-item\">\n <img class=\"d-block w-100\" src=\"../_images/gallery/gallery01.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n </div>\n <ol class=\"carousel-indicators\">\n <li data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"0\" data-bs-slide-to=\"0\" class=\"active\"></li>\n <li data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"1\" data-bs-slide-to=\"1\"></li>\n <li data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"2\" data-bs-slide-to=\"2\"></li>\n <li data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"3\" data-bs-slide-to=\"3\"></li>\n <li data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"4\" data-bs-slide-to=\"4\"></li>\n <li data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"5\" data-bs-slide-to=\"5\"></li>\n <li data-target=\"#lb-{{idGallery}}\" data-bs-target=\"#lb-{{idGallery}}\" data-slide-to=\"6\" data-bs-slide-to=\"6\"></li>\n </ol>\n <a role=\"button\" href class=\"close\" data-dismiss=\"modal\" data-bs-dismiss=\"modal\" aria-label=\"Close\">\n </a>\n <a class=\"carousel-control-prev carousel-control\" href=\"#lb-{{idGallery}}\" role=\"button\" data-slide=\"prev\" data-bs-slide=\"prev\">\n <span class=\"mobi-mbri mobi-mbri-arrow-prev\" aria-hidden=\"true\"></span>\n <span class=\"sr-only visually-hidden\">Previous</span>\n </a>\n <a class=\"carousel-control-next carousel-control\" href=\"#lb-{{idGallery}}\" role=\"button\" data-slide=\"next\" data-bs-slide=\"next\">\n <span class=\"mobi-mbri mobi-mbri-arrow-next\" aria-hidden=\"true\"></span>\n <span class=\"sr-only visually-hidden\">Next</span>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>", "_cid": "tMlDYtQ5fF", "_anchor": "gallery02-v", "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "display": "flex", "& when not (@fullScreen)": { "padding-top": "(@paddingTop * 15px)", "padding-bottom": "(@paddingBottom * 15px)" }, "& when (@bg-type = \"color\")": { "background-color": "@bg-value" }, "& when (@bg-type = \"image\")": { "background-image": "url(@bg-value)", ".mbr-overlay": { "background-color": "@overlayColor", "opacity": "@overlayOpacity" } }, "@media (min-width: 768px)": { "align-items": "~\"@{verticalAlign}\"", ".row": { "justify-content": "~\"@{horizontalAlign}\"" } }, "@media (max-width: 991px) and (min-width: 768px)": { ".content-wrap": { "min-width": "50%" } }, "@media (max-width: 767px)": { "-webkit-align-items": "center", "align-items": "center", ".mbr-row": { "-webkit-justify-content": "center", "justify-content": "center" }, ".content-wrap": { "width": "100%" } }, ".mbr-section-title": { "text-align": "center" }, ".mbr-text, .mbr-section-btn": { "text-align": "center" } }, "_name": "header09", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"header09\" group=\"Headers\" mbr-class=\"{'mbr-fullscreen': fullScreen,\n'mbr-parallax-background': bg.parallax}\">\n\t<mbr-parameters>\n\t\t<header>Size</header>\n\t\t<input type=\"checkbox\" title=\"Full Screen\" name=\"fullScreen\">\n\t\t<input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n\t\t<input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"12\" step=\"1\" value=\"6\" condition=\"fullScreen == false\">\n\t\t<input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"12\" step=\"1\" value=\"6\" condition=\"fullScreen == false\">\n\t\t<input type=\"range\" inline name=\"contentWidth\" title=\"Content Width\" min=\"4\" max=\"12\" step=\"1\" value=\"8\">\n\t\t<header>Show / Hide</header>\n\t\t<input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n\t\t<input type=\"checkbox\" title=\"Subtitle\" name=\"showSubtitle\">\n\t\t<input type=\"checkbox\" title=\"Text\" name=\"showText\" checked>\n\t\t<input type=\"checkbox\" title=\"Buttons\" name=\"showButtons\" checked>\n\t\t<select title=\"Vertical Align\" name=\"verticalAlign\" condition=\"fullScreen\">\n\t\t\t<option value=\"flex-start\">Top</option>\n\t\t\t<option value=\"center\" selected>Center</option>\n\t\t\t<option value=\"flex-end\">Bottom</option>\n\t\t</select>\n\t\t<select title=\"Horizontal Align\" name=\"horizontalAlign\">\n\t\t\t<option value=\"flex-start\">Left</option>\n\t\t\t<option value=\"center\" selected>Center</option>\n\t\t\t<option value=\"flex-end\">Right</option>\n\t\t</select>\n\t\t<header>Background</header>\n\t\t<fieldset type=\"background\" name=\"bg\" parallax>\n\t\t\t<input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\">\n\t\t\t<input type=\"color\" title=\"Color\" value=\"#086784\" selected>\n\t\t</fieldset>\n\n\t\t<input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type!='color'\">\n\t\t<input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffa600\" condition=\"bg.type!='color' && overlay\">\n\t\t<input type=\"range\" inline title=\"Overlay Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.5\" condition=\"bg.type!='color' && overlay\">\n\t</mbr-parameters>\n\t<div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\"></div>\n\t<div mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n\t\t<div class=\"row\">\n\t\t\t<div class=\"content-wrap col-12 col-md-{{contentWidth}}\">\n\t\t\t\t<h1 class=\"mbr-section-title mbr-fonts-style mbr-white mb-4\" mbr-theme-style=\"display-1\" data-app-selector=\".mbr-section-title\" mbr-if=\"showTitle\"><b>Unlock boundless possibilities</b></h1>\n\t\t\t\t<h2 class=\"mbr-section-title mbr-fonts-style mbr-white mb-4\" data-app-selector=\".mbr-section-title\" mbr-theme-style=\"display-2\" mbr-if=\"showSubtitle\">\n\t\t\t\t\tHeader Subtitle\n\t\t\t\t</h2>\n\t\t\t\t<p class=\"mbr-fonts-style mbr-text mbr-white mb-4\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".mbr-text, .mbr-section-btn\">\n\t\t\t\t\tMobirise Free Website Maker is perfect for non-techies and great for pro-coders for fast prototyping and small customers' projects.\n\t\t\t\t</p>\n\t\t\t\t<div class=\"mbr-section-btn\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove\" mbr-buttons mbr-theme-style=\"display-7\"><a class=\"btn btn-white-outline\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">Learn more</a></div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>", "_cid": "tLAX5BnXkJ", "_anchor": "header09-q", "_PHPplaceholders": [], "_JSplaceholders": [], "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "& when not (@fullScreen)": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)" }, "& when (@bg-type = 'image')": { "background-image": "url(@bg-value)" }, "& when (@bg-type = 'color')": { "background-color": "@bg-value" }, ".mbr-fallback-image.disabled": { "display": "none" }, ".mbr-fallback-image": { "display": "block", "background-size": "cover", "background-position": "center center", "width": "100%", "height": "100%", "position": "absolute", "bottom": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } }, ".topbg": { "position": "absolute", "bottom": "0", "left": "0", "width": "100%", "height": "30%", "background": "@topbg" }, ".mbr-section-title": { "color": "#000000", "text-align": "center" }, ".mbr-text, .mbr-section-btn": { "color": "#000000" }, ".media-content, .mbr-figure": { "align-self": "center" }, ".mbr-figure iframe": { "width": "100%", "overflow": "hidden" }, ".app-video-wrapper": { "background": "transparent" } }, "_name": "header07", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"header7\" group=\"Headers\" data-bg-video=\"{{bg.type == 'video' && bg.value.url}}\" mbr-class=\"{\n 'mbr-fullscreen': fullScreen,\n 'mbr-parallax-background': bg.parallax}\">\n <mbr-parameters>\n <header>Size</header>\n <input type=\"checkbox\" title=\"Full Screen\" name=\"fullScreen\">\n <input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n <input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"12\" step=\"1\" value=\"6\" condition=\"fullScreen == false\">\n <input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"12\" step=\"1\" value=\"6\" condition=\"fullScreen == false\">\n <input type=\"range\" inline name=\"videoWidth\" title=\"Video\" min=\"4\" max=\"12\" step=\"1\" value=\"12\">\n <header>Show/Hide</header>\n <input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n <input type=\"checkbox\" title=\"Text\" name=\"showText\" checked>\n <input type=\"checkbox\" title=\"Buttons\" name=\"showButtons\">\n <header>Background</header>\n <input type=\"checkbox\" title=\"Decoration\" name=\"doubleBg\">\n <input type=\"color\" title=\"Color\" name=\"topbg\" value=\"#edefeb\" selected>\n <fieldset type=\"background\" name=\"bg\" parallax>\n <input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\" parallax>\n <input type=\"color\" title=\"Color\" value=\"#edefeb\" selected>\n <input type=\"video\" title=\"Video\" value=\"https://vimeo.com/428046504\">\n </fieldset>\n <header condition=\"bg.type === 'video'\">Fallback Image</header>\n <input type=\"image\" title=\"Fallback Image\" value=\"../_images/background1.jpg\" name=\"fallBackImage\" condition=\"bg.type === 'video'\">\n <input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\">\n <input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffa600\" condition=\"overlay && bg.type !== 'color'\">\n <input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.1\" condition=\"overlay && bg.type !== 'color'\">\n </mbr-parameters>\n\n <div class=\"mbr-fallback-image disabled\" mbr-if=\"bg.type == 'video'\"></div>\n <div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\" opacity=\"{{overlayOpacity}}\" bg-color=\"{{overlayColor}}\"></div>\n <div class=\"topbg\" mbr-if=\"doubleBg\"></div>\n <div class=\"align-center\" mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n <div class=\"row justify-content-center\">\n <div class=\"col-md-12 col-lg-9 mb-5\">\n <h1 class=\"mbr-section-title mbr-fonts-style\" data-app-selector=\".mbr-section-title\" mbr-theme-style=\"display-1\" mbr-if=\"showTitle\"><b>Block with video</b>\n </h1>\n <p class=\"mbr-text mbr-fonts-style mt-4\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".mbr-text, .mbr-section-btn\">\n Click on the media content to replace it. In some blocks, you can change media content via Block Parameters.\n </p>\n <div mbr-buttons mbr-theme-style=\"display-7\" class=\"mbr-section-btn mt-4\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove\">\n <a class=\"btn btn-primary\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">Get Started</a>\n <a class=\"btn btn-primary-outline\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">Read More</a>\n </div>\n </div>\n </div>\n\n <div class=\"row justify-content-center\">\n <div mbr-video class=\"mbr-figure col-12 col-md-{{videoWidth}}\">\n <iframe src=\"https://www.youtube.com/watch?v=sGpPgQeEyOc&loop=1&autoplay=1\"></iframe>\n </div>\n </div>\n </div>\n</section>", "_cid": "tLeaLmEeFr", "_anchor": "header07-h", "_PHPplaceholders": [], "_JSplaceholders": [], "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "& when not (@fullScreen)": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)" }, "& when (@bg-type = 'color')": { "background-color": "@bg-value" }, "& when (@bg-type = 'image')": { "background-image": "url(@bg-value)" }, ".mbr-fallback-image.disabled": { "display": "none" }, ".mbr-fallback-image": { "display": "block", "background-size": "cover", "background-position": "center center", "width": "100%", "height": "100%", "position": "absolute", "top": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } }, "@media (max-width: 991px)": { ".image-wrapper": { "margin-bottom": "1rem" } }, "& when (@reverseContent)": { ".row": { "flex-direction": "row-reverse" } }, ".row": { "align-items": "center" }, ".image-wrapper": { "@media (max-width: 991px)": { "padding": "1rem" } }, ".text-wrapper": { "@media (min-width: 992px)": { "padding": "0 2rem" } }, ".mbr-section-title": { "color": "#000000" }, ".mbr-text, .mbr-section-btn": { "color": "#232323" } }, "_name": "header01", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"header1\" group=\"Headers\" data-bg-video=\"{{bg.type == 'video' && bg.value.url}}\" mbr-class=\"{\n 'mbr-fullscreen': fullScreen,\n 'mbr-parallax-background': bg.parallax}\">\n\t<mbr-parameters>\n\t\t<header>Size</header>\n\t\t<input type=\"checkbox\" title=\"Full Screen\" name=\"fullScreen\">\n\t\t<input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n\t\t<input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"10\" step=\"1\" value=\"6\" condition=\"fullScreen == false\">\n\t\t<input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"6\" condition=\"fullScreen == false\">\n\t\t<input type=\"range\" inline name=\"imageWidth\" title=\"Image\" min=\"4\" max=\"8\" step=\"1\" value=\"7\">\n\t\t<input type=\"checkbox\" title=\"Reverse\" name=\"reverseContent\" checked>\n\t\t<header>Show/Hide</header>\n\t\t<input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n\t\t<input type=\"checkbox\" title=\"Text\" name=\"showText\" checked>\n\t\t<input type=\"checkbox\" title=\"Buttons\" name=\"showButtons\" checked>\n\t\t<header>Background</header>\n\t\t<fieldset type=\"background\" name=\"bg\" parallax>\n\t\t\t<input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\">\n\t\t\t<input type=\"color\" title=\"Color\" value=\"#ffffff\" selected>\n\t\t\t<input type=\"video\" title=\"Video\" value=\"https://vimeo.com/428046504\">\n\t\t</fieldset>\n\t\t<header condition=\"bg.type === 'video'\">Fallback Image</header>\n\t\t<input type=\"image\" title=\"Fallback Image\" value=\"../_images/background1.jpg\" name=\"fallBackImage\" condition=\"bg.type === 'video'\">\n\t\t<input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\">\n\t\t<input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffffff\" condition=\"overlay && bg.type !== 'color'\">\n\t\t<input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.8\" condition=\"overlay && bg.type !== 'color'\">\n\t</mbr-parameters>\n\n\t<div class=\"mbr-fallback-image disabled\" mbr-if=\"bg.type == 'video'\"></div>\n\t<div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\" opacity=\"{{overlayOpacity}}\" bg-color=\"{{overlayColor}}\"></div>\n\n\t<div mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n\t\t<div class=\"row justify-content-center\">\n\t\t\t<div class=\"col-12 col-md-12 col-lg-{{imageWidth}} image-wrapper\">\n\t\t\t\t<img class=\"w-100\" src=\"../_images/gallery/gallery01.jpg\" alt=\"Mobirise Website Builder\">\n\t\t\t</div>\n\t\t\t<div class=\"col-12 col-lg col-md-12\">\n\t\t\t\t<div class=\"text-wrapper align-left\">\n\t\t\t\t\t<h1 class=\"mbr-section-title mbr-fonts-style mb-4\" data-app-selector=\".mbr-section-title\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\"><b>About us</b></h1>\n\t\t\t\t\t<p class=\"mbr-text mbr-fonts-style mb-4\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".mbr-text, .mbr-section-btn\">\n\t\t\t\t\t\tMost blocks can be used with various types of backgrounds: color, pictures, or videos. It can be set in Block Parameters. You can show/hide the title, subtitle, text, button in the Block Parameters (blue gear icon at the top right corner of the block). </p>\n\t\t\t\t\t<div mbr-buttons mbr-theme-style=\"display-7\" class=\"mbr-section-btn mt-3\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove\"><a class=\"btn btn-primary\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">Start now</a></div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>", "_cid": "tJS9vXDdRK", "_anchor": "header01-7", "_PHPplaceholders": [], "_JSplaceholders": [], "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)", "& when (@bg-type = 'color')": { "background-color": "@bg-value" }, "& when (@bg-type = 'image')": { "background-image": "url(@bg-value)" }, ".mbr-fallback-image.disabled": { "display": "none" }, ".mbr-fallback-image": { "display": "block", "background-size": "cover", "background-position": "center center", "width": "100%", "height": "100%", "position": "absolute", "top": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } }, ".item-wrapper": { "display": "flex", "margin-bottom": "2rem", "@media (max-width: 767px)": { "margin-bottom": "1rem" } }, ".img-wrapper": { "width": "10rem", "padding-right": "2rem" }, ".card-text": { "color": "#232323" } }, "_name": "features015", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"features15\" group=\"Features\" data-bg-video=\"{{bg.type == 'video' && bg.value.url}}\" mbr-class=\"{'mbr-parallax-background': bg.parallax}\">\n\t<mbr-parameters>\n\t\t<header>Size</header>\n\t\t<input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n\t\t<input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n\t\t<input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n\t\t<header>Show/Hide</header>\n\t\t<input type=\"checkbox\" name=\"showTitle\" title=\"Title\" checked>\n\t\t<input type=\"checkbox\" name=\"showSubtitle\" title=\"Subtitle\">\n\t\t<header>Card</header>\n\t\t<input type=\"checkbox\" title=\"Title\" name=\"showCardTitle\" checked>\n\t\t<input type=\"checkbox\" title=\"Text\" name=\"showText\" checked>\n\t\t<input type=\"checkbox\" title=\"Images\" name=\"showImage\" checked>\n\t\t<select title=\"Columns\" name=\"columns\">\n\t\t\t<option value=\"12\">1</option>\n\t\t\t<option value=\"6\">2</option>\n\t\t\t<option value=\"4\" selected>3</option>\n\t\t\t<option value=\"3\">4</option>\n\t\t</select>\n\t\t<header>Background</header>\n\t\t<fieldset type=\"background\" name=\"bg\" parallax>\n\t\t\t<input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\">\n\t\t\t<input type=\"color\" title=\"Color\" value=\"#f7f7f7\" selected>\n\t\t\t<input type=\"video\" title=\"Video\" value=\"https://vimeo.com/428046504\">\n\t\t</fieldset>\n\t\t<header condition=\"bg.type === 'video'\">Fallback Image</header>\n\t\t<input type=\"image\" title=\"Fallback Image\" value=\"../_images/background1.jpg\" name=\"fallBackImage\" condition=\"bg.type === 'video'\">\n\t\t<input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\" checked>\n\t\t<input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffffff\" condition=\"overlay && bg.type !== 'color'\">\n\t\t<input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.5\" condition=\"overlay && bg.type !== 'color'\">\n\t</mbr-parameters>\n\n\t<div class=\"mbr-fallback-image disabled\" mbr-if=\"bg.type == 'video'\"></div>\n\t<div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type!== 'color'\" mbr-style=\"{'opacity': overlayOpacity, 'background-color': overlayColor}\"></div>\n\t<div mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n\t\t<div class=\"mbr-section-head mb-5\" mbr-if=\"showTitle \|\| showSubtitle\">\n\t\t\t<h4 class=\"mbr-section-title mbr-fonts-style align-center mb-0\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\" data-app-selector=\".mbr-section-title\">\n\t\t\t <b>Why us?</b></h4>\n\t\t\t<h5 class=\"mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-4\" mbr-theme-style=\"display-7\" mbr-if=\"showSubtitle\" data-app-selector=\".mbr-section-subtitle\">\n\t\t\t To add more cards, hover on a card and click 'Add items'.</h5>\n\t\t </div>\n\t\t<div class=\"row justify-content-center\">\n\t\t\t<div class=\"item features-without-image col-12 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<div class=\"img-wrapper\" mbr-if=\"showImage\">\n\t\t\t\t\t\t<img src=\"../_images/shop/shop1.jpg\" alt=\"Mobirise Website Builder\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"card-box\">\n\t\t\t\t\t\t<h4 class=\"card-title mbr-fonts-style mb-3\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>Free</b></h4>\n\t\t\t\t\t\t<h5 class=\"card-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".card-text\">\n\t\t\t\t\t\t\tMobirise is a free website builder. Mobirise is a free website builder. Mobirise is a free website builder.</h5>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"item features-without-image col-12 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<div class=\"img-wrapper\" mbr-if=\"showImage\">\n\t\t\t\t\t\t<img src=\"../_images/shop/shop2.jpg\" alt=\"Mobirise Website Builder\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"card-box\">\n\t\t\t\t\t\t<h4 class=\"card-title mbr-fonts-style mb-3\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>Easy</b></h4>\n\t\t\t\t\t\t<h5 class=\"card-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".card-text\">\n\t\t\t\t\t\t\tCreate landing pages with ease. Create landing pages with ease. Create landing pages with ease.<br><br></h5>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"item features-without-image col-12 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<div class=\"img-wrapper\" mbr-if=\"showImage\">\n\t\t\t\t\t\t<img src=\"../_images/shop/shop3.jpg\" alt=\"Mobirise Website Builder\">\n\t\t\t\t\t</div>\n\t\t\t\t\t<div class=\"card-box\">\n\t\t\t\t\t\t<h4 class=\"card-title mbr-fonts-style mb-3\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>Beautiful</b></h4>\n\t\t\t\t\t\t<h5 class=\"card-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".card-text\">\n\t\t\t\t\t\t\tBuild a website with Mobirise. Build a web page with Mobirise. Create a website with Mobirise.</h5>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>", "_cid": "tLek7gQhG7", "_anchor": "features015-m", "_PHPplaceholders": [], "_JSplaceholders": [], "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)", ".mbr-overlay": { "background-color": "@overlayColor", "opacity": "@overlayOpacity" }, "& when (@bg-type = 'image')": { "background-image": "url(@bg-value)" }, "& when (@bg-type = 'color')": { "background-color": "@bg-value" }, "form": { ".mbr-section-btn": { "text-align": "center", "width": "100%", ".btn": { "display": "inline-flex", "@media (max-width: 991px)": { "width": "100%" } } } } }, "_name": "form02", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"form5\" group=\"Forms\" plugins=\"formstyler, datepicker\">\n <mbr-parameters>\n <header>Size</header>\n <input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n <input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n <input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n <header>Show/Hide</header>\n <input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n <input type=\"checkbox\" title=\"Subtitle\" name=\"showSubtitle\" checked>\n <header>Background</header>\n <fieldset type=\"background\" name=\"bg\">\n <input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\">\n <input type=\"color\" title=\"Color\" value=\"#ffffff\" selected>\n </fieldset>\n <input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\" checked>\n <input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffffff\" condition=\"overlay && bg.type !== 'color'\">\n <input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.4\" condition=\"overlay && bg.type !== 'color'\">\n </mbr-parameters>\n <div class=\"mbr-overlay\" mbr-if=\"(overlay && bg.type=='image')\"></div>\n <div mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n <div class=\"mbr-section-head mb-5\" mbr-if=\"showTitle \|\| showSubtitle\">\n <h3 class=\"mbr-section-title mbr-fonts-style align-center mb-0\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\" data-app-selector=\".mbr-section-title\">\n <b>Contact Form</b></h3>\n <h4 class=\"mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-4\" mbr-theme-style=\"display-7\" mbr-if=\"showSubtitle\" data-app-selector=\".mbr-section-subtitle\">To change your notification email, click on any form field below.\n<div>The number of submissions is limited to 10 per day without the Form Builder.</div></h4>\n </div>\n <div class=\"row justify-content-center mt-4\">\n <div mbr-form class=\"col-lg-8 mx-auto mbr-form\">\n <form action name=\"Form Name\" method=\"POST\" class=\"mbr-form form-with-styler\">\n <div class=\"row\">\n <div hidden=\"hidden\" data-form-alert class=\"alert alert-success col-12\">\n Thanks for filling out the form!\n </div>\n <div hidden=\"hidden\" data-form-alert-danger class=\"alert alert-danger col-12\">\n Oops...! some problem!\n </div>\n </div>\n <div class=\"dragArea row\">\n <div class=\"col-md col-sm-12 form-group mb-3\" data-for=\"name\">\n <input type=\"text\" name=\"name\" placeholder=\"Name\" data-form-field=\"name\" class=\"form-control\" value>\n </div>\n <div class=\"col-md col-sm-12 form-group mb-3\" data-for=\"email\">\n <input type=\"email\" name=\"email\" placeholder=\"Email\" data-form-field=\"email\" class=\"form-control\" value>\n </div>\n <div class=\"col-12 form-group mb-3\" data-for=\"phone\">\n <input type=\"tel\" name=\"phone\" placeholder=\"Phone\" data-form-field=\"phone\" class=\"form-control\" value>\n </div>\n <div class=\"col-12 form-group mb-3\" data-for=\"textarea\">\n <textarea name=\"textarea\" placeholder=\"Message\" data-form-field=\"textarea\" class=\"form-control\"></textarea>\n </div>\n <div mbr-buttons=\"true\" mbr-theme-style=\"display-7\" data-toolbar=\"-mbrBtnMove,-mbrLink,-mbrBtnRemove,-mbrBtnAdd\" class=\"col-lg-12 col-md-12 col-sm-12 align-center mbr-section-btn\">\n <a type=\"submit\" class=\"btn btn-primary\">Send message</a>\n </div>\n </div>\n </form>\n </div>\n </div>\n </div>\n</section>", "_cid": "tJS9pBcTSa", "_anchor": "form02-6", "_PHPplaceholders": [], "_JSplaceholders": [], "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)", "& when (@bg-type = 'color')": { "background": "@bg-value" }, "& when (@bg-type = 'image')": { "background-image": "url(@bg-value)" }, ".mbr-fallback-image.disabled": { "display": "none" }, ".mbr-fallback-image": { "display": "block", "background-size": "cover", "background-position": "center center", "width": "100%", "height": "100%", "position": "absolute", "top": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } }, ".row": { "@media (max-width: 767px)": { "text-align": "center", ".map-wrapper": { "margin-top": "1rem" } } }, ".google-map": { "height": "100%", "position": "relative", "iframe": { "height": "100%", "width": "100%", "@media (max-width: 767px)": { "min-height": "350px" } }, "[data-state-details]": { "color": "#6b6763", "height": "1.5em", "margin-top": "-0.75em", "padding-left": "1.25rem", "padding-right": "1.25rem", "position": "absolute", "text-align": "center", "top": "50%", "width": "100%" }, "&[data-state]": { "background": "#e9e5dc" }, "&[data-state=\"loading\"]": { "[data-state-details]": { "display": "none" } } }, ".card-wrapper": { "@media (max-width: 767px)": { "padding": "2rem 1.5rem" }, "@media (min-width: 768px)": { "padding": "2.25rem" }, "background": "@cardsBg" }, ".text-wrapper": { "padding": "0 1rem" }, ".cardTitle, .item-wrap": { "@media (max-width: 767px)": { "text-align": "center" } }, "ul": { "list-style-type": "none", "padding": "0", "margin": "0" } }, "_name": "contacts02", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"contacts2 map1\" group=\"Contact\" mbr-class=\"{'mbr-parallax-background': bg.parallax}\">\n\n <mbr-parameters>\n <header>Size</header>\n <input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n <input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n <input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"6\">\n <header>Show/Hide</header>\n <input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n <input type=\"checkbox\" title=\"Subtitle\" name=\"showSubtitle\">\n <input type=\"color\" title=\"Card BG\" name=\"cardsBg\" value=\"#ffffff\">\n <header>Map</header>\n <input type=\"map\" title=\"Map\" name=\"googleMap\">\n <header>Background</header>\n <fieldset type=\"background\" name=\"bg\" parallax>\n <input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\" parallax>\n <input type=\"color\" title=\"Color\" value=\"#f7f7f7\" selected>\n </fieldset>\n <input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\" checked>\n <input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#000000\" condition=\"overlay && bg.type !== 'color'\">\n <input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.5\" condition=\"overlay && bg.type !== 'color'\">\n </mbr-parameters>\n\n <div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\" opacity=\"{{overlayOpacity}}\" bg-color=\"{{overlayColor}}\"></div>\n <div mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n <div class=\"mbr-section-head mb-5\" mbr-if=\"showTitle \|\| showSubtitle\">\n <h3 class=\"mbr-section-title mbr-fonts-style align-center mb-0\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\" data-app-selector=\".mbr-section-title\">\n <b>Contacts</b>\n </h3>\n <h4 class=\"mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-4\" mbr-theme-style=\"display-5\" mbr-if=\"showSubtitle\" data-app-selector=\".mbr-section-subtitle\">\n Contacts Subtitle\n </h4>\n </div>\n <div class=\"row justify-content-center mt-4\">\n <div class=\"card col-12 col-md-5\">\n <div class=\"card-wrapper\">\n <div class=\"text-wrapper\">\n <h5 mbr-text class=\"cardTitle mbr-fonts-style mb-2\" data-app-selector=\".cardTitle\" mbr-theme-style=\"display-5\" mbr-if=\"showTitle\">\n <b>Get in touch</b></h5>\n <ul class=\"list mbr-fonts-style\" mbr-theme-style=\"display-7\" data-app-selector=\".list, .item-wrap\" data-multiline mbr-article>\n <li class=\"mbr-text item-wrap\"><span style=\"font-size: 1.4rem;\">Phone: </span><a href=\"tel:+12345678910\" class=\"text-primary\" style=\"font-size: 1.4rem;\">0 (800) 123 45 67</a><br></li>\n <li class=\"mbr-text item-wrap\">WhatsApp: <a href=\"https://wa.me/12345678910\" class=\"text-primary\">0 (800) 123 45 67</a></li>\n <li class=\"mbr-text item-wrap\">Email: <a href=\"mailto:info@site.com\" class=\"text-primary\">info@site.com</a></li><li class=\"mbr-text item-wrap\"><br></li>\n <li class=\"mbr-text item-wrap\">Address: </li><li class=\"mbr-text item-wrap\">350 5th Ave, New York, NY 10118</li><li class=\"mbr-text item-wrap\"><span style=\"font-size: 1.4rem;\">Working hours:</span><br></li><li class=\"mbr-text item-wrap\">9:00AM - 6:00PM</li>\n </ul>\n </div>\n </div>\n </div>\n <div class=\"map-wrapper col-12 col-md-7\">\n <div class=\"google-map\" mbr-map=\"googleMap\">\n </div>\n </div>\n </div>\n </div>\n</section>", "_cid": "tLdYHD757A", "_anchor": "contacts02-9", "_PHPplaceholders": [], "_JSplaceholders": [], "_protectedParams": [], "_global": false, "_once": false, "_params": {} } ] }, "page1.html": { "settings": { "title": "Page 1", "order": "1" }, "components": [ { "alias": false, "_styles": { "& when not (@fullScreen)": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)" }, "& when (@bg-type = \"image\")": { "background-image": "url(@bg-value)" }, "& when (@bg-type = \"color\")": { "background-color": "@bg-value" }, ".content-head": { "max-width": "800px" } }, "_name": "header12", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"header12\" group=\"Headers\" mbr-class=\"{\n 'mbr-fullscreen': fullScreen,\n 'mbr-parallax-background': bg.parallax}\">\n <mbr-parameters>\n <header>Size</header>\n <input type=\"checkbox\" title=\"Full Screen\" name=\"fullScreen\">\n <input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n <input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"12\" step=\"1\" value=\"5\" condition=\"fullScreen == false\">\n <input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"12\" step=\"1\" value=\"0\" condition=\"fullScreen == false\">\n <input type=\"range\" name=\"imageWidth\" title=\"Image Width\" min=\"4\" max=\"12\" step=\"1\" value=\"4\" condition=\"showImage\">\n\n <header>Show/Hide</header>\n <input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n <input type=\"checkbox\" title=\"Text\" name=\"showText\" checked>\n <input type=\"checkbox\" title=\"Buttons\" name=\"showButtons\">\n <input type=\"checkbox\" title=\"Image\" name=\"showImage\" checked>\n\n <header>Background</header>\n <fieldset type=\"background\" name=\"bg\" parallax>\n <input type=\"image\" title=\"Image\" value=\"@PROJECT_PATH@/assets/images/90239460-573185343282030-7328146051670474752-n-960x640.jpg\" selected>\n <input type=\"color\" title=\"Color\" value=\"#edefeb\">\n </fieldset>\n <input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\" checked>\n <input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffffff\" condition=\"overlay && bg.type !== 'color'\">\n <input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.8\" condition=\"overlay && bg.type !== 'color'\">\n </mbr-parameters>\n <div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\" opacity=\"{{overlayOpacity}}\" bg-color=\"{{overlayColor}}\"></div>\n\n <div class=\"text-center\" mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n <div class=\"row mb-4 justify-content-center\" mbr-if=\"showImage\">\n <div class=\"col-12 col-md-{{imageWidth}}\">\n <img class=\"w-100\" src=\"@PROJECT_PATH@/assets/images/441409608-458691973478879-1314033377749909403-n-1-1152x2048.jpeg\" alt=\"Mobirise Website Builder\">\n </div>\n </div>\n <div class=\"row justify-content-center\">\n <div class=\"col-md-12 content-head\">\n <h1 class=\"mbr-section-title mbr-fonts-style mb-4\" data-app-selector=\".mbr-section-title\" mbr-theme-style=\"display-1\" mbr-if=\"showTitle\"><b>Portfolio</b></h1>\n <p class=\"mbr-text mbr-fonts-style mb-4\" mbr-theme-style=\"display-5\" mbr-if=\"showText\" data-app-selector=\".mbr-text, .mbr-section-btn\">นายศิริเฉลิม ไพโรจน์<br>โรงเรียนสารภีพิทยาคม<br><br></p>\n <div mbr-buttons mbr-theme-style=\"display-7\" class=\"mbr-section-btn mt-4\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove\"><a class=\"btn btn-primary\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">Download now</a></div>\n </div>\n </div>\n </div>\n</section>", "_cid": "udFywF7gcQ", "_protectedParams": [], "_global": false, "_once": false, "_params": {}, "_anchor": "header12-21" }, { "alias": false, "_styles": { "& when not (@fullScreen)": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)" }, "& when (@bg-type = 'color')": { "background-color": "@bg-value" }, "& when (@bg-type = 'image')": { "background-image": "url(@bg-value)" }, ".mbr-fallback-image.disabled": { "display": "none" }, ".mbr-fallback-image": { "display": "block", "background-size": "cover", "background-position": "center center", "width": "100%", "height": "100%", "position": "absolute", "top": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } }, "& when (@reverseContent)": { ".row": { "flex-direction": "row-reverse" } }, ".mbr-description": { "text-align": "left" }, ".item-wrapper": { "background": "@cardbg", "margin-bottom": "2rem", "padding": "2.25rem", "@media (max-width: 767px)": { "padding": "2rem 1.5rem", "margin-bottom": "1rem" }, "@media (min-width: 992px) and (max-width: 1200px)": { "padding": "2rem 1.5rem", "margin-bottom": "2rem" } }, ".card-title, .iconfont-wrapper": { "color": "#000000" }, ".card-text": { "color": "#000000" }, ".mbr-section-title": { "color": "#000000", "text-align": "center" }, ".mbr-number": { "color": "#9fe870" }, ".mbr-text, .mbr-section-btn": { "text-align": "center" }, ".card-text, .item .mbr-section-btn": { "text-align": "left" }, ".image-wrapper": { "margin-bottom": "2rem", "@media (max-width: 767px)": { "margin-bottom": "1rem" } } }, "_name": "features028", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"features028\" group=\"Features\" data-bg-video=\"{{bg.type == 'video' && bg.value.url}}\" mbr-class=\"{'mbr-fullscreen': fullScreen,'mbr-parallax-background': bg.parallax}\">\n\t<mbr-parameters>\n\t\t<header>Size</header>\n\t\t<input type=\"checkbox\" title=\"Full Screen\" name=\"fullScreen\">\n\t\t<input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n\t\t<input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"10\" step=\"1\" value=\"4\" condition=\"fullScreen == false\">\n\t\t<input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"8\" condition=\"fullScreen == false\">\n\t\t<input type=\"checkbox\" title=\"Reverse\" name=\"reverseContent\" checked>\n\t\t<header>Show/Hide</header>\n\t\t<input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n\t\t<input type=\"checkbox\" title=\"Text\" name=\"showText\">\n\t\t<input type=\"range\" name=\"imageWidth\" title=\"Image\" min=\"4\" max=\"8\" step=\"1\" value=\"5\">\n\t\t<header>Card</header>\n\t\t<input type=\"checkbox\" title=\"Card Title\" name=\"showCardTitle\" checked>\n\t\t<input type=\"checkbox\" title=\"Card Subtitle\" name=\"showCardSubtitle\">\n\t\t<input type=\"checkbox\" name=\"showButtons\" title=\"Buttons\">\n\t\t<input type=\"color\" title=\"Card BG\" name=\"cardbg\" value=\"#ffffff\" selected>\n\n\t\t<header>Background</header>\n\t\t<fieldset type=\"background\" name=\"bg\" parallax>\n\t\t\t<input type=\"image\" title=\"Image\" value=\"@PROJECT_PATH@/assets/images/nissan-gt-r-r35-premium-edition-2023-36d7d33b8679fd18-1024x682.jpg\" selected>\n\t\t\t<input type=\"color\" title=\"Color\" value=\"#edefeb\">\n\t\t\t<input type=\"video\" title=\"Video\" value=\"https://vimeo.com/428046504\">\n\t\t</fieldset>\n\t\t<header condition=\"bg.type === 'video'\">Fallback Image</header>\n\t\t<input type=\"image\" title=\"Fallback Image\" value=\"@PROJECT_PATH@/assets/images/background1.jpg\" name=\"fallBackImage\" condition=\"bg.type === 'video'\">\n\t\t<input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" condition=\"bg.type !== 'color'\" checked>\n\t\t<input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffffff\" condition=\"overlay && bg.type !== 'color'\">\n\t\t<input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.7\" condition=\"overlay && bg.type !== 'color'\">\n\t</mbr-parameters>\n\n\t<div class=\"mbr-fallback-image disabled\" mbr-if=\"bg.type == 'video'\"></div>\n\t<div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type!== 'color'\" mbr-style=\"{'opacity': overlayOpacity, 'background-color': overlayColor}\"></div>\n\t<div mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n\t\t<div class=\"row justify-content-center\" mbr-if=\"showTitle \|\| showText\">\n\t\t\t<div class=\"col-md-12 content-head mb-5\">\n\t\t\t\t<h1 class=\"mbr-section-title mbr-fonts-style mb-0\" data-app-selector=\".mbr-section-title\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\"><b>ประวัติส่วนตัว</b></h1>\n\t\t\t\t<p class=\"mbr-text mbr-fonts-style mt-4 mb-0\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".mbr-text, .mbr-section-btn\">\n\t\t\t\t\tGreat for pro-coders for fast prototyping and small customers' projects.\n\t\t\t\t</p>\n\t\t\t</div>\n\t\t</div>\n\n\n\t\t<div class=\"row justify-content-center blockContent\">\n\n\t\t\t<div class=\"col-12 col-lg\">\n\n\n\t\t\t\t<div class=\"item features-without-image col-12 col-md-12 col-lg-12 active\">\n\t\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t\t<div class=\"item-content\">\n\t\t\t\t\t\t\t<h5 class=\"mbr-card-title mbr-fonts-style mt-0 mb-3 mbr-number\" mbr-if=\"showCardTitle\" data-app-selector=\".mbr-number\" mbr-theme-style=\"display-2\">\n\t\t\t\t\t\t\t\t<b>01. ข้อมูลส่วนตัว</b></h5>\n\t\t\t\t\t\t\t<h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardSubtitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t\t<b>Form</b>\n\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t<p class=\"card-text mbr-fonts-style mt-0 mb-0\" data-app-selector=\".card-text, .item .mbr-section-btn\" mbr-theme-style=\"display-7\">ชื่อ-นามสกุล : ศิริเฉลิม ไพโรจน์<br>ชื่อเล่น : พริ้ว<br>อายุ : 18<br>วันเดือนปีเกิด : 27/11/20xx</p>\n\t\t\t\t\t\t\t<div class=\"mbr-section-btn item-footer mt-3\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove,-mbrBtnAdd\" mbr-buttons mbr-theme-style=\"display-7\">\n\t\t\t\t\t\t\t\t<a href class=\"btn item-btn btn-primary\" data-app-placeholder=\"Type Text\">\n\t\t\t\t\t\t\t\t\tLearn more</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"item features-without-image col-12 col-md-12 col-lg-12\">\n\t\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t\t<div class=\"item-content\">\n\t\t\t\t\t\t\t<h5 class=\"mbr-card-title mbr-fonts-style mt-0 mb-3 mbr-number\" mbr-if=\"showCardTitle\" data-app-selector=\".mbr-number\" mbr-theme-style=\"display-2\">\n\t\t\t\t\t\t\t\t<b>02. การศึกษา</b></h5>\n\t\t\t\t\t\t\t<h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardSubtitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t\t<b>Content</b>\n\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t<p class=\"card-text mbr-fonts-style mt-0 mb-0\" data-app-selector=\".card-text, .item .mbr-section-btn\" mbr-theme-style=\"display-7\">กำลังศึกษาอยู่ระดับชั้น : ปวส1<br>แผนก : อิเล็กทรอนิกส์<br>สาขาวิชา : คอมพิวเตอร์ระบบเครื่อข่าย<br>สถานศึกษา : วิทยาลัยเทคนิคเชียงใหม่</p>\n\t\t\t\t\t\t\t<div class=\"mbr-section-btn item-footer mt-3\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove,-mbrBtnAdd\" mbr-buttons mbr-theme-style=\"display-7\">\n\t\t\t\t\t\t\t <a href class=\"btn item-btn btn-primary\" data-app-placeholder=\"Type Text\">\n\t\t\t\t\t\t\t\t\tLearn more\n\t\t\t\t\t\t\t\t</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"item features-without-image col-12 col-md-12 col-lg-12\">\n\t\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t\t<div class=\"item-content\">\n\t\t\t\t\t\t\t<h5 class=\"mbr-card-title mbr-fonts-style mt-0 mb-3 mbr-number\" mbr-if=\"showCardTitle\" data-app-selector=\".mbr-number\" mbr-theme-style=\"display-2\">\n\t\t\t\t\t\t\t\t<b>03.ติดต่อ</b></h5>\n\t\t\t\t\t\t\t<h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardSubtitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t\t<b>Meaning</b>\n\t\t\t\t\t\t\t</h4>\n\t\t\t\t\t\t\t<p class=\"card-text mbr-fonts-style mt-0 mb-0\" data-app-selector=\".card-text, .item .mbr-section-btn\" mbr-theme-style=\"display-7\">เบอร์โทร : 062-184-3974<br>E-mail : sirichalerm6312.4@gmail.com<br>FB : Sirichalerm Pairoj<br>IG : Siri_6312</p>\n\t\t\t\t\t\t\t<div class=\"mbr-section-btn item-footer mt-3\" mbr-if=\"showButtons\" data-toolbar=\"-mbrBtnMove,-mbrBtnAdd\" mbr-buttons mbr-theme-style=\"display-7\">\n\t\t\t\t\t\t\t\t<a href class=\"btn item-btn btn-primary\" data-app-placeholder=\"Type Text\">Learn more</a>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class=\"col-12 col-lg-{{imageWidth}}\">\n\t\t\t\t<div class=\"image-wrapper\">\n\t\t\t\t\t<img class=\"w-100\" src=\"@PROJECT_PATH@/assets/images/428691600-1739772046548775-2805489217314282823-n-1036x1036.jpg\" alt=\"Mobirise Website Builder\">\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>", "_anchor": "features028-1z", "_isUserblock": true, "_cid": "udFs6djOfS", "_protectedParams": [], "_global": false, "_once": false, "_params": {} }, { "alias": false, "_styles": { "padding-top": "(@paddingTop * 1rem)", "padding-bottom": "(@paddingBottom * 1rem)", "& when (@bg-type = \"color\")": { "background-color": "@bg-value" }, "& when (@bg-type = \"image\")": { "background-image": "url(@bg-value)" }, ".mbr-fallback-image.disabled": { "display": "none" }, ".mbr-fallback-image": { "display": "block", "background-size": "cover", "background-position": "center center", "width": "100%", "height": "100%", "position": "absolute", "top": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } }, ".mbr-text": { "color": "#767676" }, ".mbr-section-subtitle": { "color": "#767676" }, ".title": { ".num": { "width": "100%", "display": "block" }, ".card-title": { "z-index": "1" } }, ".num": { "color": "#6592e6" }, "@media (max-width: 767px)": { "*": { "text-align": "center !important" }, ".content-column": { "margin-bottom": "2rem" } } }, "_name": "features23", "_sourceTheme": "mobirise5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"features23\" group=\"Features\" data-bg-video=\"{{bg.type == 'video' && bg.value.url}}\" mbr-class=\"{'mbr-parallax-background': bg.parallax}\">\n\n <mbr-parameters>\n <!-- Block parameters controls (Blue \"Gear\" panel) -->\n <header>Size</header>\n <input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\">\n <input type=\"range\" inline title=\"Top\" name=\"paddingTop\" min=\"0\" max=\"9\" step=\"1\" value=\"6\">\n <input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"9\" step=\"1\" value=\"6\">\n <select title=\"Steps\" name=\"cardsAmount\">\n <option value=\"1\">1</option>\n <option value=\"2\">2</option>\n <option value=\"3\" selected>3</option>\n <option value=\"4\">4</option>\n <option value=\"5\">5</option>\n <option value=\"6\">6</option>\n <option value=\"7\">7</option>\n <option value=\"8\">8</option>\n </select>\n <header>Show/Hide</header>\n <input type=\"checkbox\" title=\"Title\" name=\"showTitle\">\n <input type=\"checkbox\" title=\"Text\" name=\"showText\">\n <input type=\"checkbox\" title=\"Button\" name=\"showButton\">\n <header>Step</header>\n <input type=\"checkbox\" title=\"Title\" name=\"showCardTitle\" checked>\n <input type=\"checkbox\" title=\"Text\" name=\"showCardText\" checked>\n\n <fieldset type=\"background\" name=\"bg\" parallax>\n <input type=\"image\" title=\"Background Image\" value=\"@PROJECT_PATH@/assets/images/15151-1-5-2-1600x847.jpg\" parallax selected>\n <input type=\"color\" title=\"Background Color\" value=\"#ffffff\">\n <input type=\"video\" title=\"Background Video\" value=\"https://www.youtube.com/watch?v=-BSQlJxCDcI\">\n </fieldset>\n <header condition=\"bg.type === 'video'\">Fallback Image</header>\n <input type=\"image\" title=\"Fallback Image\" value=\"../_images/background13.jpg\" name=\"fallBackImage\" condition=\"bg.type === 'video'\">\n <input type=\"checkbox\" title=\"Overlay\" name=\"overlay\" checked condition=\"bg.type !== 'color'\">\n <input type=\"color\" title=\"Overlay Color\" name=\"overlayColor\" value=\"#ffffff\" condition=\"overlay && bg.type !== 'color'\">\n <input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.9\" condition=\"overlay && bg.type !== 'color'\">\n <!-- End block parameters -->\n </mbr-parameters>\n\n <div class=\"mbr-fallback-image disabled\" mbr-if=\"bg.type == 'video'\"></div>\n <div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type!== 'color'\" mbr-style=\"{'opacity': overlayOpacity, 'background-color': overlayColor}\">\n </div>\n <div mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n <div class=\"card-wrapper\">\n <div class=\"card-box align-left\">\n <h4 class=\"mbr-section-title mbr-fonts-style\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\" data-app-selector=\".mbr-section-title, .card-box\">\n <b>What is Mobirise?</b>\n </h4>\n <p class=\"mbr-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".mbr-text, .mbr-section-btn\">\n Mobirise is a free offline app for Windows and Mac to easily create small/medium websites, landing\n pages, online resumes and portfolios. 2500+ beautiful website blocks, templates and themes help you\n to start easily.</p>\n <div mbr-buttons mbr-theme-style=\"display-4\" class=\"mbr-section-btn\" data-toolbar=\"-mbrBtnMove\" mbr-if=\"showButton\">\n <a class=\"btn btn-primary\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">Create your own\n site</a>\n </div>\n </div>\n </div>\n <!-- col-12 col-md-6 col-lg-4 -->\n <div class=\"row justify-content-center content-row mt-4\">\n <div class=\"card p-4 p-md-3\" mbr-class=\"{'col-md-6 col-lg-3':cardsAmount>='4',\n 'col-md-6 col-lg-4':cardsAmount=='3',\n 'col-md-6':cardsAmount<3}\">\n <div class=\"card-box\" mbr-if=\"showCardTitle\|\|showCardText\">\n <div class=\"title\">\n <span class=\"num mbr-fonts-style\" mbr-theme-style=\"display-1\" mbr-text data-app-selector=\".num\"><b>01.</b></span>\n </div>\n <h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title, .card-img\"><b>ความสามารถ</b></h4>\n <p class=\"mbr-text card-text mbr-fonts-style \" mbr-theme-style=\"display-7\" mbr-if=\"showCardText\" data-app-selector=\".card-text\">เล่นกีฬา บาสเกตบอล<br>เรียนรู้ไว</p>\n </div>\n </div>\n <div class=\"card p-4 p-md-3\" mbr-if=\"cardsAmount > 1\" mbr-class=\"{'col-md-6 col-lg-3':cardsAmount>='4',\n 'col-md-6 col-lg-4':cardsAmount=='3',\n 'col-md-6':cardsAmount<3}\">\n <div class=\"card-box\" mbr-if=\"showCardTitle\|\|showCardText\">\n <div class=\"title\">\n <span class=\"num mbr-fonts-style\" mbr-theme-style=\"display-1\" mbr-text data-app-selector=\".num\"><b>02.</b></span>\n </div>\n <h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title, .card-img\"><b>งานอดิเรก</b></h4>\n <p class=\"mbr-text card-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showCardText\" data-app-selector=\".card-text\">เล่นเกม<br>เล่นบาสเกตบอล</p>\n </div>\n </div>\n <div class=\"card p-4 p-md-3\" mbr-if=\"cardsAmount>2\" mbr-class=\"{'col-md-6 col-lg-3':cardsAmount>='4',\n 'col-md-6 col-lg-4':cardsAmount=='3',\n 'col-md-6':cardsAmount<3}\">\n <div class=\"card-box\" mbr-if=\"showCardTitle\|\|showCardText\">\n <div class=\"title\">\n <span class=\"num mbr-fonts-style\" mbr-theme-style=\"display-1\" mbr-text data-app-selector=\".num\"><b>03.</b></span>\n </div>\n <h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title, .card-img\"><b>สิ่งที่ชอบ</b></h4>\n <p class=\"mbr-text card-text mbr-fonts-style \" mbr-theme-style=\"display-7\" mbr-if=\"showCardText\" data-app-selector=\".card-text\">ชอบรถแข่ง<br>ชอบเล่นเกม<br>ชอบนอน</p>\n </div>\n </div>\n <div class=\"card p-4 p-md-3\" mbr-if=\"cardsAmount > 3\" mbr-class=\"{'col-md-6 col-lg-3':cardsAmount>='4',\n 'col-md-4':cardsAmount=='3',\n 'col-md-6':cardsAmount<3}\">\n <div class=\"card-box\" mbr-if=\"showCardTitle\|\|showCardText\">\n <div class=\"title\">\n <span class=\"num mbr-fonts-style\" mbr-theme-style=\"display-1\" mbr-text data-app-selector=\".num\"><b>04.</b></span>\n </div>\n <h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title, .card-img\">\n <b>Our Philosophy</b>\n </h4>\n <p class=\"mbr-text card-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showCardText\" data-app-selector=\".card-text\">\n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n </p>\n </div>\n </div>\n <div class=\"card p-4 p-md-3\" mbr-if=\"cardsAmount > 4\" mbr-class=\"{'col-md-6 col-lg-3':cardsAmount>='4',\n 'col-md-6 col-lg-4':cardsAmount=='3',\n 'col-md-6':cardsAmount==5}\">\n <div class=\"card-box\" mbr-if=\"showCardTitle\|\|showCardText\">\n <div class=\"title\">\n <span class=\"num mbr-fonts-style\" mbr-theme-style=\"display-1\" mbr-text data-app-selector=\".num\"><b>05.</b></span>\n </div>\n <h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title, .card-img\">\n <b>Specification</b>\n </h4>\n <p class=\"mbr-text card-text mbr-fonts-style \" mbr-theme-style=\"display-7\" mbr-if=\"showCardText\" data-app-selector=\".card-text\">\n Mobirise is perfect for non-techies who are not familiar with the intricacies of web\n development.\n </p>\n </div>\n </div>\n <div class=\"card p-4 p-md-3\" mbr-if=\"cardsAmount > 5\" mbr-class=\"{'col-md-6 col-lg-3':cardsAmount>='4',\n 'col-md-6 col-lg-4':cardsAmount=='3',\n 'col-md-6':cardsAmount<3}\">\n <div class=\"card-box\" mbr-if=\"showCardTitle\|\|showCardText\">\n <div class=\"title\">\n <span class=\"num mbr-fonts-style\" mbr-theme-style=\"display-1\" mbr-text data-app-selector=\".num\"><b>06.</b></span>\n </div>\n <h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title, .card-img\">\n <b>Project Planning</b>\n </h4>\n <p class=\"mbr-text card-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showCardText\" data-app-selector=\".card-text\">\n Mobirise is perfect for non-techies who are not familiar with the intricacies of web\n development.\n </p>\n </div>\n </div>\n <div class=\"card p-4 p-md-3\" mbr-if=\"cardsAmount>6\" mbr-class=\"{'col-md-6 col-lg-3':cardsAmount>='4',\n 'col-md-6 col-lg-4':cardsAmount=='3',\n 'col-md-6':cardsAmount<3}\">\n <div class=\"card-box\" mbr-if=\"showCardTitle\|\|showCardText\">\n <div class=\"title\">\n <span class=\"num mbr-fonts-style\" mbr-theme-style=\"display-1\" mbr-text data-app-selector=\".num\"><b>07.</b></span>\n </div>\n <h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title, .card-img\">\n <b>Deployment</b>\n </h4>\n <p class=\"mbr-text card-text mbr-fonts-style \" mbr-theme-style=\"display-7\" mbr-if=\"showCardText\" data-app-selector=\".card-text\">\n Mobirise is perfect for non-techies who are not familiar with the intricacies of web\n development.\n </p>\n </div>\n </div>\n <div class=\"card p-4 p-md-3\" mbr-if=\"cardsAmount > 7\" mbr-class=\"{'col-md-6 col-lg-3':cardsAmount>='4',\n 'col-md-4':cardsAmount=='3',\n 'col-md-6':cardsAmount<3}\">\n <div class=\"card-box\" mbr-if=\"showCardTitle\|\|showCardText\">\n <div class=\"title\">\n <span class=\"num mbr-fonts-style\" mbr-theme-style=\"display-1\" mbr-text data-app-selector=\".num\"><b>08.</b></span>\n </div>\n <h4 class=\"card-title mbr-fonts-style\" mbr-theme-style=\"display-5\" mbr-if=\"showCardTitle\" data-app-selector=\".card-title, .card-img\">\n <b>Our Philosophy</b>\n </h4>\n <p class=\"mbr-text card-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showCardText\" data-app-selector=\".card-text\">\n Lorem ipsum dolor sit amet, consectetur adipisicing elit.\n </p>\n </div>\n </div>\n </div>\n </div>\n</section>", "_cid": "udFOpXNELd", "_protectedParams": [], "_global": false, "_once": false, "_params": {}, "_anchor": "features23-22" } ] } } }

| ver. 1.4 | Github | . | PHP 7.4.33 | Generation time: 0.47 | proxy | phpinfo | Settings