{"id":3871,"date":"2023-02-03T01:07:30","date_gmt":"2023-02-03T01:07:30","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3871"},"modified":"2023-06-10T13:00:25","modified_gmt":"2023-06-10T13:00:25","slug":"css-card-pure-css-product-card","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-card-pure-css-product-card\/","title":{"rendered":"CSS Card &#8211; Pure CSS Product Card"},"content":{"rendered":"<p>CSS Card &#8211; Pure CSS Product Card refers to a design style that uses only CSS (Cascading Style Sheets) to create a product card on a webpage. This means that the design does not require any JavaScript or other programming languages to function, making it easy to implement and modify.<\/p>\n<p>A pure CSS product card typically consists of a container element with a background image or color, along with text and other elements that provide information about the product. The container may also have a hover effect to provide additional interactivity and engagement for users.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"CSS Card - Pure CSS Product Card\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/wvEJPZR?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><span style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" data-mce-type=\"bookmark\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/wvEJPZR\"><br \/>\nCSS Card &#8211; Pure CSS Product Card<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<p>Here&#8217;s an example of CSS code that could be used to create a basic pure CSS product card:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"scss\">$ease1: cubic-bezier(0.75, 0.885, 0.32, 1);\r\n$p: #4e567d;\r\n$r: #ff6a5e;\r\n\r\nbody {\r\n  display: grid;\r\n  place-items: center;\r\n  height: 100vh;\r\n  font-family: \"Roboto\";\r\n  background: lighten($p, 50%);\r\n  #wrap {\r\n    width: 800px;\r\n    height: 550px;\r\n    background: #efefef;\r\n    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);\r\n    position: relative;\r\n    border-radius: 5px;\r\n    overflow: hidden;\r\n    display: grid;\r\n    grid-template-columns: repeat(15, 1fr);\r\n    grid-template-rows: repeat(15, 1fr);\r\n    grid-column-gap: 0px;\r\n    grid-row-gap: 0px;\r\n\r\n    h1,\r\n    h2 {\r\n      grid-area: 4 \/ 10 \/ 5 \/ 15;\r\n      color: #000;\r\n      position: relative;\r\n      z-index: 9;\r\n      font-size: 28px;\r\n      transition: 0.4s $ease1;\r\n      text-align: right;\r\n      opacity:0.25;\r\n    }\r\n    h2 {\r\n      grid-area: 4 \/ 2 \/ 5 \/ 7;\r\n      text-align: left;\r\n      transform: translateY(100px);\r\n      opacity: 0;\r\n    }\r\n    h3 {\r\n      position: relative;\r\n      z-index: 9;\r\n      grid-area: 10 \/ 11 \/ 11 \/ 12;\r\n      opacity: 0.25;\r\n      transition: 0.4s $ease1;\r\n    }\r\n    .toggle {\r\n      width: 30px;\r\n      height: 30px;\r\n      box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15);\r\n      z-index: 9;\r\n      background: rgba(255, 255, 255, 0.05);\r\n      position: relative;\r\n      grid-area: 4 \/ 2 \/ 5 \/ 3;\r\n      transition: 0.2s ease-in-out;\r\n      &amp;.expand {\r\n        &amp;:before {\r\n          content: \"IF Mode\";\r\n          position: absolute;\r\n          color: #fff;\r\n          top: -40px;\r\n          width: 100px;\r\n          font-weight: 900;\r\n        }\r\n      }\r\n      i {\r\n        color: #fff;\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n      }\r\n      &amp;:not(.expand) {\r\n        margin-top: 40px;\r\n        box-shadow: -5px 0 0 $r;\r\n        i {\r\n          transform: translate(-50%, -50%) rotate(-90deg);\r\n        }\r\n      }\r\n    }\r\n    input {\r\n      cursor: pointer;\r\n      opacity: 0;\r\n    }\r\n    .buy {\r\n      grid-area: 14 \/ 3 \/ 15 \/ 5;\r\n      background: $r;\r\n      position: relative;\r\n      height: 50px;\r\n      left: 40px;\r\n      border-radius: 3px;\r\n      z-index: 9;\r\n      transition: 0.2s ease-in-out;\r\n      transform: translateY(200px);\r\n      &amp;:not(input) {\r\n        pointer-events: none;\r\n        animation: fadein 0.2s ease-in-out 1 forwards;\r\n        @keyframes fadein {\r\n          from {\r\n            opacity: 0;\r\n          }\r\n          to {\r\n            opacity: 1;\r\n          }\r\n        }\r\n        &amp;:after {\r\n          content: \"Buy Now\";\r\n          position: absolute;\r\n          width: 100%;\r\n          height: 100%;\r\n          box-shadow: 0 0 0 1px $r;\r\n          border-radius: inherit;\r\n          right: calc(100% + 10px);\r\n          top: 0;\r\n          display: flex;\r\n          justify-content: center;\r\n          align-items: center;\r\n          color: $r;\r\n          cursor: pointer;\r\n          transition: 0.6s ease-in-out;\r\n          transform: translateY(200px);\r\n        }\r\n      }\r\n      &amp;:before {\r\n        content: \"Check Out\";\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        color: #fff;\r\n        animation: buynow 1s ease-in-out 1 forwards;\r\n        @keyframes buynow {\r\n          0% {\r\n            opacity: 0;\r\n          }\r\n          100% {\r\n            opacity: 1;\r\n            content: \"Check Out\";\r\n          }\r\n        }\r\n      }\r\n    }\r\n    input.initial {\r\n      position: relative;\r\n      grid-area: 4 \/ 2 \/ 5 \/ 3;\r\n      z-index: 999;\r\n      width: 30px;\r\n      height: 70px;\r\n      opacity: 0;\r\n      &amp;:first-of-type {\r\n        &amp;:hover {\r\n          &amp; ~ .toggle.expand {\r\n            background: $r;\r\n          }\r\n        }\r\n      }\r\n      &amp;:checked {\r\n        pointer-events: none;\r\n        &amp; ~ .toggle:not(.expand) {\r\n          transform: translateX(-100px);\r\n        }\r\n        &amp; ~ input[type=\"radio\"] {\r\n          pointer-events: all;\r\n        }\r\n        &amp; ~ .wheeltoggle,\r\n        &amp; ~ h3, &amp; ~ h1 {\r\n          filter: saturate(1);\r\n          opacity: 1;\r\n        }\r\n        &amp; ~ .buy {\r\n          transform: translateY(0);\r\n          min-width: 110px;\r\n          transition-delay: 1s;\r\n          &amp;:after {\r\n            transform: translateY(200px);\r\n          }\r\n          &amp;:checked {\r\n            transform: translateY(-250px);\r\n            &amp; ~ .toggle {\r\n              opacity: 0;\r\n            }\r\n            &amp; ~ .frame {\r\n              .wheel {\r\n                .inner {\r\n                  animation: wheelroll6 1.25s ease-in-out 1 forwards;\r\n                }\r\n              }\r\n            }\r\n            &amp; ~ h2 {\r\n              transform: translateY(0px);\r\n              transition-delay: 0.4s;\r\n              opacity: 1;\r\n            }\r\n            &amp; ~ .wheeltoggle,\r\n            &amp; ~ h1,\r\n            &amp; ~ h3 {\r\n              transform: translateY(100px);\r\n              opacity: 0;\r\n            }\r\n            &amp; ~ .wheeltoggle {\r\n              @for $i from 1 through 4 {\r\n                &amp;:nth-of-type(#{$i}) {\r\n                  transition-delay: #{$i\/20}s;\r\n                }\r\n              }\r\n            }\r\n            &amp; ~ h3 {\r\n              transition-delay: 0.1s;\r\n            }\r\n            &amp; ~ .buy {\r\n              animation: bounceback 1s ease-in-out 1 forwards;\r\n              &amp;:after {\r\n                transition-delay: 0.3s;\r\n                transform: translateY(0);\r\n                opacity: 1;\r\n              }\r\n              &amp;:before {\r\n                animation: buynow2 1s ease-in-out 1 forwards;\r\n\r\n                @keyframes buynow2 {\r\n                  100% {\r\n                    content: \"Back\";\r\n                  }\r\n                }\r\n              }\r\n              @keyframes bounceback {\r\n                0% {\r\n                  transform: translateY(0px);\r\n                }\r\n                50% {\r\n                  transform: translateY(200px);\r\n                }\r\n                50.5% {\r\n                  transform: translateY(200px);\r\n                  opacity: 0;\r\n                }\r\n                51% {\r\n                  transform: translateY(-200px);\r\n                  opacity: 0;\r\n                }\r\n                100% {\r\n                  transform: translateY(-250px);\r\n                }\r\n              }\r\n            }\r\n            &amp; ~ .frame:not(.two):not(i):not(.buy) {\r\n              transform: scale(0.7) translateX(350px) translateY(50px);\r\n              transition: 0.75s $ease1;\r\n              transition-delay: 0.25s;\r\n            }\r\n            ~ .background {\r\n              &amp;:before {\r\n                transition:transform 0.4s $ease1, left 0.4s $ease1 !important;\r\n                transition-delay:0.4s, 0.8s !important;\r\n                transform-origin:right;\r\n                transform:scaleX(2) !important;\r\n                left:-5%;\r\n              }\r\n              &amp;:after {\r\n                transform: scaleY(1.25) translateX(-40px) !important;\r\n                transition-delay: 0.3s;\r\n              }\r\n            }\r\n          }\r\n          &amp;:not(div) {\r\n            pointer-events: all;\r\n            z-index: 999;\r\n            &amp;:hover ~ .buy {\r\n              transition-delay: 0s;\r\n              background: darken($r, 10%);\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    .wheeltoggle {\r\n      box-shadow: 0 0 0 1px #efefef, 0 10px 20px -20px $p;\r\n      border-radius: 3px;\r\n      transition: 0.3s ease-in-out;\r\n      pointer-events: none;\r\n      filter: saturate(0);\r\n      opacity: 0.5;\r\n      background: #fff;\r\n      z-index: 9;\r\n      &amp;:before {\r\n        content: \"\";\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 50px;\r\n        top: 0;\r\n        transition: 0.4s ease-in-out;\r\n      }\r\n      @for $i from 1 through 4 {\r\n        &amp;:nth-of-type(#{$i}) {\r\n          &amp;:after {\r\n            content: \"Wheel Type #{$i}\";\r\n            position: absolute;\r\n            width: 100%;\r\n            top: 55px;\r\n            font-size: 10px;\r\n            text-align: center;\r\n            line-height: 1.25;\r\n            color: $p;\r\n            text-transform: uppercase;\r\n          }\r\n          &amp;:before {\r\n            background: url(https:\/\/assets.codepen.io\/383755\/wheel#{$i}.png)\r\n              50%\r\n              50% \/\r\n              80%\r\n              auto\r\n              no-repeat;\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    input[type=\"radio\"],\r\n    .wheeltoggle {\r\n      position: absolute;\r\n      z-index: 999;\r\n      width: 50px;\r\n      height: 90px;\r\n      z-index: 999;\r\n      pointer-events: none;\r\n      &amp;.wheel1,\r\n      &amp;:not(input):nth-of-type(1) {\r\n        grid-area: 11 \/ 14 \/ 12 \/ 15;\r\n      }\r\n      &amp;.wheel2,\r\n      &amp;:not(input):nth-of-type(2) {\r\n        grid-area: 11 \/ 13 \/ 12 \/ 14;\r\n      }\r\n      &amp;.wheel3,\r\n      &amp;:not(input):nth-of-type(3) {\r\n        grid-area: 11 \/ 12 \/ 12 \/ 13;\r\n      }\r\n      &amp;.wheel4,\r\n      &amp;:not(input):nth-of-type(4) {\r\n        grid-area: 11 \/ 11 \/ 12 \/ 12;\r\n      }\r\n      @for $i from 1 through 4 {\r\n        &amp;.wheel#{$i} {\r\n          &amp;:checked ~ .wheeltoggle {\r\n            &amp;:nth-of-type(#{$i}) {\r\n              box-shadow: 0 0 0 1px $r, 0 10px 20px -30px $p;\r\n            }\r\n          }\r\n          &amp;:hover ~ .wheeltoggle {\r\n            &amp;:nth-of-type(#{$i}) {\r\n              box-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px $p;\r\n              transform: scale(1.05);\r\n              &amp;:before {\r\n                transform: rotate(180deg);\r\n              }\r\n            }\r\n          }\r\n          &amp;:checked {\r\n            &amp; ~ .frame {\r\n              &gt; div.wheel {\r\n                animation: wheelout#{$i} 0.75s ease-in-out 1 forwards 0.25s;\r\n                .inner {\r\n                  &amp;:before {\r\n                    background-image: url(https:\/\/assets.codepen.io\/383755\/wheel#{$i}.png);\r\n                    animation: wheelroll#{$i} 1s ease-in-out 1 forwards 0s;\r\n                    @keyframes wheelroll#{$i} {\r\n                      from {\r\n                        transform: rotate(0deg);\r\n                      }\r\n                      to {\r\n                        transform: rotate(720deg);\r\n                      }\r\n                    }\r\n                    @keyframes wheelroll6 {\r\n                      from {\r\n                        transform: rotate(0deg);\r\n                      }\r\n                      to {\r\n                        transform: rotate(360deg);\r\n                      }\r\n                    }\r\n                  }\r\n                }\r\n                &amp;.back {\r\n                  animation: wheelback#{$i} 0.75s $ease1 1 forwards 0.25s;\r\n                  @keyframes wheelback#{$i} {\r\n                    0% {\r\n                      transform: translate(0px);\r\n                    }\r\n                    50% {\r\n                      transform: translateX(-700px);\r\n                    }\r\n                    100% {\r\n                      transform: translate(0px);\r\n                    }\r\n                  }\r\n                }\r\n                @keyframes wheelout#{$i} {\r\n                  0% {\r\n                    transform: translate(0px);\r\n                  }\r\n                  50% {\r\n                    transform: translateX(700px);\r\n                  }\r\n                  100% {\r\n                    transform: translate(0px);\r\n                  }\r\n                }\r\n              }\r\n              &gt; div:not(.wheel) {\r\n                animation: jump#{$i} 0.75s $ease1 1 forwards 0.25s;\r\n                @keyframes jump#{$i} {\r\n                  0% {\r\n                    transform: translateY(0);\r\n                  }\r\n                  50% {\r\n                    transform: translateY(-75px) rotate(-2.5deg);\r\n                  }\r\n                  100% {\r\n                    transform: translateY(0);\r\n                  }\r\n                }\r\n              }\r\n            }\r\n          }\r\n        }\r\n      }\r\n      &amp;:checked {\r\n        &amp; ~ .frame {\r\n          &gt; div:not(.wheel) {\r\n            animation: jump 1s ease-in-out 1 forwards;\r\n          }\r\n        }\r\n      }\r\n    }\r\n    input.initial:checked {\r\n      &amp; ~ .toggle {\r\n        box-shadow: -5px 0 0 $r;\r\n        &amp;:not(.expand) {\r\n          box-shadow: -5px 0 0 rgba(255, 255, 255, 0.15);\r\n        }\r\n      }\r\n      &amp; ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) {\r\n        transform: rotate(0deg);\r\n        margin-left: 0px;\r\n        *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) {\r\n          transform: rotate(0deg);\r\n          margin-left: 0px;\r\n          &amp;:before,\r\n          &amp;:after {\r\n            transform: rotate(0deg);\r\n          }\r\n        }\r\n        &amp;.background {\r\n          &amp;:after {\r\n            transform: scaleY(1.25) translateX(30px);\r\n          }\r\n          &amp;:before {\r\n            transition: 0.5s $ease1;\r\n          }\r\n        }\r\n        &amp;.frame {\r\n          transform: scale(0.7) rotate(0deg) translateY(50px);\r\n          margin-left: -25px;\r\n        }\r\n        &amp;:before,\r\n        &amp;:after {\r\n          transform: rotate(0deg);\r\n        }\r\n      }\r\n    }\r\n    * {\r\n      transition: transform 0.3s $ease1, margin-left 0.3s $ease1;\r\n      &amp;.frame {\r\n        transition: transform 0.6s $ease1, margin-left 0.4s $ease1;\r\n        transition-delay: 0.2s, 0.4s;\r\n      }\r\n      &amp;:before,\r\n      &amp;:after {\r\n        transition: transform 0.3s $ease1, margin-left 0.3s $ease1;\r\n      }\r\n    }\r\n    .background {\r\n      position: absolute;\r\n      width: 100%;\r\n      height: 100%;\r\n      left: 0;\r\n      top: 0;\r\n      background: $p;\r\n      overflow: hidden;\r\n      &amp;:before {\r\n        content: \"\";\r\n        position: absolute;\r\n        width: 65%;\r\n        height: 100%;\r\n        left: 35%;\r\n        top: 0;\r\n        background: #fff;\r\n        z-index: 2;\r\n        transition: $ease1 0.5s ease-in-out;\r\n      }\r\n      &amp;:after {\r\n        content: \"IF Mode\";\r\n        position: absolute;\r\n        z-index: 0;\r\n        width: 100%;\r\n        height: 80%;\r\n        top: 10%;\r\n        left: 50px;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        font-size: 200px;\r\n        font-weight: 900;\r\n        color: darken($p, 5%);\r\n        transition: 1s ease-in-out;\r\n        transform: scaleY(1.25);\r\n      }\r\n    }\r\n    .frame {\r\n      position: absolute;\r\n      top: 60px;\r\n      left: 85px;\r\n      width: 427px;\r\n      height: 365px;\r\n      z-index: 2;\r\n      transform-origin: 190px 210px;\r\n      transform: scale(0.8) rotate(-62.5deg);\r\n      div {\r\n        position: absolute;\r\n        background-size: cover;\r\n        width: 100%;\r\n        height: 100%;\r\n        top: 0;\r\n        left: 0;\r\n        &amp;.wheel {\r\n          &amp;.two,\r\n          &amp;.three,\r\n          &amp;.four {\r\n            &amp;.front {\r\n              transform: translateX(700px);\r\n              margin-left: 0px;\r\n            }\r\n            &amp;.back {\r\n              transform: translateX(-700px);\r\n            }\r\n          }\r\n          &amp;.front {\r\n            transform-origin: 273px 190px;\r\n            margin-left: -75px;\r\n            transform: rotate(115deg);\r\n            transition-delay: 0.5s, 0.8s;\r\n            z-index: 2;\r\n          }\r\n          &amp;.back {\r\n            z-index: -1;\r\n            .inner {\r\n              left: -40px;\r\n            }\r\n          }\r\n          .inner {\r\n            position: absolute;\r\n            width: 210px;\r\n            height: 210px;\r\n            border-radius: 100%;\r\n            z-index: -1;\r\n            top: 170px;\r\n            left: 300px;\r\n            &amp;:before {\r\n              content: \"\";\r\n              position: absolute;\r\n              width: 100%;\r\n              height: 100%;\r\n              background-image: url(\"https:\/\/assets.codepen.io\/383755\/wheel1.png\");\r\n              background-size: contain;\r\n              transform: rotate(360deg);\r\n              transition: transform 1.25s $ease1,\r\n                background-image 0s ease-in-out;\r\n              transition-delay: 0.1s, 0.5s;\r\n            }\r\n          }\r\n        }\r\n        &amp;.rear {\r\n          background-image: url(\"https:\/\/assets.codepen.io\/383755\/rear.png\");\r\n        }\r\n        &amp;.stem {\r\n          background-image: url(\"https:\/\/assets.codepen.io\/383755\/stem.png\");\r\n          transform-origin: 273px 190px;\r\n          margin-left: -105px;\r\n          transform: rotate(115deg);\r\n          transition-delay: 0.5s, 0.8s;\r\n        }\r\n        &amp;.shaft {\r\n          background-image: url(\"https:\/\/assets.codepen.io\/383755\/shaft.png\");\r\n          transform-origin: 220px 200px;\r\n          transform: translateX(-70px) translateY(40px);\r\n          transition-delay: 0.8s;\r\n        }\r\n        &amp;.seat {\r\n          background-image: url(\"https:\/\/assets.codepen.io\/383755\/seat.png\");\r\n          transform: translateY(100px) translateX(40px);\r\n          transition: 0.4s ease-in-out;\r\n          transition-delay: 0.65s;\r\n          z-index: -1;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Card &#8211; Pure CSS Product Card refers to a design style <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-card-pure-css-product-card\/\" title=\"CSS Card &#8211; Pure CSS Product Card\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3872,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11,406],"tags":[461,465,103,392],"newstopic":[],"class_list":{"0":"post-3871","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"category-pickup","9":"tag-css-card","10":"tag-pure-css-product-card","11":"tag-web-design","12":"tag-web-design-2023"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3871","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3871"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3871\/revisions"}],"predecessor-version":[{"id":3873,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3871\/revisions\/3873"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3872"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3871"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3871"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3871"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3871"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}