{"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\/en\/code-html-css-js\/","title":{"rendered":"Includes basic HTML CSS JS code"},"content":{"rendered":"<h2 class=\"wp-block-heading has-text-color has-link-color wp-elements-b811a28942ca2757d0d4f299fd4594c6\" style=\"color:#0c3237\">Includes basic HTML CSS JS code<\/h2>\n\n\n\n<h2 class=\"wp-block-heading has-accent-color has-text-color has-link-color wp-elements-a375b967830d5f566e720aaf520c1dd9\">link in text and simple pictures<\/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\">Enter a link in a message.<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">Add a link in the picture.<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">ordinary pictures<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">Bullet code example (dot list)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><br>It is an HTML tag used to create a sublist in the list. It is used in conjunction with (dot-list) or (number-listed list). and clearly understandable<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">css code delete point <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\">Delete Bullet for all <code>&lt;ul&gt;<\/code> and <code>&lt;ol&gt;<\/code> no matter where<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">Delete Bullet from 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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">Add an icon image<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Icon is a small image that represents a meaning or some function, such as a house instead of the first page. Magnifier image instead of searching or a trash bin instead of deletion It helps users to understand what the web or app wants to convey immediately without having to read a lot of letters. Make it easy to use, look modern and communicate quickly.<\/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 Add a simple 20\u00d720 px image.<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Icon<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Font Awesome Icon is a set of ready-made icons used on the website. It comes in the form of letters or vectors. Makes it easy to adjust the size, color and pattern like adjusting the font. Use it in place of symbols such as home icons, phones, emails, or social media. Help the website look beautiful, modern and fast loading without having to use multiple image files.<\/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 Add Awesome CDN Font (if not yet)<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Insert icon and resize<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 (if need separate CSS)<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 embeds another web page<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Iframe is a tag of HTML that is used to embed web pages or content from other websites to show on our web pages such as YouTube videos, maps, Google Maps or external websites. like taking \u201cSmall windows\u201d of another website to put on our website. The content inside is also from the original website. But users can view and interact without leaving that web page.<\/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 embeds a web page<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Embed YouTube Videos<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">Show a description (tooltip)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Tooltip is a small text box that displays an additional explanation when the user points the mouse or taps on a text, icon or button without disturbing the home screen. Help explain the meaning or how to use it to be easier to understand. Great for providing a short guide, making the web or app easy to use and look more professional.<\/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 Basic Tooltip<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Premium View<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 shows when clicking a message.<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Click Pop-up Card<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Click the pop-up card. It is a format for displaying information that when a user clicks a button, text or image, a \u201ccard\u201d will pop up on the screen to show more details such as pictures, names, icons or descriptions without having to change the web page. Helping to view information conveniently The web looks not cluttered. and make the use look modern and professional<\/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 Click Pop-up Card (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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Click a pop-up card with pictures, icons and descriptions.<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Beautiful Popup Card + SEO Friendly<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">Basic table code <\/h2><div class=\"gc-numhead__sub\" style=\"color:\">A table is a format for arranging data into fields, arranged in rows and columns. To make the information look organized and easy to compare, such as a price table, a list table, or score results, allowing readers to see the information clearly, understand quickly and find the information they want easily.<\/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 Basic Responsive Table Code Supports All Devices<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Tables with icons + clickable names + pop-ups + website buttons<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Tables with icons + clickable names + pop-ups + website buttons<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">The simplest link code<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>Link Button<\/strong> is to bring a website link that is normally a plain text to be designed to look like a button In order for users to see clearly, clickable and immediately understand what they will do, such as going to another website, registering or looking at more details The link buttons are often built from HTML in conjunction with CSS, making them still working like normal links (good for SEO and easy to use), but with a beautiful appearance and increase the chances of users clicking.<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Link button with Hover effect<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">Basic menu code<\/h2><div class=\"gc-numhead__sub\" style=\"color:\">Menu code is a set of commands used to create a menu bar on a website. In order for users to click to navigate to pages such as the Home About us, Services or Contact us, the menu code generally consists of HTML for link structures, CSS for decorations, and may contain JavaScript to enhance special capabilities, such as zoom menus or mobile menus. The menu code makes the website easy to use, organized and allows users to find the information they need faster.<\/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 Basic 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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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 Responsive menu (recommended for all devices)<\/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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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\">Code Grid Card (Card Grid)<\/h2><div class=\"gc-numhead__sub\" style=\"color:\"><strong>Grid Card<\/strong> It is the format of the content on the website using several \u201ccards\u201d arranged in a grid (grid). Suitable for listing products, articles, services or courses. The advantage of a grid card is that it looks organized, beautiful, easy to read, and the number of columns can be adjusted automatically according to the screen size. Make it work well on both computers and mobile phones.<\/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 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\" data-no-translation=\"\" data-no-auto-translation=\"\"><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>","protected":false},"excerpt":{"rendered":"Introduce how to use basic HTML, CSS and JavaScript codes to create and customize your website, such as adding links in text and images. Arrangement of points or numbers Adding icons through Font Awesome to make the website look modern. Including embedding content from other websites with iFrame, which makes it easier for beginners to understand and apply in web development.","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\/en\/wp-json\/wp\/v2\/posts\/5394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/comments?post=5394"}],"version-history":[{"count":36,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/posts\/5394\/revisions"}],"predecessor-version":[{"id":6077,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/posts\/5394\/revisions\/6077"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/media\/6013"}],"wp:attachment":[{"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/media?parent=5394"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/categories?post=5394"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/siammakemoney.com\/en\/wp-json\/wp\/v2\/tags?post=5394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}