File manager

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

Back
{ "settings": { "id": 457736, "title": "", "timeLastAccess": 1716305266124, "domains": [ { "id": 0, "name": "boontangmai.mobirisesite.com", "status": { "type": "success", "name": "Deployed", "description": "Deployed" } } ], "licenses": [], "publicUrl": "https://boontangmai.mobirisesite.com/", "resourcesUrl": "https://r.mobirisesite.com/457736/", "path": "@SITES@/457736", "name": "Boon Tangmai", "currentPage": "index.html", "ai": { "imageSearchQuery": "portfolio" }, "theme": { "name": "startm5", "title": "StartM5", "styling": { "backgroundColor": "#FFF0E6", "primaryColor": "#023E8A", "secondaryColor": "#F4A340", "successColor": "#20AC6B", "infoColor": "#0AA3C2", "warningColor": "#CC9900", "dangerColor": "#ae1e2c", "mainFont": "Source Serif 4", "display1Font": "Source Serif 4", "display1Size": 5, "display2Font": "Source Serif 4", "display2Size": 4, "display5Font": "Source Serif 4", "display5Size": 2.5, "display7Font": "Source Serif 4", "display7Size": 1.4, "display4Font": "Source Serif 4", "display4Size": 1.2, "isRoundedImages": true, "isRoundedButtons": true, "isLargeButtons": true, "isGhostButtonBorder": true, "underlinedLinks": false, "isAnimatedOnScroll": false, "isScrollToTopButton": false }, "settings": [ { "type": "title", "title": "Site Styles" }, { "type": "subtitle", "title": "Colors" }, { "var": "backgroundColor", "type": "color", "title": "Background", "groupName": "colors", "default": "#ffffff" }, { "var": "primaryColor", "type": "color", "title": "Primary", "groupName": "colors", "default": "#9fe870" }, { "type": "colors", "title": "Buttons and Links", "groupName": "colors", "set": [ { "var": "secondaryColor", "default": "#ffd7ef" }, { "var": "successColor", "default": "#3a341c" }, { "var": "infoColor", "default": "#320707" }, { "var": "warningColor", "default": "#a0e2e1" }, { "var": "dangerColor", "default": "#ffea64" } ] }, { "type": "subtitle", "title": "Fonts" }, { "var": "mainFont", "default": "Inter Tight" }, { "type": "group", "rule": ".mbr-fonts-style, [mbr-buttons], [mbr-menu]", "title": "Title 1", "name": "display-1", "set": [ { "type": "font", "var": "display1Font", "default": "Inter Tight" }, { "type": "range", "min": 0.4, "max": 12, "step": 0.2, "var": "display1Size", "default": 5 } ] }, { "type": "group", "rule": ".mbr-fonts-style, [mbr-buttons], [mbr-menu]", "title": "Title 2", "name": "display-2", "set": [ { "type": "font", "var": "display2Font", "default": "Inter Tight" }, { "type": "range", "min": 0.4, "max": 6, "step": 0.2, "var": "display2Size", "default": 4 } ] }, { "type": "group", "rule": ".mbr-fonts-style, [mbr-buttons], [mbr-menu]", "title": "Title 3", "name": "display-5", "set": [ { "type": "font", "var": "display5Font", "default": "Inter Tight" }, { "type": "range", "min": 0.4, "max": 3, "step": 0.2, "var": "display5Size", "default": 2 } ] }, { "type": "group", "rule": ".mbr-fonts-style, [mbr-buttons], [mbr-menu]", "title": "Text", "name": "display-7", "set": [ { "type": "font", "var": "display7Font", "default": "Inter Tight" }, { "type": "range", "min": 0.4, "max": 2, "step": 0.2, "var": "display7Size", "default": 1.4 } ] }, { "type": "group", "rule": ".mbr-fonts-style, [mbr-buttons], [mbr-menu]", "title": "Menu", "name": "display-4", "set": [ { "type": "font", "var": "display4Font", "default": "Inter Tight" }, { "type": "range", "min": 0.4, "max": 2, "step": 0.2, "var": "display4Size", "default": 1.4 } ] }, { "type": "subtitle", "title": "Options" }, { "var": "isRoundedImages", "type": "switch", "title": "Rounded Corners", "default": true }, { "var": "isRoundedButtons", "type": "switch", "title": "Rounded Buttons", "default": true }, { "var": "isLargeButtons", "type": "switch", "title": "Large Buttons", "default": true }, { "var": "isGhostButtonBorder", "default": true }, { "var": "underlinedLinks", "type": "switch", "title": "Underlined Links", "default": false }, { "var": "isAnimatedOnScroll", "type": "switch", "title": "Animation on Scroll", "default": false }, { "var": "isScrollToTopButton", "type": "switch", "title": "Scroll to Top Button", "default": false } ], "dynamicStyles": "@isPublish: false;\n\n@btn-font-size: 1rem;\n@btn-border-radius: 4px;\n@btn-padding-y: 1.25rem;\n@btn-padding-x: 2rem;\n\n@btn-font-size-sm: .8rem;\n@btn-border-radius-sm: 4px;\n@btn-padding-y-sm: .6rem;\n@btn-padding-x-sm: 1.2rem;\n\n@btn-font-size-md: .8rem;\n@btn-border-radius-md: 4px;\n@btn-padding-y-md: .6rem;\n@btn-padding-x-md: 1.2rem;\n\n@btn-font-size-lg: 1rem;\n@btn-border-radius-lg: 4px;\n@btn-padding-y-lg: 1.25rem;\n@btn-padding-x-lg: 2rem;\n\n.btn when (@isGhostButtonBorder) {\n border-width: 2px;\n}\n\nimg,\n.card-wrap,\n.card-wrapper,\n.video-wrapper,\n.mbr-figure iframe,\n.google-map iframe,\n.slide-content,\n.plan,\n.card,\n.item-wrapper {\n\n & when not (@isRoundedImages) {\n border-radius: 0 !important;\n }\n\n & when (@isRoundedImages) {\n border-radius: 2rem !important;\n }\n}\n\n.video-wrapper {\n overflow: hidden;\n}\n\n// .btn when not (@isLargeButtons) {\n// padding: 0.75rem 1.5rem !important;\n// }\n\n// .btn when (@isLargeButtons) {\n// @media (max-width: 767px) {\n// padding: 0.75rem 1.5rem !important;\n// }\n// }\n\n// BACKGROUND\n\nbody {\n background-color: @backgroundColor;\n}\n\n// fix for builder\n& when not (@isPublish) {\n .is-builder .template {\n background-color: @backgroundColor;\n }\n}\n\n// FONTS\n\nbody {\n font-family: @mainFont;\n}\n\n.display-1 {\n font-family: @display1Font;\n font-size: @display1Size 1rem;\n line-height: 1;\n\n >.mbr-iconfont {\n font-size: @display1Size 1.25rem;\n }\n}\n\n.display-2 {\n font-family: @display2Font;\n font-size: @display2Size 1rem;\n line-height: 1;\n\n >.mbr-iconfont {\n font-size: @display2Size 1.25rem;\n }\n}\n\n.display-4 {\n font-family: @display4Font;\n font-size: @display4Size 1rem;\n line-height: 1.5;\n\n >.mbr-iconfont {\n font-size: @display4Size 1.25rem;\n }\n}\n\n.display-5 {\n font-family: @display5Font;\n font-size: @display5Size 1rem;\n line-height: 1.5;\n\n >.mbr-iconfont {\n font-size: @display5Size 1.25rem;\n }\n}\n\n.display-7 {\n font-family: @display7Font;\n font-size: @display7Size 1rem;\n line-height: 1.3;\n\n >.mbr-iconfont {\n font-size: @display7Size 1.25rem;\n }\n}\n\n/* ---- Fluid typography for mobile devices ---- /\n\n/ 1.4 - font scale ratio ( bootstrap == 1.42857 ) /\n/ 100vw - current viewport width /\n/ (48 - 20) 48 == 48rem == 768px, 20 == 20rem == 320px(minimal supported viewport) /\n/ 0.65 - min scale variable, may vary /\n\n\n@media (max-width: 992px) {\n .display-1 {\n font-size: @display1Size 0.8rem;\n }\n}\n\n@media (max-width: 768px) {\n .display-1 {\n @display1Size-min: @display1Size - (@display1Size - 1) * 0.65;\n font-size: @display1Size * 0.7rem;\n font-size:~\"calc( @{display1Size-min}rem + (@{display1Size} - @{display1Size-min}) * ((100vw - 20rem) / (48 - 20)))\";\n line-height:~\"calc( 1.1 * (@{display1Size-min}rem + (@{display1Size} - @{display1Size-min}) * ((100vw - 20rem) / (48 - 20))))\";\n }\n\n .display-2 {\n @display2Size-min: @display2Size - (@display2Size - 1) * 0.65;\n font-size: @display2Size * 0.8rem;\n font-size:~\"calc( @{display2Size-min}rem + (@{display2Size} - @{display2Size-min}) * ((100vw - 20rem) / (48 - 20)))\";\n line-height:~\"calc( 1.3 * (@{display2Size-min}rem + (@{display2Size} - @{display2Size-min}) * ((100vw - 20rem) / (48 - 20))))\";\n }\n\n .display-4 {\n @display4Size-min: @display4Size - (@display4Size - 1) * 0.65;\n font-size: @display4Size * 0.8rem;\n font-size:~\"calc( @{display4Size-min}rem + (@{display4Size} - @{display4Size-min}) * ((100vw - 20rem) / (48 - 20)))\";\n line-height:~\"calc( 1.4 * (@{display4Size-min}rem + (@{display4Size} - @{display4Size-min}) * ((100vw - 20rem) / (48 - 20))))\";\n }\n\n .display-5 {\n @display5Size-min: @display5Size - (@display5Size - 1) * 0.65;\n font-size: @display5Size * 0.8rem;\n font-size:~\"calc( @{display5Size-min}rem + (@{display5Size} - @{display5Size-min}) * ((100vw - 20rem) / (48 - 20)))\";\n line-height:~\"calc( 1.4 * (@{display5Size-min}rem + (@{display5Size} - @{display5Size-min}) * ((100vw - 20rem) / (48 - 20))))\";\n }\n\n .display-7 {\n @display7Size-min: @display7Size - (@display7Size - 1) * 0.65;\n font-size: @display7Size * 0.8rem;\n font-size:~\"calc( @{display7Size-min}rem + (@{display7Size} - @{display7Size-min}) * ((100vw - 20rem) / (48 - 20)))\";\n line-height:~\"calc( 1.4 * (@{display7Size-min}rem + (@{display7Size} - @{display7Size-min}) * ((100vw - 20rem) / (48 - 20))))\";\n }\n}\n\n@media (min-width: 992px) and (max-width: 1400px) {\n .display-1 {\n @display1Size-min: @display1Size - (@display1Size - 1) * 0.65;\n font-size: @display1Size * 0.7rem;\n font-size:~\"calc( @{display1Size-min}rem + (@{display1Size} - @{display1Size-min}) * ((100vw - 62rem) / (87 - 62)))\";\n line-height:~\"calc( 1.1 * (@{display1Size-min}rem + (@{display1Size} - @{display1Size-min}) * ((100vw - 62rem) / (87 - 62))))\";\n }\n\n .display-2 {\n @display2Size-min: @display2Size - (@display2Size - 1) * 0.65;\n font-size: @display2Size * 0.8rem;\n font-size:~\"calc( @{display2Size-min}rem + (@{display2Size} - @{display2Size-min}) * ((100vw - 62rem) / (87 - 62)))\";\n line-height:~\"calc( 1.3 * (@{display2Size-min}rem + (@{display2Size} - @{display2Size-min}) * ((100vw - 62rem) / (87 - 62))))\";\n }\n\n .display-4 {\n @display4Size-min: @display4Size - (@display4Size - 1) * 0.65;\n font-size: @display4Size * 0.8rem;\n font-size:~\"calc( @{display4Size-min}rem + (@{display4Size} - @{display4Size-min}) * ((100vw - 62rem) / (87 - 62)))\";\n line-height:~\"calc( 1.4 * (@{display4Size-min}rem + (@{display4Size} - @{display4Size-min}) * ((100vw - 62rem) / (87 - 62))))\";\n }\n\n .display-5 {\n @display5Size-min: @display5Size - (@display5Size - 1) * 0.65;\n font-size: @display5Size * 0.8rem;\n font-size:~\"calc( @{display5Size-min}rem + (@{display5Size} - @{display5Size-min}) * ((100vw - 62rem) / (87 - 62)))\";\n line-height:~\"calc( 1.4 * (@{display5Size-min}rem + (@{display5Size} - @{display5Size-min}) * ((100vw - 62rem) / (87 - 62))))\";\n }\n\n .display-7 {\n @display7Size-min: @display7Size - (@display7Size - 1) * 0.65;\n font-size: @display7Size * 0.8rem;\n font-size:~\"calc( @{display7Size-min}rem + (@{display7Size} - @{display7Size-min}) * ((100vw - 62rem) / (87 - 62)))\";\n line-height:~\"calc( 1.4 * (@{display7Size-min}rem + (@{display7Size} - @{display7Size-min}) * ((100vw - 62rem) / (87 - 62))))\";\n }\n}\n\n/* Buttons /\n.button-variant(@background) {\n @color: contrast(@background, darken(@background, 50%), #ffffff, 60%);\n @border: @background;\n @active-color: @color;\n @active-border: @active-background;\n\n @active-background: if(eq(@background, @color),\n #fafafa,\n lighten(@background, 10%));\n\n &,\n &:active {\n background-color: @background !important;\n border-color: @border !important;\n color: @color !important;\n box-shadow: none;\n }\n\n &:hover,\n &:focus,\n &.focus,\n &.active {\n color: inherit;\n background-color: @active-background !important;\n border-color: @active-border !important;\n box-shadow: none;\n }\n\n &.disabled,\n &:disabled {\n color: @active-color !important;\n background-color: @active-background !important;\n border-color: @active-border !important;\n }\n}\n\n.button-outline-variant(@color) {\n @active-color: contrast(@color, darken(@color, 50%), #ffffff, 60%);\n @active-background: @color;\n @new-color: if(eq(@color, @active-color),\n #fafafa,\n darken(@color, 17%));\n\n &,\n &:active {\n background-color: transparent !important;\n\n & when (@isGhostButtonBorder) {\n border-color: @color;\n }\n\n & when not (@isGhostButtonBorder) {\n border-color: transparent;\n }\n\n color: @color;\n }\n\n &:hover,\n &:focus,\n &.focus,\n &.active {\n color: @new-color !important;\n background-color: transparent !important;\n\n & when (@isGhostButtonBorder) {\n border-color: @new-color !important;\n }\n\n & when not (@isGhostButtonBorder) {\n border-color: transparent !important;\n }\n\n box-shadow: none !important;\n }\n\n &.disabled,\n &:disabled {\n color: @active-color !important;\n background-color: @active-background !important;\n border-color: @active-background !important;\n }\n}\n\n.plan-variant(@className, @color) {\n &@{className} {\n\n .mbr-plan-subtitle,\n .mbr-plan-price-desc {\n @max: max(red(@color), green(@color), blue(@color));\n\n & when (@max > 200) {\n color: lighten(@color, 40%);\n }\n\n & when (@max > 85) and (@max <=200) {\n color: lighten(@color, 25%);\n }\n\n & when (@max > 50) and (@max <=85) {\n color: lighten(@color, 45%);\n }\n\n & when (@max <=50) {\n color: lighten(@color, 70%);\n }\n }\n }\n}\n\n.button-size(@btn-padding-y, @btn-padding-x, @btn-font-size, @btn-border-radius) {\n padding: @btn-padding-y @btn-padding-x;\n border-radius: @btn-border-radius;\n}\n\n.btn {\n .button-size(@btn-padding-y, @btn-padding-x, @btn-font-size, @btn-border-radius);\n & when not (@isLargeButtons) {\n padding: 0.75rem 1.5rem;\n }\n & when (@isLargeButtons) {\n @media (max-width: 767px) {\n padding: 0.75rem 1.5rem;\n }\n }\n}\n\n.btn-sm {\n .button-size(@btn-padding-y-sm, @btn-padding-x-sm, @btn-font-size-sm, @btn-border-radius-sm);\n}\n\n.btn-md {\n .button-size(@btn-padding-y-md, @btn-padding-x-md, @btn-font-size-md, @btn-border-radius-md);\n}\n\n.btn-lg {\n .button-size(@btn-padding-y-lg, @btn-padding-x-lg, @btn-font-size-lg, @btn-border-radius-lg);\n}\n\n.bg-primary {\n background-color: @primaryColor !important;\n}\n\n.bg-success {\n background-color: @successColor !important;\n}\n\n.bg-info {\n background-color: @infoColor !important;\n}\n\n.bg-warning {\n background-color: @warningColor !important;\n}\n\n.bg-danger {\n background-color: @dangerColor !important;\n}\n\n.btn-primary {\n .button-variant(@primaryColor);\n}\n\n.btn-secondary {\n .button-variant(@secondaryColor);\n}\n\n.btn-info {\n .button-variant(@infoColor);\n}\n\n.btn-success {\n .button-variant(@successColor);\n}\n\n.btn-warning {\n .button-variant(@warningColor);\n}\n\n.btn-danger {\n .button-variant(@dangerColor);\n}\n\n.btn-white {\n .button-variant(#eff0ec);\n}\n\n.btn-black {\n .button-variant(#232323);\n}\n\n.btn-primary-outline {\n .button-outline-variant(@primaryColor);\n}\n\n.btn-secondary-outline {\n .button-outline-variant(@secondaryColor);\n}\n\n.btn-info-outline {\n .button-outline-variant(@infoColor);\n}\n\n.btn-success-outline {\n .button-outline-variant(@successColor);\n}\n\n.btn-warning-outline {\n .button-outline-variant(@warningColor);\n}\n\n.btn-danger-outline {\n .button-outline-variant(@dangerColor);\n}\n\n.btn-black-outline {\n .button-outline-variant(#232323);\n}\n\n.btn-white-outline {\n .button-outline-variant(#fafafa);\n}\n\n.text-primary {\n color: @primaryColor !important;\n}\n\n.text-secondary {\n color: @secondaryColor !important;\n}\n\n.text-success {\n color: @successColor !important;\n}\n\n.text-info {\n color: @infoColor !important;\n}\n\n.text-warning {\n color: @warningColor !important;\n}\n\n.text-danger {\n color: @dangerColor !important;\n}\n\n.text-white {\n color: #fafafa !important;\n}\n\n.text-black {\n color: #232323 !important;\n}\n\na.text-primary:hover,\na.text-primary:focus,\na.text-primary.active {\n color: darken(@primaryColor, 20%) !important;\n}\n\na.text-secondary:hover,\na.text-secondary:focus,\na.text-secondary.active {\n color: darken(@secondaryColor, 20%) !important;\n}\n\na.text-success:hover,\na.text-success:focus,\na.text-success.active {\n color: darken(@successColor, 20%) !important;\n}\n\na.text-info:hover,\na.text-info:focus,\na.text-info.active {\n color: darken(@infoColor, 20%) !important;\n}\n\na.text-warning:hover,\na.text-warning:focus,\na.text-warning.active {\n color: darken(@warningColor, 20%) !important;\n}\n\na.text-danger:hover,\na.text-danger:focus,\na.text-danger.active {\n color: darken(@dangerColor, 20%) !important;\n}\n\na.text-white:hover,\na.text-white:focus,\na.text-white.active {\n color: darken(#fafafa, 20%) !important;\n}\n\na.text-black:hover,\na.text-black:focus,\na.text-black.active {\n color: darken(#232323, 20%) !important;\n}\n\n& when (@underlinedLinks) {\n a[class=\"text-\"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption) {\n transition: 0.2s;\n position: relative;\n background-image: linear-gradient(currentColor 50%, currentColor 50%);\n background-size: 10000px 2px;\n background-repeat: no-repeat;\n background-position: 0 1.2em;\n }\n}\n\n& when not (@underlinedLinks) {\n a[class=\"text-\"]:not(.nav-link):not(.dropdown-item):not([role]):not(.navbar-caption) {\n position: relative;\n background-image: transparent;\n background-size: 10000px 2px;\n background-repeat: no-repeat;\n background-position: 0px 1.2em;\n background-position: -10000px 1.2em;\n\n &:hover {\n transition: background-position 2s ease-in-out;\n background-image: linear-gradient(currentColor 50%, currentColor 50%);\n background-position: 0px 1.2em;\n }\n }\n}\n\n.nav-tabs .nav-link {\n &.active {\n color: @primaryColor;\n }\n\n &:not(.active) {\n color: #232323;\n }\n}\n\n.alert-success {\n background-color: #70c770;\n}\n\n.alert-info {\n background-color: @infoColor;\n}\n\n.alert-warning {\n background-color: @warningColor;\n}\n\n.alert-danger {\n background-color: @dangerColor;\n}\n\n.mbr-section-btn .btn:not(.btn-form) {\n & when (@isRoundedButtons) {\n border-radius: 100px;\n }\n}\n\n.mbr-gallery-filter li a when(@isRoundedButtons) {\n border-radius: 100px !important;\n}\n\n.mbr-gallery-filter {\n li.active .btn {\n background-color: @primaryColor;\n border-color: @primaryColor;\n color: contrast(@primaryColor, darken(@primaryColor, 45%), #ffffff, 60%);\n\n &:focus {\n box-shadow: none;\n }\n }\n}\n\n.nav-tabs .nav-link when(@isRoundedButtons) {\n border-radius: 100px !important;\n}\n\na,\na:hover {\n color: @primaryColor;\n}\n\n.mbr-plan-header {\n .plan-variant(~'.bg-primary', @primaryColor);\n .plan-variant(~'.bg-success', @successColor);\n .plan-variant(~'.bg-info', @infoColor);\n .plan-variant(~'.bg-warning', @warningColor);\n .plan-variant(~'.bg-danger', @dangerColor);\n}\n\n/ Scroll to top button/\n.scrollToTop_wraper when not(@isScrollToTopButton) {\n display: none;\n}\n\n#scrollToTop a when (@isScrollToTopButton) and (@isRoundedButtons) {\n border-radius: 100px;\n}\n\n.form-control {\n .display-7;\n font-weight: 400;\n & when(@isRoundedButtons) {\n border-radius: 40px !important;\n }\n &:hover,\n &:focus {\n box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px 0px, rgba(0, 0, 0, 0.07) 0px 1px 3px 0px, rgba(0, 0, 0, 0.03) 0px 0px 0px 1px;\n border-color: @primaryColor !important;\n }\n}\n\n.form-control:-webkit-input-placeholder {\n .display-7;\n font-weight: 400;\n}\n\nblockquote {\n border-color: @primaryColor;\n}\n\n/ Forms /\n.mbr-form {\n .input-group-btn .btn when(@isRoundedButtons) {\n border-radius: 100px !important;\n\n &:hover {\n box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .2);\n }\n }\n\n .input-group-btn button[type=\"submit\"] when (@isRoundedButtons) {\n border-radius: 100px !important;\n padding: 1rem 3rem;\n\n &:hover {\n box-shadow: 0 10px 40px 0 rgba(0, 0, 0, .2);\n }\n }\n}\n\n//formstyler\n.jq-selectbox li:hover,\n.jq-selectbox li.selected {\n background-color: @primaryColor;\n color: contrast(@primaryColor, #000000, #ffffff, 60%)\n}\n\n.jq-number__spin {\n transition: 0.25s ease;\n}\n\n.jq-number__spin:hover {\n border-color: @primaryColor;\n}\n\n.jq-selectbox .jq-selectbox__trigger-arrow,\n.jq-number__spin.minus:after,\n.jq-number__spin.plus:after {\n transition: 0.4s;\n border-top-color: #232323;\n border-bottom-color: #232323;\n}\n\n.jq-selectbox:hover .jq-selectbox__trigger-arrow,\n.jq-number__spin.minus:hover:after,\n.jq-number__spin.plus:hover:after {\n border-top-color: @primaryColor;\n border-bottom-color: @primaryColor;\n}\n\n.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,\n.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,\n.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {\n color: contrast(@primaryColor, #000, #fff, 30%) !important;\n background-color: @primaryColor !important;\n box-shadow: none !important;\n}\n\n.xdsoft_datetimepicker .xdsoft_calendar td:hover,\n.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {\n color: contrast(@secondaryColor, #000, #fff, 30%) !important;\n background: @secondaryColor !important;\n box-shadow: none !important\n}\n\n//lazyload\n.lazy-bg {\n background-image: none !important;\n}\n\n.lazy-placeholder:not(section),\n.lazy-none {\n display: block;\n position: relative;\n padding-bottom: 56.25%;\n width: 100%;\n height: auto;\n}\n\niframe.lazy-placeholder,\n.lazy-placeholder:after {\n content: '';\n position: absolute;\n width: 200px;\n height: 200px;\n background: transparent no-repeat center;\n background-size: contain;\n top: 50%;\n left: 50%;\n transform: translateX(-50%) translateY(-50%);\n @fillSVG: replace(\"@{primaryColor}\", \"#\", \"%23\");\n background-image: url(\"data:image/svg+xml;charset=UTF-8,%3csvg width='32' height='32' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg' stroke='@{fillSVG}' %3e%3cg fill='none' fill-rule='evenodd'%3e%3cg transform='translate(16 16)' stroke-width='2'%3e%3ccircle stroke-opacity='.5' cx='16' cy='16' r='16'/%3e%3cpath d='M32 16c0-9.94-8.06-16-16-16'%3e%3canimateTransform attributeName='transform' type='rotate' from='0 16 16' to='360 16 16' dur='1s' repeatCount='indefinite'/%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e\");\n}\n\nsection.lazy-placeholder:after {\n opacity: 0.5;\n}\n\nbody {\n overflow-x: hidden;\n}\n\na {\n transition: color 0.6s;\n}\n\n@media (max-width: 1400px) {\n .container {\n max-width: 100%;\n @media (min-width: 768px) {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n .container-fluid {\n @media (min-width: 768px) {\n padding-left: 32px;\n padding-right: 32px;\n }\n }\n}\n\n@media (max-width: 767px) {\n .container-fluid {\n padding-left: 16px;\n padding-right: 16px;\n }\n}", "additionalSetColors": [ "#023e8a", "#c3c1b2", "#dbe7cf", "#ae1e2c" ] }, "versionFirst": "5.9.4", "versionPublish": "5.9.18", "siteFonts": [ { "url": "https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;700&display=swap", "name": "Source Serif 4", "css": "'Source Serif 4', sans-serif" } ], "uniqCompNum": 13, "imageResize": true, "publishChangesOnly": true, "favicon": false, "mbrsiteDomain": "boontangmai", "usedWebp": false, "robotsSwitcher": false, "sitemapSwitcher": false, "sitemapSwitcherAuto": false, "siteUrl": false, "cookiesAlert": false, "gdpr": false }, "pages": { "index.html": { "settings": { "main": true, "title": "Boon Tangmai Portfolio", "meta_descr": "Boon Tangmai's portfolio showcasing his achievements, interests, and hobbies.", "header_custom": "", "footer_custom": "", "html_before": "" }, "components": [ { "alias": false, "_styles": { "display": "flex", "& 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-overlay": { "background-color": "@overlayColor", "opacity": "@overlayOpacity" } }, ".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)" } }, ".content-wrap": { "padding": "5rem 1rem", "@media (min-width: 992px)": { "padding": "5rem 3rem" } }, "@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", "color": "#edefeb" }, ".mbr-text, .mbr-section-btn": { "text-align": "center" } }, "_name": "header09", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"header09 startm5\" group=\"Headers\" data-bg-video=\"{{bg.type == 'video' && bg.value.url}}\" mbr-class=\"{'mbr-fullscreen': fullScreen, 'mbr-parallax-background': bg.parallax}\">\t\n <mbr-parameters>\n\t\t<header>Size</header>\n\t\t<input type=\"checkbox\" title=\"Full Screen\" name=\"fullScreen\" checked>\n\t\t<input type=\"checkbox\" title=\"Full Width\" name=\"fullWidth\" checked>\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=\"6\">\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\">\n\t\t<input type=\"checkbox\" title=\"Buttons\" name=\"showButtons\">\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=\"https://r.mobirisesite.com/457736/assets/images/gbeb7f2b174afea6b6f6ce52a1644-h_lwgkk2qc.png\" selected>\n\t\t\t<input type=\"color\" title=\"Color\" value=\"#393193\">\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=\"#f92c50\" 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\t<div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\" opacity=\"{{overlayOpacity}}\" bg-color=\"{{overlayColor}}\"></div>\n\t<div class=\"mbr-fallback-image disabled\" mbr-if=\"bg.type == 'video'\"></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>Portfolio</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\n\t\t\t\t\tand 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\">\n\t\t\t\t\t<a class=\"btn btn-danger\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">\n\t\t\t\t\t\tLearn more\n\t\t\t\t\t</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</div>\n</section>", "_cid": "udqk1bWcTk", "_anchor": "header09-1", "_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)" } }, "& 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=\"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=\"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=\"6\">\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=\"../_images/background1.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=\"../_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-1\"><b>ข้ออมูลส่วนตัว</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 ปี วันเกิด17 มีนาคม 2*** <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\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-1\"><b>การศึกษา</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\">ระดับประถมศึกษา:โรงเรียนวัดพญาชมภู<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-1\">สิ่งที่ชอบทำเวลว่าง<br></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\">นอนหลับ เล่นเกม ฟังเพลง ฟังเรื่ิองผี ดูยูทูป หาของกิน<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\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/338577659-1344273332805720-4231954904857788580-n-954x960.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>", "_cid": "udExkzCtot", "_anchor": "features028-4", "_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)" } }, ".google-map": { "height": "30rem", "position": "relative", "border-radius": "2rem", "iframe": { "height": "100%", "width": "100%", "border-radius": "2rem" }, "[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" } } }, ".content-head": { "max-width": "800px" } }, "_name": "map01", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"map1\" group=\"Maps\" 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\" name=\"fullWidth\" title=\"Full Width\">\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\" title=\"Title\" name=\"showTitle\" checked>\n\t\t<input type=\"checkbox\" title=\"Subtitle\" name=\"showSubtitle\">\n\t\t<header>Map</header>\n\t\t<input type=\"map\" title=\"Map\" name=\"googleMap\" place-id=\"<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3778.7546091690574!2d99.0579058!3d18.7198013!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30da2f9899253c17%3A0x75967116b95a20fb!2z4Lit4Liy4Lij4Liy4Lih4Lib4LmI4Liy4LiB4Lil4LmJ4Lin4Lii4LiK4Lih4Lig4Li5!5e0!3m2!1sen!2sth!4v1716518379343!5m2!1sen!2sth" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>\n\" value=\"<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3778.7546091690574!2d99.0579058!3d18.7198013!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x30da2f9899253c17%3A0x75967116b95a20fb!2z4Lit4Liy4Lij4Liy4Lih4Lib4LmI4Liy4LiB4Lil4LmJ4Lin4Lii4LiK4Lih4Lig4Li5!5e0!3m2!1sen!2sth!4v1716518379343!5m2!1sen!2sth" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>\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=\"../_images/background1.jpg\" parallax>\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'\" 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\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 mbr-class=\"{'container': !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\">\n\t\t\t\t\t<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\t\t\t\t\t\t<b>Our office</b>\n\t\t\t\t\t</h3>\n\t\t\t\t\t<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\t\t\t\t\t\tFind us here\n\t\t\t\t\t</h4>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class=\"google-map\" mbr-map=\"googleMap\"></div>\n\t</div>\n</section>", "_cid": "udEHLOjW1v", "_anchor": "map01-9", "_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)" }, ".social-row": { "display": "flex", "justify-content": "center", "align-items": "center", "flex-wrap": "wrap", ".soc-item": { "margin": "8px", "a": { "&:hover, &:focus": { ".mbr-iconfont": { "background-color": "@active" } }, ".mbr-iconfont": { "width": "72px", "height": "72px", "display": "flex", "align-items": "center", "justify-content": "center", "border-radius": "100%", "font-size": "32px", "background-color": "@iconBg", "color": "@icon", "transition": "all 0.3s ease-in-out" } } } }, ".row-links": { "width": "100%", "justify-content": "center" }, ".mbr-section-title": { "color": "#ffffff" }, ".mbr-section-title, .social-list": { "color": "#000000" } }, "_name": "social05", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"social05\" group=\"Social\" global mbr-class=\"{'mbr-fullscreen': fullScreen, 'mbr-parallax-background': bg.parallax}\">\n <mbr-parameters>\n <header>Size</header>\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=\"Show Title\" name=\"showTitle\" checked>\n <header>Social</header>\n <input type=\"checkbox\" title=\"Social\" name=\"showSoc\" checked>\n <input type=\"range\" inline title=\"Icons Amount\" name=\"soc\" min=\"1\" max=\"5\" step=\"1\" value=\"5\" condition=\"showSoc\">\n <input type=\"color\" title=\"Color\" value=\"#393193\" name=\"icon\" condition=\"showSoc\">\n <input type=\"color\" title=\"Active Color\" value=\"#f7f7f7\" condition=\"showSoc\" name=\"active\">\n <input type=\"color\" title=\"BG\" value=\"#f7f7f7\" name=\"iconBg\" condition=\"showSoc\">\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=\"#ffffff\" selected>\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'\" 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.7\" condition=\"overlay && bg.type !== 'color'\">\n </mbr-parameters>\n\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, 'container-fluid': fullWidth}\">\n <div class=\"row\">\n <h3 class=\"mbr-section-title align-center mb-5 mbr-fonts-style\" mbr-theme-style=\"display-2\" mbr-if=\"showTitle\" data-app-selector=\".mbr-section-title, .social-list\">\n <b>Follow us</b>\n </h3>\n <div class=\"col-12\">\n <div class=\"social-row\" mbr-if=\"showSoc\">\n <div class=\"soc-item\">\n <a href=\"https://www.facebook.com/profile.php?id=100057000461323\" target=\"_blank\">\n <span mbr-icon class=\"mbr-iconfont socicon-facebook socicon\"></span>\n </a>\n </div>\n <div class=\"soc-item\" mbr-if=\"soc > 1\">\n <a href=\"https://pin.it/6cDQ8GVMy\" target=\"_blank\">\n <span mbr-icon class=\"mbr-iconfont socicon-pinterest socicon\" style=\"color: rgb(249, 44, 80); fill: rgb(249, 44, 80);\"></span>\n </a>\n </div>\n <div class=\"soc-item\" mbr-if=\"soc > 2\">\n <a href=\"https://www.instagram.com/boontaengmai?igsh=MXgxcm1zcTYzYnV6Yw==\" target=\"_blank\">\n <span mbr-icon class=\"mbr-iconfont socicon-instagram socicon\" style=\"color: rgb(215, 0, 129); fill: rgb(215, 0, 129);\"></span>\n </a>\n </div>\n <div class=\"soc-item\" mbr-if=\"soc > 3\">\n <a href=\"https://discord.com/invite/XJu6UE86\" target=\"_blank\">\n <span mbr-icon class=\"mbr-iconfont socicon-discord socicon\"></span>\n </a>\n </div>\n <div class=\"soc-item\" mbr-if=\"soc > 4\">\n <a href=\"https://mobiri.se/\" target=\"_blank\">\n <span mbr-icon class=\"mbr-iconfont socicon socicon-twitch\">\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>", "_cid": "udEWWkA1Iq", "_protectedParams": [], "_global": true, "_once": false, "_params": {}, "_anchor": "social05-b" } ] } } }

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