{"id":325,"date":"2025-08-03T17:23:21","date_gmt":"2025-08-03T17:23:21","guid":{"rendered":"https:\/\/newwavearts.com\/?page_id=325"},"modified":"2025-08-03T18:14:05","modified_gmt":"2025-08-03T18:14:05","slug":"star-selection-landing","status":"publish","type":"page","link":"https:\/\/newwavearts.com\/index.php\/star-selection-landing\/","title":{"rendered":"Star Selection &#8211; Landing"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<!-- \n  The Walk of Honour - REVISED Asset with Image Placeholders\n  Copy and paste this entire code block into a \"Custom HTML\" block in WordPress.\n  This version uses images for the category points.\n-->\n\n<style>\n  \/* --- Main Container & Variables --- *\/\n  .walk-of-honour-container {\n    --star-size: 450px; \/* <--- CUSTOMIZE: Change the size of the star container *\/\n    --point-size: 100px; \/* <--- CUSTOMIZE: Change the size of the clickable circles *\/\n\n    position: relative;\n    width: var(--star-size);\n    height: var(--star-size);\n    margin: 60px auto;\n    font-family: sans-serif;\n  }\n\n  \/* --- The Star Image --- *\/\n  .walk-of-honour-container .big-star-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n    z-index: 1;\n  }\n  \n  \/* --- The Clickable Points --- *\/\n  .walk-of-honour-container .star-point {\n    position: absolute;\n    width: var(--point-size);\n    height: var(--point-size);\n    z-index: 10;\n    transform: translate(-50%, -50%);\n    transition: transform 0.3s ease;\n    text-decoration: none;\n  }\n  .walk-of-honour-container .star-point:hover {\n    transform: translate(-50%, -50%) scale(1.1);\n  }\n\n  \/* --- NEW: Styling for the category IMAGES --- *\/\n  \/* This class will make your images circular *\/\n  .walk-of-honour-container .star-point-image {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%; \/* This is the magic that makes it a circle! *\/\n    border: 3px solid white;\n    box-shadow: 0 4px 15px rgba(0,0,0,0.3);\n    object-fit: cover; \/* IMPORTANT: Fills the circle without distorting the image *\/\n    box-sizing: border-box;\n    background-color: #f0f0f0; \/* Fallback color if an image is slow to load *\/\n  }\n  \n  \/* --- Positioning for Points --- *\/\n  #community-point { top: 0%; left: 50%; }\n  #arts-point      { top: 38%; left: 100%; }\n  #sports-point    { top: 95%; left: 81%; }\n  #market-point    { top: 95%; left: 19%; }\n  #music-point     { top: 38%; left: 0%; }\n\n  \/* --- Responsive Adjustments --- *\/\n  @media (max-width: 600px) {\n    .walk-of-honour-container {\n      --star-size: 320px;\n      --point-size: 80px;\n      margin: 40px auto 60px auto;\n    }\n  }\n<\/style>\n\n<!-- ======================= YOUR HTML STRUCTURE ======================== -->\n<!-- You need to update the src=\"...\" for the big star AND for the 5 category images. -->\n\n<div class=\"walk-of-honour-container\">\n\n  <!-- The big star image (replace with your URL) -->\n  <img decoding=\"async\" src=\"http:\/\/newwavearts.com\/wp-content\/uploads\/2025\/08\/Walk-of-Honour-Star-Landing-Page.png\" alt=\"Walk of Honour Star\" class=\"big-star-image\">\n\n  <!-- The five clickable star points -->\n  <div class=\"star-points\">\n    \n    <!-- 1. Community -->\n    <a href=\"\/community-page\" class=\"star-point\" id=\"community-point\">\n      <img decoding=\"async\" src=\"http:\/\/newwavearts.com\/wp-content\/uploads\/2025\/08\/Community-Star-1.png\" alt=\"Community Star\" class=\"star-point-image\">\n    <\/a>\n\n    <!-- 2. Arts -->\n    <a href=\"\/arts-page\" class=\"star-point\" id=\"arts-point\">\n      <img decoding=\"async\" src=\"https:\/\/placehold.co\/150x150\/457B9D\/white?text=Arts\" alt=\"Arts Star\" class=\"star-point-image\">\n    <\/a>\n\n    <!-- 3. Sports -->\n    <a href=\"\/sports-page\" class=\"star-point\" id=\"sports-point\">\n      <img decoding=\"async\" src=\"https:\/\/placehold.co\/150x150\/F4A261\/white?text=Sports\" alt=\"Sports Star\" class=\"star-point-image\">\n    <\/a>\n\n    <!-- 4. Market -->\n    <a href=\"\/market-page\" class=\"star-point\" id=\"market-point\">\n      <img decoding=\"async\" src=\"https:\/\/placehold.co\/150x150\/A8DADC\/white?text=Market\" alt=\"Market Star\" class=\"star-point-image\">\n    <\/a>\n\n    <!-- 5. Music -->\n    <a href=\"\/music-page\" class=\"star-point\" id=\"music-point\">\n      <img decoding=\"async\" src=\"https:\/\/placehold.co\/150x150\/2A9D8F\/white?text=Music\" alt=\"Music Star\" class=\"star-point-image\">\n    <\/a>\n\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-325","page","type-page","status-publish","hentry"],"aioseo_notices":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/newwavearts.com\/index.php\/wp-json\/wp\/v2\/pages\/325","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/newwavearts.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/newwavearts.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/newwavearts.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/newwavearts.com\/index.php\/wp-json\/wp\/v2\/comments?post=325"}],"version-history":[{"count":6,"href":"https:\/\/newwavearts.com\/index.php\/wp-json\/wp\/v2\/pages\/325\/revisions"}],"predecessor-version":[{"id":339,"href":"https:\/\/newwavearts.com\/index.php\/wp-json\/wp\/v2\/pages\/325\/revisions\/339"}],"wp:attachment":[{"href":"https:\/\/newwavearts.com\/index.php\/wp-json\/wp\/v2\/media?parent=325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}