{"id":5394,"date":"2025-09-25T13:52:28","date_gmt":"2025-09-25T06:52:28","guid":{"rendered":"https:\/\/siammakemoney.com\/?p=5394"},"modified":"2026-01-30T17:35:20","modified_gmt":"2026-01-30T10:35:20","slug":"code-html-css-js","status":"publish","type":"post","link":"https:\/\/siammakemoney.com\/th\/code-html-css-js\/","title":{"rendered":"\u0e23\u0e27\u0e21\u0e42\u0e04\u0e49\u0e14 HTML CSS JS \u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19"},"content":{"rendered":"\n<h2 class=\"wp-block-heading has-text-color has-link-color wp-elements-b811a28942ca2757d0d4f299fd4594c6\" style=\"color:#0c3237\">\u0e23\u0e27\u0e21\u0e42\u0e04\u0e49\u0e14 HTML CSS JS \u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-a375b967830d5f566e720aaf520c1dd9\">\u0e25\u0e34\u0e07\u0e04\u0e4c\u0e43\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \u0e41\u0e25\u0e30\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e41\u0e1a\u0e1a\u0e07\u0e48\u0e32\u0e22<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-767f52782f39e0b3c47c611b337d606b\">\u0e43\u0e2a\u0e48 \u0e25\u0e34\u0e07\u0e01\u0e4c\u0e43\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-50200cfd227cffefe741b68107661577\"><code>&lt;p&gt;\n  Visit my website:\n  &lt;a href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n    SiamMakeMoney\n  &lt;\/a&gt;\n&lt;\/p&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-75adf87f1edfd1785f973fcef4d6723d\">\u0e43\u0e2a\u0e48 \u0e25\u0e34\u0e07\u0e01\u0e4c\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-63527b0e77ae93fe577833ed05cd1694\"><code>&lt;a href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n  &lt;img src=\"https:\/\/via.placeholder.com\/300x200\" alt=\"SiamMakeMoney\"&gt;\n&lt;\/a&gt;\n<\/code><\/pre>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e18\u0e23\u0e23\u0e21\u0e14\u0e32<\/h2>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-2beab887686d068e39024df708e1f59e\"><code>&lt;img src=\"https:\/\/via.placeholder.com\/300x200\" alt=\"Sample Image\"&gt;<\/code><\/pre>\n\n\n<style scoped>.gc-numhead{align-items:center;display:flex;flex-wrap:wrap;margin-bottom:30px}@media only screen and (min-width:480px){.gc-numhead{flex-wrap:nowrap}}.gc-numhead__title{margin:0!important}.gc-numhead__sub{line-height:20px;margin-top:5px;opacity:.5}.gc-numhead__circle{border:3px solid #111;border-radius:50%;box-sizing:content-box;display:inline-block;font-size:23px;font-weight:700;height:40px;line-height:40px;margin-right:19px;min-width:40px;text-align:center;width:40px}.gc-numhead__position{color:#d3d3d3;font-size:70px;font-weight:700;line-height:1;margin-right:19px}.gc-numhead__position span{line-height:.78}.gc-numhead__position span:after{content:\".\"}.gc-numhead__logo{margin-left:auto;margin-top:18px;width:100%}@media only screen and (min-width:480px){.gc-numhead__logo{margin-top:0;width:auto}}.gc-numhead__logo img{max-height:60px;width:auto!important}.gc-numhead__logo-cont{display:inline-block;max-height:60px;max-width:150px}.gc-numhead__mcenter{display:block;text-align:center}@media only screen and (min-width:480px){.gc-numhead__mcenter{display:flex;text-align:inherit}}.gc-numhead__mcenter .gc-numhead__circle{margin-bottom:15px;margin-right:0}@media only screen and (min-width:480px){.gc-numhead__mcenter .gc-numhead__circle{margin-bottom:0;margin-right:19px}}.gc-numhead__mcenter .gc-numhead__position{margin-bottom:15px;margin-right:0}@media only screen and (min-width:480px){.gc-numhead__mcenter .gc-numhead__position{margin-bottom:0;margin-right:19px}}<\/style><div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead090e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>1<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#10a399\">\u0e15\u0e31\u0e27\u0e2d\u0e22\u0e48\u0e32\u0e07\u0e42\u0e04\u0e49\u0e14 bullet (\u0e25\u0e34\u0e2a\u0e15\u0e4c\u0e41\u0e1a\u0e1a\u0e08\u0e38\u0e14)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><br>\u0e04\u0e37\u0e2d\u0e41\u0e17\u0e47\u0e01 HTML \u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e22\u0e48\u0e2d\u0e22\u0e43\u0e19\u0e25\u0e34\u0e2a\u0e15\u0e4c \u0e43\u0e0a\u0e49\u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a (\u0e25\u0e34\u0e2a\u0e15\u0e4c\u0e41\u0e1a\u0e1a\u0e08\u0e38\u0e14) \u0e2b\u0e23\u0e37\u0e2d (\u0e25\u0e34\u0e2a\u0e15\u0e4c\u0e41\u0e1a\u0e1a\u0e15\u0e31\u0e27\u0e40\u0e25\u0e02) \u0e42\u0e14\u0e22 \u0e41\u0e15\u0e48\u0e25\u0e30\u0e2d\u0e31\u0e19\u0e04\u0e37\u0e2d 1 \u0e02\u0e49\u0e2d\u0e43\u0e19\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 \u0e40\u0e0a\u0e48\u0e19 \u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \u0e40\u0e21\u0e19\u0e39 \u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e31\u0e49\u0e19\u0e15\u0e2d\u0e19\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19 \u201c\u0e02\u0e49\u0e2d\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e02\u0e49\u0e2d\u201d \u0e43\u0e19\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a \u0e2d\u0e48\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22 \u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e44\u0e14\u0e49\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19<\/div><\/div><\/div>\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"732\" height=\"516\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot.webp\" alt=\"\" class=\"wp-image-6036\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot.webp 732w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-300x211.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-18x12.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-58-10-painty-screenshot-400x282.webp 400w\" sizes=\"auto, (max-width: 732px) 100vw, 732px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-8713bff98c6ffac55c14922eb51d4f22\" style=\"border-style:none;border-width:0px\"><code>&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Section box *\/\n.list-box {\n  max-width: 600px;\n  background: #fff;\n  padding: 25px 30px;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n  margin-bottom: 30px;\n}\n\nh2 {\n  color: #333;\n}\n\n\/* Unordered list *\/\nul.custom-ul {\n  list-style: none;\n  padding-left: 0;\n}\n\nul.custom-ul li {\n  padding-left: 28px;\n  margin-bottom: 12px;\n  position: relative;\n}\n\nul.custom-ul li::before {\n  content: \"\u2714\";\n  position: absolute;\n  left: 0;\n  color: #4a6cff;\n  font-weight: bold;\n}\n\n\/* Ordered list *\/\nol.custom-ol {\n  counter-reset: item;\n  list-style: none;\n  padding-left: 0;\n}\n\nol.custom-ol li {\n  counter-increment: item;\n  margin-bottom: 12px;\n  padding-left: 30px;\n  position: relative;\n}\n\nol.custom-ol li::before {\n  content: counter(item);\n  position: absolute;\n  left: 0;\n  background: #4a6cff;\n  color: #fff;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  text-align: center;\n  line-height: 22px;\n  font-size: 13px;\n}\n&lt;\/style&gt;\n\n\n&lt;div class=\"list-box\"&gt;\n  &lt;h2&gt;Unordered List (Bullet)&lt;\/h2&gt;\n  &lt;ul class=\"custom-ul\"&gt;\n    &lt;li&gt;Learn HTML basics&lt;\/li&gt;\n    &lt;li&gt;Style pages with CSS&lt;\/li&gt;\n    &lt;li&gt;Make websites interactive with JavaScript&lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&gt;\n\n&lt;div class=\"list-box\"&gt;\n  &lt;h2&gt;Ordered List (Numbered)&lt;\/h2&gt;\n  &lt;ol class=\"custom-ol\"&gt;\n    &lt;li&gt;Plan your website structure&lt;\/li&gt;\n    &lt;li&gt;Design the layout and style&lt;\/li&gt;\n    &lt;li&gt;Publish and improve continuously&lt;\/li&gt;\n  &lt;\/ol&gt;\n&lt;\/div&gt;\n\n<\/code><\/pre>\n\n\n<style scoped>\n            .gc-box{margin-bottom:30px;padding:20px;border-left:5px solid transparent;line-height:24px}.gc-box .label-info{background-color:#5bc0de;display:inline-block;margin:0 5px 10px 0;padding:3px 6px;font-size:75%;font-weight:700;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;line-height:14px}.gc-box.green_type{color:#3c763d;background-color:#dff0d8;border-color:#cae6be}.gc-box.blue_type{color:#31708f;background-color:#d9edf7;border-color:#bcdff1}.gc-box.red_type{color:#a94442;background-color:#f2dede;border-color:#e8c4c4}.gc-box.grey_type{background:#ddd;border-color:#ccc;color:#444}.gc-box.info_type{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.gc-box.info_type svg{fill:#30a030}.gc-box.download_type{color:#004085;background-color:#cce5ff;border-color:#b8daff}.gc-box.download_type svg{fill:#3a9aff}.gc-box.update_type{color:#004458;background-color:#d9edf7;border:1px solid #bce8f1}.gc-box.notice_type{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.gc-box.notice_type svg{fill:#f7a000}.gc-box.error_type{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.gc-box.error_type svg{fill:#c70000}.gc-box.border_type{border:2px solid #ddd}.gc-box.icon_type{display:flex}.gc-box.icon_type .gc-box-icon{width:28px}.gc-box.icon_type .gc-box-text{flex-grow:1;margin:0 15px}.gc-box-text > *{margin-bottom: 20px;}\n        .gc-box-text > *:last-child{margin-bottom:0}        \n        <\/style><div class=\"gc-box notice_type icon_type\" style=\"text-align:left;border-radius:20px;box-shadow: 0 10px 10px #00000007\">\n\t\t\t<div class=\"gc-box-icon\"><svg x=\"0px\" y=\"0px\" viewBox=\"0 0 486.463 486.463\" > <g> <g> <path d=\"M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z\"\/> <path d=\"M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8 c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z\"\/> <path d=\"M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z\"\/> <\/g> <\/g> <\/svg><\/div>\n\t\t\t\n\t\t\t<div class=\"gc-box-text\">\n\n<h3 class=\"wp-block-heading\" style=\"font-size:25px\">\u0e42\u0e04\u0e49\u0e14 CSS \u0e25\u0e1a\u0e08\u0e38\u0e14 <code>&lt;li&gt;<\/code> bullet<\/h3>\n\n\n\n<h4 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-45844484e48bbc7ee1d499a6c0cbaf91\" style=\"font-size:20px\">\u0e25\u0e1a bullet \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e17\u0e38\u0e01 <code>&lt;ul&gt;<\/code> \u0e41\u0e25\u0e30 <code>&lt;ol&gt;<\/code> \u0e44\u0e21\u0e48\u0e27\u0e48\u0e32\u0e08\u0e30\u0e2d\u0e22\u0e39\u0e48\u0e17\u0e35\u0e48\u0e44\u0e2b\u0e19<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-c4b5f2d9a6fad49062aba6419f743610\" style=\"border-style:none;border-width:0px\"><code>ul, ol {\n  list-style: none !important;\n  padding-left: 0 !important;\n  margin-left: 0 !important;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-770e044898238e85bdf58fe560daf7f3\" style=\"font-size:20px\">\u0e25\u0e1a bullet \u0e17\u0e35\u0e48\u0e21\u0e32\u0e08\u0e32\u0e01 pseudo-elements<\/h4>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-9c50b371256024dadd0ba2f01c9b8a7e\"><code>li::before {\n  content: none !important;\n}<\/code><\/pre>\n\n<\/div>\n\t\t<\/div>\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead2583\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>2<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#10a399\">\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e41\u0e1a\u0e1a\u0e44\u0e2d\u0e04\u0e2d\u0e19<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e44\u0e2d\u0e04\u0e2d\u0e19 \u0e04\u0e37\u0e2d\u0e23\u0e39\u0e1b\u0e02\u0e19\u0e32\u0e14\u0e40\u0e25\u0e47\u0e01\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e41\u0e17\u0e19\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e2b\u0e23\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e17\u0e33\u0e07\u0e32\u0e19\u0e1a\u0e32\u0e07\u0e2d\u0e22\u0e48\u0e32\u0e07 \u0e40\u0e0a\u0e48\u0e19 \u0e23\u0e39\u0e1b\u0e1a\u0e49\u0e32\u0e19\u0e41\u0e17\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 \u0e23\u0e39\u0e1b\u0e41\u0e27\u0e48\u0e19\u0e02\u0e22\u0e32\u0e22\u0e41\u0e17\u0e19\u0e01\u0e32\u0e23\u0e04\u0e49\u0e19\u0e2b\u0e32 \u0e2b\u0e23\u0e37\u0e2d\u0e23\u0e39\u0e1b\u0e16\u0e31\u0e07\u0e02\u0e22\u0e30\u0e41\u0e17\u0e19\u0e01\u0e32\u0e23\u0e25\u0e1a \u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e2a\u0e34\u0e48\u0e07\u0e17\u0e35\u0e48\u0e40\u0e27\u0e47\u0e1a\u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e2d\u0e1b\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e2a\u0e37\u0e48\u0e2d\u0e44\u0e14\u0e49\u0e17\u0e31\u0e19\u0e17\u0e35\u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e2d\u0e48\u0e32\u0e19\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e40\u0e22\u0e2d\u0e30 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22 \u0e14\u0e39\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22 \u0e41\u0e25\u0e30\u0e2a\u0e37\u0e48\u0e2d\u0e2a\u0e32\u0e23\u0e44\u0e14\u0e49\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27\u0e04\u0e23\u0e31\u0e1a<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-fb0a2eac9dd9798fe60eee3b644d9657\" style=\"font-size:25px\">2.1 \u0e40\u0e1e\u0e34\u0e48\u0e21\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e02\u0e19\u0e32\u0e14 20\u00d720 px \u0e41\u0e1a\u0e1a\u0e07\u0e48\u0e32\u0e22\u0e46<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-6530248047e7b151c7c6b1fb18bc49b0\"><code>&lt;img src=\"https:\/\/example.com\/icon.png\" alt=\"icon\" width=\"20\" height=\"20\"&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead426e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>3<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Font Awesome \u0e44\u0e2d\u0e04\u0e2d\u0e19<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Font Awesome \u0e44\u0e2d\u0e04\u0e2d\u0e19 \u0e04\u0e37\u0e2d\u0e0a\u0e38\u0e14\u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e2a\u0e33\u0e40\u0e23\u0e47\u0e08\u0e23\u0e39\u0e1b\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e42\u0e14\u0e22\u0e21\u0e32\u0e43\u0e19\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e15\u0e31\u0e27\u0e2d\u0e31\u0e01\u0e29\u0e23\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e27\u0e01\u0e40\u0e15\u0e2d\u0e23\u0e4c \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e1b\u0e23\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14 \u0e2a\u0e35 \u0e41\u0e25\u0e30\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e1b\u0e23\u0e31\u0e1a\u0e1f\u0e2d\u0e19\u0e15\u0e4c \u0e43\u0e0a\u0e49\u0e41\u0e17\u0e19\u0e2a\u0e31\u0e0d\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e40\u0e0a\u0e48\u0e19 \u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e1a\u0e49\u0e32\u0e19 \u0e42\u0e17\u0e23\u0e28\u0e31\u0e1e\u0e17\u0e4c \u0e2d\u0e35\u0e40\u0e21\u0e25 \u0e2b\u0e23\u0e37\u0e2d\u0e42\u0e0b\u0e40\u0e0a\u0e35\u0e22\u0e25\u0e21\u0e35\u0e40\u0e14\u0e35\u0e22 \u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e14\u0e39\u0e2a\u0e27\u0e22 \u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22 \u0e41\u0e25\u0e30\u0e42\u0e2b\u0e25\u0e14\u0e40\u0e23\u0e47\u0e27 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e43\u0e0a\u0e49\u0e44\u0e1f\u0e25\u0e4c\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e2b\u0e25\u0e32\u0e22\u0e44\u0e1f\u0e25\u0e4c<\/div><\/div><\/div>\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"405\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1024x405.webp\" alt=\"\" class=\"wp-image-6027\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1024x405.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-300x119.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-768x304.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1536x607.webp 1536w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-18x7.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-400x158.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-800x316.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-832x329.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1664x658.webp 1664w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon-1248x493.webp 1248w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/v7-new-icon.webp 2004w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-efc57c181c9c30496effd82d139032fc\" style=\"font-size:25px\">3.1 \u0e40\u0e1e\u0e34\u0e48\u0e21 Font Awesome CDN (\u0e16\u0e49\u0e32\u0e22\u0e31\u0e07\u0e44\u0e21\u0e48\u0e21\u0e35)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-0d131670acc49fbb35bb2c7b02dc97e3\"><code>&lt;head&gt;\n  &lt;!-- Font Awesome CDN --&gt;\n  &lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n&lt;\/head&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-ebf410f16baa182aa355893340da6bd5\" style=\"font-size:25px\">3.2 \u0e43\u0e2a\u0e48\u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e31\u0e1a\u0e02\u0e19\u0e32\u0e14<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-1de3b5a75ca4b7c8b3fc066f91c8d8f6\"><code>\n&lt;i class=\"fa-solid fa-house\" style=\"font-size:20px;\"&gt;&lt;\/i&gt;\n\n&lt;i class=\"fa-solid fa-star\" style=\"font-size:20px;\"&gt;&lt;\/i&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-9e6d002dcb1d0dace3520e2a83ec95f1\" style=\"font-size:25px\">3.3 (\u0e16\u0e49\u0e32\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23 CSS \u0e41\u0e22\u0e01\u0e2d\u0e2d\u0e01\u0e21\u0e32)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-a1a28e39adb1eb430cc73362bfb399e0\"><code>&lt;style&gt;\n.icon-small {\n  font-size: 20px;\n  color: #000; \n}\n&lt;\/style&gt;\n\n&lt;i class=\"fa-solid fa-heart icon-small\"&gt;&lt;\/i&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead240e\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>4<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">iFrame \u0e1d\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2d\u0e37\u0e48\u0e19<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">iframe \u0e04\u0e37\u0e2d\u0e41\u0e17\u0e47\u0e01\u0e02\u0e2d\u0e07 HTML \u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e1d\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e08\u0e32\u0e01\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2d\u0e37\u0e48\u0e19\u0e40\u0e02\u0e49\u0e32\u0e21\u0e32\u0e41\u0e2a\u0e14\u0e07\u0e43\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e02\u0e2d\u0e07\u0e40\u0e23\u0e32 \u0e40\u0e0a\u0e48\u0e19 \u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d YouTube \u0e41\u0e1c\u0e19\u0e17\u0e35\u0e48 Google Maps \u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e27\u0e47\u0e1a\u0e20\u0e32\u0e22\u0e19\u0e2d\u0e01 \u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e01\u0e32\u0e23\u0e40\u0e2d\u0e32 \u201c\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07\u0e40\u0e25\u0e47\u0e01 \u0e46\u201d \u0e02\u0e2d\u0e07\u0e2d\u0e35\u0e01\u0e40\u0e27\u0e47\u0e1a\u0e2b\u0e19\u0e36\u0e48\u0e07\u0e21\u0e32\u0e43\u0e2a\u0e48\u0e44\u0e27\u0e49\u0e43\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e40\u0e23\u0e32 \u0e42\u0e14\u0e22\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e02\u0e49\u0e32\u0e07\u0e43\u0e19\u0e22\u0e31\u0e07\u0e21\u0e32\u0e08\u0e32\u0e01\u0e40\u0e27\u0e47\u0e1a\u0e15\u0e49\u0e19\u0e17\u0e32\u0e07 \u0e41\u0e15\u0e48\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e14\u0e39\u0e41\u0e25\u0e30\u0e42\u0e15\u0e49\u0e15\u0e2d\u0e1a\u0e44\u0e14\u0e49\u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e2d\u0e2d\u0e01\u0e08\u0e32\u0e01\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e19\u0e31\u0e49\u0e19<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-167b651b5126e27136ee3b955a5737ab\" style=\"font-size:25px\">4.1 iFrame \u0e1d\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-3b99d783d68e46503064bd2227526660\"><code>&lt;iframe \n  src=\"https:\/\/www.example.com\" \n  width=\"800\" \n  height=\"600\"&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-1e3378980d6076d9e6262afe2b791d7c\" style=\"font-size:25px\">4.2 iFrame \u0e1d\u0e31\u0e07\u0e27\u0e34\u0e14\u0e35\u0e42\u0e2d Youtube<\/h3>\n\n\n\n<iframe loading=\"lazy\" \n  width=\"1349\" \n  height=\"759\" \n  src=\"https:\/\/www.youtube.com\/embed\/DZIASl9q90s\" \n  frameborder=\"0\" \n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n  allowfullscreen>\n<\/iframe>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f412d5d701357354f05f2b4e805fe408\"><code>&lt;iframe \n  width=\"1349\" \n  height=\"759\" \n  src=\"https:\/\/www.youtube.com\/embed\/DZIASl9q90s\" \n  frameborder=\"0\" \n  allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" \n  allowfullscreen&gt;\n&lt;\/iframe&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead76c4\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>5<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22 (Tooltip)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Tooltip \u0e04\u0e37\u0e2d\u0e01\u0e25\u0e48\u0e2d\u0e07\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e40\u0e25\u0e47\u0e01 \u0e46 \u0e17\u0e35\u0e48\u0e41\u0e2a\u0e14\u0e07\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e40\u0e2d\u0e32\u0e40\u0e21\u0e32\u0e2a\u0e4c\u0e44\u0e1b\u0e0a\u0e35\u0e49\u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e15\u0e30\u0e17\u0e35\u0e48\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \u0e44\u0e2d\u0e04\u0e2d\u0e19 \u0e2b\u0e23\u0e37\u0e2d\u0e1b\u0e38\u0e48\u0e21\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e23\u0e1a\u0e01\u0e27\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e2b\u0e25\u0e31\u0e01 \u0e0a\u0e48\u0e27\u0e22\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22\u0e04\u0e27\u0e32\u0e21\u0e2b\u0e21\u0e32\u0e22\u0e2b\u0e23\u0e37\u0e2d\u0e27\u0e34\u0e18\u0e35\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e43\u0e2b\u0e49\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19 \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e43\u0e2b\u0e49\u0e04\u0e33\u0e41\u0e19\u0e30\u0e19\u0e33\u0e2a\u0e31\u0e49\u0e19 \u0e46 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e2b\u0e23\u0e37\u0e2d\u0e41\u0e2d\u0e1b\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22\u0e41\u0e25\u0e30\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e37\u0e2d\u0e2d\u0e32\u0e0a\u0e35\u0e1e\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-786acdfe787af4679552bfc6a678900a\" style=\"font-size:25px\">5.1 Tooltip \u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-8d641a6ecd812cb1847eaea0cd0eba0e\"><code>&lt;style&gt;\n.tooltip {\n  position: relative;\n  cursor: pointer;\n  color: #6a5acd;\n  font-weight: bold;\n}\n\n.tooltip::after {\n  content: attr(data-text);\n  position: absolute;\n  bottom: 140%;\n  left: 50%;\n  transform: translateX(-50%);\n  background: #333;\n  color: #fff;\n  padding: 8px 12px;\n  border-radius: 8px;\n  white-space: nowrap;\n  opacity: 0;\n  pointer-events: none;\n  transition: 0.3s;\n}\n\n.tooltip::before {\n  content: \"\";\n  position: absolute;\n  bottom: 120%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #333;\n  opacity: 0;\n  transition: 0.3s;\n}\n\n.tooltip:hover::after,\n.tooltip:hover::before {\n  opacity: 1;\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  Hover over &lt;span class=\"tooltip\" data-text=\"HTML defines the structure of a web page\"&gt;HTML&lt;\/span&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-e8881a9309d5e49a1af04071914ed456\" style=\"font-size:25px\">5.2 Tooltip Fade + Slide \u0e14\u0e39\u0e1e\u0e23\u0e35\u0e40\u0e21\u0e35\u0e22\u0e21<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-32eadd517c5b65910ec3a432a6557092\"><code>&lt;style&gt;\n.tooltip-box {\n  position: relative;\n  display: inline-block;\n  color: #009688;\n  cursor: pointer;\n}\n\n.tooltip-box .tooltip-text {\n  position: absolute;\n  bottom: 130%;\n  left: 50%;\n  transform: translateX(-50%) translateY(10px);\n  background-color: #009688;\n  color: #fff;\n  padding: 8px 14px;\n  border-radius: 20px;\n  opacity: 0;\n  white-space: nowrap;\n  transition: all 0.3s ease;\n}\n\n.tooltip-box:hover .tooltip-text {\n  opacity: 1;\n  transform: translateX(-50%) translateY(0);\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  Hover over \n  &lt;span class=\"tooltip-box\"&gt;\n    CSS\n    &lt;span class=\"tooltip-text\"&gt;CSS styles the website&lt;\/span&gt;\n  &lt;\/span&gt;\n&lt;\/p&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-c24b0ec93269f50d664a891f68cbe6a5\" style=\"font-size:25px\">5.3 Tooltip \u0e42\u0e0a\u0e27\u0e4c\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e04\u0e25\u0e34\u0e4a\u0e01\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-179aa18ce73793954316672bb3d86b3f\"><code>&lt;style&gt;\n.click-tooltip {\n  position: relative;\n  display: inline-block;\n  color: #e91e63;\n  cursor: pointer;\n}\n\n.click-tooltip .tooltip-content {\n  display: none;\n  position: absolute;\n  top: 120%;\n  left: 50%;\n  transform: translateX(-50%);\n  background-color: #e91e63;\n  color: #fff;\n  padding: 10px;\n  border-radius: 10px;\n  white-space: nowrap;\n}\n&lt;\/style&gt;\n\n&lt;p&gt;\n  &lt;span class=\"click-tooltip\" onclick=\"toggleTooltip(this)\"&gt;\n    JavaScript\n    &lt;span class=\"tooltip-content\"&gt;JavaScript makes websites interactive&lt;\/span&gt;\n  &lt;\/span&gt;\n&lt;\/p&gt;\n\n&lt;script&gt;\nfunction toggleTooltip(element) {\n  const tooltip = element.querySelector(\".tooltip-content\");\n  tooltip.style.display = tooltip.style.display === \"block\" ? \"none\" : \"block\";\n}\n&lt;\/script&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadfba6\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>6<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">Popup Card \u0e04\u0e25\u0e34\u0e01\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1e<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u0e04\u0e25\u0e34\u0e01\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1e \u0e04\u0e37\u0e2d\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e41\u0e2a\u0e14\u0e07\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e40\u0e21\u0e37\u0e48\u0e2d\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e04\u0e25\u0e34\u0e01\u0e1b\u0e38\u0e48\u0e21 \u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21 \u0e2b\u0e23\u0e37\u0e2d\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e\u0e41\u0e25\u0e49\u0e27 \u0e08\u0e30\u0e21\u0e35 \u201c\u0e01\u0e32\u0e23\u0e4c\u0e14\u201d \u0e40\u0e14\u0e49\u0e07\u0e02\u0e36\u0e49\u0e19\u0e21\u0e32\u0e1a\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e42\u0e0a\u0e27\u0e4c\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e40\u0e0a\u0e48\u0e19 \u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e \u0e0a\u0e37\u0e48\u0e2d \u0e44\u0e2d\u0e04\u0e2d\u0e19 \u0e2b\u0e23\u0e37\u0e2d\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22 \u0e42\u0e14\u0e22\u0e44\u0e21\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e40\u0e1b\u0e25\u0e35\u0e48\u0e22\u0e19\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a \u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e14\u0e39\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e44\u0e14\u0e49\u0e2a\u0e30\u0e14\u0e27\u0e01 \u0e2b\u0e19\u0e49\u0e32\u0e15\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e21\u0e48\u0e23\u0e01 \u0e41\u0e25\u0e30\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e14\u0e39\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e47\u0e19\u0e21\u0e37\u0e2d\u0e2d\u0e32\u0e0a\u0e35\u0e1e<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-90d7334c6be800ad2f23231d6538a0a5\" style=\"font-size:25px\">6.1 \u0e04\u0e25\u0e34\u0e01\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1e (HTML + CSS + JS)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-1d9b7262c9a3c037011e08855c4c615f\"><code>\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f4f6f8;\n  text-align: center;\n  padding-top: 100px;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 12px 24px;\n  font-size: 16px;\n  background: #4a6cff;\n  color: #fff;\n  border: none;\n  border-radius: 30px;\n  cursor: pointer;\n}\n\n\/* Overlay *\/\n.overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.popup-card {\n  background: #fff;\n  width: 360px;\n  padding: 30px;\n  border-radius: 16px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from {\n    transform: scale(0.8);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 20px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n\n\n&lt;body&gt;\n\n&lt;button class=\"open-btn\" onclick=\"openCard()\"&gt;Click Me&lt;\/button&gt;\n\n&lt;div class=\"overlay\" id=\"overlay\"&gt;\n  &lt;div class=\"popup-card\"&gt;\n    &lt;h2&gt;Hello \ud83d\udc4b&lt;\/h2&gt;\n    &lt;p&gt;This is a popup card shown after clicking.&lt;\/p&gt;\n    &lt;button class=\"close-btn\" onclick=\"closeCard()\"&gt;Close&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openCard() {\n  document.getElementById(\"overlay\").style.display = \"flex\";\n}\n\nfunction closeCard() {\n  document.getElementById(\"overlay\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-fe97618ef2ac43f8bd432493dd5007e9\" style=\"font-size:25px\">6.2 \u0e04\u0e25\u0e34\u0e01\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1e\u0e17\u0e35\u0e48\u0e21\u0e35\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e \u0e44\u0e2d\u0e04\u0e2d\u0e19 \u0e41\u0e25\u0e30\u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-4b02252c0563fdf208b0fc8feed879d4\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Popup Card with Image&lt;\/title&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f2f4f8;\n  text-align: center;\n  padding-top: 100px;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 12px 26px;\n  background: #4a6cff;\n  color: #fff;\n  border: none;\n  border-radius: 30px;\n  font-size: 16px;\n  cursor: pointer;\n}\n\n\/* Overlay *\/\n.overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.card {\n  background: #fff;\n  width: 360px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from { transform: scale(0.85); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n\/* Image *\/\n.card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n\/* Content *\/\n.card-content {\n  padding: 24px;\n}\n\n.card-content h2 {\n  margin: 10px 0;\n}\n\n.icon {\n  font-size: 32px;\n  color: #4a6cff;\n}\n\n.description {\n  color: #555;\n  margin-top: 10px;\n  font-size: 15px;\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 20px;\n  padding: 8px 20px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;button class=\"open-btn\" onclick=\"openCard()\"&gt;Show Card&lt;\/button&gt;\n\n&lt;div class=\"overlay\" id=\"overlay\" onclick=\"closeCard()\"&gt;\n  &lt;div class=\"card\" onclick=\"event.stopPropagation()\"&gt;\n\n    &lt;img src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\" alt=\"Image\"&gt;\n\n    &lt;div class=\"card-content\"&gt;\n      &lt;div class=\"icon\"&gt;\n        &lt;i class=\"fa-solid fa-lightbulb\"&gt;&lt;\/i&gt;\n      &lt;\/div&gt;\n\n      &lt;h2&gt;SiamMakeMoney&lt;\/h2&gt;\n\n      &lt;p class=\"description\"&gt;\n        Learn digital skills and build online income with practical knowledge.\n      &lt;\/p&gt;\n\n      &lt;button class=\"close-btn\" onclick=\"closeCard()\"&gt;Close&lt;\/button&gt;\n    &lt;\/div&gt;\n\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openCard() {\n  document.getElementById(\"overlay\").style.display = \"flex\";\n}\n\nfunction closeCard() {\n  document.getElementById(\"overlay\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-a99c6ed2018709a9c635f087ae46c6be\" style=\"font-size:25px\">6.3 \u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1e\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e17\u0e35\u0e48\u0e2a\u0e27\u0e22 + \u0e40\u0e1b\u0e47\u0e19\u0e21\u0e34\u0e15\u0e23\u0e01\u0e31\u0e1a SEO<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-035a3e51e43c3a51f85be6ef989f15e6\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;SiamMakeMoney \u2013 SEO Friendly Popup&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Learn digital skills and build online income with SiamMakeMoney\"&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 60px;\n  text-align: center;\n}\n\n\/* Main content *\/\nh1 {\n  color: #333;\n}\n\np {\n  color: #555;\n  max-width: 600px;\n  margin: 20px auto;\n}\n\n\/* Button *\/\n.open-btn {\n  padding: 10px 22px;\n  border-radius: 25px;\n  border: none;\n  background: #4a6cff;\n  color: #fff;\n  cursor: pointer;\n  font-size: 15px;\n}\n\n\/* Overlay *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n\/* Card *\/\n.popup-card {\n  background: #fff;\n  width: 380px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n\/* Image *\/\n.popup-card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n\/* Content *\/\n.card-content {\n  padding: 24px;\n}\n\n.card-content h2 {\n  margin: 12px 0;\n  color: #333;\n}\n\n.icon {\n  font-size: 30px;\n  color: #4a6cff;\n}\n\n.description {\n  font-size: 15px;\n  color: #555;\n  margin-top: 10px;\n}\n\n\/* Close button *\/\n.close-btn {\n  margin-top: 18px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;main&gt;\n  &lt;!-- SEO main content --&gt;\n  &lt;h1&gt;SiamMakeMoney&lt;\/h1&gt;\n  &lt;p&gt;\n    SiamMakeMoney helps people learn digital skills and build sustainable\n    online income with practical knowledge.\n  &lt;\/p&gt;\n\n  &lt;button class=\"open-btn\" onclick=\"openPopup()\"&gt;Learn More&lt;\/button&gt;\n\n  &lt;!-- Popup (content already in HTML = SEO friendly) --&gt;\n  &lt;section class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n    &lt;article class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n\n      &lt;img src=\"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\" alt=\"Digital learning\"&gt;\n\n      &lt;div class=\"card-content\"&gt;\n        &lt;div class=\"icon\"&gt;\n          &lt;i class=\"fa-solid fa-lightbulb\"&gt;&lt;\/i&gt;\n        &lt;\/div&gt;\n\n        &lt;h2&gt;Digital Knowledge&lt;\/h2&gt;\n\n        &lt;p class=\"description\"&gt;\n          Learn online business, marketing, and digital skills with step-by-step\n          guidance designed for real results.\n        &lt;\/p&gt;\n\n        &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n      &lt;\/div&gt;\n\n    &lt;\/article&gt;\n  &lt;\/section&gt;\n&lt;\/main&gt;\n\n&lt;script&gt;\nfunction openPopup() {\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-341849e52864bae4837641281e02cba5\" style=\"font-size:25px\">6.4 Dynamic Popup Cards (Single HTML File)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f4cc34b69257d73b29db6e07c173d73b\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;SiamMakeMoney \u2013 Dynamic Cards&lt;\/title&gt;\n&lt;meta name=\"description\" content=\"Learn digital skills and build online income with SiamMakeMoney\"&gt;\n\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n  text-align: center;\n}\n\n\/* Grid *\/\n.card-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));\n  gap: 20px;\n  max-width: 900px;\n  margin: 40px auto;\n}\n\n\/* Card item *\/\n.card-item {\n  background: #fff;\n  padding: 20px;\n  border-radius: 16px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n  cursor: pointer;\n  transition: transform 0.2s;\n}\n\n.card-item:hover {\n  transform: translateY(-5px);\n}\n\n.card-item i {\n  font-size: 32px;\n  color: #4a6cff;\n}\n\n.card-item h3 {\n  margin-top: 10px;\n  color: #333;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 380px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.popup-card img {\n  width: 100%;\n  height: 200px;\n  object-fit: cover;\n}\n\n.popup-content {\n  padding: 24px;\n}\n\n.popup-content h2 {\n  margin: 10px 0;\n}\n\n.popup-content p {\n  color: #555;\n}\n\n.close-btn {\n  margin-top: 15px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h1&gt;SiamMakeMoney&lt;\/h1&gt;\n&lt;p&gt;Click a card to learn more&lt;\/p&gt;\n\n&lt;!-- Cards --&gt;\n&lt;div class=\"card-grid\" id=\"cardGrid\"&gt;&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;img id=\"popupImage\" src=\"\" alt=\"\"&gt;\n    &lt;div class=\"popup-content\"&gt;\n      &lt;i id=\"popupIcon\" class=\"\"&gt;&lt;\/i&gt;\n      &lt;h2 id=\"popupTitle\"&gt;&lt;\/h2&gt;\n      &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n      &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\n\/\/ Card data (Dynamic)\nconst cards = &#91;\n  {\n    title: \"Online Business\",\n    icon: \"fa-solid fa-briefcase\",\n    image: \"https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f\",\n    description: \"Learn how to build and grow online businesses step by step.\"\n  },\n  {\n    title: \"Digital Marketing\",\n    icon: \"fa-solid fa-bullhorn\",\n    image: \"https:\/\/images.unsplash.com\/photo-1557838923-2985c318be48\",\n    description: \"Understand SEO, ads, and social media marketing strategies.\"\n  },\n  {\n    title: \"Passive Income\",\n    icon: \"fa-solid fa-coins\",\n    image: \"https:\/\/images.unsplash.com\/photo-1605902711622-cfb43c44367f\",\n    description: \"Create income streams that work for you automatically.\"\n  }\n];\n\n\/\/ Render cards\nconst cardGrid = document.getElementById(\"cardGrid\");\n\ncards.forEach((card, index) =&gt; {\n  const div = document.createElement(\"div\");\n  div.className = \"card-item\";\n  div.innerHTML = `\n    &lt;i class=\"${card.icon}\"&gt;&lt;\/i&gt;\n    &lt;h3&gt;${card.title}&lt;\/h3&gt;\n  `;\n  div.onclick = () =&gt; openPopup(card);\n  cardGrid.appendChild(div);\n});\n\n\/\/ Popup functions\nfunction openPopup(card) {\n  document.getElementById(\"popupImage\").src = card.image;\n  document.getElementById(\"popupImage\").alt = card.title;\n  document.getElementById(\"popupIcon\").className = card.icon;\n  document.getElementById(\"popupTitle\").textContent = card.title;\n  document.getElementById(\"popupDescription\").textContent = card.description;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead8c10\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>7<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u0e42\u0e04\u0e49\u0e14\u0e15\u0e32\u0e23\u0e32\u0e07\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 <\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u0e15\u0e32\u0e23\u0e32\u0e07 \u0e04\u0e37\u0e2d\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e43\u0e2b\u0e49\u0e2d\u0e22\u0e39\u0e48\u0e40\u0e1b\u0e47\u0e19\u0e0a\u0e48\u0e2d\u0e07 \u0e46 \u0e40\u0e23\u0e35\u0e22\u0e07\u0e40\u0e1b\u0e47\u0e19\u0e41\u0e16\u0e27\u0e41\u0e25\u0e30\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a\u0e41\u0e25\u0e30\u0e40\u0e1b\u0e23\u0e35\u0e22\u0e1a\u0e40\u0e17\u0e35\u0e22\u0e1a\u0e01\u0e31\u0e19\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22 \u0e40\u0e0a\u0e48\u0e19 \u0e15\u0e32\u0e23\u0e32\u0e07\u0e23\u0e32\u0e04\u0e32 \u0e15\u0e32\u0e23\u0e32\u0e07\u0e23\u0e32\u0e22\u0e0a\u0e37\u0e48\u0e2d \u0e2b\u0e23\u0e37\u0e2d\u0e1c\u0e25\u0e04\u0e30\u0e41\u0e19\u0e19 \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e2d\u0e48\u0e32\u0e19\u0e21\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e0a\u0e31\u0e14\u0e40\u0e08\u0e19 \u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e40\u0e23\u0e47\u0e27 \u0e41\u0e25\u0e30\u0e04\u0e49\u0e19\u0e2b\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e44\u0e14\u0e49\u0e2a\u0e30\u0e14\u0e27\u0e01<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-189b8720b8b13e81ef51e39d896407c8\" style=\"font-size:25px\">7.1 \u0e42\u0e04\u0e49\u0e14\u0e15\u0e32\u0e23\u0e32\u0e07\u0e02\u0e31\u0e49\u0e19\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 Responsive \u0e23\u0e2d\u0e07\u0e23\u0e31\u0e1a\u0e17\u0e38\u0e01\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"245\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-1024x245.webp\" alt=\"\" class=\"wp-image-6026\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-1024x245.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-300x72.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-768x184.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-18x4.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-400x96.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-800x191.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot-832x199.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-17-33-20-painty-screenshot.webp 1171w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-56002361d52eb72fde2e629e31cc7905\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Responsive Table&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table wrapper *\/\n.table-container {\n  max-width: 1000px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 12px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\n\/* Table *\/\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 600px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\nth {\n  font-weight: bold;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\ntbody tr:hover {\n  background: #eaf0ff;\n}\n\n\/* Mobile view *\/\n@media (max-width: 600px) {\n  table {\n    min-width: 100%;\n  }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Course List&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n  &lt;table&gt;\n    &lt;thead&gt;\n      &lt;tr&gt;\n        &lt;th&gt;Course&lt;\/th&gt;\n        &lt;th&gt;Level&lt;\/th&gt;\n        &lt;th&gt;Duration&lt;\/th&gt;\n        &lt;th&gt;Price&lt;\/th&gt;\n      &lt;\/tr&gt;\n    &lt;\/thead&gt;\n    &lt;tbody&gt;\n      &lt;tr&gt;\n        &lt;td&gt;HTML Basics&lt;\/td&gt;\n        &lt;td&gt;Beginner&lt;\/td&gt;\n        &lt;td&gt;4 Weeks&lt;\/td&gt;\n        &lt;td&gt;Free&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;CSS Design&lt;\/td&gt;\n        &lt;td&gt;Intermediate&lt;\/td&gt;\n        &lt;td&gt;6 Weeks&lt;\/td&gt;\n        &lt;td&gt;$49&lt;\/td&gt;\n      &lt;\/tr&gt;\n      &lt;tr&gt;\n        &lt;td&gt;JavaScript&lt;\/td&gt;\n        &lt;td&gt;Advanced&lt;\/td&gt;\n        &lt;td&gt;8 Weeks&lt;\/td&gt;\n        &lt;td&gt;$99&lt;\/td&gt;\n      &lt;\/tr&gt;\n    &lt;\/tbody&gt;\n  &lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-1808e3d519b53641e88c42a29458d625\" style=\"font-size:25px\">7.2 \u0e15\u0e32\u0e23\u0e32\u0e07\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e44\u0e2d\u0e04\u0e2d\u0e19 + \u0e0a\u0e37\u0e48\u0e2d\u0e17\u0e35\u0e48\u0e04\u0e25\u0e34\u0e01\u0e44\u0e14\u0e49 + \u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1e + \u0e1b\u0e38\u0e48\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"215\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-1024x215.webp\" alt=\"\" class=\"wp-image-6039\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-1024x215.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-300x63.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-768x162.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-18x4.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-400x84.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-800x168.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot-832x175.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-30-55-painty-screenshot.webp 1122w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-f5ec3b4fdbf29eff44000d516fd6ed24\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Interactive Table&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;!-- Font Awesome --&gt;\n&lt;link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.0\/css\/all.min.css\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table container *\/\n.table-container {\n  max-width: 1000px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 700px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\n\/* Name clickable *\/\n.name {\n  color: #4a6cff;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n.icon {\n  margin-right: 8px;\n  color: #4a6cff;\n}\n\n\/* Button *\/\n.visit-btn {\n  padding: 8px 16px;\n  background: #4caf50;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 20px;\n  font-size: 14px;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.5);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 360px;\n  border-radius: 16px;\n  padding: 24px;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.25);\n  animation: pop 0.3s ease;\n}\n\n@keyframes pop {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.close-btn {\n  margin-top: 16px;\n  padding: 8px 18px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Learning Platforms&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Name&lt;\/th&gt;\n      &lt;th&gt;Category&lt;\/th&gt;\n      &lt;th&gt;Website&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;i class=\"fa-solid fa-lightbulb icon\"&gt;&lt;\/i&gt;\n        &lt;span class=\"name\" onclick=\"openPopup('SiamMakeMoney','A platform that teaches digital skills and online income step by step.')\"&gt;\n          SiamMakeMoney\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Online Business&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;\n          Visit\n        &lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;i class=\"fa-solid fa-code icon\"&gt;&lt;\/i&gt;\n        &lt;span class=\"name\" onclick=\"openPopup('Web Learning','Learn HTML, CSS, and JavaScript from beginner to advanced.')\"&gt;\n          Web Learning\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Programming&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/www.w3schools.com\" target=\"_blank\"&gt;\n          Visit\n        &lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;h3 id=\"popupTitle\"&gt;&lt;\/h3&gt;\n    &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n    &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openPopup(title, description) {\n  document.getElementById(\"popupTitle\").textContent = title;\n  document.getElementById(\"popupDescription\").textContent = description;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-95efdbd3e1e42505cda07415c1c5cf04\" style=\"font-size:25px\">7.3 \u0e15\u0e32\u0e23\u0e32\u0e07\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e44\u0e2d\u0e04\u0e2d\u0e19 + \u0e0a\u0e37\u0e48\u0e2d\u0e17\u0e35\u0e48\u0e04\u0e25\u0e34\u0e01\u0e44\u0e14\u0e49 + \u0e1b\u0e4a\u0e2d\u0e1b\u0e2d\u0e31\u0e1e + \u0e1b\u0e38\u0e48\u0e21\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"466\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-1024x466.webp\" alt=\"\" class=\"wp-image-6042\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-1024x466.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-300x137.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-768x350.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-18x8.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-400x182.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-800x364.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot-832x379.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/24-01-2026-18-38-56-painty-screenshot.webp 1236w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-89acb2b87593e298c37c25923d332590\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Advanced Table with Popup&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  font-family: Arial, sans-serif;\n  background: #f5f7fa;\n  padding: 40px;\n}\n\n\/* Table container *\/\n.table-container {\n  max-width: 1100px;\n  margin: auto;\n  overflow-x: auto;\n  background: #fff;\n  border-radius: 14px;\n  box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n}\n\ntable {\n  width: 100%;\n  border-collapse: collapse;\n  min-width: 800px;\n}\n\nthead {\n  background: #4a6cff;\n  color: #fff;\n}\n\nth, td {\n  padding: 14px 16px;\n  text-align: left;\n}\n\ntbody tr:nth-child(even) {\n  background: #f2f4f8;\n}\n\n\/* Icon image *\/\n.icon-img {\n  width: 20px;\n  height: 20px;\n  vertical-align: middle;\n  margin-right: 8px;\n}\n\n\/* Clickable name *\/\n.name {\n  color: #4a6cff;\n  font-weight: bold;\n  cursor: pointer;\n}\n\n\/* Stars *\/\n.stars {\n  color: #ffb400;\n  font-size: 16px;\n}\n\n\/* Popup *\/\n.popup-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0,0,0,0.55);\n  display: none;\n  justify-content: center;\n  align-items: center;\n}\n\n.popup-card {\n  background: #fff;\n  width: 400px;\n  border-radius: 18px;\n  overflow: hidden;\n  box-shadow: 0 25px 50px rgba(0,0,0,0.3);\n  animation: popup 0.3s ease;\n}\n\n@keyframes popup {\n  from { transform: scale(0.9); opacity: 0; }\n  to { transform: scale(1); opacity: 1; }\n}\n\n.popup-card img {\n  width: 100%;\n  height: 220px;\n  object-fit: cover;\n}\n\n.popup-content {\n  padding: 24px;\n}\n\n.popup-content h3 {\n  margin: 10px 0;\n}\n\n.popup-content p {\n  color: #555;\n  font-size: 15px;\n}\n\n.price {\n  margin: 12px 0;\n  font-size: 18px;\n  font-weight: bold;\n  color: #4caf50;\n}\n\n.popup-actions {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-top: 16px;\n}\n\n.visit-btn {\n  padding: 10px 18px;\n  background: #4a6cff;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 22px;\n  font-size: 14px;\n}\n\n.close-btn {\n  padding: 8px 16px;\n  border: none;\n  background: #e91e63;\n  color: #fff;\n  border-radius: 20px;\n  cursor: pointer;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2&gt;Recommended Platforms&lt;\/h2&gt;\n\n&lt;div class=\"table-container\"&gt;\n&lt;table&gt;\n  &lt;thead&gt;\n    &lt;tr&gt;\n      &lt;th&gt;Name&lt;\/th&gt;\n      &lt;th&gt;Category&lt;\/th&gt;\n      &lt;th&gt;Rating&lt;\/th&gt;\n      &lt;th&gt;Website&lt;\/th&gt;\n    &lt;\/tr&gt;\n  &lt;\/thead&gt;\n  &lt;tbody&gt;\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;img src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1828\/1828884.png\" class=\"icon-img\" alt=\"icon\"&gt;\n        &lt;span class=\"name\"\n          onclick=\"openPopup(\n            'SiamMakeMoney',\n            'https:\/\/images.unsplash.com\/photo-1522202176988-66273c2fd55f',\n            'A platform that teaches digital skills and online income step by step.',\n            '$49 \/ month',\n            'https:\/\/siammakemoney.com'\n          )\"&gt;\n          SiamMakeMoney\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Online Business&lt;\/td&gt;\n      &lt;td class=\"stars\"&gt;\u2605\u2605\u2605\u2605\u2605&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/siammakemoney.com\" target=\"_blank\"&gt;Visit&lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n\n    &lt;tr&gt;\n      &lt;td&gt;\n        &lt;img src=\"https:\/\/cdn-icons-png.flaticon.com\/512\/1055\/1055687.png\" class=\"icon-img\" alt=\"icon\"&gt;\n        &lt;span class=\"name\"\n          onclick=\"openPopup(\n            'Web Learning',\n            'https:\/\/images.unsplash.com\/photo-1518770660439-4636190af475',\n            'Learn HTML, CSS, and JavaScript from beginner to advanced.',\n            'Free',\n            'https:\/\/www.w3schools.com'\n          )\"&gt;\n          Web Learning\n        &lt;\/span&gt;\n      &lt;\/td&gt;\n      &lt;td&gt;Programming&lt;\/td&gt;\n      &lt;td class=\"stars\"&gt;\u2605\u2605\u2605\u2605\u2606&lt;\/td&gt;\n      &lt;td&gt;\n        &lt;a class=\"visit-btn\" href=\"https:\/\/www.w3schools.com\" target=\"_blank\"&gt;Visit&lt;\/a&gt;\n      &lt;\/td&gt;\n    &lt;\/tr&gt;\n  &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;\/div&gt;\n\n&lt;!-- Popup --&gt;\n&lt;div class=\"popup-overlay\" id=\"popup\" onclick=\"closePopup()\"&gt;\n  &lt;div class=\"popup-card\" onclick=\"event.stopPropagation()\"&gt;\n    &lt;img id=\"popupImage\" src=\"\" alt=\"\"&gt;\n    &lt;div class=\"popup-content\"&gt;\n      &lt;h3 id=\"popupTitle\"&gt;&lt;\/h3&gt;\n      &lt;p id=\"popupDescription\"&gt;&lt;\/p&gt;\n      &lt;div class=\"price\" id=\"popupPrice\"&gt;&lt;\/div&gt;\n\n      &lt;div class=\"popup-actions\"&gt;\n        &lt;a id=\"popupLink\" class=\"visit-btn\" href=\"#\" target=\"_blank\"&gt;Visit Website&lt;\/a&gt;\n        &lt;button class=\"close-btn\" onclick=\"closePopup()\"&gt;Close&lt;\/button&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script&gt;\nfunction openPopup(title, image, description, price, link) {\n  document.getElementById(\"popupTitle\").textContent = title;\n  document.getElementById(\"popupImage\").src = image;\n  document.getElementById(\"popupDescription\").textContent = description;\n  document.getElementById(\"popupPrice\").textContent = price;\n  document.getElementById(\"popupLink\").href = link;\n  document.getElementById(\"popup\").style.display = \"flex\";\n}\n\nfunction closePopup() {\n  document.getElementById(\"popup\").style.display = \"none\";\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadcb35\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>8<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u0e42\u0e04\u0e49\u0e14\u0e1b\u0e38\u0e48\u0e21\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e41\u0e1a\u0e1a\u0e07\u0e48\u0e32\u0e22\u0e17\u0e35\u0e48\u0e2a\u0e38\u0e14<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>\u0e1b\u0e38\u0e48\u0e21\u0e25\u0e34\u0e07\u0e01\u0e4c (Link Button)<\/strong> \u0e04\u0e37\u0e2d\u0e01\u0e32\u0e23\u0e19\u0e33\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e17\u0e35\u0e48\u0e1b\u0e01\u0e15\u0e34\u0e40\u0e1b\u0e47\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e18\u0e23\u0e23\u0e21\u0e14\u0e32 \u0e21\u0e32\u0e2d\u0e2d\u0e01\u0e41\u0e1a\u0e1a\u0e43\u0e2b\u0e49\u0e21\u0e35\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e32\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e1b\u0e38\u0e48\u0e21 \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e21\u0e2d\u0e07\u0e40\u0e2b\u0e47\u0e19\u0e0a\u0e31\u0e14 \u0e19\u0e48\u0e32\u0e04\u0e25\u0e34\u0e01 \u0e41\u0e25\u0e30\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e17\u0e31\u0e19\u0e17\u0e35\u0e27\u0e48\u0e32\u0e01\u0e14\u0e41\u0e25\u0e49\u0e27\u0e08\u0e30\u0e44\u0e1b\u0e17\u0e33\u0e2d\u0e30\u0e44\u0e23 \u0e40\u0e0a\u0e48\u0e19 \u0e44\u0e1b\u0e2b\u0e19\u0e49\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2d\u0e37\u0e48\u0e19 \u0e2a\u0e21\u0e31\u0e04\u0e23\u0e2a\u0e21\u0e32\u0e0a\u0e34\u0e01 \u0e2b\u0e23\u0e37\u0e2d\u0e14\u0e39\u0e23\u0e32\u0e22\u0e25\u0e30\u0e40\u0e2d\u0e35\u0e22\u0e14\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e40\u0e15\u0e34\u0e21 \u0e42\u0e14\u0e22\u0e1b\u0e38\u0e48\u0e21\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e21\u0e31\u0e01\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e08\u0e32\u0e01 HTML \u0e23\u0e48\u0e27\u0e21\u0e01\u0e31\u0e1a CSS \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e22\u0e31\u0e07\u0e04\u0e07\u0e17\u0e33\u0e07\u0e32\u0e19\u0e40\u0e2b\u0e21\u0e37\u0e2d\u0e19\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e1b\u0e01\u0e15\u0e34 (\u0e14\u0e35\u0e15\u0e48\u0e2d SEO \u0e41\u0e25\u0e30\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22) \u0e41\u0e15\u0e48\u0e21\u0e35\u0e23\u0e39\u0e1b\u0e25\u0e31\u0e01\u0e29\u0e13\u0e4c\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21\u0e41\u0e25\u0e30\u0e0a\u0e48\u0e27\u0e22\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e42\u0e2d\u0e01\u0e32\u0e2a\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e04\u0e25\u0e34\u0e01\u0e21\u0e32\u0e01\u0e02\u0e36\u0e49\u0e19<\/div><\/div><\/div>\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-53ce3d46c3f858939580183275f08348\"><code>&lt;style&gt;\n.btn {\n  display: inline-block;\n  padding: 12px 24px;\n  background: #4a6cff;\n  color: #ffffff;\n  text-decoration: none;\n  border-radius: 25px;\n  font-size: 16px;\n}\n&lt;\/style&gt;\n&lt;a href=\"https:\/\/siammakemoney.com\" class=\"btn\" target=\"_blank\"&gt;\n  Visit Website\n&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-00a9c7e39d2e8868fec38719966748c3\" style=\"font-size:25px\">8.1 \u0e1b\u0e38\u0e48\u0e21\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e1e\u0e23\u0e49\u0e2d\u0e21\u0e40\u0e2d\u0e1f\u0e40\u0e1f\u0e01\u0e15\u0e4c Hover<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-ff11b34ce6a5bfc4f388c4cf5368a9fc\"><code>&lt;style&gt;\n.btn {\n  padding: 12px 24px;\n  background: #4a6cff;\n  color: white;\n  text-decoration: none;\n  border-radius: 30px;\n  transition: 0.3s;\n}\n\n.btn:hover {\n  background: #324de3;\n  transform: translateY(-2px);\n}\n&lt;\/style&gt;\n\n&lt;br&gt;\n&lt;a href=\"https:\/\/siammakemoney.com\" class=\"btn\" target=\"_blank\"&gt;\n  Visit Website\n&lt;\/a&gt;<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nheadcdff\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>9<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u0e42\u0e04\u0e49\u0e14\u0e40\u0e21\u0e19\u0e39\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">\u0e42\u0e04\u0e49\u0e14\u0e40\u0e21\u0e19\u0e39 (Menu Code) \u0e04\u0e37\u0e2d\u0e0a\u0e38\u0e14\u0e04\u0e33\u0e2a\u0e31\u0e48\u0e07\u0e17\u0e35\u0e48\u0e43\u0e0a\u0e49\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e41\u0e16\u0e1a\u0e40\u0e21\u0e19\u0e39\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e04\u0e25\u0e34\u0e01\u0e19\u0e33\u0e17\u0e32\u0e07\u0e44\u0e1b\u0e22\u0e31\u0e07\u0e2b\u0e19\u0e49\u0e32\u0e15\u0e48\u0e32\u0e07 \u0e46 \u0e40\u0e0a\u0e48\u0e19 \u0e2b\u0e19\u0e49\u0e32\u0e41\u0e23\u0e01 \u0e40\u0e01\u0e35\u0e48\u0e22\u0e27\u0e01\u0e31\u0e1a\u0e40\u0e23\u0e32 \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 \u0e2b\u0e23\u0e37\u0e2d \u0e15\u0e34\u0e14\u0e15\u0e48\u0e2d\u0e40\u0e23\u0e32 \u0e42\u0e14\u0e22\u0e17\u0e31\u0e48\u0e27\u0e44\u0e1b\u0e42\u0e04\u0e49\u0e14\u0e40\u0e21\u0e19\u0e39\u0e08\u0e30\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22 HTML \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e42\u0e04\u0e23\u0e07\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e25\u0e34\u0e07\u0e01\u0e4c, CSS \u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e15\u0e01\u0e41\u0e15\u0e48\u0e07\u0e43\u0e2b\u0e49\u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21 \u0e41\u0e25\u0e30\u0e2d\u0e32\u0e08\u0e21\u0e35 JavaScript \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e04\u0e27\u0e32\u0e21\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1e\u0e34\u0e40\u0e28\u0e29 \u0e40\u0e0a\u0e48\u0e19 \u0e40\u0e21\u0e19\u0e39\u0e22\u0e48\u0e2d\u2013\u0e02\u0e22\u0e32\u0e22\u0e2b\u0e23\u0e37\u0e2d\u0e40\u0e21\u0e19\u0e39\u0e1a\u0e19\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d \u0e0b\u0e36\u0e48\u0e07\u0e42\u0e04\u0e49\u0e14\u0e40\u0e21\u0e19\u0e39\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22 \u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a \u0e41\u0e25\u0e30\u0e17\u0e33\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e43\u0e0a\u0e49\u0e2b\u0e32\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e17\u0e35\u0e48\u0e15\u0e49\u0e2d\u0e07\u0e01\u0e32\u0e23\u0e44\u0e14\u0e49\u0e23\u0e27\u0e14\u0e40\u0e23\u0e47\u0e27\u0e02\u0e36\u0e49\u0e19<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-a557623bcb2cb8411ecaf81b004eb889\" style=\"font-size:25px\">9.1 \u0e40\u0e21\u0e19\u0e39\u0e1e\u0e37\u0e49\u0e19\u0e10\u0e32\u0e19 (Simple Navigation Menu)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-4d5a3900ab9150a6e9acc99dae941c35\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Simple Menu&lt;\/title&gt;\n&lt;style&gt;\nbody {\n  margin: 0;\n  font-family: Arial, sans-serif;\n}\n\nnav {\n  background: #4a6cff;\n  padding: 12px 24px;\n}\n\nnav a {\n  color: #fff;\n  text-decoration: none;\n  margin-right: 20px;\n  font-weight: bold;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;nav&gt;\n  &lt;a href=\"#\"&gt;Home&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;About&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;Services&lt;\/a&gt;\n  &lt;a href=\"#\"&gt;Contact&lt;\/a&gt;\n&lt;\/nav&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-13624e31f5eddf0b15196cbcc9bdac8d\" style=\"font-size:25px\">9.2 \u0e40\u0e21\u0e19\u0e39 Responsive (\u0e41\u0e19\u0e30\u0e19\u0e33 \u0e43\u0e0a\u0e49\u0e44\u0e14\u0e49\u0e17\u0e38\u0e01\u0e2d\u0e38\u0e1b\u0e01\u0e23\u0e13\u0e4c)<\/h3>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-3f3f5c4f77f40fab47342a64872210be\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Responsive Menu&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  margin: 0;\n  font-family: Arial, sans-serif;\n}\n\nnav {\n  background: #4a6cff;\n  padding: 14px 20px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.logo {\n  color: #fff;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.menu {\n  display: flex;\n  gap: 20px;\n}\n\n.menu a {\n  color: #fff;\n  text-decoration: none;\n  font-weight: bold;\n}\n\n.menu-btn {\n  display: none;\n  font-size: 24px;\n  color: #fff;\n  cursor: pointer;\n}\n\n\/* Mobile *\/\n@media (max-width: 768px) {\n  .menu {\n    display: none;\n    flex-direction: column;\n    background: #4a6cff;\n    position: absolute;\n    top: 56px;\n    right: 0;\n    width: 100%;\n    text-align: center;\n    padding: 20px 0;\n  }\n\n  .menu.show {\n    display: flex;\n  }\n\n  .menu-btn {\n    display: block;\n  }\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;nav&gt;\n  &lt;div class=\"logo\"&gt;MyWebsite&lt;\/div&gt;\n\n  &lt;div class=\"menu-btn\" onclick=\"toggleMenu()\"&gt;\u2630&lt;\/div&gt;\n\n  &lt;div class=\"menu\" id=\"menu\"&gt;\n    &lt;a href=\"#\"&gt;Home&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;About&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;Services&lt;\/a&gt;\n    &lt;a href=\"#\"&gt;Contact&lt;\/a&gt;\n  &lt;\/div&gt;\n&lt;\/nav&gt;\n\n&lt;script&gt;\nfunction toggleMenu() {\n  document.getElementById(\"menu\").classList.toggle(\"show\");\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n\n\n<div class=\"gc-numhead gc-numhead__mcenter\" id=\"nhead0b83\"><div class=\"gc-numhead__position\" style=\"color:; border-color:\"><span>10<\/span><\/div><div><h2 class=\"gc-numhead__title\" style=\"color:#0ea399\">\u0e42\u0e04\u0e49\u0e14\u0e01\u0e23\u0e34\u0e14\u0e01\u0e32\u0e23\u0e4c\u0e14 (Card Grid)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>\u0e01\u0e23\u0e34\u0e14\u0e01\u0e32\u0e23\u0e4c\u0e14 (Grid Card)<\/strong> \u0e04\u0e37\u0e2d\u0e23\u0e39\u0e1b\u0e41\u0e1a\u0e1a\u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e27\u0e32\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e1a\u0e19\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e42\u0e14\u0e22\u0e43\u0e0a\u0e49 \u201c\u0e01\u0e32\u0e23\u0e4c\u0e14\u201d \u0e2b\u0e25\u0e32\u0e22\u0e43\u0e1a\u0e40\u0e23\u0e35\u0e22\u0e07\u0e01\u0e31\u0e19\u0e40\u0e1b\u0e47\u0e19\u0e15\u0e32\u0e23\u0e32\u0e07 (\u0e01\u0e23\u0e34\u0e14) \u0e41\u0e15\u0e48\u0e25\u0e30\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e21\u0e31\u0e01\u0e1b\u0e23\u0e30\u0e01\u0e2d\u0e1a\u0e14\u0e49\u0e27\u0e22\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e \u0e0a\u0e37\u0e48\u0e2d \u0e04\u0e33\u0e2d\u0e18\u0e34\u0e1a\u0e32\u0e22 \u0e41\u0e25\u0e30\u0e1b\u0e38\u0e48\u0e21\u0e2b\u0e23\u0e37\u0e2d\u0e02\u0e49\u0e2d\u0e21\u0e39\u0e25\u0e2a\u0e33\u0e04\u0e31\u0e0d \u0e40\u0e2b\u0e21\u0e32\u0e30\u0e2a\u0e33\u0e2b\u0e23\u0e31\u0e1a\u0e41\u0e2a\u0e14\u0e07\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e2a\u0e34\u0e19\u0e04\u0e49\u0e32 \u0e1a\u0e17\u0e04\u0e27\u0e32\u0e21 \u0e1a\u0e23\u0e34\u0e01\u0e32\u0e23 \u0e2b\u0e23\u0e37\u0e2d\u0e04\u0e2d\u0e23\u0e4c\u0e2a\u0e40\u0e23\u0e35\u0e22\u0e19 \u0e02\u0e49\u0e2d\u0e14\u0e35\u0e02\u0e2d\u0e07\u0e01\u0e23\u0e34\u0e14\u0e01\u0e32\u0e23\u0e4c\u0e14\u0e04\u0e37\u0e2d\u0e14\u0e39\u0e40\u0e1b\u0e47\u0e19\u0e23\u0e30\u0e40\u0e1a\u0e35\u0e22\u0e1a \u0e2a\u0e27\u0e22\u0e07\u0e32\u0e21 \u0e2d\u0e48\u0e32\u0e19\u0e07\u0e48\u0e32\u0e22 \u0e41\u0e25\u0e30\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e1b\u0e23\u0e31\u0e1a\u0e08\u0e33\u0e19\u0e27\u0e19\u0e04\u0e2d\u0e25\u0e31\u0e21\u0e19\u0e4c\u0e2d\u0e31\u0e15\u0e42\u0e19\u0e21\u0e31\u0e15\u0e34\u0e15\u0e32\u0e21\u0e02\u0e19\u0e32\u0e14\u0e2b\u0e19\u0e49\u0e32\u0e08\u0e2d \u0e17\u0e33\u0e43\u0e2b\u0e49\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e44\u0e14\u0e49\u0e14\u0e35\u0e17\u0e31\u0e49\u0e07\u0e1a\u0e19\u0e04\u0e2d\u0e21\u0e1e\u0e34\u0e27\u0e40\u0e15\u0e2d\u0e23\u0e4c\u0e41\u0e25\u0e30\u0e21\u0e37\u0e2d\u0e16\u0e37\u0e2d<\/div><\/div><\/div>\n\n\n<h3 class=\"wp-block-heading has-red-color has-text-color has-link-color wp-elements-41067ab524c48302a507b4f6ad3d09ae\" style=\"font-size:25px\">10.1 \u0e42\u0e04\u0e49\u0e14\u0e01\u0e23\u0e34\u0e14\u0e01\u0e32\u0e23\u0e4c\u0e14 (Card Grid \u2013 Responsive)<\/h3>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"285\" src=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1024x285.webp\" alt=\"\" class=\"wp-image-6064\" title=\"\" srcset=\"https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1024x285.webp 1024w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-300x84.webp 300w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-768x214.webp 768w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-18x5.webp 18w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-400x111.webp 400w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-800x223.webp 800w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-832x232.webp 832w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot-1248x348.webp 1248w, https:\/\/siammakemoney.com\/wp-content\/uploads\/2025\/09\/26-01-2026-11-49-31-painty-screenshot.webp 1349w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code has-layout-color has-primary-background-color has-text-color has-background has-link-color wp-elements-18910c19484491f33915ff7c5ef370d2\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n&lt;head&gt;\n&lt;meta charset=\"UTF-8\"&gt;\n&lt;title&gt;Beautiful Card Grid&lt;\/title&gt;\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n\n&lt;style&gt;\nbody {\n  margin: 0;\n  padding: 40px;\n  font-family: Arial, sans-serif;\n  background: #f0f2f5;\n}\n\n\/* Grid *\/\n.grid {\n  max-width: 1200px;\n  margin: auto;\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n  gap: 30px;\n}\n\n\/* Card *\/\n.card {\n  background: #fff;\n  border-radius: 20px;\n  padding: 24px;\n  box-shadow: 0 15px 35px rgba(0,0,0,0.1);\n  position: relative;\n  transition: 0.3s;\n}\n\n.card:hover {\n  transform: translateY(-8px);\n  box-shadow: 0 25px 50px rgba(0,0,0,0.15);\n}\n\n\/* Badge *\/\n.badge {\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  background: #ff5722;\n  color: #fff;\n  font-size: 12px;\n  padding: 6px 12px;\n  border-radius: 20px;\n}\n\n\/* Icon *\/\n.icon {\n  font-size: 40px;\n  margin-bottom: 16px;\n}\n\n\/* Content *\/\n.card h3 {\n  margin: 0 0 10px;\n}\n\n.card p {\n  font-size: 14px;\n  color: #555;\n}\n\n\/* Button *\/\n.card a {\n  display: inline-block;\n  margin-top: 16px;\n  padding: 10px 18px;\n  background: #4a6cff;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 24px;\n  font-size: 14px;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;h2 style=\"text-align:center;\"&gt;Our Services&lt;\/h2&gt;\n\n&lt;div class=\"grid\"&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;span class=\"badge\"&gt;Popular&lt;\/span&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\ude80&lt;\/div&gt;\n    &lt;h3&gt;Online Business&lt;\/h3&gt;\n    &lt;p&gt;Learn how to build online income step by step.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;span class=\"badge\"&gt;New&lt;\/span&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\udcbb&lt;\/div&gt;\n    &lt;h3&gt;Web Development&lt;\/h3&gt;\n    &lt;p&gt;HTML, CSS, JavaScript for beginners.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n  &lt;div class=\"card\"&gt;\n    &lt;div class=\"icon\"&gt;\ud83d\udcc8&lt;\/div&gt;\n    &lt;h3&gt;Digital Marketing&lt;\/h3&gt;\n    &lt;p&gt;Grow your business with online marketing.&lt;\/p&gt;\n    &lt;a href=\"#\"&gt;Learn More&lt;\/a&gt;\n  &lt;\/div&gt;\n\n&lt;\/div&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"\u0e41\u0e19\u0e30\u0e19\u0e33\u0e27\u0e34\u0e18\u0e35\u0e01\u0e32\u0e23\u0e43\u0e0a\u0e49\u0e07\u0e32\u0e19\u0e42\u0e04\u0e49\u0e14 HTML, CSS \u0e41\u0e25\u0e30 JavaScript \u0e40\u0e1a\u0e37\u0e49\u0e2d\u0e07\u0e15\u0e49\u0e19\u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e2a\u0e23\u0e49\u0e32\u0e07\u0e41\u0e25\u0e30\u0e1b\u0e23\u0e31\u0e1a\u0e41\u0e15\u0e48\u0e07\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c \u0e40\u0e0a\u0e48\u0e19 \u0e01\u0e32\u0e23\u0e43\u0e2a\u0e48\u0e25\u0e34\u0e07\u0e01\u0e4c\u0e43\u0e19\u0e02\u0e49\u0e2d\u0e04\u0e27\u0e32\u0e21\u0e41\u0e25\u0e30\u0e23\u0e39\u0e1b\u0e20\u0e32\u0e1e \u0e01\u0e32\u0e23\u0e08\u0e31\u0e14\u0e23\u0e32\u0e22\u0e01\u0e32\u0e23\u0e41\u0e1a\u0e1a\u0e08\u0e38\u0e14\u0e2b\u0e23\u0e37\u0e2d\u0e2b\u0e21\u0e32\u0e22\u0e40\u0e25\u0e02 \u0e01\u0e32\u0e23\u0e40\u0e1e\u0e34\u0e48\u0e21\u0e44\u0e2d\u0e04\u0e2d\u0e19\u0e1c\u0e48\u0e32\u0e19 Font Awesome \u0e40\u0e1e\u0e37\u0e48\u0e2d\u0e43\u0e2b\u0e49\u0e40\u0e27\u0e47\u0e1a\u0e14\u0e39\u0e17\u0e31\u0e19\u0e2a\u0e21\u0e31\u0e22 \u0e23\u0e27\u0e21\u0e16\u0e36\u0e07\u0e01\u0e32\u0e23\u0e1d\u0e31\u0e07\u0e40\u0e19\u0e37\u0e49\u0e2d\u0e2b\u0e32\u0e08\u0e32\u0e01\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e0b\u0e15\u0e4c\u0e2d\u0e37\u0e48\u0e19\u0e14\u0e49\u0e27\u0e22 iFrame \u0e0b\u0e36\u0e48\u0e07\u0e0a\u0e48\u0e27\u0e22\u0e43\u0e2b\u0e49\u0e1c\u0e39\u0e49\u0e40\u0e23\u0e34\u0e48\u0e21\u0e15\u0e49\u0e19\u0e2a\u0e32\u0e21\u0e32\u0e23\u0e16\u0e40\u0e02\u0e49\u0e32\u0e43\u0e08\u0e41\u0e25\u0e30\u0e19\u0e33\u0e44\u0e1b\u0e1b\u0e23\u0e30\u0e22\u0e38\u0e01\u0e15\u0e4c\u0e43\u0e0a\u0e49\u0e43\u0e19\u0e01\u0e32\u0e23\u0e1e\u0e31\u0e12\u0e19\u0e32\u0e40\u0e27\u0e47\u0e1a\u0e44\u0e14\u0e49\u0e07\u0e48\u0e32\u0e22\u0e02\u0e36\u0e49\u0e19.","protected":false},"author":1,"featured_media":6013,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[23,28],"tags":[],"class_list":{"0":"post-5394","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-website-creation","8":"category-html-css-javascript","9":"cs-entry"},"_links":{"self":[{"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/posts\/5394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/comments?post=5394"}],"version-history":[{"count":36,"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/posts\/5394\/revisions"}],"predecessor-version":[{"id":6077,"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/posts\/5394\/revisions\/6077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/media\/6013"}],"wp:attachment":[{"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/media?parent=5394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/categories?post=5394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siammakemoney.com\/th\/wp-json\/wp\/v2\/tags?post=5394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}