For My Lovely Sister \ud83d\udc96<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<style>\n body {\n margin: 0;\n font-family: 'Georgia', serif;\n background: #f9f3ee;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .book {\n width: 340px;\n height: 600px;\n background: #fffaf7;\n border-radius: 18px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n overflow: hidden;\n position: relative;\n }\n\n .page {\n position: absolute;\n inset: 0;\n padding: 30px 20px;\n text-align: center;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.6s ease;\n }\n\n .page.active {\n opacity: 1;\n transform: translateX(0);\n }\n\n h1, h2 {\n color: #c85b6a;\n margin-bottom: 10px;\n }\n\n p {\n font-size: 15px;\n color: #555;\n line-height: 1.5;\n }\n\n .img-box {\n margin: 20px auto;\n width: 200px;\n height: 200px;\n border-radius: 15px;\n overflow: hidden;\n background: #ffe6ec;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .buttons {\n position: absolute;\n bottom: 25px;\n width: 100%;\n display: flex;\n justify-content: space-around;\n }\n\n button {\n padding: 10px 22px;\n border: none;\n border-radius: 20px;\n background: #f28da8;\n color: white;\n font-size: 15px;\n cursor: pointer;\n }\n\n button:disabled {\n background: #f6c1cf;\n cursor: not-allowed;\n }\n\n .hearts {\n font-size: 18px;\n animation: float 1.5s infinite;\n }\n\n @keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n 100% { transform: translateY(0); }\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"book\">\n\n <div class=\"page active\">\n <h2>FOR MY LOVELY<\/h2>\n <h1>SISTER \u2728<\/h1>\n <p class=\"hearts\">\ud83d\udc96 \ud83d\udc96 \ud83d\udc96<\/p>\n <\/div>\n\n <div class=\"page\">\n <h1>Dear Sis \ud83d\udc95<\/h1>\n <p>\n You\u2019ve always been my biggest supporter, \n my secret keeper, and my forever best friend.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"cartoon1.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Our Precious Memories \ud83d\udcf8<\/h1>\n <p>From Bhai \u2192 To My Lovely Sister<\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"memory.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Thank You \ud83d\udc97<\/h1>\n <h2>For Always Being There<\/h2>\n <p>\n You make every small thing brighter and happier. \n I\u2019m lucky to have you.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"thankyou.png\">\n <\/div>\n <p class=\"hearts\">Made with \u2764\ufe0f by your Bhai<\/p>\n <\/div>\n\n \n <div class=\"buttons\">\n <button id=\"backBtn\" onclick=\"prevPage()\">\u2b05 Back<\/button>\n <button id=\"nextBtn\" onclick=\"nextPage()\">Next \u27a1<\/button>\n <\/div>\n\n<\/div>\n\n<script>\n let current = 0;\n const pages = document.querySelectorAll('.page');\n const backBtn = document.getElementById('backBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n function updateButtons() {\n backBtn.disabled = current === 0;\n nextBtn.disabled = current === pages.length - 1;\n }\n\n function nextPage() {\n if (current < pages.length - 1) {\n pages[current].classList.remove('active');\n current++;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n function prevPage() {\n if (current > 0) {\n pages[current].classList.remove('active');\n current--;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n updateButtons();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>For My Lovely Sister \ud83d\udc96<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<style>\n body {\n margin: 0;\n font-family: 'Georgia', serif;\n background: #f9f3ee;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .book {\n width: 340px;\n height: 600px;\n background: #fffaf7;\n border-radius: 18px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n overflow: hidden;\n position: relative;\n }\n\n .page {\n position: absolute;\n inset: 0;\n padding: 30px 20px;\n text-align: center;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.6s ease;\n }\n\n .page.active {\n opacity: 1;\n transform: translateX(0);\n }\n\n h1, h2 {\n color: #c85b6a;\n margin-bottom: 10px;\n }\n\n p {\n font-size: 15px;\n color: #555;\n line-height: 1.5;\n }\n\n .img-box {\n margin: 20px auto;\n width: 200px;\n height: 200px;\n border-radius: 15px;\n overflow: hidden;\n background: #ffe6ec;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .buttons {\n position: absolute;\n bottom: 25px;\n width: 100%;\n display: flex;\n justify-content: space-around;\n }\n\n button {\n padding: 10px 22px;\n border: none;\n border-radius: 20px;\n background: #f28da8;\n color: white;\n font-size: 15px;\n cursor: pointer;\n }\n\n button:disabled {\n background: #f6c1cf;\n cursor: not-allowed;\n }\n\n .hearts {\n font-size: 18px;\n animation: float 1.5s infinite;\n }\n\n @keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n 100% { transform: translateY(0); }\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"book\">\n\n <div class=\"page active\">\n <h2>FOR MY LOVELY<\/h2>\n <h1>SISTER \u2728<\/h1>\n <p class=\"hearts\">\ud83d\udc96 \ud83d\udc96 \ud83d\udc96<\/p>\n <\/div>\n\n <div class=\"page\">\n <h1>Dear Sis \ud83d\udc95<\/h1>\n <p>\n You\u2019ve always been my biggest supporter, \n my secret keeper, and my forever best friend.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"cartoon1.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Our Precious Memories \ud83d\udcf8<\/h1>\n <p>From Bhai \u2192 To My Lovely Sister<\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"memory.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Thank You \ud83d\udc97<\/h1>\n <h2>For Always Being There<\/h2>\n <p>\n You make every small thing brighter and happier. \n I\u2019m lucky to have you.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"thankyou.png\">\n <\/div>\n <p class=\"hearts\">Made with \u2764\ufe0f by your Bhai<\/p>\n <\/div>\n\n \n <div class=\"buttons\">\n <button id=\"backBtn\" onclick=\"prevPage()\">\u2b05 Back<\/button>\n <button id=\"nextBtn\" onclick=\"nextPage()\">Next \u27a1<\/button>\n <\/div>\n\n<\/div>\n\n<script>\n let current = 0;\n const pages = document.querySelectorAll('.page');\n const backBtn = document.getElementById('backBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n function updateButtons() {\n backBtn.disabled = current === 0;\n nextBtn.disabled = current === pages.length - 1;\n }\n\n function nextPage() {\n if (current < pages.length - 1) {\n pages[current].classList.remove('active');\n current++;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n function prevPage() {\n if (current > 0) {\n pages[current].classList.remove('active');\n current--;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n updateButtons();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p>hi<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>For My Lovely Sister \ud83d\udc96<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<style>\n body {\n margin: 0;\n font-family: 'Georgia', serif;\n background: #f9f3ee;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .book {\n width: 340px;\n height: 600px;\n background: #fffaf7;\n border-radius: 18px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n overflow: hidden;\n position: relative;\n }\n\n .page {\n position: absolute;\n inset: 0;\n padding: 30px 20px;\n text-align: center;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.6s ease;\n }\n\n .page.active {\n opacity: 1;\n transform: translateX(0);\n }\n\n h1, h2 {\n color: #c85b6a;\n margin-bottom: 10px;\n }\n\n p {\n font-size: 15px;\n color: #555;\n line-height: 1.5;\n }\n\n .img-box {\n margin: 20px auto;\n width: 200px;\n height: 200px;\n border-radius: 15px;\n overflow: hidden;\n background: #ffe6ec;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .buttons {\n position: absolute;\n bottom: 25px;\n width: 100%;\n display: flex;\n justify-content: space-around;\n }\n\n button {\n padding: 10px 22px;\n border: none;\n border-radius: 20px;\n background: #f28da8;\n color: white;\n font-size: 15px;\n cursor: pointer;\n }\n\n button:disabled {\n background: #f6c1cf;\n cursor: not-allowed;\n }\n\n .hearts {\n font-size: 18px;\n animation: float 1.5s infinite;\n }\n\n @keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n 100% { transform: translateY(0); }\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"book\">\n\n <div class=\"page active\">\n <h2>FOR MY LOVELY<\/h2>\n <h1>SISTER \u2728<\/h1>\n <p class=\"hearts\">\ud83d\udc96 \ud83d\udc96 \ud83d\udc96<\/p>\n <\/div>\n\n <div class=\"page\">\n <h1>Dear Sis \ud83d\udc95<\/h1>\n <p>\n You\u2019ve always been my biggest supporter, \n my secret keeper, and my forever best friend.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"cartoon1.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Our Precious Memories \ud83d\udcf8<\/h1>\n <p>From Bhai \u2192 To My Lovely Sister<\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"memory.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Thank You \ud83d\udc97<\/h1>\n <h2>For Always Being There<\/h2>\n <p>\n You make every small thing brighter and happier. \n I\u2019m lucky to have you.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"thankyou.png\">\n <\/div>\n <p class=\"hearts\">Made with \u2764\ufe0f by your Bhai<\/p>\n <\/div>\n\n \n <div class=\"buttons\">\n <button id=\"backBtn\" onclick=\"prevPage()\">\u2b05 Back<\/button>\n <button id=\"nextBtn\" onclick=\"nextPage()\">Next \u27a1<\/button>\n <\/div>\n\n<\/div>\n\n<script>\n let current = 0;\n const pages = document.querySelectorAll('.page');\n const backBtn = document.getElementById('backBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n function updateButtons() {\n backBtn.disabled = current === 0;\n nextBtn.disabled = current === pages.length - 1;\n }\n\n function nextPage() {\n if (current < pages.length - 1) {\n pages[current].classList.remove('active');\n current++;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n function prevPage() {\n if (current > 0) {\n pages[current].classList.remove('active');\n current--;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n updateButtons();\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>For My Lovely Sister \ud83d\udc96 FOR MY LOVELY SISTER \u2728 \ud83d\udc96 \ud83d\udc96 \ud83d\udc96 Dear Sis \ud83d\udc95 You\u2019ve always been my biggest supporter, my secret keeper, and my forever best friend. Our Precious Memories \ud83d\udcf8 From Bhai \u2192 To My Lovely Sister Thank You \ud83d\udc97 For Always Being There You make every small thing brighter and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":4,"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":9,"date":"2025-12-23T09:46:06","date_gmt":"2025-12-23T09:46:06","guid":{"rendered":"https:\/\/alakhveer.com\/?page_id=9"},"modified":"2025-12-23T09:47:02","modified_gmt":"2025-12-23T09:47:02","slug":"9-2","status":"publish","type":"page","link":"https:\/\/alakhveer.com\/index.php\/9-2\/","title":{"rendered":""},"content":{"rendered":"\n\n\n\n\nFor My Lovely Sister \ud83d\udc96<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<style>\n body {\n margin: 0;\n font-family: 'Georgia', serif;\n background: #f9f3ee;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .book {\n width: 340px;\n height: 600px;\n background: #fffaf7;\n border-radius: 18px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n overflow: hidden;\n position: relative;\n }\n\n .page {\n position: absolute;\n inset: 0;\n padding: 30px 20px;\n text-align: center;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.6s ease;\n }\n\n .page.active {\n opacity: 1;\n transform: translateX(0);\n }\n\n h1, h2 {\n color: #c85b6a;\n margin-bottom: 10px;\n }\n\n p {\n font-size: 15px;\n color: #555;\n line-height: 1.5;\n }\n\n .img-box {\n margin: 20px auto;\n width: 200px;\n height: 200px;\n border-radius: 15px;\n overflow: hidden;\n background: #ffe6ec;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .buttons {\n position: absolute;\n bottom: 25px;\n width: 100%;\n display: flex;\n justify-content: space-around;\n }\n\n button {\n padding: 10px 22px;\n border: none;\n border-radius: 20px;\n background: #f28da8;\n color: white;\n font-size: 15px;\n cursor: pointer;\n }\n\n button:disabled {\n background: #f6c1cf;\n cursor: not-allowed;\n }\n\n .hearts {\n font-size: 18px;\n animation: float 1.5s infinite;\n }\n\n @keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n 100% { transform: translateY(0); }\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"book\">\n\n <div class=\"page active\">\n <h2>FOR MY LOVELY<\/h2>\n <h1>SISTER \u2728<\/h1>\n <p class=\"hearts\">\ud83d\udc96 \ud83d\udc96 \ud83d\udc96<\/p>\n <\/div>\n\n <div class=\"page\">\n <h1>Dear Sis \ud83d\udc95<\/h1>\n <p>\n You\u2019ve always been my biggest supporter, \n my secret keeper, and my forever best friend.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"cartoon1.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Our Precious Memories \ud83d\udcf8<\/h1>\n <p>From Bhai \u2192 To My Lovely Sister<\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"memory.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Thank You \ud83d\udc97<\/h1>\n <h2>For Always Being There<\/h2>\n <p>\n You make every small thing brighter and happier. \n I\u2019m lucky to have you.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"thankyou.png\">\n <\/div>\n <p class=\"hearts\">Made with \u2764\ufe0f by your Bhai<\/p>\n <\/div>\n\n \n <div class=\"buttons\">\n <button id=\"backBtn\" onclick=\"prevPage()\">\u2b05 Back<\/button>\n <button id=\"nextBtn\" onclick=\"nextPage()\">Next \u27a1<\/button>\n <\/div>\n\n<\/div>\n\n<script>\n let current = 0;\n const pages = document.querySelectorAll('.page');\n const backBtn = document.getElementById('backBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n function updateButtons() {\n backBtn.disabled = current === 0;\n nextBtn.disabled = current === pages.length - 1;\n }\n\n function nextPage() {\n if (current < pages.length - 1) {\n pages[current].classList.remove('active');\n current++;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n function prevPage() {\n if (current > 0) {\n pages[current].classList.remove('active');\n current--;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n updateButtons();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>For My Lovely Sister \ud83d\udc96<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<style>\n body {\n margin: 0;\n font-family: 'Georgia', serif;\n background: #f9f3ee;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .book {\n width: 340px;\n height: 600px;\n background: #fffaf7;\n border-radius: 18px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n overflow: hidden;\n position: relative;\n }\n\n .page {\n position: absolute;\n inset: 0;\n padding: 30px 20px;\n text-align: center;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.6s ease;\n }\n\n .page.active {\n opacity: 1;\n transform: translateX(0);\n }\n\n h1, h2 {\n color: #c85b6a;\n margin-bottom: 10px;\n }\n\n p {\n font-size: 15px;\n color: #555;\n line-height: 1.5;\n }\n\n .img-box {\n margin: 20px auto;\n width: 200px;\n height: 200px;\n border-radius: 15px;\n overflow: hidden;\n background: #ffe6ec;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .buttons {\n position: absolute;\n bottom: 25px;\n width: 100%;\n display: flex;\n justify-content: space-around;\n }\n\n button {\n padding: 10px 22px;\n border: none;\n border-radius: 20px;\n background: #f28da8;\n color: white;\n font-size: 15px;\n cursor: pointer;\n }\n\n button:disabled {\n background: #f6c1cf;\n cursor: not-allowed;\n }\n\n .hearts {\n font-size: 18px;\n animation: float 1.5s infinite;\n }\n\n @keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n 100% { transform: translateY(0); }\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"book\">\n\n <div class=\"page active\">\n <h2>FOR MY LOVELY<\/h2>\n <h1>SISTER \u2728<\/h1>\n <p class=\"hearts\">\ud83d\udc96 \ud83d\udc96 \ud83d\udc96<\/p>\n <\/div>\n\n <div class=\"page\">\n <h1>Dear Sis \ud83d\udc95<\/h1>\n <p>\n You\u2019ve always been my biggest supporter, \n my secret keeper, and my forever best friend.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"cartoon1.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Our Precious Memories \ud83d\udcf8<\/h1>\n <p>From Bhai \u2192 To My Lovely Sister<\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"memory.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Thank You \ud83d\udc97<\/h1>\n <h2>For Always Being There<\/h2>\n <p>\n You make every small thing brighter and happier. \n I\u2019m lucky to have you.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"thankyou.png\">\n <\/div>\n <p class=\"hearts\">Made with \u2764\ufe0f by your Bhai<\/p>\n <\/div>\n\n \n <div class=\"buttons\">\n <button id=\"backBtn\" onclick=\"prevPage()\">\u2b05 Back<\/button>\n <button id=\"nextBtn\" onclick=\"nextPage()\">Next \u27a1<\/button>\n <\/div>\n\n<\/div>\n\n<script>\n let current = 0;\n const pages = document.querySelectorAll('.page');\n const backBtn = document.getElementById('backBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n function updateButtons() {\n backBtn.disabled = current === 0;\n nextBtn.disabled = current === pages.length - 1;\n }\n\n function nextPage() {\n if (current < pages.length - 1) {\n pages[current].classList.remove('active');\n current++;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n function prevPage() {\n if (current > 0) {\n pages[current].classList.remove('active');\n current--;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n updateButtons();\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n<p>hi<\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>For My Lovely Sister \ud83d\udc96<\/title>\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<style>\n body {\n margin: 0;\n font-family: 'Georgia', serif;\n background: #f9f3ee;\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n }\n\n .book {\n width: 340px;\n height: 600px;\n background: #fffaf7;\n border-radius: 18px;\n box-shadow: 0 20px 40px rgba(0,0,0,0.2);\n overflow: hidden;\n position: relative;\n }\n\n .page {\n position: absolute;\n inset: 0;\n padding: 30px 20px;\n text-align: center;\n opacity: 0;\n transform: translateX(100%);\n transition: all 0.6s ease;\n }\n\n .page.active {\n opacity: 1;\n transform: translateX(0);\n }\n\n h1, h2 {\n color: #c85b6a;\n margin-bottom: 10px;\n }\n\n p {\n font-size: 15px;\n color: #555;\n line-height: 1.5;\n }\n\n .img-box {\n margin: 20px auto;\n width: 200px;\n height: 200px;\n border-radius: 15px;\n overflow: hidden;\n background: #ffe6ec;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .img-box img {\n width: 100%;\n height: 100%;\n object-fit: contain;\n }\n\n .buttons {\n position: absolute;\n bottom: 25px;\n width: 100%;\n display: flex;\n justify-content: space-around;\n }\n\n button {\n padding: 10px 22px;\n border: none;\n border-radius: 20px;\n background: #f28da8;\n color: white;\n font-size: 15px;\n cursor: pointer;\n }\n\n button:disabled {\n background: #f6c1cf;\n cursor: not-allowed;\n }\n\n .hearts {\n font-size: 18px;\n animation: float 1.5s infinite;\n }\n\n @keyframes float {\n 0% { transform: translateY(0); }\n 50% { transform: translateY(-6px); }\n 100% { transform: translateY(0); }\n }\n<\/style>\n<\/head>\n\n<body>\n\n<div class=\"book\">\n\n <div class=\"page active\">\n <h2>FOR MY LOVELY<\/h2>\n <h1>SISTER \u2728<\/h1>\n <p class=\"hearts\">\ud83d\udc96 \ud83d\udc96 \ud83d\udc96<\/p>\n <\/div>\n\n <div class=\"page\">\n <h1>Dear Sis \ud83d\udc95<\/h1>\n <p>\n You\u2019ve always been my biggest supporter, \n my secret keeper, and my forever best friend.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"cartoon1.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Our Precious Memories \ud83d\udcf8<\/h1>\n <p>From Bhai \u2192 To My Lovely Sister<\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"memory.png\">\n <\/div>\n <\/div>\n\n <div class=\"page\">\n <h1>Thank You \ud83d\udc97<\/h1>\n <h2>For Always Being There<\/h2>\n <p>\n You make every small thing brighter and happier. \n I\u2019m lucky to have you.\n <\/p>\n <div class=\"img-box\">\n <img decoding=\"async\" src=\"thankyou.png\">\n <\/div>\n <p class=\"hearts\">Made with \u2764\ufe0f by your Bhai<\/p>\n <\/div>\n\n \n <div class=\"buttons\">\n <button id=\"backBtn\" onclick=\"prevPage()\">\u2b05 Back<\/button>\n <button id=\"nextBtn\" onclick=\"nextPage()\">Next \u27a1<\/button>\n <\/div>\n\n<\/div>\n\n<script>\n let current = 0;\n const pages = document.querySelectorAll('.page');\n const backBtn = document.getElementById('backBtn');\n const nextBtn = document.getElementById('nextBtn');\n\n function updateButtons() {\n backBtn.disabled = current === 0;\n nextBtn.disabled = current === pages.length - 1;\n }\n\n function nextPage() {\n if (current < pages.length - 1) {\n pages[current].classList.remove('active');\n current++;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n function prevPage() {\n if (current > 0) {\n pages[current].classList.remove('active');\n current--;\n pages[current].classList.add('active');\n updateButtons();\n }\n }\n\n updateButtons();\n<\/script>\n\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>For My Lovely Sister \ud83d\udc96 FOR MY LOVELY SISTER \u2728 \ud83d\udc96 \ud83d\udc96 \ud83d\udc96 Dear Sis \ud83d\udc95 You\u2019ve always been my biggest supporter, my secret keeper, and my forever best friend. Our Precious Memories \ud83d\udcf8 From Bhai \u2192 To My Lovely Sister Thank You \ud83d\udc97 For Always Being There You make every small thing brighter and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":4,"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":15,"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/pages\/9\/revisions\/15"}],"wp:attachment":[{"href":"https:\/\/alakhveer.com\/index.php\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}