Email Portfolio \u2013 Gallery<\/title>\r\n<style>\r\n :root{\r\n --bg:#f8fafc; --card:#ffffff; --ink:#0f172a; --muted:#64748b;\r\n --border:#e5e7eb; --shadow:0 1px 4px rgba(0,0,0,.08);\r\n --shadow-lg:0 8px 20px rgba(0,0,0,.12); --brand:#111;\r\n }\r\n body{margin:0;background:var(--bg);color:var(--ink);\r\n font:14px\/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}\r\n .wrap{max-width:1180px;margin:40px auto;padding:0 20px}\r\n h1{font:700 28px\/1.2 system-ui;margin:0 0 18px}\r\n p.lead{margin:0 0 28px;color:var(--muted)}\r\n\r\n .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}\r\n\r\n .card{background:var(--card);border:1px solid var(--border);border-radius:12px;\r\n overflow:hidden;box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s;cursor:pointer}\r\n .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}\r\n\r\n \/* Thumbs line up: crop from TOP *\/\r\n .card img{\r\n display:block;width:100%;height:160px;\r\n object-fit:cover;object-position:top;\r\n transition:transform .3s\r\n }\r\n .card:hover img{transform:scale(1.05)}\r\n\r\n .body{padding:12px 14px}\r\n .card h3{margin:0 0 8px;font:600 16px\/1.2 system-ui}\r\n .meta{color:var(--muted);font:12px\/1.2 system-ui}\r\n .btn{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--brand);color:#fff;text-decoration:none}\r\n\r\n \/* Modal *\/\r\n .modal{position:fixed;inset:0;background:rgba(15,23,42,.75);display:flex;align-items:center;justify-content:center;\r\n opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s step-end;z-index:9999}\r\n .modal.open{opacity:1;visibility:visible;transition:opacity .25s, visibility 0s}\r\n .modal-inner{width:min(96vw,1000px);height:90vh;background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;\r\n transform:translateY(8px);transition:transform .25s}\r\n .modal.open .modal-inner{transform:translateY(0)}\r\n .modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}\r\n .modal-head h4{margin:0;font:600 14px\/1.2 system-ui}\r\n .x{background:none;border:0;font:700 18px\/1 system-ui;cursor:pointer}\r\n\r\n \/* Stage centers the scaled iframe *\/\r\n .modal-body{position:relative;flex:1;overflow:hidden}\r\n #frameStage{\r\n position:relative;\r\n width:100%;\r\n height:100%;\r\n overflow:hidden;\r\n display:flex;\r\n justify-content:center; \/* center horizontally *\/\r\n align-items:flex-start; \/* stick to top vertically *\/\r\n background:#fff;\r\n }\r\n\r\n \/* Scaled iframe for mobile previews *\/\r\n #emailFrame{\r\n display:block;border:0;opacity:0;transition:opacity .25s;\r\n transform-origin:top center; \/* center anchor *\/\r\n will-change:transform;\r\n background:#fff;\r\n }\r\n #emailFrame.loaded{opacity:1}\r\n\r\n @media (max-width:480px){\r\n .modal-inner{height:92vh;}\r\n }\r\n \r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n <h1>Email Portfolio<\/h1>\r\n <p class=\"lead\">Click any card to preview the full HTML email inside a modal.<\/p>\r\n\r\n <div class=\"grid\">\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/honda\/\" data-base-width=\"800\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png\" alt=\"Honda email preview\">\r\n <div class=\"body\">\r\n <h3>Honda CR-V Hybrid<\/h3>\r\n <div class=\"meta\">Automotive \u2022 hero overlay \u2022 CTA<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/renew-membership\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/renew%20membership%20preview.png\" alt=\"Renew Membership email preview\">\r\n <div class=\"body\">\r\n <h3>Renew Membership<\/h3>\r\n <div class=\"meta\">Lifecycle \u2022 retention \u2022 offer block<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/muse-hair-salon\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/muse-hair-salon-preview.png\" alt=\"Muse Hair Salon email preview\">\r\n <div class=\"body\">\r\n <h3>Muse Hair Salon<\/h3>\r\n <div class=\"meta\">Promo \u2022 beauty \u2022 elegant layout<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/wagwell-pet-co\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/wagwell%20pet%20co%20preview.png\" alt=\"Wagwell Pet Co preview\">\r\n <div class=\"body\">\r\n <h3>Wagwell Pet Co<\/h3>\r\n <div class=\"meta\">Promo \u2022 Outlook-safe buttons<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/city-beat-live\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/city%20beat%20live%20preview.png\" alt=\"City Beat Live preview\">\r\n <div class=\"body\">\r\n <h3>City Beat Live<\/h3>\r\n <div class=\"meta\">Events digest \u2022 badges \u2022 cards<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/peak-brew-lab\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/peak%20brew%20lab%20preview.png\" alt=\"Peak Brew Lab preview\">\r\n <div class=\"body\">\r\n <h3>Peak Brew Lab<\/h3>\r\n <div class=\"meta\">Newsletter \u2022 dark-mode friendly<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/pulse-fitness-studios\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/pulse%20fitness%20studios%20preview.png\" alt=\"Pulse Fitness Studios preview\">\r\n <div class=\"body\">\r\n <h3>Pulse Fitness Studios<\/h3>\r\n <div class=\"meta\">Offer \u2022 CTA variants<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/aster-aura\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/aster%20aura%20preview.png\" alt=\"Aster Aura preview\">\r\n <div class=\"body\">\r\n <h3>Aster Aura<\/h3>\r\n <div class=\"meta\">Announcement \u2022 hero pattern<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"emailModal\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Email preview\">\r\n <div class=\"modal-inner\">\r\n <div class=\"modal-head\">\r\n <h4>Preview<\/h4>\r\n <button class=\"x\" aria-label=\"Close\" onclick=\"closeModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <div id=\"frameStage\">\r\n <iframe id=\"emailFrame\" loading=\"lazy\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n const MODAL_ID = 'emailModal';\r\n const FRAME_ID = 'emailFrame';\r\n const DEFAULT_BASE_WIDTH = 600; \/\/ most emails are 600px wide\r\n let currentBaseWidth = DEFAULT_BASE_WIDTH;\r\n let isOpen = false;\r\n\r\n function fitIframe(){\r\n if(!isOpen) return;\r\n const stage = document.getElementById('frameStage');\r\n const frame = document.getElementById(FRAME_ID);\r\n if(!stage || !frame) return;\r\n\r\n const stageW = stage.clientWidth || window.innerWidth;\r\n const stageH = stage.clientHeight || window.innerHeight;\r\n\r\n const scale = Math.min(1, stageW \/ currentBaseWidth);\r\n\r\n frame.style.width = currentBaseWidth + 'px';\r\n frame.style.height = Math.ceil(stageH \/ scale) + 'px';\r\n frame.style.transform = `scale(${scale})`; \/\/ centered via flex + top-center origin\r\n }\r\n\r\n \/\/ Open modal from any card or its button\r\n document.querySelectorAll('.card').forEach(card=>{\r\n const open = (e)=>{\r\n e.preventDefault();\r\n\r\n currentBaseWidth = Number(card.dataset.baseWidth) || DEFAULT_BASE_WIDTH;\r\n\r\n const url = card.dataset.url;\r\n const frame = document.getElementById(FRAME_ID);\r\n frame.classList.remove('loaded');\r\n frame.style.transform = 'none';\r\n frame.src = url;\r\n\r\n const modal = document.getElementById(MODAL_ID);\r\n modal.classList.add('open');\r\n modal.setAttribute('aria-hidden','false');\r\n isOpen = true;\r\n\r\n fitIframe();\r\n frame.onload = ()=>{ frame.classList.add('loaded'); fitIframe(); };\r\n };\r\n card.addEventListener('click', open);\r\n card.querySelector('.btn').addEventListener('click', open);\r\n });\r\n\r\n \/\/ Close helpers\r\n function closeModal(){\r\n const modal = document.getElementById(MODAL_ID);\r\n const frame = document.getElementById(FRAME_ID);\r\n modal.classList.remove('open');\r\n modal.setAttribute('aria-hidden','true');\r\n isOpen = false;\r\n frame.src = ''; \/\/ stop any playing media\r\n }\r\n window.closeModal = closeModal;\r\n\r\n document.getElementById(MODAL_ID).addEventListener('click', (e)=>{\r\n if(e.target.id === MODAL_ID) closeModal(); \/\/ click on backdrop\r\n });\r\n window.addEventListener('keydown', (e)=>{ if(e.key==='Escape') closeModal(); });\r\n\r\n \/\/ Keep the preview sized on rotations\/resizes\r\n window.addEventListener('resize', fitIframe);\r\n window.addEventListener('orientationchange', fitIframe);\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Email Portfolio \u2013 Gallery Email Portfolio Click any card to preview the full HTML email inside a modal. Honda CR-V Hybrid Automotive \u2022 hero overlay \u2022 CTA View Renew Membership Lifecycle \u2022 retention \u2022 offer block View Muse Hair Salon Promo \u2022 beauty \u2022 elegant layout View Wagwell Pet Co Promo \u2022 Outlook-safe buttons View […]<\/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-1377","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>HTML Email Portfolio - Creative Spark Media<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativespark.media\/?page_id=1377\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Email Portfolio - Creative Spark Media\" \/>\n<meta property=\"og:description\" content=\"Email Portfolio \u2013 Gallery Email Portfolio Click any card to preview the full HTML email inside a modal. Honda CR-V Hybrid Automotive \u2022 hero overlay \u2022 CTA View Renew Membership Lifecycle \u2022 retention \u2022 offer block View Muse Hair Salon Promo \u2022 beauty \u2022 elegant layout View Wagwell Pet Co Promo \u2022 Outlook-safe buttons View […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativespark.media\/?page_id=1377\" \/>\n<meta property=\"og:site_name\" content=\"Creative Spark Media\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T23:39:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377\",\"url\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377\",\"name\":\"HTML Email Portfolio - Creative Spark Media\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/creativespark.media\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/joesparkman.github.io\\\/email-portfolio\\\/assets\\\/honda%20email%20preview.png\",\"datePublished\":\"2025-08-31T18:59:37+00:00\",\"dateModified\":\"2025-09-01T23:39:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativespark.media\\\/?page_id=1377\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#primaryimage\",\"url\":\"https:\\\/\\\/joesparkman.github.io\\\/email-portfolio\\\/assets\\\/honda%20email%20preview.png\",\"contentUrl\":\"https:\\\/\\\/joesparkman.github.io\\\/email-portfolio\\\/assets\\\/honda%20email%20preview.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativespark.media\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Email Portfolio\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/creativespark.media\\\/#website\",\"url\":\"http:\\\/\\\/creativespark.media\\\/\",\"name\":\"Creative Spark Media\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\\\/\\\/creativespark.media\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/creativespark.media\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\\\/\\\/creativespark.media\\\/#organization\",\"name\":\"Creative Spark Media\",\"url\":\"http:\\\/\\\/creativespark.media\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/creativespark.media\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/creativespark.app\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/CREATIVE-SPARK-MEDIA-1.png\",\"contentUrl\":\"https:\\\/\\\/creativespark.app\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/CREATIVE-SPARK-MEDIA-1.png\",\"width\":841,\"height\":283,\"caption\":\"Creative Spark Media\"},\"image\":{\"@id\":\"http:\\\/\\\/creativespark.media\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"HTML Email Portfolio - Creative Spark Media","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativespark.media\/?page_id=1377","og_locale":"en_US","og_type":"article","og_title":"HTML Email Portfolio - Creative Spark Media","og_description":"Email Portfolio \u2013 Gallery Email Portfolio Click any card to preview the full HTML email inside a modal. Honda CR-V Hybrid Automotive \u2022 hero overlay \u2022 CTA View Renew Membership Lifecycle \u2022 retention \u2022 offer block View Muse Hair Salon Promo \u2022 beauty \u2022 elegant layout View Wagwell Pet Co Promo \u2022 Outlook-safe buttons View […]","og_url":"https:\/\/creativespark.media\/?page_id=1377","og_site_name":"Creative Spark Media","article_modified_time":"2025-09-01T23:39:44+00:00","og_image":[{"url":"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativespark.media\/?page_id=1377","url":"https:\/\/creativespark.media\/?page_id=1377","name":"HTML Email Portfolio - Creative Spark Media","isPartOf":{"@id":"http:\/\/creativespark.media\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativespark.media\/?page_id=1377#primaryimage"},"image":{"@id":"https:\/\/creativespark.media\/?page_id=1377#primaryimage"},"thumbnailUrl":"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png","datePublished":"2025-08-31T18:59:37+00:00","dateModified":"2025-09-01T23:39:44+00:00","breadcrumb":{"@id":"https:\/\/creativespark.media\/?page_id=1377#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativespark.media\/?page_id=1377"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativespark.media\/?page_id=1377#primaryimage","url":"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png","contentUrl":"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png"},{"@type":"BreadcrumbList","@id":"https:\/\/creativespark.media\/?page_id=1377#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativespark.media\/"},{"@type":"ListItem","position":2,"name":"HTML Email Portfolio"}]},{"@type":"WebSite","@id":"http:\/\/creativespark.media\/#website","url":"http:\/\/creativespark.media\/","name":"Creative Spark Media","description":"","publisher":{"@id":"http:\/\/creativespark.media\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/creativespark.media\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/creativespark.media\/#organization","name":"Creative Spark Media","url":"http:\/\/creativespark.media\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/creativespark.media\/#\/schema\/logo\/image\/","url":"https:\/\/creativespark.app\/wp-content\/uploads\/2025\/03\/CREATIVE-SPARK-MEDIA-1.png","contentUrl":"https:\/\/creativespark.app\/wp-content\/uploads\/2025\/03\/CREATIVE-SPARK-MEDIA-1.png","width":841,"height":283,"caption":"Creative Spark Media"},"image":{"@id":"http:\/\/creativespark.media\/#\/schema\/logo\/image\/"}}]}},"brizy_media":[],"_links":{"self":[{"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/pages\/1377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativespark.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1377"}],"version-history":[{"count":5,"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/pages\/1377\/revisions"}],"predecessor-version":[{"id":1417,"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/pages\/1377\/revisions\/1417"}],"wp:attachment":[{"href":"https:\/\/creativespark.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nEmail Portfolio \u2013 Gallery<\/title>\r\n<style>\r\n :root{\r\n --bg:#f8fafc; --card:#ffffff; --ink:#0f172a; --muted:#64748b;\r\n --border:#e5e7eb; --shadow:0 1px 4px rgba(0,0,0,.08);\r\n --shadow-lg:0 8px 20px rgba(0,0,0,.12); --brand:#111;\r\n }\r\n body{margin:0;background:var(--bg);color:var(--ink);\r\n font:14px\/1.4 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif}\r\n .wrap{max-width:1180px;margin:40px auto;padding:0 20px}\r\n h1{font:700 28px\/1.2 system-ui;margin:0 0 18px}\r\n p.lead{margin:0 0 28px;color:var(--muted)}\r\n\r\n .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}\r\n\r\n .card{background:var(--card);border:1px solid var(--border);border-radius:12px;\r\n overflow:hidden;box-shadow:var(--shadow);transition:transform .2s, box-shadow .2s;cursor:pointer}\r\n .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}\r\n\r\n \/* Thumbs line up: crop from TOP *\/\r\n .card img{\r\n display:block;width:100%;height:160px;\r\n object-fit:cover;object-position:top;\r\n transition:transform .3s\r\n }\r\n .card:hover img{transform:scale(1.05)}\r\n\r\n .body{padding:12px 14px}\r\n .card h3{margin:0 0 8px;font:600 16px\/1.2 system-ui}\r\n .meta{color:var(--muted);font:12px\/1.2 system-ui}\r\n .btn{display:inline-block;margin-top:10px;padding:8px 12px;border-radius:8px;background:var(--brand);color:#fff;text-decoration:none}\r\n\r\n \/* Modal *\/\r\n .modal{position:fixed;inset:0;background:rgba(15,23,42,.75);display:flex;align-items:center;justify-content:center;\r\n opacity:0;visibility:hidden;transition:opacity .25s, visibility .25s step-end;z-index:9999}\r\n .modal.open{opacity:1;visibility:visible;transition:opacity .25s, visibility 0s}\r\n .modal-inner{width:min(96vw,1000px);height:90vh;background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;\r\n transform:translateY(8px);transition:transform .25s}\r\n .modal.open .modal-inner{transform:translateY(0)}\r\n .modal-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border)}\r\n .modal-head h4{margin:0;font:600 14px\/1.2 system-ui}\r\n .x{background:none;border:0;font:700 18px\/1 system-ui;cursor:pointer}\r\n\r\n \/* Stage centers the scaled iframe *\/\r\n .modal-body{position:relative;flex:1;overflow:hidden}\r\n #frameStage{\r\n position:relative;\r\n width:100%;\r\n height:100%;\r\n overflow:hidden;\r\n display:flex;\r\n justify-content:center; \/* center horizontally *\/\r\n align-items:flex-start; \/* stick to top vertically *\/\r\n background:#fff;\r\n }\r\n\r\n \/* Scaled iframe for mobile previews *\/\r\n #emailFrame{\r\n display:block;border:0;opacity:0;transition:opacity .25s;\r\n transform-origin:top center; \/* center anchor *\/\r\n will-change:transform;\r\n background:#fff;\r\n }\r\n #emailFrame.loaded{opacity:1}\r\n\r\n @media (max-width:480px){\r\n .modal-inner{height:92vh;}\r\n }\r\n \r\n<\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"wrap\">\r\n <h1>Email Portfolio<\/h1>\r\n <p class=\"lead\">Click any card to preview the full HTML email inside a modal.<\/p>\r\n\r\n <div class=\"grid\">\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/honda\/\" data-base-width=\"800\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png\" alt=\"Honda email preview\">\r\n <div class=\"body\">\r\n <h3>Honda CR-V Hybrid<\/h3>\r\n <div class=\"meta\">Automotive \u2022 hero overlay \u2022 CTA<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/renew-membership\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/renew%20membership%20preview.png\" alt=\"Renew Membership email preview\">\r\n <div class=\"body\">\r\n <h3>Renew Membership<\/h3>\r\n <div class=\"meta\">Lifecycle \u2022 retention \u2022 offer block<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/muse-hair-salon\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/muse-hair-salon-preview.png\" alt=\"Muse Hair Salon email preview\">\r\n <div class=\"body\">\r\n <h3>Muse Hair Salon<\/h3>\r\n <div class=\"meta\">Promo \u2022 beauty \u2022 elegant layout<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/wagwell-pet-co\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/wagwell%20pet%20co%20preview.png\" alt=\"Wagwell Pet Co preview\">\r\n <div class=\"body\">\r\n <h3>Wagwell Pet Co<\/h3>\r\n <div class=\"meta\">Promo \u2022 Outlook-safe buttons<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/city-beat-live\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/city%20beat%20live%20preview.png\" alt=\"City Beat Live preview\">\r\n <div class=\"body\">\r\n <h3>City Beat Live<\/h3>\r\n <div class=\"meta\">Events digest \u2022 badges \u2022 cards<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/peak-brew-lab\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/peak%20brew%20lab%20preview.png\" alt=\"Peak Brew Lab preview\">\r\n <div class=\"body\">\r\n <h3>Peak Brew Lab<\/h3>\r\n <div class=\"meta\">Newsletter \u2022 dark-mode friendly<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/pulse-fitness-studios\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/pulse%20fitness%20studios%20preview.png\" alt=\"Pulse Fitness Studios preview\">\r\n <div class=\"body\">\r\n <h3>Pulse Fitness Studios<\/h3>\r\n <div class=\"meta\">Offer \u2022 CTA variants<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n\r\n \r\n <article class=\"card\" data-url=\"https:\/\/joesparkman.github.io\/email-portfolio\/aster-aura\/\" data-base-width=\"600\">\r\n <img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/aster%20aura%20preview.png\" alt=\"Aster Aura preview\">\r\n <div class=\"body\">\r\n <h3>Aster Aura<\/h3>\r\n <div class=\"meta\">Announcement \u2022 hero pattern<\/div>\r\n <a class=\"btn\" href=\"#\">View<\/a>\r\n <\/div>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"modal\" id=\"emailModal\" aria-hidden=\"true\" role=\"dialog\" aria-label=\"Email preview\">\r\n <div class=\"modal-inner\">\r\n <div class=\"modal-head\">\r\n <h4>Preview<\/h4>\r\n <button class=\"x\" aria-label=\"Close\" onclick=\"closeModal()\">\u00d7<\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <div id=\"frameStage\">\r\n <iframe id=\"emailFrame\" loading=\"lazy\"><\/iframe>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n<script>\r\n const MODAL_ID = 'emailModal';\r\n const FRAME_ID = 'emailFrame';\r\n const DEFAULT_BASE_WIDTH = 600; \/\/ most emails are 600px wide\r\n let currentBaseWidth = DEFAULT_BASE_WIDTH;\r\n let isOpen = false;\r\n\r\n function fitIframe(){\r\n if(!isOpen) return;\r\n const stage = document.getElementById('frameStage');\r\n const frame = document.getElementById(FRAME_ID);\r\n if(!stage || !frame) return;\r\n\r\n const stageW = stage.clientWidth || window.innerWidth;\r\n const stageH = stage.clientHeight || window.innerHeight;\r\n\r\n const scale = Math.min(1, stageW \/ currentBaseWidth);\r\n\r\n frame.style.width = currentBaseWidth + 'px';\r\n frame.style.height = Math.ceil(stageH \/ scale) + 'px';\r\n frame.style.transform = `scale(${scale})`; \/\/ centered via flex + top-center origin\r\n }\r\n\r\n \/\/ Open modal from any card or its button\r\n document.querySelectorAll('.card').forEach(card=>{\r\n const open = (e)=>{\r\n e.preventDefault();\r\n\r\n currentBaseWidth = Number(card.dataset.baseWidth) || DEFAULT_BASE_WIDTH;\r\n\r\n const url = card.dataset.url;\r\n const frame = document.getElementById(FRAME_ID);\r\n frame.classList.remove('loaded');\r\n frame.style.transform = 'none';\r\n frame.src = url;\r\n\r\n const modal = document.getElementById(MODAL_ID);\r\n modal.classList.add('open');\r\n modal.setAttribute('aria-hidden','false');\r\n isOpen = true;\r\n\r\n fitIframe();\r\n frame.onload = ()=>{ frame.classList.add('loaded'); fitIframe(); };\r\n };\r\n card.addEventListener('click', open);\r\n card.querySelector('.btn').addEventListener('click', open);\r\n });\r\n\r\n \/\/ Close helpers\r\n function closeModal(){\r\n const modal = document.getElementById(MODAL_ID);\r\n const frame = document.getElementById(FRAME_ID);\r\n modal.classList.remove('open');\r\n modal.setAttribute('aria-hidden','true');\r\n isOpen = false;\r\n frame.src = ''; \/\/ stop any playing media\r\n }\r\n window.closeModal = closeModal;\r\n\r\n document.getElementById(MODAL_ID).addEventListener('click', (e)=>{\r\n if(e.target.id === MODAL_ID) closeModal(); \/\/ click on backdrop\r\n });\r\n window.addEventListener('keydown', (e)=>{ if(e.key==='Escape') closeModal(); });\r\n\r\n \/\/ Keep the preview sized on rotations\/resizes\r\n window.addEventListener('resize', fitIframe);\r\n window.addEventListener('orientationchange', fitIframe);\r\n<\/script>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Email Portfolio \u2013 Gallery Email Portfolio Click any card to preview the full HTML email inside a modal. Honda CR-V Hybrid Automotive \u2022 hero overlay \u2022 CTA View Renew Membership Lifecycle \u2022 retention \u2022 offer block View Muse Hair Salon Promo \u2022 beauty \u2022 elegant layout View Wagwell Pet Co Promo \u2022 Outlook-safe buttons View […]<\/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-1377","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>HTML Email Portfolio - Creative Spark Media<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/creativespark.media\/?page_id=1377\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML Email Portfolio - Creative Spark Media\" \/>\n<meta property=\"og:description\" content=\"Email Portfolio \u2013 Gallery Email Portfolio Click any card to preview the full HTML email inside a modal. Honda CR-V Hybrid Automotive \u2022 hero overlay \u2022 CTA View Renew Membership Lifecycle \u2022 retention \u2022 offer block View Muse Hair Salon Promo \u2022 beauty \u2022 elegant layout View Wagwell Pet Co Promo \u2022 Outlook-safe buttons View […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/creativespark.media\/?page_id=1377\" \/>\n<meta property=\"og:site_name\" content=\"Creative Spark Media\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-01T23:39:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377\",\"url\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377\",\"name\":\"HTML Email Portfolio - Creative Spark Media\",\"isPartOf\":{\"@id\":\"http:\\\/\\\/creativespark.media\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/joesparkman.github.io\\\/email-portfolio\\\/assets\\\/honda%20email%20preview.png\",\"datePublished\":\"2025-08-31T18:59:37+00:00\",\"dateModified\":\"2025-09-01T23:39:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/creativespark.media\\\/?page_id=1377\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#primaryimage\",\"url\":\"https:\\\/\\\/joesparkman.github.io\\\/email-portfolio\\\/assets\\\/honda%20email%20preview.png\",\"contentUrl\":\"https:\\\/\\\/joesparkman.github.io\\\/email-portfolio\\\/assets\\\/honda%20email%20preview.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/creativespark.media\\\/?page_id=1377#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/creativespark.media\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML Email Portfolio\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\\\/\\\/creativespark.media\\\/#website\",\"url\":\"http:\\\/\\\/creativespark.media\\\/\",\"name\":\"Creative Spark Media\",\"description\":\"\",\"publisher\":{\"@id\":\"http:\\\/\\\/creativespark.media\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\\\/\\\/creativespark.media\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"http:\\\/\\\/creativespark.media\\\/#organization\",\"name\":\"Creative Spark Media\",\"url\":\"http:\\\/\\\/creativespark.media\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\\\/\\\/creativespark.media\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/creativespark.app\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/CREATIVE-SPARK-MEDIA-1.png\",\"contentUrl\":\"https:\\\/\\\/creativespark.app\\\/wp-content\\\/uploads\\\/2025\\\/03\\\/CREATIVE-SPARK-MEDIA-1.png\",\"width\":841,\"height\":283,\"caption\":\"Creative Spark Media\"},\"image\":{\"@id\":\"http:\\\/\\\/creativespark.media\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"HTML Email Portfolio - Creative Spark Media","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/creativespark.media\/?page_id=1377","og_locale":"en_US","og_type":"article","og_title":"HTML Email Portfolio - Creative Spark Media","og_description":"Email Portfolio \u2013 Gallery Email Portfolio Click any card to preview the full HTML email inside a modal. Honda CR-V Hybrid Automotive \u2022 hero overlay \u2022 CTA View Renew Membership Lifecycle \u2022 retention \u2022 offer block View Muse Hair Salon Promo \u2022 beauty \u2022 elegant layout View Wagwell Pet Co Promo \u2022 Outlook-safe buttons View […]","og_url":"https:\/\/creativespark.media\/?page_id=1377","og_site_name":"Creative Spark Media","article_modified_time":"2025-09-01T23:39:44+00:00","og_image":[{"url":"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/creativespark.media\/?page_id=1377","url":"https:\/\/creativespark.media\/?page_id=1377","name":"HTML Email Portfolio - Creative Spark Media","isPartOf":{"@id":"http:\/\/creativespark.media\/#website"},"primaryImageOfPage":{"@id":"https:\/\/creativespark.media\/?page_id=1377#primaryimage"},"image":{"@id":"https:\/\/creativespark.media\/?page_id=1377#primaryimage"},"thumbnailUrl":"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png","datePublished":"2025-08-31T18:59:37+00:00","dateModified":"2025-09-01T23:39:44+00:00","breadcrumb":{"@id":"https:\/\/creativespark.media\/?page_id=1377#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/creativespark.media\/?page_id=1377"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/creativespark.media\/?page_id=1377#primaryimage","url":"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png","contentUrl":"https:\/\/joesparkman.github.io\/email-portfolio\/assets\/honda%20email%20preview.png"},{"@type":"BreadcrumbList","@id":"https:\/\/creativespark.media\/?page_id=1377#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/creativespark.media\/"},{"@type":"ListItem","position":2,"name":"HTML Email Portfolio"}]},{"@type":"WebSite","@id":"http:\/\/creativespark.media\/#website","url":"http:\/\/creativespark.media\/","name":"Creative Spark Media","description":"","publisher":{"@id":"http:\/\/creativespark.media\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/creativespark.media\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/creativespark.media\/#organization","name":"Creative Spark Media","url":"http:\/\/creativespark.media\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/creativespark.media\/#\/schema\/logo\/image\/","url":"https:\/\/creativespark.app\/wp-content\/uploads\/2025\/03\/CREATIVE-SPARK-MEDIA-1.png","contentUrl":"https:\/\/creativespark.app\/wp-content\/uploads\/2025\/03\/CREATIVE-SPARK-MEDIA-1.png","width":841,"height":283,"caption":"Creative Spark Media"},"image":{"@id":"http:\/\/creativespark.media\/#\/schema\/logo\/image\/"}}]}},"brizy_media":[],"_links":{"self":[{"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/pages\/1377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativespark.app\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1377"}],"version-history":[{"count":5,"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/pages\/1377\/revisions"}],"predecessor-version":[{"id":1417,"href":"https:\/\/creativespark.app\/index.php?rest_route=\/wp\/v2\/pages\/1377\/revisions\/1417"}],"wp:attachment":[{"href":"https:\/\/creativespark.app\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}