{"id":11481,"date":"2024-03-22T10:30:36","date_gmt":"2024-03-22T05:30:36","guid":{"rendered":"https:\/\/codehim.com\/?p=11481"},"modified":"2024-03-22T14:10:47","modified_gmt":"2024-03-22T09:10:47","slug":"cards-stack-with-scrolling-effect-using-css","status":"publish","type":"post","link":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/","title":{"rendered":"Cards Stack With Scrolling Effect Using CSS"},"content":{"rendered":"

This code creates a stack of cards with a scrolling effect using CSS. It positions cards vertically with a tilt. It’s helpful for showcasing items with an interactive layout.<\/p>\n

You can use this code on your website’s product showcase page for a visually appealing display. It enhances user engagement with its interactive scrolling effect<\/a>. It provides a modern and attractive way to present information or products to your visitors.<\/p>\n

How to Create Cards Stack With Scrolling Effect Using CSS<\/h2>\n

1. Begin by creating the HTML structure for your cards stack. Inside the <main><\/code> element, create a <div><\/code> with an id of “stack”. Within this div, add individual card elements with the class “card”.<\/p>\n

<main>\r\n  <div id=\"stack\">\r\n    <div class=\"card\">whatever<\/div>\r\n    <div class=\"card\">let&singleQuote;s go<\/div>\r\n    <div class=\"card\">not your worst<\/div>\r\n    <div class=\"card\">right on<\/div>\r\n    <div class=\"card\">party time<\/div>\r\n    <div class=\"card\">I think I get it<\/div>\r\n    <div class=\"card\">enough then<\/div>\r\n  <\/div>\r\n<\/main><\/pre>\n
2. In your CSS file, define the styles for the cards stack. You can set the overall layout, such as background color and font styles. Additionally, apply styles to the “.card” class to customize each card’s appearance, including its position, size, and tilt effect.<\/p>\n
* { margin: 0; font: inherit }\r\n\r\nbody {\r\n  background: #e3e2ff;\r\n  text-align: center;\r\n}\r\n\r\nmain {  \r\n  --tilt-angle: 3deg;\r\n  position: relative;\r\n  display: grid;\r\n  grid-template-rows: 1fr max-content;\r\n  height: 100vh;\r\n  width: 30rem;\r\n  margin: auto;\r\n  font-size: 2.4rem;\r\n  top: 10vh;\r\n}\r\n\r\n.card {\r\n  position: sticky;\r\n  top: calc(var(--top) * 1px);\r\n  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;\r\n  background-color: white;\r\n  border-radius: 0.5em;\r\n  padding: 3em;\r\n  margin-bottom: 2em;\r\n  transform: rotate(calc(var(--tilt-angle) * (2 * (var(--r) - 0.5))));\r\n  transition: * 0.3s ease;\r\n}\r\n\r\n.card.stuck {\r\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); \/* Add a box shadow effect *\/\r\n  background-color: red;\r\n}\r\n\r\n.card:nth-child(4n) {\r\n  --r: 0.7;\r\n  --top: 0;\r\n\r\n}\r\n\r\n.card:nth-child(4n + 1) {\r\n  --r: 0.2;\r\n  --top: 50;\r\n  \r\n}\r\n\r\n.card:nth-child(4n + 2) {\r\n  --r: 0.9;\r\n  --top: 100;\r\n  \r\n}\r\n\r\n.card:nth-child(4n + 3) {\r\n  --r: 0.4;\r\n  --top: 150;\r\n  \r\n}<\/pre>\n
3. If you want to add interactivity, you can use JavaScript to observe when cards intersect with the viewport and apply the “stuck” class accordingly. Uncomment the provided JavaScript code and adjust it as needed. (Optional)<\/p>\n
\/\/ got bored \r\n\r\n\/\/ const cards = document.querySelectorAll(\".card\");\r\n\r\n\/\/ cards.forEach((card) => {\r\n\/\/   const observer = new IntersectionObserver(\r\n\/\/     ([e]) => e.target.classList.toggle(\"stuck\", e.intersectionRatio < 1),\r\n\/\/     { threshold: [1] }\r\n\/\/   );\r\n\r\n\/\/   observer.observe(card);\r\n\/\/ });<\/pre>\n
That’s all! hopefully, you have successfully created a Cards Stack With a Scrolling Effect on your website. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a stack of cards with a scrolling effect using CSS. It positions cards vertically with a tilt….<\/p>\n","protected":false},"author":1,"featured_media":11493,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[63],"tags":[78],"class_list":["post-11481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5-css3","tag-scrolling"],"acf":[],"yoast_head":"\nCards Stack With Scrolling Effect Using CSS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Cards Stack With Scrolling Effect Using CSS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cards Stack With Scrolling Effect Using CSS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Cards Stack With Scrolling Effect Using CSS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-22T05:30:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-22T09:10:47+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Cards Stack With Scrolling Effect Using CSS\",\"datePublished\":\"2024-03-22T05:30:36+00:00\",\"dateModified\":\"2024-03-22T09:10:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/\"},\"wordCount\":228,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png\",\"keywords\":[\"Scrolling Effects\"],\"articleSection\":[\"HTML5 & CSS3\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/\",\"url\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/\",\"name\":\"Cards Stack With Scrolling Effect Using CSS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png\",\"datePublished\":\"2024-03-22T05:30:36+00:00\",\"dateModified\":\"2024-03-22T09:10:47+00:00\",\"description\":\"Here is a free code snippet to create a Cards Stack With Scrolling Effect Using CSS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png\",\"width\":1280,\"height\":960,\"caption\":\"Cards Stack With Scrolling Effect Using CSS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5 & CSS3\",\"item\":\"https:\/\/codehim.com\/category\/html5-css3\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Cards Stack With Scrolling Effect Using CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cards Stack With Scrolling Effect Using CSS — CodeHim","description":"Here is a free code snippet to create a Cards Stack With Scrolling Effect Using CSS. You can view demo and download the source code.","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:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/","og_locale":"en_US","og_type":"article","og_title":"Cards Stack With Scrolling Effect Using CSS — CodeHim","og_description":"Here is a free code snippet to create a Cards Stack With Scrolling Effect Using CSS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-22T05:30:36+00:00","article_modified_time":"2024-03-22T09:10:47+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Cards Stack With Scrolling Effect Using CSS","datePublished":"2024-03-22T05:30:36+00:00","dateModified":"2024-03-22T09:10:47+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/"},"wordCount":228,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png","keywords":["Scrolling Effects"],"articleSection":["HTML5 & CSS3"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/","url":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/","name":"Cards Stack With Scrolling Effect Using CSS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png","datePublished":"2024-03-22T05:30:36+00:00","dateModified":"2024-03-22T09:10:47+00:00","description":"Here is a free code snippet to create a Cards Stack With Scrolling Effect Using CSS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/03\/Cards-Stack-With-Scrolling-Effect-Using-CSS.png","width":1280,"height":960,"caption":"Cards Stack With Scrolling Effect Using CSS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/html5-css3\/cards-stack-with-scrolling-effect-using-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"HTML5 & CSS3","item":"https:\/\/codehim.com\/category\/html5-css3\/"},{"@type":"ListItem","position":3,"name":"Cards Stack With Scrolling Effect Using CSS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3301,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11481","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=11481"}],"version-history":[{"count":3,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11481\/revisions"}],"predecessor-version":[{"id":11513,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/11481\/revisions\/11513"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/11493"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=11481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=11481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=11481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}