File manager - Edit - /home/kridsana/webapp.cm.in.th/663012803/u66301280039/portfolio039/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": "@PROJECT_PATH@", "name": "Natchanon Sommana", "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": "Inter Tight", "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" }, { "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" } ], "uniqCompNum": 33, "imageResize": true, "publishChangesOnly": true, "favicon": false, "mbrsiteDomain": "0migun92vo", "usedWebp": false, "robotsSwitcher": false, "sitemapSwitcher": false, "sitemapSwitcherAuto": false, "siteUrl": false, "cookiesAlert": false, "gdpr": false, "screenshot": "screenshot.png" }, "pages": { "index.html": { "settings": { "main": true, "title": "Natchanon Sommana Portfolio", "meta_descr": "Natchanon", "header_custom": "", "footer_custom": "", "html_before": "", "socialSharingUrl": "" }, "components": [ { "alias": false, "_styles": { "z-index": "1000", "width": "100%", "position": "relative", ".dropdown-item:before": { "font-family": "Moririse2 !important", "content": "\"\\e966\"", "display": "inline-block", "width": "0", "position": "absolute", "left": "1rem", "top": "0.5rem", "margin-right": "0.5rem", "line-height": "1", "font-size": "inherit", "vertical-align": "middle", "text-align": "center", "overflow": "hidden", "transform": "scale(0, 1)", "transition": "all 0.25s ease-in-out" }, "@media (max-width: 767px)": { ".navbar-toggler": { "transform": "scale(0.8)" } }, ".navbar-brand": { "img": { "max-width": "100%", "max-height": "100%" }, "flex-shrink": "0", "align-items": "center", "margin-right": "0", "padding": "10px 0", "transition": "all 0.3s", "word-break": "break-word", "z-index": "1", ".navbar-caption": { "line-height": "inherit !important" }, ".navbar-logo a": { "outline": "none" } }, ".navbar-nav": { "margin": "auto", "margin-left": "0", "& when (@contentAlign = \"2\")": { "margin-left": "auto" }, "& when (@contentAlign = \"3\")": { "margin-left": "auto", "margin-right": "0" }, ".nav-item": { "padding": "0 !important", "transition": "0.3s all !important", ".nav-link": { "padding": "16px !important", "margin": "0 !important", "border-radius": "1rem !important", "transition": "0.3s all !important", "&:hover": { "background-color": "rgba(27, 31, 10, 0.06)" }, "& when not (@isRoundedButtons)": { "border-radius": "4px !important" } } }, ".open": { ".nav-link": { "&::after": { "transform": "rotate(180deg)" }, "@media (min-width: 992px)": { "&::before": { "content": "\"\"", "width": "100%", "height": "20px", "top": "100%", "background": "transparent", "position": "absolute" } } } }, ".dropdown-item": { "padding": "12px !important", "border-radius": "0.5rem !important", "margin": "0 8px !important", "transition": "0.3s all !important", "&:hover": { "background-color": "rgba(27, 31, 10, 0.06)" }, "& when not (@isRoundedButtons)": { "border-radius": "4px !important" } }, "& when not (@showLogo), (@showBrand)": { "@media (min-width: 992px)": { "padding-left": "1.5rem" } }, "& when not (@showBrand)": { "@media (min-width: 992px)": { "padding-left": "1.5rem" } } }, ".nav-link": { "width": "fit-content", "position": "relative" }, ".navbar-logo": { "margin": "0 !important", "@media (max-width: 767px)": { "padding-left": "0" } }, ".navbar-caption": { "padding-left": "1rem", "padding-right": "0.5rem", "& when not (@showLogo)": { "@media (min-width: 767px)": { "padding-left": "2rem" } } }, ".nav-dropdown": { "@media (max-width: 767px)": { "padding-bottom": "0.5rem" } }, ".nav-dropdown .link.dropdown-toggle::after": { "margin-left": "0.5rem", "margin-top": "0.2rem", "transition": "0.3s all" }, ".container": { "display": "flex", "height": "90px", "padding": "0.5rem 0.6rem 0.5rem 1rem", "flex-wrap": "nowrap", "& when not (@collapsed)": { "@media (min-width: 992px)": {}, "& when (@transparent)": { "background": "rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important" } }, "left": "0", "right": "0", "-webkit-box-pack": "justify", "-ms-flex-pack": "justify", "justify-content": "flex-end", "-webkit-box-align": "center", "-webkit-align-items": "center", "-ms-flex-align": "center", "align-items": "center", "border-radius": "100vw", "margin-top": "1rem", "background-color": "@menuBgColor", "box-shadow": "0 30px 60px 0 rgba(27, 31, 10, 0.08)", "@media (max-width: 992px)": { "padding-right": "2rem" }, "@media (max-width: 767px)": { "width": "95%", "height": "56px !important", "padding": "0.5rem", "margin-top": "0rem" }, "& when not (@isRoundedButtons)": { "border-radius": "4px !important" } }, ".iconfont-wrapper": { "font-size": "1.5rem", "padding-right": "0.5rem" }, ".dropdown-menu": { "flex-wrap": "wrap", "flex-direction": "column", "max-width": "100%", "padding": "12px 4px !important", "border-radius": "1.5rem", "transition": "0.3s all !important", "min-width": "auto", "background": "@menuBgColor", "& when (@transparent)": { "background": "rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important" }, "& when not (@isRoundedButtons)": { "border-radius": "4px !important" } }, ".nav-item:focus, .nav-link:focus": { "outline": "none" }, ".dropdown .dropdown-menu .dropdown-item": { "width": "auto", "transition": "all 0.25s ease-in-out", "&::after": { "right": "0.5rem" }, ".mbr-iconfont": { "margin-right": "0.5rem", "vertical-align": "sub", "&:before": { "display": "inline-block", "transform": "scale(1, 1)", "transition": "all 0.25s ease-in-out" } } }, ".collapsed": { ".dropdown-menu .dropdown-item:before": { "display": "none" }, ".dropdown .dropdown-menu .dropdown-item": { "padding": "0.235em 1.5em 0.235em 1.5em !important", "transition": "none", "margin": "0 !important" } }, ".navbar": { "min-height": "90px", "transition": "all 0.3s", "border-bottom": "1px solid transparent", "background": "transparent !important", "&:not(.navbar-short)": {}, "&.opened": { "transition": "all 0.3s" }, ".dropdown-item": { "padding": "0.5rem 1.8rem" }, ".navbar-logo img": { "width": "auto", "& when not (@isRoundedButtons)": { "border-radius": "4px !important" } }, ".navbar-collapse": { "z-index": "1", "justify-content": "flex-end" }, "&.collapsed": { "justify-content": "center", ".nav-item .nav-link::before": { "display": "none" }, "&.opened": { ".dropdown-menu": { "top": "0" }, "@media (min-width: 992px)": { "&:not(.navbar-short) .navbar-collapse when (@showLogo)": { "max-height": "~\"calc(98.5vh - @{logoSize}rem)\"" } } }, ".dropdown-menu": { ".dropdown-submenu": { "left": "0 !important" }, ".dropdown-item:after": { "right": "auto" }, ".dropdown-toggle[data-toggle=\"dropdown-submenu\"]:after": { "margin-left": "0.5rem", "margin-top": "0.2rem", "border-top": "0.35em solid", "border-right": "0.35em solid transparent", "border-left": "0.35em solid transparent", "border-bottom": "0", "top": "41%" } }, "ul.navbar-nav": { "li": { "margin": "auto" } }, ".dropdown-menu .dropdown-item": { "padding": "0.25rem 1.5rem", "text-align": "center" }, ".icons-menu": { "padding-left": "0", "padding-right": "0", "padding-top": "0.5rem", "padding-bottom": "0.5rem" } }, "@media (max-width: 767px)": { ".navbar-logo": { "img": { "height": "2.5rem !important" } }, "min-height": "72px" }, "@media (max-width: 991px)": { ".nav-item .nav-link::before": { "display": "none" }, "&.opened": { ".dropdown-menu": { "top": "0" } }, ".dropdown-menu": { ".dropdown-submenu": { "left": "0 !important" }, ".dropdown-item:after": { "right": "auto" }, ".dropdown-toggle[data-toggle=\"dropdown-submenu\"]:after": { "margin-left": "0.5rem", "margin-top": "0.2rem", "border-top": "0.35em solid", "border-right": "0.35em solid transparent", "border-left": "0.35em solid transparent", "border-bottom": "0", "top": "40%" } }, "ul.navbar-nav": { "li": {} }, ".dropdown-menu .dropdown-item": { "padding": "0.25rem 1.5rem !important", "text-align": "center" }, ".navbar-brand": { "flex-shrink": "initial", "flex-basis": "auto", "word-break": "break-word", "padding-right": "10px" }, ".navbar-toggler": { "flex-basis": "auto" }, ".icons-menu": { "padding-left": "0", "padding-top": "0.5rem", "padding-bottom": "0.5rem" } }, "&.navbar-short": { ".navbar-logo": { "img": { "height": "2rem" } } }, "padding": "0 !important", "border": "none !important", "box-shadow": "none !important", "border-radius": "0 !important" }, ".dropdown-item.active, .dropdown-item:active": { "background-color": "transparent" }, ".navbar-expand-lg .navbar-nav .nav-link": { "padding": "0" }, ".nav-dropdown .link.dropdown-toggle": { "margin-right": "1.667em", "&[aria-expanded=\"true\"]": { "margin-right": "0", "padding": "0.667em 1.667em" } }, ".navbar.navbar-expand-lg .dropdown": { ".dropdown-menu": { "background": "@menuBgColor", ".dropdown-submenu": { "margin": "0", "left": "105%", "transform": "none", "top": "-12px" } } }, ".navbar .dropdown.open > .dropdown-menu": { "display": "flex" }, "ul.navbar-nav": { "flex-wrap": "wrap" }, ".navbar-buttons": { "text-align": "center", "min-width": "140px", "@media (max-width: 992px)": { "text-align": "left" } }, "button.navbar-toggler": { "outline": "none", "width": "31px", "height": "20px", "cursor": "pointer", "transition": "all 0.2s", "position": "relative", "align-self": "center", ".hamburger span": { "position": "absolute", "right": "0", "width": "30px", "height": "2px", "border-right": "5px", "background-color": "@hamburgerColor", "&:nth-child(1)": { "top": "0", "transition": "all 0.2s" }, "&:nth-child(2)": { "top": "8px", "transition": "all 0.15s" }, "&:nth-child(3)": { "top": "8px", "transition": "all 0.15s" }, "&:nth-child(4)": { "top": "16px", "transition": "all 0.2s" } } }, "nav.opened .hamburger span": { "&:nth-child(1)": { "top": "8px", "width": "0", "opacity": "0", "right": "50%", "transition": "all 0.2s" }, "&:nth-child(2)": { "transform": "rotate(45deg)", "transition": "all 0.25s" }, "&:nth-child(3)": { "transform": "rotate(-45deg)", "transition": "all 0.25s" }, "&:nth-child(4)": { "top": "8px", "width": "0", "opacity": "0", "right": "50%", "transition": "all 0.2s" } }, ".navbar-dropdown": { "padding": "0 1rem" }, "a.nav-link": { "display": "flex", "align-items": "center", "justify-content": "center" }, ".icons-menu": { "flex-wrap": "nowrap", "display": "flex", "justify-content": "center", "padding-left": "1rem", "padding-right": "1rem", "padding-top": "0.3rem", "text-align": "center", "@media (max-width: 992px)": { "justify-content": "flex-start", "margin-bottom": "0.5rem" } }, "@media screen and (~'-ms-high-contrast: active'), (~'-ms-high-contrast: none')": { ".navbar": { "height": "70px", "&.opened": { "height": "auto" } }, ".nav-item .nav-link:hover::before": { "width": "175%", "max-width": "calc(100% ~\"+\" 2rem)", "left": "-1rem" } }, ".navbar .dropdown > .dropdown-menu": { "display": "none", "width": "max-content", "max-width": "500px !important", "transform": "translateX(-50%)", "top": "calc(~\"100% + 20px\")", "left": "50%", ".dropdown-item": { "line-height": "1 !important" }, ".dropdown": { ".dropdown-item": { "align-items": "center", "display": "flex", "height": "max-content !important", "min-height": "max-content !important", "&::after": { "display": "inline-block", "position": "static", "margin-left": "0.5rem", "margin-top": "0", "margin-right": "0", "margin-bottom": "0", "transition": "0.3s all", "transform": "rotate(-90deg)" } } }, ".dropdown.open": { ".dropdown-item": { "&::after": { "transform": "rotate(0deg)" } } } }, ".mbr-section-btn": { "margin": "-0.6rem -0.6rem" }, ".navbar-toggler": { "margin-left": "12px", "margin-right": "8px", "order": "1000" }, "& when (@collapsed)": { ".navbar-brand": { "margin-right": "auto" }, ".navbar-collapse": { "z-index": "-1 !important", "position": "absolute", "top": "110%", "left": "0", "width": "100%", "padding": "1rem", "border-radius": "1.5rem", "background": "@menuBgColor", "& when (@transparent)": { "border-color": "rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important", "opacity": "1", "background": "rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important" }, "backdrop-filter": "blur(8px)", "@media (max-width: 575px)": { "padding": "1rem" }, "& when not (@isRoundedButtons)": { "border-radius": "4px !important" } }, ".navbar-nav": { ".nav-item": { ".nav-link": { "&::after": { "margin-left": "10px" } } }, ".dropdown-item": { "&:hover": { "background-color": "rgba(27, 31, 10, 0.06)" } } }, ".navbar .dropdown > .dropdown-menu": { "display": "none", "max-width": "100% !important", "transform": "translateX(0)", "top": "10px", "left": "0", "padding": "8px !important", "border-radius": "0.5rem", "background-color": "rgba(27, 31, 10, 0.04) !important", ".dropdown-item": { "padding": "8px !important", "line-height": "1 !important", "margin-bottom": "4px !important" }, ".dropdown": { ".dropdown-item": { "align-items": "center", "display": "flex", "height": "max-content !important", "min-height": "max-content !important", "&::after": { "display": "inline-block", "position": "static", "margin-left": "0.5rem", "margin-top": "0", "margin-right": "0", "margin-bottom": "0", "transition": "0.3s all", "transform": "rotate(0deg)" } } }, ".dropdown.open": { ".dropdown-item": { "&::after": { "transform": "rotate(180deg)" } } }, ".dropdown-submenu": { "position": "static", "width": "100%", "max-width": "100% !important", "transform": "translateX(0) !important", "top": "0", "left": "0", "padding": "8px !important", "border-radius": "0.5rem", "background-color": "rgba(27, 31, 10, 0.04) !important" } }, ".navbar .dropdown.open > .dropdown-menu": { "display": "flex", "flex-direction": "column", "align-items": "flex-start" }, ".navbar .dropdown > .dropdown-submenu.show": { "display": "flex", "flex-direction": "column", "align-items": "flex-start" } }, "@media (max-width: 991px)": { ".navbar-brand": { "margin-right": "auto" }, ".navbar-collapse": { "z-index": "-1 !important", "position": "absolute", "top": "110%", "left": "0", "width": "100%", "padding": "1rem", "border-radius": "1.5rem", "background": "@menuBgColor", "& when (@transparent)": { "opacity": "1", "border-color": "rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important", "background": "rgba(red(@menuBgColor), green(@menuBgColor), blue(@menuBgColor), @opacity) !important" }, "backdrop-filter": "blur(8px)", "& when not (@isRoundedButtons)": { "border-radius": "4px !important" } }, ".navbar-nav": { ".nav-item": { ".nav-link": { "&::after": { "margin-left": "10px" } } }, ".dropdown-item": { "&:hover": { "background-color": "rgba(27, 31, 10, 0.06)" } } }, ".navbar .dropdown > .dropdown-menu": { "max-width": "100% !important", "transform": "translateX(0)", "top": "10px", "left": "0", "padding": "8px !important", "border-radius": "1rem", "background-color": "rgba(27, 31, 10, 0.04) !important", ".dropdown-item": { "padding": "8px !important", "line-height": "1 !important", "margin-bottom": "4px !important" }, ".dropdown": { ".dropdown-item": { "align-items": "center", "display": "flex", "height": "max-content !important", "min-height": "max-content !important", "&::after": { "display": "inline-block", "position": "static", "margin-left": "0.5rem", "margin-top": "0", "margin-right": "0", "margin-bottom": "0", "transition": "0.3s all", "transform": "rotate(0deg)" } } }, ".dropdown.open": { ".dropdown-item": { "&::after": { "transform": "rotate(180deg)" } } }, ".dropdown-submenu": { "position": "static", "width": "100%", "max-width": "100% !important", "transform": "translateX(0) !important", "top": "0", "left": "0", "padding": "8px !important", "border-radius": "1rem", "background-color": "rgba(27, 31, 10, 0.04) !important" } }, ".navbar .dropdown.open > .dropdown-menu": { "display": "flex !important", "flex-direction": "column", "align-items": "flex-start" } }, ".navbar-collapse": { "@media (max-width: 575px)": { "padding": "1rem" } } }, "_name": "menu05", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"menu menu5\" group=\"Menu\" plugins=\"DropDown, TouchSwipe\" always-top global once=\"menu\" not-draggable position-absolute>\n\t<mbr-parameters>\n\t\t<header>Show/Hide</header>\n\t\t<input type=\"checkbox\" title=\"Logo\" name=\"showLogo\" checked>\n\t\t<input type=\"range\" title=\"Logo Size\" inline name=\"logoSize\" min=\"1\" max=\"5\" step=\"0.1\" value=\"4.4\" condition=\"showLogo\">\n\t\t<input type=\"checkbox\" title=\"Brand Name\" name=\"showBrand\" checked>\n\t\t<input type=\"checkbox\" title=\"Menu Items\" name=\"showItems\">\n\t\t<select title=\"Menu Items Align\" name=\"contentAlign\" condition=\"showItems\">\n\t\t\t<option value=\"1\">Left</option>\n\t\t\t<option value=\"2\" selected>Center</option>\n\t\t\t<option value=\"3\">Right</option>\n\t\t</select>\n\t\t<input type=\"checkbox\" title=\"Button\" name=\"showButtons\">\n\t\t<header>Styles</header>\n\t\t<input type=\"checkbox\" title=\"Collapsed\" name=\"collapsed\" condition=\"none\">\n\t\t<input type=\"checkbox\" title=\"Transparent\" name=\"transparent\" checked>\n\t\t<input type=\"checkbox\" title=\"Sticky\" name=\"sticky\" checked>\n\t\t<input type=\"range\" title=\"Opacity\" name=\"opacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.8\" condition=\"transparent\">\n\t\t<input type=\"color\" title=\"Color\" name=\"menuBgColor\" value=\"#ffffff\">\n\t\t<input type=\"color\" title=\"Hamburger\" name=\"hamburgerColor\" value=\"#000000\">\n\t</mbr-parameters>\n\n\t<nav class=\"navbar navbar-dropdown\" mbr-class=\"{'navbar-fixed-top':sticky,\n 'navbar-expand-lg':!collapsed,\n 'collapsed':collapsed}\">\n\t\t<div class=\"container\">\n\t\t\t<div class=\"navbar-brand\">\n\t\t\t\t<span mbr-if=\"showLogo\" class=\"navbar-logo\">\n\t\t\t\t\t<a href=\"https://mobiri.se\">\n\t\t\t\t\t\t<img src=\"@PROJECT_PATH@/assets/images/s-29564948-140x140.jpg\" alt=\"Mobirise Website Builder\" mbr-style=\"{'height': logoSize + 'rem'}\">\n\t\t\t\t\t</a>\n\t\t\t\t</span>\n\t\t\t\t<span mbr-if=\"showBrand\" mbr-buttons mbr-theme-style=\"display-4\" class=\"navbar-caption-wrap\" data-toolbar=\"-mbrBtnMove,-mbrBtnAdd,-mbrBtnRemove,-iconFont\"><a class=\"navbar-caption text-black\" data-app-selector=\".navbar-caption\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">Natchanon</a></span>\n\t\t\t</div>\n\t\t\t<button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-bs-toggle=\"collapse\" data-target=\"#navbarSupportedContent\" data-bs-target=\"#navbarSupportedContent\" aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\" mbr-if=\"showItems || showButtons\">\n\t\t\t\t<div class=\"hamburger\">\n\t\t\t\t\t<span></span>\n\t\t\t\t\t<span></span>\n\t\t\t\t\t<span></span>\n\t\t\t\t\t<span></span>\n\t\t\t\t</div>\n\t\t\t</button>\n\t\t\t<div class=\"collapse navbar-collapse\" id=\"navbarSupportedContent\" mbr-if=\"showItems || showButtons\">\n\t\t\t\t<ul mbr-menu class=\"navbar-nav nav-dropdown\" mbr-theme-style=\"display-4\" mbr-if=\"showItems\" mbr-class=\"{'nav-right': !showButtons,'navbar-nav-top-padding': isPublish && !showBrand && !showLogo}\">\n\t\t\t\t\t<li class=\"nav-item\">\n\t\t\t\t\t\t<a class=\"nav-link link text-black\" href=\"https://mobiri.se\" data-app-selector=\".nav-link,.dropdown-item\" data-app-placeholder=\"Type Text\">About</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"nav-item\">\n\t\t\t\t\t\t<a class=\"nav-link link text-black\" href=\"https://mobiri.se\" data-app-selector=\".nav-link,.dropdown-item\" data-app-placeholder=\"Type Text\" aria-expanded=\"false\">Services</a>\n\t\t\t\t\t</li>\n\t\t\t\t\t<li class=\"nav-item\">\n\t\t\t\t\t\t<a class=\"nav-link link text-black\" href=\"https://mobiri.se\" data-app-selector=\".nav-link,.dropdown-item\" data-app-placeholder=\"Type Text\">Contacts</a>\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t\t<div mbr-if=\"showButtons\" mbr-buttons mbr-theme-style=\"display-4\" class=\"navbar-buttons mbr-section-btn\">\n\t\t\t\t\t<a class=\"btn btn-primary\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\"> Start Now!</a>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</nav>\n</section>", "_cid": "uoeh63y0JR", "_anchor": "menu05-r", "_protectedParams": [], "_global": true, "_once": "menu", "_params": {} }, { "_name": "header1", "_sourceTheme": "mobirise5", "_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\n <mbr-parameters>\n <header>Size</header>\n <input type=\"checkbox\" title=\"Full Screen\" name=\"fullScreen\" checked>\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\" condition=\"fullScreen == false\">\n <input type=\"range\" inline title=\"Bottom\" name=\"paddingBottom\" min=\"0\" max=\"10\" step=\"1\" value=\"6\" condition=\"fullScreen == false\">\n\n <input type=\"range\" inline name=\"textWidth\" title=\"Width\" min=\"4\" max=\"12\" value=\"5\" step=\"1\">\n <select title=\"Align\" name=\"contentAlign\">\n <option value selected>Left</option>\n <option value=\"justify-content-center\">Center</option>\n <option value=\"justify-content-end\">Right</option>\n </select>\n <header>Show/Hide</header>\n <input type=\"checkbox\" title=\"Title\" name=\"showTitle\" checked>\n <input type=\"checkbox\" title=\"Subtitle\" name=\"showSubitle\">\n <input type=\"checkbox\" title=\"Text\" name=\"showText\" checked>\n <input type=\"checkbox\" title=\"Buttons\" name=\"showButtons\">\n <header>Background</header>\n <fieldset type=\"background\" name=\"bg\" parallax>\n <input type=\"image\" title=\"Image\" value=\"@PROJECT_PATH@/assets/images/s-32268293-1108x1477.jpg\" selected>\n <input type=\"color\" title=\"Color\" value=\"#fafafa\">\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/background13.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=\"#fafafa\" 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\n <div class mbr-class=\"{'container': !fullWidth, 'container-fluid': fullWidth}\">\n <div class=\"row {{contentAlign}}\">\n <div class=\"col-12 col-lg-{{textWidth}}\">\n <h1 class=\"mbr-section-title mbr-fonts-style mb-3\" data-app-selector=\".mbr-section-title\" mbr-theme-style=\"display-1\" mbr-if=\"showTitle\"><b>Portfolio</b></h1>\n <h2 class=\"mbr-section-subtitle mbr-fonts-style mb-3\" data-app-selector=\".mbr-section-subtitle\" mbr-theme-style=\"display-2\" mbr-if=\"showSubitle\">\n Header Subtitle\n </h2>\n <p class=\"mbr-text mbr-fonts-style\" mbr-theme-style=\"display-7\" mbr-if=\"showText\" data-app-selector=\".mbr-text, .mbr-section-btn\">Natchanon Sommana</p>\n <div mbr-buttons mbr-theme-style=\"display-4\" class=\"mbr-section-btn mt-3\" mbr-if=\"showButtons\"><a class=\"btn btn-secondary\" href=\"https://mobiri.se\" data-app-placeholder=\"Type Text\">Create Website</a></div>\n </div>\n </div>\n </div>\n</section>", "_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", "top": "0", "& when (@bg-type = 'video')": { "background-image": "url(@fallBackImage)" } } }, "_cid": "uoeiyGxlK5", "_anchor": "header1-u", "_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 (min-width: 992px) and (max-width: 1200px)": { "padding": "2rem 1.5rem", "padding-top": "1rem", "margin-top": "1rem" }, "@media (max-width: 767px)": { "padding": "2rem 1.5rem", "padding-top": "1rem", "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": "#000000" }, ".item-title": { "text-align": "left" }, ".item-subtitle": { "text-align": "left" }, ".mbr-text, .item .mbr-section-btn": { "text-align": "left" }, ".content-head": { "max-width": "800px" } }, "_name": "pricing02", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"pricing02\" group=\"Pricing\" mbr-class=\"{'mbr-parallax-background': bg.parallax}\">\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 <select title=\"Columns\" name=\"cardsWidth\">\n <option value=\"12\">1</option>\n <option value=\"6\">2</option>\n <option value=\"4\" selected>3</option>\n <option value=\"3\">4</option>\n </select>\n <header>Show/Hide</header>\n <input type=\"checkbox\" name=\"showTitle\" title=\"Title\" checked>\n <input type=\"checkbox\" name=\"showSubtitle\" title=\"Subtitle\">\n <input type=\"checkbox\" name=\"showmainButtons\" title=\"Buttons\">\n <header>Cards</header>\n <input type=\"checkbox\" name=\"autoSize\" title=\"Auto Size\" checked>\n <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 <input type=\"checkbox\" title=\"Spacing\" name=\"spacing\" checked>\n <input type=\"checkbox\" name=\"showCardTitle\" title=\"Title\">\n <input type=\"checkbox\" name=\"showCardSubtitle\" title=\"Price\">\n <input type=\"checkbox\" name=\"showText\" title=\"Text\">\n <input type=\"checkbox\" name=\"showButtons\" title=\"Buttons\">\n <input type=\"color\" name=\"cardsBg\" title=\"BG\" value=\"#ffffff\">\n <header>Background</header>\n <fieldset type=\"background\" parallax name=\"bg\" required>\n <input type=\"image\" title=\"Image\" value=\"../_images/background1.jpg\">\n <input type=\"color\" title=\"Color\" value=\"#ffc091\" 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 == 'image'\">\n <input type=\"range\" inline title=\"Opacity\" name=\"overlayOpacity\" min=\"0\" max=\"1\" step=\"0.1\" value=\"0.5\" condition=\"overlay && bg.type == 'image'\">\n </mbr-parameters>\n <div class=\"mbr-overlay\" mbr-if=\"overlay && bg.type !== 'color'\"></div>\n <div mbr-class=\"{'container': !fullWidth, '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 || showmainButton\">\n <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>ฝึกงาน</b></h4>\n <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\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </h5>\n <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 <a href class=\"btn item-btn btn-primary\" data-app-placeholder=\"Type Text\">Get Started</a>\n </div>\n </div>\n </div>\n </div>\n <div class=\"row\">\n <div class=\"item features-image col-12 col-md-6 col-lg-{{cardsWidth}}\">\n <div class=\"item-wrapper\">\n <div class=\"item-img\">\n <img src=\"@PROJECT_PATH@/assets/images/s-32268299-816x1088.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"item-content\" mbr-if=\"showCardTitle || showCardSubtitle || showText || showButtons\">\n <h5 class=\"item-title mbr-fonts-style\" mbr-theme-style=\"display-5\" data-app-selector=\".item-title\" mbr-if=\"showCardTitle\"></h5>\n <h6 class=\"item-subtitle mbr-fonts-style\" mbr-theme-style=\"display-7\" data-app-selector=\".item-subtitle\" mbr-if=\"showCardSubtitle\">\n $5.00\n </h6>\n <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 Lorem ipsum dolor sit amet, consectetur adipiscing elit habitant turpis.\n </p>\n <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\">Buy Now</a></div>\n </div>\n\n </div>\n </div>\n <div class=\"item features-image col-12 col-md-6 col-lg-{{cardsWidth}}\">\n <div class=\"item-wrapper\">\n <div class=\"item-img\">\n <img src=\"@PROJECT_PATH@/assets/images/s-32268297-816x1088.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"item-content\" mbr-if=\"showCardTitle || showCardSubtitle || showText || showButtons\">\n <h5 class=\"item-title mbr-fonts-style\" mbr-theme-style=\"display-5\" data-app-selector=\".item-title\" mbr-if=\"showCardTitle\">\n <b>Promotion</b>\n </h5>\n <h6 class=\"item-subtitle mbr-fonts-style\" mbr-theme-style=\"display-7\" data-app-selector=\".item-subtitle\" mbr-if=\"showCardSubtitle\">\n $7.00\n </h6>\n <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 Lorem ipsum dolor sit amet, consectetur adipiscing elit habitant turpis.\n </p>\n <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\">Buy Now</a></div>\n </div>\n </div>\n </div>\n <div class=\"item features-image col-12 col-md-6 col-lg-{{cardsWidth}}\">\n <div class=\"item-wrapper\">\n <div class=\"item-img\">\n <img src=\"@PROJECT_PATH@/assets/images/s-29564948-500x500.jpg\" alt=\"Mobirise Website Builder\">\n </div>\n <div class=\"item-content\" mbr-if=\"showCardTitle || showCardSubtitle || showText || showButtons\">\n <h5 class=\"item-title mbr-fonts-style\" mbr-theme-style=\"display-5\" data-app-selector=\".item-title\" mbr-if=\"showCardTitle\">\n <b>Branding</b>\n </h5>\n <h6 class=\"item-subtitle mbr-fonts-style\" mbr-theme-style=\"display-7\" data-app-selector=\".item-subtitle\" mbr-if=\"showCardSubtitle\">\n $10.00\n </h6>\n <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 Lorem ipsum dolor sit amet, consectetur adipiscing elit habitant turpis.<br>\n </p>\n <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\">Buy Now</a></div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>", "_cid": "uoekotpMUQ", "_anchor": "pricing02-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)" } }, ".item-wrapper": { "display": "flex", "margin-bottom": "2rem", "border-radius": "0 !important", "@media (max-width: 767px)": { "margin-bottom": "1rem" } }, ".mbr-iconfont": { "font-size": "3rem", "color": "@iconColor", "padding-right": "2rem" }, ".content-head": { "max-width": "800px" } }, "_name": "social02", "_sourceTheme": "startm5", "_customHTML": "<section data-bs-version=\"5.1\" class=\"social02\" group=\"Social\" 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\" title=\"Title\" name=\"showmainTitle\" checked>\n\t\t<input type=\"checkbox\" title=\"Subtitle\" name=\"showmainSubtitle\">\n\t\t<header>Cards</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=\"checkbox\" title=\"Icons\" name=\"showIcon\" checked>\n\t\t<input type=\"color\" title=\"Color\" name=\"iconColor\" value=\"#2e481a\" selected condition=\"showIcon\">\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=\"#ffffff\">\n\t\t\t<input type=\"video\" title=\"Video\" value=\"https://vimeo.com/428046504\" selected>\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=\"#ffd7ef\" 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.3\" 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\">\n\t\t\t<div class=\"col-12 content-head\">\n\t\t\t\t<div class=\"mb-5\" mbr-if=\"showmainTitle || showmainSubtitle\">\n\t\t\t\t\t<h5 class=\"mbr-section-title mbr-fonts-style align-center mb-0\" mbr-theme-style=\"display-2\" mbr-if=\"showmainTitle\" data-app-selector=\".mbr-section-title\">\n\t\t\t\t\t\t<b>Follow us</b>\n\t\t\t\t\t</h5>\n\t\t\t\t\t<h6 class=\"mbr-section-subtitle mbr-fonts-style align-center mb-0 mt-4\" mbr-theme-style=\"display-7\" mbr-if=\"showmainSubtitle\" data-app-selector=\".mbr-section-subtitle\">\n\t\t\t\t\t\tFollow us\n\t\t\t\t\t</h6>\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-without-image col-12 col-md-6 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<span mbr-icon class=\"mbr-iconfont m-auto socicon-instagram socicon\" mbr-if=\"showIcon\"></span>\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-1\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>Instagram</b>\n\t\t\t\t\t\t</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\">daniel.ns.3</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-md-6 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<span mbr-icon class=\"mbr-iconfont m-auto socicon-twitch socicon\" mbr-if=\"showIcon\"></span>\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-1\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>Twitch</b>\n\t\t\t\t\t\t</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\"></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-md-6 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<span mbr-icon class=\"mbr-iconfont m-auto socicon-twitter socicon\" mbr-if=\"showIcon\"></span>\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-1\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>Twitter</b>\n\t\t\t\t\t\t</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\"></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-md-6 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<span mbr-icon class=\"mbr-iconfont m-auto socicon-youtube socicon\" mbr-if=\"showIcon\"></span>\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-1\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>YouTube</b>\n\t\t\t\t\t\t</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\tLorem ipsum dolor sit amet.\n\t\t\t\t\t\t</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-md-6 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<span mbr-icon class=\"mbr-iconfont m-auto socicon-tiktok socicon\" mbr-if=\"showIcon\"></span>\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-1\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>TikTol</b>\n\t\t\t\t\t\t</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\tLorem ipsum dolor sit amet.\n\t\t\t\t\t\t</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-md-6 col-lg-{{columns}}\">\n\t\t\t\t<div class=\"item-wrapper\">\n\t\t\t\t\t<span mbr-icon class=\"mbr-iconfont m-auto socicon-facebook socicon\" mbr-if=\"showIcon\"></span>\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-1\" mbr-theme-style=\"display-7\" mbr-if=\"showTitle\" data-app-selector=\".card-title\">\n\t\t\t\t\t\t\t<b>Facebook</b>\n\t\t\t\t\t\t</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\tLorem ipsum dolor sit amet.\n\t\t\t\t\t\t</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": "uoejtuAdmD", "_anchor": "social02-v", "_protectedParams": [], "_global": false, "_once": false, "_params": {} } ] } } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.47 |
proxy
|
phpinfo
|
Settings