{"id":9,"date":"2025-07-01T08:01:14","date_gmt":"2025-07-01T08:01:14","guid":{"rendered":"https:\/\/card.ezyqrmenu.com\/weddingcard\/?page_id=9"},"modified":"2025-07-01T09:54:46","modified_gmt":"2025-07-01T09:54:46","slug":"example-1","status":"publish","type":"page","link":"https:\/\/card.ezyqrmenu.com\/weddingcard\/example-1\/","title":{"rendered":"Example 1"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Wedding Invitation<\/title>\n    \n    <!-- Google Fonts -->\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&#038;family=Great+Vibes&#038;family=Montserrat:wght@400;700&#038;display=swap\" rel=\"stylesheet\">\n\n    <!-- Font Awesome for Icons -->\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.4\/css\/all.min.css\" integrity=\"sha512-1ycn6IcaQQ40NZMfz4VqsVowoYGLsOkw0f9OpxbE\/V\/c2N\/Tnh8N7+9jW4b\/Kq1J1Kj2XQ5O8O2I9F+W4z8B\/A==\" crossorigin=\"anonymous\" referrerpolicy=\"no-referrer\" \/>\n\n   <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.5.1\/css\/all.min.css\" \/>\n\n    <!-- All the styling is now inside this <style> tag -->\n    <style>\n        body {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n            min-height: 100vh;\n            background-color: #fce8e6;\n            font-family: 'Montserrat', sans-serif;\n            padding: 20px; \/* Added padding for better viewing on small screens *\/\n            box-sizing: border-box;\n        }\n\n        .card {\n            display: flex;\n            width: 100%;\n            max-width: 900px;\n            height: auto;\n            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\n            overflow: hidden;\n            position: relative;\n        }\n\n        .left-panel {\n            width: 60%;\n            background-color: #3a2d2d;\n            color: #f0e6e6;\n            padding: 40px;\n            position: relative;\n            display: flex;\n            flex-direction: column;\n            justify-content: center;\n            background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);\n            background-size: 15px 15px;\n        }\n\n        .right-panel {\n            width: 40%;\n            background-color: #ffffff;\n            background-image: repeating-linear-gradient(90deg, #f0f0f0, #f0f0f0 15px, #ffffff 15px, #ffffff 30px);\n            display: flex;\n            align-items: center;\n            justify-content: flex-start;\n            padding-left: 20px;\n        }\n\n        \/* Floral Decorations *\/\n        .top-left-flower {\n            position: absolute;\n            top: -40px;\n            left: -60px;\n            width: 200px;\n            transform: rotate(10deg);\n            z-index: 1; \/* Ensure flowers are above background *\/\n        }\n\n        .bottom-left-flower {\n            position: absolute;\n            bottom: -8px;\n            right: -10px;\n            width: 100px;\n            z-index: 1; \/* Ensure flowers are above background *\/\n        }\n\n        \/* Text Styling *\/\n        .header {\n            text-align: center;\n            color: #e4b980;\n            margin-bottom: 20px;\n        }\n\n        .header p {\n            margin: 0;\n            font-size: 14px;\n            letter-spacing: 2px;\n        }\n\n        .header h1 {\n            margin: 0;\n            font-size: 16px;\n            letter-spacing: 3px;\n            color: #e4b980;\n        }\n\n        .loved-ones-box {\n            text-align: center;\n            border: 1px solid #f0e6e6;\n            padding: 8px 15px;\n            display: inline-block;\n            margin: 0 auto 25px;\n            font-family: 'Playfair Display', serif;\n        }\n\n        .names {\n            text-align: center;\n            margin-bottom: 25px;\n        }\n\n        .names h2 {\n            font-family: 'Great Vibes', cursive;\n            font-size: 6rem;\n            color: #ffb6c1;\n            margin: 0;\n            line-height: 1;\n            font-weight: 500;\n        }\n\n        .date-time {\n            text-align: center;\n            margin-bottom: 20px;\n            color: #e4b980;\n            font-weight: bold;\n        }\n\n        .details {\n            text-align: center;\n            font-family: 'Playfair Display', serif;\n            font-size: 14px;\n            max-width: 400px;\n            margin: 0 auto 20px;\n            line-height: 1.6;\n        }\n\n        .address {\n            text-align: center;\n            color: #e4b980;\n            font-weight: bold;\n            letter-spacing: 2px;\n            margin-bottom: 15px; \/* Adjusted margin to space from new link *\/\n        }\n\n        \/* New Location Link Styling *\/\n        .location-link-container {\n            text-align: center;\n            margin-top: -10px; \/* Spacing from the address *\/\n            font-size: 16px; \/* Base font size for the link *\/\n        }\n\n        .location-link-container i {\n            color: #e4b980; \/* Gold accent color for the icon *\/\n            margin-right: 8px; \/* Space between icon and text *\/\n        }\n\n        .location-link-container a {\n            color: #e4b980; \/* Gold accent color for the text *\/\n            text-decoration: none; \/* Remove underline *\/\n            font-weight: bold; \/* Make the text bold for prominence *\/\n            transition: color 0.3s ease; \/* Smooth transition for hover effect *\/\n        }\n\n        .location-link-container a:hover {\n            color: #ffffff; \/* Slightly darker gold on hover *\/\n        }\n\n        \/* Photo Styling *\/\n        .photo-container {\n            width: 380px;\n            height: 480px;\n            position: relative;\n            left: -110px; \/* Pull the image over the left panel *\/\n            clip-path: polygon(50% 5%, 95% 25%, 95% 75%, 50% 98%, 5% 75%, 5% 25%);\n            border: 10px solid #e4b980; \/* Gold border *\/\n            box-sizing: border-box;\n        }\n\n        .couple-photo {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        \/* Responsive adjustments for smaller screens *\/\n        @media (max-width: 900px) {\n            .card {\n                border-radius: 10px;\n                flex-direction: column;\n                height: auto;\n                max-width: 100%; \/* Make it slightly wider for larger phones\/tablets *\/\n                margin: 20px auto; \/* Add some margin to center it and provide space *\/\n            }\n            .left-panel, .right-panel {\n                width: 100%;\n                padding: 30px 20px; \/* Adjust padding for better look on mobile *\/\n                box-sizing: border-box; \/* Ensure padding is included in the width *\/\n            }\n            .right-panel {\n                padding: 20px 0; \/* Adjust padding for the right panel *\/\n                height: auto; \/* Remove fixed height, let content define it *\/\n                min-height: 300px; \/* Add a minimum height to ensure photo visibility *\/\n                justify-content: center; \/* Center photo horizontally *\/\n            }\n            .photo-container {\n                left: 0; \/* Remove left offset for mobile *\/\n                width: 70%; \/* Adjust width for better fit on mobile *\/\n                height: 90%; \/* Keep height relative *\/\n                margin: 0 auto; \/* Center the photo container *\/\n                border-width: 5px; \/* Thinner border for mobile *\/\n            }\n            .names h2 {\n                font-size: 3.5rem; \/* Further reduce font size for small screens *\/\n            }\n            .top-left-flower {\n                top: -20px;\n                left: -30px;\n                width: 120px; \/* Reduce size *\/\n            }\n            .bottom-left-flower {\n                bottom: -5px;\n                right: -5px;\n                width: 70px; \/* Reduce size *\/\n            }\n            .header h1 {\n                font-size: 14px; \/* Adjust header font size *\/\n            }\n            .loved-ones-box {\n                font-size: 13px; \/* Adjust font size *\/\n            }\n            .date-time p, .details p, .address p {\n                font-size: 13px; \/* Adjust font size for readability *\/\n            }\n            .location-link-container {\n                font-size: 14px; \/* Adjust font size for mobile *\/\n            }\n        }\n\n        \/* Additional media query for very small screens (e.g., iPhone SE) *\/\n        @media (max-width: 480px) {\n            .names h2 {\n                font-size: 2.8rem; \/* Even smaller for very narrow screens *\/\n            }\n            .photo-container {\n                width: 85%; \/* Make photo a bit larger on very narrow screens for impact *\/\n            }\n            \/* Consider hiding flowers if they become too intrusive on very small screens *\/\n            .top-left-flower, .bottom-left-flower {\n                display: none; \n            }\n            .left-panel {\n                padding: 20px 15px; \/* Reduce padding for very small screens *\/\n            }\n        }\n    <\/style>\n<\/head>\n<body>\n\n    <div class=\"card\">\n        <!-- Left Side with Details -->\n        <div class=\"left-panel\">\n            <!-- You can replace this image source with your own flower graphic -->\n            <img decoding=\"async\" src=\"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-content\/uploads\/sites\/4\/2025\/07\/flower-removebg-preview.png\" class=\"top-left-flower\" alt=\"Flower decoration\">\n            \n            <div class=\"header\">\n                <p>SAVE THE DATE<\/p>\n                <h1>WEDDING INVITATION<\/h1>\n            <\/div>\n            <div class=\"loved-ones-box\">\n                <span>Together with their loved ones<\/span>\n            <\/div>\n            <div class=\"names\">\n                <!-- Change the names here -->\n                <h2>David<br>&#038;<br>Li Li<\/h2>\n            <\/div>\n            <div class=\"date-time\">\n                <!-- Change the date here -->\n                <p>FRIDAY | 25 OCT | 2025<\/p>\n            <\/div>\n            <div class=\"details\">\n                <!-- Change the details here -->\n                <p>Join us to celebrate our wedding day with joy, laughter, and happily ever after. Your presence would be the greatest gift.<\/p>\n            <\/div>\n            <div class=\"address\">\n                <!-- Change the address here -->\n                <p>THE GRAND HALL, OAK VALLEY<\/p>\n            <\/div>\n\n            <!-- New Location Link -->\n            <div class=\"location-link-container\">\n                <i class=\"fas fa-map-marker-alt\"><\/i>\n                <a href=\"https:\/\/maps.app.goo.gl\/vY1BYhAsZRQQicrp9\" target=\"_blank\" rel=\"noopener noreferrer\">Building 11, MICT Park, Hlaing<\/a>\n            <\/div>\n\n            <!-- You can replace this image source with your own flower graphic -->\n            <img decoding=\"async\" src=\"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-content\/uploads\/sites\/4\/2025\/07\/flower-removebg-preview.png\" class=\"bottom-left-flower\" alt=\"Flower decoration\">\n        <\/div>\n\n        <!-- Right Side with Photo -->\n        <div class=\"right-panel\">\n            <div class=\"photo-container\">\n                <!-- Change the photo URL here -->\n                <img decoding=\"async\" src=\"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-content\/uploads\/sites\/4\/2025\/07\/wedding.webp\" class=\"couple-photo\">\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Wedding Invitation SAVE THE DATE WEDDING INVITATION Together with their loved ones David&#038;Li Li FRIDAY | 25 OCT | 2025 [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-json\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":152,"href":"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-json\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-json\/wp\/v2\/pages\/9\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/card.ezyqrmenu.com\/weddingcard\/wp-json\/wp\/v2\/media?parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}