{"id":63436,"date":"2024-04-16T12:33:05","date_gmt":"2024-04-16T09:03:05","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/building-an-interactive-island-popup-with-html-css-and-javascript-free-source-code-39lj\/"},"modified":"2024-04-16T12:33:05","modified_gmt":"2024-04-16T09:03:05","slug":"building-an-interactive-island-popup-with-html-css-and-javascript-free-source-code-39lj","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/building-an-interactive-island-popup-with-html-css-and-javascript-free-source-code-39lj\/","title":{"rendered":"\u0633\u0627\u062e\u062a \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u062a\u0639\u0627\u0645\u0644\u06cc \u062c\u0632\u06cc\u0631\u0647 \u0628\u0627 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a ||  \u06a9\u062f \u0645\u0646\u0628\u0639 \u0631\u0627\u06cc\u06af\u0627\u0646"},"content":{"rendered":"<div data-article-id=\"1824113\" id=\"article-body\">\n<p>\u0622\u06cc\u0627 \u0622\u0645\u0627\u062f\u0647 \u0647\u0633\u062a\u06cc\u062f \u062a\u0627 \u0648\u0627\u0631\u062f \u06cc\u06a9 \u0645\u0627\u062c\u0631\u0627\u062c\u0648\u06cc\u06cc \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u062f\u06cc\u06af\u0631 \u0634\u0648\u06cc\u062f\u061f  \u0627\u0645\u0631\u0648\u0632\u060c \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0686\u0627\u0644\u0634 #100DaysOfCode\u060c \u0648\u0627\u0631\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0647\u06cc\u062c\u0627\u0646\u200c\u0627\u0646\u06af\u06cc\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0634\u062f: \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u062c\u0632\u06cc\u0631\u0647\u200c\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a.  \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f\u060c \u0628\u0644\u06a9\u0647 \u062e\u0644\u0627\u0642\u06cc\u062a \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0634\u0645\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc \u06a9\u0646\u062f.  \u0628\u0646\u0627\u0628\u0631\u0627\u06cc\u0646\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0634\u0631\u0648\u0639 \u06a9\u0646\u06cc\u0645!<\/p>\n<h2>\n<p>  \u0631\u0648\u0632 \u0647\u0634\u062a\u0645: \u0633\u0627\u062e\u062a\u0646 \u0628\u0646\u06cc\u0627\u062f<br \/>\n<\/h2>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 1: \u0627\u0628\u062a\u062f\u0627 \u0633\u0627\u062e\u062a\u0627\u0631 HTML \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/strong>\u0628\u06cc\u0627\u06cc\u06cc\u062f \u0633\u0627\u062e\u062a\u0627\u0631 \u0627\u0635\u0644\u06cc HTML \u0631\u0627 \u0628\u0631\u0627\u06cc \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0639\u0646\u0627\u0635\u0631 \u0644\u0627\u0632\u0645 \u0645\u0627\u0646\u0646\u062f \u062c\u0639\u0628\u0647 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631\u060c \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u062c\u0632\u06cc\u0631\u0647 \u0648 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627\u06cc \u0646\u0627\u0648\u0628\u0631\u06cc \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"en\"&gt;\n\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\n    &lt;!-- Linking external stylesheet --&gt;\n    &lt;link rel=\"stylesheet\" href=\"https:\/\/dev.to\/withaarzoo\/style.css\"&gt;\n    &lt;title&gt;Dynamic Island of iPhone&lt;\/title&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n    &lt;!-- Container box --&gt;\n    &lt;div class=\"box\"&gt;\n        &lt;div class=\"inner\"&gt;\n            &lt;!-- Island popup --&gt;\n            &lt;div class=\"island_popup\"&gt;\n                &lt;div class=\"content\"&gt;\n                    &lt;!-- Details section --&gt;\n                    &lt;div class=\"details\"&gt;\n                        &lt;!-- Image box --&gt;\n                        &lt;div class=\"imgBx\"&gt;\n                            &lt;!-- Image source --&gt;\n                            &lt;img src=\"img.jpg\"&gt;\n                        &lt;\/div&gt;\n                        &lt;!-- Description --&gt;\n                        &lt;p&gt;Alexa Calling&lt;\/p&gt;\n                    &lt;\/div&gt;\n                    &lt;!-- Action section --&gt;\n                    &lt;div class=\"action\"&gt;\n                        &lt;!-- Call icons --&gt;\n                        &lt;ion-icon name=\"call\" class=\"red\"&gt;&lt;\/ion-icon&gt;\n                        &lt;ion-icon name=\"call\" class=\"green\"&gt;&lt;\/ion-icon&gt;\n                    &lt;\/div&gt;\n                &lt;\/div&gt;\n            &lt;\/div&gt;\n        &lt;\/div&gt;\n        &lt;!-- Navigation buttons --&gt;\n        &lt;i class=\"btn btn1\"&gt;&lt;\/i&gt;\n        &lt;i class=\"btn btn2\"&gt;&lt;\/i&gt;\n        &lt;i class=\"btn btn3\"&gt;&lt;\/i&gt;\n        &lt;i class=\"rightSide\"&gt;&lt;\/i&gt;\n    &lt;\/div&gt;\n\n    &lt;!-- Loading Ionicons script --&gt;\n    &lt;script type=\"module\" src=\"https:\/\/unpkg.com\/ionicons@5.5.2\/dist\/ionicons\/ionicons.esm.js\"&gt;&lt;\/script&gt;\n    &lt;script nomodule src=\"https:\/\/unpkg.com\/ionicons@5.5.2\/dist\/ionicons\/ionicons.js\"&gt;&lt;\/script&gt;\n    &lt;!-- Custom script --&gt;\n    &lt;script src=\"script.js\"&gt;&lt;\/script&gt;\n&lt;\/body&gt;\n\n&lt;\/html&gt;\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 2: \u0627\u0633\u062a\u0627\u06cc\u0644 \u0628\u0627 CSS \u0628\u0639\u062f\u06cc<\/strong>\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 CSS \u0627\u0633\u062a\u0627\u06cc\u0644 \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u0637\u0631\u062d\u200c\u0628\u0646\u062f\u06cc\u060c \u0631\u0646\u06af\u200c\u0647\u0627 \u0648 \u0627\u0646\u06cc\u0645\u06cc\u0634\u0646\u200c\u0647\u0627 \u0631\u0627 \u062a\u0639\u0631\u06cc\u0641 \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645 \u062a\u0627 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u062c\u0632\u06cc\u0631\u0647 \u062e\u0648\u062f \u0631\u0627 \u0632\u0646\u062f\u0647 \u06a9\u0646\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700;800;900&amp;display=swap');\n\n\/* Resetting default styles *\/\n*\n{\n    margin: 0;\n    padding: 0;\n    box-sizing: border-box;\n  font-family: 'Poppins', sans-serif;\n}\n\n\/* Styling the body *\/\nbody \n{\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100vh;\n    background: #fff;\n}\n\n\/* Styling the container box *\/\n.box\n{\n    position: relative;\n    width: 300px;\n    height: 600px;\n    background: #fff;\n    border-radius: 50px;\n    background: #666;\n}\n\n\/* Styling the pseudo-element before the box *\/\n.box::before \n{\n    content: '';\n    position: absolute;\n    inset: 3px;\n    background: #000;\n    border-radius: 48px;\n}\n\n\/* Styling the inner container *\/\n.inner \n{\n    position: absolute;\n    inset: 3px;\n    background: url(bg.jpg);\n    background-size: cover;\n    background-position: center;\n    border-radius: 48px;\n    border: 10px solid #000;\n    display: flex;\n    justify-content: center;\n    opacity: 0;\n    transition: 0.5s;\n}\n\n\/* Revealing inner container on hover *\/\n.box:hover .inner \n{\n    opacity: 1;\n}\n\n\/* Styling navigation buttons *\/\n.btn \n{\n    position: absolute;\n    width: 3px;\n    left: -2px;\n    top: 110px;\n    height: 26px;\n    background: #444;\n    background: radial-gradient(#ccc,#666,#222);\n    z-index: 10;\n    border-top-left-radius: 4px;\n    border-bottom-left-radius: 4px;\n}\n.btn.btn2\n{\n    top: 160px;\n    height: 40px;\n}\n.btn.btn3\n{\n    top: 220px;\n    height: 40px;\n}\n\n\/* Styling the right side element *\/\n.rightSide\n{\n    position: absolute;\n    width: 3px;\n    right: -2px;\n    top: 170px;\n    height: 70px;\n    background: #444;\n    background: radial-gradient(#ccc,#666,#222);\n    z-index: 10;\n    border-top-right-radius: 4px;\n    border-bottom-right-radius: 4px;\n}\n\n\/* Styling the island popup *\/\n.island_popup \n{\n    position: absolute;\n    top: 10px;\n    width: 90px;\n    height: 25px;\n    background: #000;\n    border-radius: 20px;\n    transition: 0.5s ease-in-out;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    \/* width: 200px; *\/\n}\n\n\/* Expanding island popup on hover *\/\n.island_popup:hover \n{\n    width: 200px;\n    height: 25px;\n    border-radius: 50px;\n}\n\n\/* Styling active island popup *\/\n.island_popup.active\n{\n    width: 250px;\n    height: 60px;\n    border-radius: 50px;\n} \n\n\/* Styling content within island popup *\/\n.content \n{\n    position: relative;\n    display: flex;\n    width: 100%;\n    justify-content: space-between;\n    padding: 10px;\n    line-height: 25px;\n}\n\n\/* Styling paragraph within content *\/\n.content p \n{\n    color: #fff;\n    font-size: 0.65em;\n    visibility: hidden;\n    opacity: 0;\n    cursor: default;\n    transition: 0.5s;\n}\n\n\/* Styling action section *\/\n.action \n{\n    position: relative;\n    top: 5px;\n    gap: 12px;\n    display: flex;\n    visibility: hidden;\n    opacity: 0;\n    transition: 0.5s;\n}\n\n\/* Adjusting action section for active island popup *\/\n.island_popup.active .action\n{\n    top: 12px;\n}\n\n\/* Styling red icon *\/\nion-icon.red\n{\n    color: #fd443b;\n    transform: rotate(135deg); \n    cursor: pointer; \n    transition: 0.5s;\n}\n\n\/* Styling green icon *\/\nion-icon.green\n{\n    color: #31d059;\n    cursor: pointer;\n    transition: 0.5s;    \n}\n\n\/* Revealing hidden elements on hover or when island popup is active *\/\n.island_popup:hover p,\n.island_popup:hover .action,\n.island_popup.active p,\n.island_popup.active .action\n{\n    visibility: visible;\n    opacity: 1;\n    transition: 0.5s;\n    transition-delay: 0.25s;\n}\n\n\/* Styling red icon within active island popup *\/\n.island_popup.active ion-icon.red\n{\n    background: #fd443b;\n    color: #fff;\n    border-radius: 50%;\n    box-shadow:0 0 0 8px #fd443b;\n    margin-right: 12px;\n}\n\n\/* Styling green icon within active island popup *\/\n.island_popup.active ion-icon.green\n{\n    background: #31d059;\n    color: #fff;\n    border-radius: 50%;\n    box-shadow:0 0 0 8px #31d059;\n    margin-right: 8px;\n}\n\n\/* Styling details section *\/\n.details \n{\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n\/* Styling image box *\/\n.imgBx \n{\n    width: 0px;\n    height: 0px;\n    background: #fff;\n    transition: 0.5s;\n    border-radius: 50%;\n    scale: 0;\n    overflow: hidden;\n}\n\n\/* Styling image within image box *\/\n.imgBx img \n{\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n}\n\n\/* Adjusting image box for active island popup *\/\n.island_popup.active .imgBx \n{\n    width: 40px;\n    height: 40px;\n    scale: 1;\n    margin-right: 8px;\n}\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><strong>\u0645\u0631\u062d\u0644\u0647 3: \u0627\u0641\u0632\u0648\u062f\u0646 \u062a\u0639\u0627\u0645\u0644 \u0628\u0627 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a<\/strong> \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0639\u0627\u0645\u0644 \u0631\u0627 \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0647 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645.  \u0645\u0627 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u062c\u0632\u06cc\u0631\u0647 \u0631\u0627 \u0642\u0627\u0628\u0644 \u06a9\u0644\u06cc\u06a9 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u062d\u0627\u0644\u062a \u0641\u0639\u0627\u0644 \u0622\u0646 \u0631\u0627 \u062a\u063a\u06cc\u06cc\u0631 \u0645\u06cc \u062f\u0647\u06cc\u0645.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight plaintext\"><code>\/\/ Selecting the island popup element\nlet popup = document.querySelector(\".island_popup\");\n\n\/\/ Adding click event listener to toggle active class on the island popup\npopup.onclick = function () {\n  popup.classList.toggle(\"active\");\n};\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u0648\u0627\u0631\u062f \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0646\u062a\u06cc\u062c\u0647<\/p>\n<p>\u062a\u0628\u0631\u06cc\u06a9 \u0645\u06cc \u06af\u0648\u06cc\u0645!  \u0634\u0645\u0627 \u0631\u0648\u0632 \u0647\u0634\u062a\u0645 \u0686\u0627\u0644\u0634 #100DaysOfCode \u0631\u0627 \u0628\u0627 \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u062c\u0632\u06cc\u0631\u0647 \u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u0628\u0627 \u0645\u0648\u0641\u0642\u06cc\u062a \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0633\u0627\u0646\u062f\u06cc\u062f.  \u0627\u0632 \u0637\u0631\u06cc\u0642 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u060c \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u0627\u0631\u0632\u0634\u0645\u0646\u062f\u06cc \u062f\u0631 \u062a\u0648\u0633\u0639\u0647 \u0648\u0628 \u0622\u0645\u0648\u062e\u062a\u0647 \u0627\u06cc\u062f \u0648 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062e\u0644\u0627\u0642\u0627\u0646\u0647 \u0631\u0627 \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0647 \u0627\u06cc\u062f.  \u0628\u0647 \u06a9\u0627\u0631 \u062e\u0627\u0631\u0642 \u0627\u0644\u0639\u0627\u062f\u0647 \u0627\u062f\u0627\u0645\u0647 \u062f\u0647\u06cc\u062f \u0648 \u0645\u0646\u062a\u0638\u0631 \u0645\u0627\u062c\u0631\u0627\u0647\u0627\u06cc \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0622\u06cc\u0646\u062f\u0647 \u0628\u0627\u0634\u06cc\u062f!<\/p>\n<p>\u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u0633\u0648\u0631\u0633 \u06a9\u062f \u06a9\u0627\u0645\u0644 \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647\u060c \u0622\u0646 \u0631\u0627 \u0627\u0632 \u0627\u06cc\u0646\u062c\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u062f.  \u062f\u0631 \u0635\u0648\u0631\u062a \u062f\u0627\u0634\u062a\u0646 \u0647\u0631\u06af\u0648\u0646\u0647 \u0633\u0648\u0627\u0644 \u06cc\u0627 \u067e\u06cc\u0634\u0646\u0647\u0627\u062f \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0645\u0646 \u062f\u0631 Bento \u062a\u0645\u0627\u0633 \u0628\u06af\u06cc\u0631\u06cc\u062f.  \u06a9\u062f \u0646\u0648\u06cc\u0633\u06cc \u0645\u0628\u0627\u0631\u06a9!  \ud83d\ude80<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u0622\u06cc\u0627 \u0622\u0645\u0627\u062f\u0647 \u0647\u0633\u062a\u06cc\u062f \u062a\u0627 \u0648\u0627\u0631\u062f \u06cc\u06a9 \u0645\u0627\u062c\u0631\u0627\u062c\u0648\u06cc\u06cc \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u062f\u06cc\u06af\u0631 \u0634\u0648\u06cc\u062f\u061f \u0627\u0645\u0631\u0648\u0632\u060c \u0628\u0647\u200c\u0639\u0646\u0648\u0627\u0646 \u0628\u062e\u0634\u06cc \u0627\u0632 \u0686\u0627\u0644\u0634 #100DaysOfCode\u060c \u0648\u0627\u0631\u062f \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0647\u06cc\u062c\u0627\u0646\u200c\u0627\u0646\u06af\u06cc\u0632 \u062e\u0648\u0627\u0647\u06cc\u0645 \u0634\u062f: \u0627\u06cc\u062c\u0627\u062f \u06cc\u06a9 \u067e\u0646\u062c\u0631\u0647 \u0628\u0627\u0632\u0634\u0648 \u062c\u0632\u06cc\u0631\u0647\u200c\u0627\u06cc \u062a\u0639\u0627\u0645\u0644\u06cc \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 HTML\u060c CSS \u0648 \u062c\u0627\u0648\u0627 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a. \u0627\u06cc\u0646 \u067e\u0631\u0648\u0698\u0647 \u0646\u0647 \u062a\u0646\u0647\u0627 \u0645\u0647\u0627\u0631\u062a \u0647\u0627\u06cc \u06a9\u062f\u0646\u0648\u06cc\u0633\u06cc \u0634\u0645\u0627 \u0631\u0627 \u0627\u0641\u0632\u0627\u06cc\u0634 \u0645\u06cc \u062f\u0647\u062f\u060c \u0628\u0644\u06a9\u0647 \u062e\u0644\u0627\u0642\u06cc\u062a \u0631\u0627 \u0646\u06cc\u0632 \u0628\u0647 \u0645\u062c\u0645\u0648\u0639\u0647 \u0634\u0645\u0627 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":63437,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-63436","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63436","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=63436"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/63436\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/63437"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=63436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=63436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=63436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}