{"id":1442,"date":"2023-05-14T22:34:56","date_gmt":"2023-05-14T19:34:56","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1442"},"modified":"2023-05-14T22:34:58","modified_gmt":"2023-05-14T19:34:58","slug":"product-card","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/cards\/1442\/","title":{"rendered":"Product Card"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Product Card html &amp; css only\" width=\"640\" height=\"480\" src=\"https:\/\/www.youtube.com\/embed\/6coAc-uOqNo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">  &lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.1\/css\/all.min.css&quot;&gt;\n\n\n  &lt;div id='wrap'&gt;\n    &lt;input class='initial' type='checkbox'&gt;\n    &lt;input class='wheel1' name='wheel' type='radio'&gt;\n    &lt;input class='wheel2' name='wheel' type='radio'&gt;\n    &lt;input class='wheel3' name='wheel' type='radio'&gt;\n    &lt;input class='wheel4' name='wheel' type='radio'&gt;\n    &lt;input class='buy' type='checkbox'&gt;\n    &lt;h1&gt;Configure the Bike&lt;\/h1&gt;\n    &lt;h2&gt;Added to Cart&lt;\/h2&gt;\n    &lt;h3&gt;Wheels&lt;\/h3&gt;\n    &lt;div class='wheeltoggle'&gt;&lt;\/div&gt;\n    &lt;div class='wheeltoggle'&gt;&lt;\/div&gt;\n    &lt;div class='wheeltoggle'&gt;&lt;\/div&gt;\n    &lt;div class='wheeltoggle'&gt;&lt;\/div&gt;\n    &lt;div class='buy'&gt;&lt;\/div&gt;\n    &lt;div class='toggle expand'&gt;\n      &lt;i class='fas fa-bicycle'&gt;&lt;\/i&gt;\n    &lt;\/div&gt;\n    &lt;div class='toggle'&gt;\n      &lt;i class='fas fa-bicycle'&gt;&lt;\/i&gt;\n    &lt;\/div&gt;\n    &lt;div class='background'&gt;&lt;\/div&gt;\n    &lt;div class='frame'&gt;\n      &lt;div class='rear'&gt;&lt;\/div&gt;\n      &lt;div class='stem'&gt;&lt;\/div&gt;\n      &lt;div class='shaft'&gt;&lt;\/div&gt;\n      &lt;div class='seat'&gt;&lt;\/div&gt;\n      &lt;div class='wheel one front'&gt;\n        &lt;div class='inner'&gt;&lt;\/div&gt;\n      &lt;\/div&gt;\n      &lt;div class='wheel one back'&gt;\n        &lt;div class='inner'&gt;&lt;\/div&gt;\n      &lt;\/div&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">body {\n\tdisplay: grid;\n\tplace-items: center;\n\theight: 100vh;\n\tfont-family: &quot;Roboto&quot;;\n\tbackground: #dfe1eb;\n  }\n  body #wrap {\n\twidth: 800px;\n\theight: 550px;\n\tbackground: #efefef;\n\tbox-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.25);\n\tposition: relative;\n\tborder-radius: 5px;\n\toverflow: hidden;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(15, 1fr);\n\tgrid-template-rows: repeat(15, 1fr);\n\tgrid-column-gap: 0px;\n\tgrid-row-gap: 0px;\n  }\n  body #wrap h1,\n  body #wrap h2 {\n\tgrid-area: 4\/10\/5\/15;\n\tcolor: #000;\n\tposition: relative;\n\tz-index: 9;\n\tfont-size: 28px;\n\ttransition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1);\n\ttext-align: right;\n\topacity: 0.25;\n  }\n  body #wrap h2 {\n\tgrid-area: 4\/2\/5\/7;\n\ttext-align: left;\n\ttransform: translateY(100px);\n\topacity: 0;\n  }\n  body #wrap h3 {\n\tposition: relative;\n\tz-index: 9;\n\tgrid-area: 10\/11\/11\/12;\n\topacity: 0.25;\n\ttransition: 0.4s cubic-bezier(0.75, 0.885, 0.32, 1);\n  }\n  body #wrap .toggle {\n\twidth: 30px;\n\theight: 30px;\n\tbox-shadow: -5px 0 0 rgba(255, 255, 255, 0.15);\n\tz-index: 9;\n\tbackground: rgba(255, 255, 255, 0.05);\n\tposition: relative;\n\tgrid-area: 4\/2\/5\/3;\n\ttransition: 0.2s ease-in-out;\n  }\n  body #wrap .toggle.expand:before {\n\tcontent: &quot;IF Mode&quot;;\n\tposition: absolute;\n\tcolor: #fff;\n\ttop: -40px;\n\twidth: 100px;\n\tfont-weight: 900;\n  }\n  body #wrap .toggle i {\n\tcolor: #fff;\n\tposition: absolute;\n\ttop: 50%;\n\tleft: 50%;\n\ttransform: translate(-50%, -50%);\n  }\n  body #wrap .toggle:not(.expand) {\n\tmargin-top: 40px;\n\tbox-shadow: -5px 0 0 #ff6a5e;\n  }\n  body #wrap .toggle:not(.expand) i {\n\ttransform: translate(-50%, -50%) rotate(-90deg);\n  }\n  body #wrap input {\n\tcursor: pointer;\n\topacity: 0;\n  }\n  body #wrap .buy {\n\tgrid-area: 14\/3\/15\/5;\n\tbackground: #ff6a5e;\n\tposition: relative;\n\theight: 50px;\n\tleft: 40px;\n\tborder-radius: 3px;\n\tz-index: 9;\n\ttransition: 0.2s ease-in-out;\n\ttransform: translateY(200px);\n  }\n  body #wrap .buy:not(input) {\n\tpointer-events: none;\n\t-webkit-animation: fadein 0.2s ease-in-out 1 forwards;\n\t\t\tanimation: fadein 0.2s ease-in-out 1 forwards;\n  }\n  @-webkit-keyframes fadein {\n\tfrom {\n\t  opacity: 0;\n\t}\n\tto {\n\t  opacity: 1;\n\t}\n  }\n  @keyframes fadein {\n\tfrom {\n\t  opacity: 0;\n\t}\n\tto {\n\t  opacity: 1;\n\t}\n  }\n  body #wrap .buy:not(input):after {\n\tcontent: &quot;Buy Now&quot;;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tbox-shadow: 0 0 0 1px #ff6a5e;\n\tborder-radius: inherit;\n\tright: calc(100% + 10px);\n\ttop: 0;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: #ff6a5e;\n\tcursor: pointer;\n\ttransition: 0.6s ease-in-out;\n\ttransform: translateY(200px);\n  }\n  body #wrap .buy:before {\n\tcontent: &quot;Check Out&quot;;\n\twidth: 100%;\n\theight: 100%;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tcolor: #fff;\n\t-webkit-animation: buynow 1s ease-in-out 1 forwards;\n\t\t\tanimation: buynow 1s ease-in-out 1 forwards;\n  }\n  @-webkit-keyframes buynow {\n\t0% {\n\t  opacity: 0;\n\t}\n\t100% {\n\t  opacity: 1;\n\t  content: &quot;Check Out&quot;;\n\t}\n  }\n  @keyframes buynow {\n\t0% {\n\t  opacity: 0;\n\t}\n\t100% {\n\t  opacity: 1;\n\t  content: &quot;Check Out&quot;;\n\t}\n  }\n  body #wrap input.initial {\n\tposition: relative;\n\tgrid-area: 4\/2\/5\/3;\n\tz-index: 999;\n\twidth: 30px;\n\theight: 70px;\n\topacity: 0;\n  }\n  body #wrap input.initial:first-of-type:hover ~ .toggle.expand {\n\tbackground: #ff6a5e;\n  }\n  body #wrap input.initial:checked {\n\tpointer-events: none;\n  }\n  body #wrap input.initial:checked ~ .toggle:not(.expand) {\n\ttransform: translateX(-100px);\n  }\n  body #wrap input.initial:checked ~ input[type=radio] {\n\tpointer-events: all;\n  }\n  body #wrap input.initial:checked ~ .wheeltoggle, body #wrap input.initial:checked ~ h3, body #wrap input.initial:checked ~ h1 {\n\tfilter: saturate(1);\n\topacity: 1;\n  }\n  body #wrap input.initial:checked ~ .buy {\n\ttransform: translateY(0);\n\tmin-width: 110px;\n\ttransition-delay: 1s;\n  }\n  body #wrap input.initial:checked ~ .buy:after {\n\ttransform: translateY(200px);\n  }\n  body #wrap input.initial:checked ~ .buy:checked {\n\ttransform: translateY(-250px);\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .toggle {\n\topacity: 0;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .frame .wheel .inner {\n\t-webkit-animation: wheelroll6 1.25s ease-in-out 1 forwards;\n\t\t\tanimation: wheelroll6 1.25s ease-in-out 1 forwards;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ h2 {\n\ttransform: translateY(0px);\n\ttransition-delay: 0.4s;\n\topacity: 1;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle, body #wrap input.initial:checked ~ .buy:checked ~ h1, body #wrap input.initial:checked ~ .buy:checked ~ h3 {\n\ttransform: translateY(100px);\n\topacity: 0;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(1) {\n\ttransition-delay: 0.05s;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(2) {\n\ttransition-delay: 0.1s;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(3) {\n\ttransition-delay: 0.15s;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .wheeltoggle:nth-of-type(4) {\n\ttransition-delay: 0.2s;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ h3 {\n\ttransition-delay: 0.1s;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .buy {\n\t-webkit-animation: bounceback 1s ease-in-out 1 forwards;\n\t\t\tanimation: bounceback 1s ease-in-out 1 forwards;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .buy:after {\n\ttransition-delay: 0.3s;\n\ttransform: translateY(0);\n\topacity: 1;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .buy:before {\n\t-webkit-animation: buynow2 1s ease-in-out 1 forwards;\n\t\t\tanimation: buynow2 1s ease-in-out 1 forwards;\n  }\n  @-webkit-keyframes buynow2 {\n\t100% {\n\t  content: &quot;Back&quot;;\n\t}\n  }\n  @keyframes buynow2 {\n\t100% {\n\t  content: &quot;Back&quot;;\n\t}\n  }\n  @-webkit-keyframes bounceback {\n\t0% {\n\t  transform: translateY(0px);\n\t}\n\t50% {\n\t  transform: translateY(200px);\n\t}\n\t50.5% {\n\t  transform: translateY(200px);\n\t  opacity: 0;\n\t}\n\t51% {\n\t  transform: translateY(-200px);\n\t  opacity: 0;\n\t}\n\t100% {\n\t  transform: translateY(-250px);\n\t}\n  }\n  @keyframes bounceback {\n\t0% {\n\t  transform: translateY(0px);\n\t}\n\t50% {\n\t  transform: translateY(200px);\n\t}\n\t50.5% {\n\t  transform: translateY(200px);\n\t  opacity: 0;\n\t}\n\t51% {\n\t  transform: translateY(-200px);\n\t  opacity: 0;\n\t}\n\t100% {\n\t  transform: translateY(-250px);\n\t}\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .frame:not(.two):not(i):not(.buy) {\n\ttransform: scale(0.7) translateX(350px) translateY(50px);\n\ttransition: 0.75s cubic-bezier(0.75, 0.885, 0.32, 1);\n\ttransition-delay: 0.25s;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .background:before {\n\ttransition: transform 0.4s cubic-bezier(0.75, 0.885, 0.32, 1), left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1) !important;\n\ttransition-delay: 0.4s, 0.8s !important;\n\ttransform-origin: right;\n\ttransform: scaleX(2) !important;\n\tleft: -5%;\n  }\n  body #wrap input.initial:checked ~ .buy:checked ~ .background:after {\n\ttransform: scaleY(1.25) translateX(-40px) !important;\n\ttransition-delay: 0.3s;\n  }\n  body #wrap input.initial:checked ~ .buy:not(div) {\n\tpointer-events: all;\n\tz-index: 999;\n  }\n  body #wrap input.initial:checked ~ .buy:not(div):hover ~ .buy {\n\ttransition-delay: 0s;\n\tbackground: #ff3b2b;\n  }\n  body #wrap .wheeltoggle {\n\tbox-shadow: 0 0 0 1px #efefef, 0 10px 20px -20px #4e567d;\n\tborder-radius: 3px;\n\ttransition: 0.3s ease-in-out;\n\tpointer-events: none;\n\tfilter: saturate(0);\n\topacity: 0.5;\n\tbackground: #fff;\n\tz-index: 9;\n  }\n  body #wrap .wheeltoggle:before {\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 50px;\n\ttop: 0;\n\ttransition: 0.4s ease-in-out;\n  }\n  body #wrap .wheeltoggle:nth-of-type(1):after {\n\tcontent: &quot;Wheel Type 1&quot;;\n\tposition: absolute;\n\twidth: 100%;\n\ttop: 55px;\n\tfont-size: 10px;\n\ttext-align: center;\n\tline-height: 1.25;\n\tcolor: #4e567d;\n\ttext-transform: uppercase;\n  }\n  body #wrap .wheeltoggle:nth-of-type(1):before {\n\tbackground: url(https:\/\/assets.codepen.io\/383755\/wheel1.png) 50% 50%\/80% auto no-repeat;\n  }\n  body #wrap .wheeltoggle:nth-of-type(2):after {\n\tcontent: &quot;Wheel Type 2&quot;;\n\tposition: absolute;\n\twidth: 100%;\n\ttop: 55px;\n\tfont-size: 10px;\n\ttext-align: center;\n\tline-height: 1.25;\n\tcolor: #4e567d;\n\ttext-transform: uppercase;\n  }\n  body #wrap .wheeltoggle:nth-of-type(2):before {\n\tbackground: url(https:\/\/assets.codepen.io\/383755\/wheel2.png) 50% 50%\/80% auto no-repeat;\n  }\n  body #wrap .wheeltoggle:nth-of-type(3):after {\n\tcontent: &quot;Wheel Type 3&quot;;\n\tposition: absolute;\n\twidth: 100%;\n\ttop: 55px;\n\tfont-size: 10px;\n\ttext-align: center;\n\tline-height: 1.25;\n\tcolor: #4e567d;\n\ttext-transform: uppercase;\n  }\n  body #wrap .wheeltoggle:nth-of-type(3):before {\n\tbackground: url(https:\/\/assets.codepen.io\/383755\/wheel3.png) 50% 50%\/80% auto no-repeat;\n  }\n  body #wrap .wheeltoggle:nth-of-type(4):after {\n\tcontent: &quot;Wheel Type 4&quot;;\n\tposition: absolute;\n\twidth: 100%;\n\ttop: 55px;\n\tfont-size: 10px;\n\ttext-align: center;\n\tline-height: 1.25;\n\tcolor: #4e567d;\n\ttext-transform: uppercase;\n  }\n  body #wrap .wheeltoggle:nth-of-type(4):before {\n\tbackground: url(https:\/\/assets.codepen.io\/383755\/wheel4.png) 50% 50%\/80% auto no-repeat;\n  }\n  body #wrap input[type=radio],\n  body #wrap .wheeltoggle {\n\tposition: absolute;\n\tz-index: 999;\n\twidth: 50px;\n\theight: 90px;\n\tz-index: 999;\n\tpointer-events: none;\n  }\n  body #wrap input[type=radio].wheel1, body #wrap input[type=radio]:not(input):nth-of-type(1),\n  body #wrap .wheeltoggle.wheel1,\n  body #wrap .wheeltoggle:not(input):nth-of-type(1) {\n\tgrid-area: 11\/14\/12\/15;\n  }\n  body #wrap input[type=radio].wheel2, body #wrap input[type=radio]:not(input):nth-of-type(2),\n  body #wrap .wheeltoggle.wheel2,\n  body #wrap .wheeltoggle:not(input):nth-of-type(2) {\n\tgrid-area: 11\/13\/12\/14;\n  }\n  body #wrap input[type=radio].wheel3, body #wrap input[type=radio]:not(input):nth-of-type(3),\n  body #wrap .wheeltoggle.wheel3,\n  body #wrap .wheeltoggle:not(input):nth-of-type(3) {\n\tgrid-area: 11\/12\/12\/13;\n  }\n  body #wrap input[type=radio].wheel4, body #wrap input[type=radio]:not(input):nth-of-type(4),\n  body #wrap .wheeltoggle.wheel4,\n  body #wrap .wheeltoggle:not(input):nth-of-type(4) {\n\tgrid-area: 11\/11\/12\/12;\n  }\n  body #wrap input[type=radio].wheel1:checked ~ .wheeltoggle:nth-of-type(1),\n  body #wrap .wheeltoggle.wheel1:checked ~ .wheeltoggle:nth-of-type(1) {\n\tbox-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d;\n  }\n  body #wrap input[type=radio].wheel1:hover ~ .wheeltoggle:nth-of-type(1),\n  body #wrap .wheeltoggle.wheel1:hover ~ .wheeltoggle:nth-of-type(1) {\n\tbox-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d;\n\ttransform: scale(1.05);\n  }\n  body #wrap input[type=radio].wheel1:hover ~ .wheeltoggle:nth-of-type(1):before,\n  body #wrap .wheeltoggle.wheel1:hover ~ .wheeltoggle:nth-of-type(1):before {\n\ttransform: rotate(180deg);\n  }\n  body #wrap input[type=radio].wheel1:checked ~ .frame &gt; div.wheel,\n  body #wrap .wheeltoggle.wheel1:checked ~ .frame &gt; div.wheel {\n\t-webkit-animation: wheelout1 0.75s ease-in-out 1 forwards 0.25s;\n\t\t\tanimation: wheelout1 0.75s ease-in-out 1 forwards 0.25s;\n  }\n  body #wrap input[type=radio].wheel1:checked ~ .frame &gt; div.wheel .inner:before,\n  body #wrap .wheeltoggle.wheel1:checked ~ .frame &gt; div.wheel .inner:before {\n\tbackground-image: url(https:\/\/assets.codepen.io\/383755\/wheel1.png);\n\t-webkit-animation: wheelroll1 1s ease-in-out 1 forwards 0s;\n\t\t\tanimation: wheelroll1 1s ease-in-out 1 forwards 0s;\n  }\n  @-webkit-keyframes wheelroll1 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(720deg);\n\t}\n  }\n  @keyframes wheelroll1 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(720deg);\n\t}\n  }\n  @-webkit-keyframes wheelroll6 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(360deg);\n\t}\n  }\n  @keyframes wheelroll6 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(360deg);\n\t}\n  }\n  body #wrap input[type=radio].wheel1:checked ~ .frame &gt; div.wheel.back,\n  body #wrap .wheeltoggle.wheel1:checked ~ .frame &gt; div.wheel.back {\n\t-webkit-animation: wheelback1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n\t\t\tanimation: wheelback1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n  }\n  @-webkit-keyframes wheelback1 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(-700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @keyframes wheelback1 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(-700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @-webkit-keyframes wheelout1 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @keyframes wheelout1 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  body #wrap input[type=radio].wheel1:checked ~ .frame &gt; div:not(.wheel),\n  body #wrap .wheeltoggle.wheel1:checked ~ .frame &gt; div:not(.wheel) {\n\t-webkit-animation: jump1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n\t\t\tanimation: jump1 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n  }\n  @-webkit-keyframes jump1 {\n\t0% {\n\t  transform: translateY(0);\n\t}\n\t50% {\n\t  transform: translateY(-75px) rotate(-2.5deg);\n\t}\n\t100% {\n\t  transform: translateY(0);\n\t}\n  }\n  @keyframes jump1 {\n\t0% {\n\t  transform: translateY(0);\n\t}\n\t50% {\n\t  transform: translateY(-75px) rotate(-2.5deg);\n\t}\n\t100% {\n\t  transform: translateY(0);\n\t}\n  }\n  body #wrap input[type=radio].wheel2:checked ~ .wheeltoggle:nth-of-type(2),\n  body #wrap .wheeltoggle.wheel2:checked ~ .wheeltoggle:nth-of-type(2) {\n\tbox-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d;\n  }\n  body #wrap input[type=radio].wheel2:hover ~ .wheeltoggle:nth-of-type(2),\n  body #wrap .wheeltoggle.wheel2:hover ~ .wheeltoggle:nth-of-type(2) {\n\tbox-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d;\n\ttransform: scale(1.05);\n  }\n  body #wrap input[type=radio].wheel2:hover ~ .wheeltoggle:nth-of-type(2):before,\n  body #wrap .wheeltoggle.wheel2:hover ~ .wheeltoggle:nth-of-type(2):before {\n\ttransform: rotate(180deg);\n  }\n  body #wrap input[type=radio].wheel2:checked ~ .frame &gt; div.wheel,\n  body #wrap .wheeltoggle.wheel2:checked ~ .frame &gt; div.wheel {\n\t-webkit-animation: wheelout2 0.75s ease-in-out 1 forwards 0.25s;\n\t\t\tanimation: wheelout2 0.75s ease-in-out 1 forwards 0.25s;\n  }\n  body #wrap input[type=radio].wheel2:checked ~ .frame &gt; div.wheel .inner:before,\n  body #wrap .wheeltoggle.wheel2:checked ~ .frame &gt; div.wheel .inner:before {\n\tbackground-image: url(https:\/\/assets.codepen.io\/383755\/wheel2.png);\n\t-webkit-animation: wheelroll2 1s ease-in-out 1 forwards 0s;\n\t\t\tanimation: wheelroll2 1s ease-in-out 1 forwards 0s;\n  }\n  @-webkit-keyframes wheelroll2 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(720deg);\n\t}\n  }\n  @keyframes wheelroll2 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(720deg);\n\t}\n  }\n  @keyframes wheelroll6 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(360deg);\n\t}\n  }\n  body #wrap input[type=radio].wheel2:checked ~ .frame &gt; div.wheel.back,\n  body #wrap .wheeltoggle.wheel2:checked ~ .frame &gt; div.wheel.back {\n\t-webkit-animation: wheelback2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n\t\t\tanimation: wheelback2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n  }\n  @-webkit-keyframes wheelback2 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(-700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @keyframes wheelback2 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(-700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @-webkit-keyframes wheelout2 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @keyframes wheelout2 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  body #wrap input[type=radio].wheel2:checked ~ .frame &gt; div:not(.wheel),\n  body #wrap .wheeltoggle.wheel2:checked ~ .frame &gt; div:not(.wheel) {\n\t-webkit-animation: jump2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n\t\t\tanimation: jump2 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n  }\n  @-webkit-keyframes jump2 {\n\t0% {\n\t  transform: translateY(0);\n\t}\n\t50% {\n\t  transform: translateY(-75px) rotate(-2.5deg);\n\t}\n\t100% {\n\t  transform: translateY(0);\n\t}\n  }\n  @keyframes jump2 {\n\t0% {\n\t  transform: translateY(0);\n\t}\n\t50% {\n\t  transform: translateY(-75px) rotate(-2.5deg);\n\t}\n\t100% {\n\t  transform: translateY(0);\n\t}\n  }\n  body #wrap input[type=radio].wheel3:checked ~ .wheeltoggle:nth-of-type(3),\n  body #wrap .wheeltoggle.wheel3:checked ~ .wheeltoggle:nth-of-type(3) {\n\tbox-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d;\n  }\n  body #wrap input[type=radio].wheel3:hover ~ .wheeltoggle:nth-of-type(3),\n  body #wrap .wheeltoggle.wheel3:hover ~ .wheeltoggle:nth-of-type(3) {\n\tbox-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d;\n\ttransform: scale(1.05);\n  }\n  body #wrap input[type=radio].wheel3:hover ~ .wheeltoggle:nth-of-type(3):before,\n  body #wrap .wheeltoggle.wheel3:hover ~ .wheeltoggle:nth-of-type(3):before {\n\ttransform: rotate(180deg);\n  }\n  body #wrap input[type=radio].wheel3:checked ~ .frame &gt; div.wheel,\n  body #wrap .wheeltoggle.wheel3:checked ~ .frame &gt; div.wheel {\n\t-webkit-animation: wheelout3 0.75s ease-in-out 1 forwards 0.25s;\n\t\t\tanimation: wheelout3 0.75s ease-in-out 1 forwards 0.25s;\n  }\n  body #wrap input[type=radio].wheel3:checked ~ .frame &gt; div.wheel .inner:before,\n  body #wrap .wheeltoggle.wheel3:checked ~ .frame &gt; div.wheel .inner:before {\n\tbackground-image: url(https:\/\/assets.codepen.io\/383755\/wheel3.png);\n\t-webkit-animation: wheelroll3 1s ease-in-out 1 forwards 0s;\n\t\t\tanimation: wheelroll3 1s ease-in-out 1 forwards 0s;\n  }\n  @-webkit-keyframes wheelroll3 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(720deg);\n\t}\n  }\n  @keyframes wheelroll3 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(720deg);\n\t}\n  }\n  @keyframes wheelroll6 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(360deg);\n\t}\n  }\n  body #wrap input[type=radio].wheel3:checked ~ .frame &gt; div.wheel.back,\n  body #wrap .wheeltoggle.wheel3:checked ~ .frame &gt; div.wheel.back {\n\t-webkit-animation: wheelback3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n\t\t\tanimation: wheelback3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n  }\n  @-webkit-keyframes wheelback3 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(-700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @keyframes wheelback3 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(-700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @-webkit-keyframes wheelout3 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @keyframes wheelout3 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  body #wrap input[type=radio].wheel3:checked ~ .frame &gt; div:not(.wheel),\n  body #wrap .wheeltoggle.wheel3:checked ~ .frame &gt; div:not(.wheel) {\n\t-webkit-animation: jump3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n\t\t\tanimation: jump3 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n  }\n  @-webkit-keyframes jump3 {\n\t0% {\n\t  transform: translateY(0);\n\t}\n\t50% {\n\t  transform: translateY(-75px) rotate(-2.5deg);\n\t}\n\t100% {\n\t  transform: translateY(0);\n\t}\n  }\n  @keyframes jump3 {\n\t0% {\n\t  transform: translateY(0);\n\t}\n\t50% {\n\t  transform: translateY(-75px) rotate(-2.5deg);\n\t}\n\t100% {\n\t  transform: translateY(0);\n\t}\n  }\n  body #wrap input[type=radio].wheel4:checked ~ .wheeltoggle:nth-of-type(4),\n  body #wrap .wheeltoggle.wheel4:checked ~ .wheeltoggle:nth-of-type(4) {\n\tbox-shadow: 0 0 0 1px #ff6a5e, 0 10px 20px -30px #4e567d;\n  }\n  body #wrap input[type=radio].wheel4:hover ~ .wheeltoggle:nth-of-type(4),\n  body #wrap .wheeltoggle.wheel4:hover ~ .wheeltoggle:nth-of-type(4) {\n\tbox-shadow: 0 0 0 1px #efefef, 0 10px 20px -10px #4e567d;\n\ttransform: scale(1.05);\n  }\n  body #wrap input[type=radio].wheel4:hover ~ .wheeltoggle:nth-of-type(4):before,\n  body #wrap .wheeltoggle.wheel4:hover ~ .wheeltoggle:nth-of-type(4):before {\n\ttransform: rotate(180deg);\n  }\n  body #wrap input[type=radio].wheel4:checked ~ .frame &gt; div.wheel,\n  body #wrap .wheeltoggle.wheel4:checked ~ .frame &gt; div.wheel {\n\t-webkit-animation: wheelout4 0.75s ease-in-out 1 forwards 0.25s;\n\t\t\tanimation: wheelout4 0.75s ease-in-out 1 forwards 0.25s;\n  }\n  body #wrap input[type=radio].wheel4:checked ~ .frame &gt; div.wheel .inner:before,\n  body #wrap .wheeltoggle.wheel4:checked ~ .frame &gt; div.wheel .inner:before {\n\tbackground-image: url(https:\/\/assets.codepen.io\/383755\/wheel4.png);\n\t-webkit-animation: wheelroll4 1s ease-in-out 1 forwards 0s;\n\t\t\tanimation: wheelroll4 1s ease-in-out 1 forwards 0s;\n  }\n  @-webkit-keyframes wheelroll4 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(720deg);\n\t}\n  }\n  @keyframes wheelroll4 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(720deg);\n\t}\n  }\n  @keyframes wheelroll6 {\n\tfrom {\n\t  transform: rotate(0deg);\n\t}\n\tto {\n\t  transform: rotate(360deg);\n\t}\n  }\n  body #wrap input[type=radio].wheel4:checked ~ .frame &gt; div.wheel.back,\n  body #wrap .wheeltoggle.wheel4:checked ~ .frame &gt; div.wheel.back {\n\t-webkit-animation: wheelback4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n\t\t\tanimation: wheelback4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n  }\n  @-webkit-keyframes wheelback4 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(-700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @keyframes wheelback4 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(-700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @-webkit-keyframes wheelout4 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  @keyframes wheelout4 {\n\t0% {\n\t  transform: translate(0px);\n\t}\n\t50% {\n\t  transform: translateX(700px);\n\t}\n\t100% {\n\t  transform: translate(0px);\n\t}\n  }\n  body #wrap input[type=radio].wheel4:checked ~ .frame &gt; div:not(.wheel),\n  body #wrap .wheeltoggle.wheel4:checked ~ .frame &gt; div:not(.wheel) {\n\t-webkit-animation: jump4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n\t\t\tanimation: jump4 0.75s cubic-bezier(0.75, 0.885, 0.32, 1) 1 forwards 0.25s;\n  }\n  @-webkit-keyframes jump4 {\n\t0% {\n\t  transform: translateY(0);\n\t}\n\t50% {\n\t  transform: translateY(-75px) rotate(-2.5deg);\n\t}\n\t100% {\n\t  transform: translateY(0);\n\t}\n  }\n  @keyframes jump4 {\n\t0% {\n\t  transform: translateY(0);\n\t}\n\t50% {\n\t  transform: translateY(-75px) rotate(-2.5deg);\n\t}\n\t100% {\n\t  transform: translateY(0);\n\t}\n  }\n  body #wrap input[type=radio]:checked ~ .frame &gt; div:not(.wheel),\n  body #wrap .wheeltoggle:checked ~ .frame &gt; div:not(.wheel) {\n\t-webkit-animation: jump 1s ease-in-out 1 forwards;\n\t\t\tanimation: jump 1s ease-in-out 1 forwards;\n  }\n  body #wrap input.initial:checked ~ .toggle {\n\tbox-shadow: -5px 0 0 #ff6a5e;\n  }\n  body #wrap input.initial:checked ~ .toggle:not(.expand) {\n\tbox-shadow: -5px 0 0 rgba(255, 255, 255, 0.15);\n  }\n  body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) {\n\ttransform: rotate(0deg);\n\tmargin-left: 0px;\n  }\n  body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) {\n\ttransform: rotate(0deg);\n\tmargin-left: 0px;\n  }\n  body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):before, body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle) *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):after {\n\ttransform: rotate(0deg);\n  }\n  body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).background:after {\n\ttransform: scaleY(1.25) translateX(30px);\n  }\n  body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).background:before {\n\ttransition: 0.5s cubic-bezier(0.75, 0.885, 0.32, 1);\n  }\n  body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle).frame {\n\ttransform: scale(0.7) rotate(0deg) translateY(50px);\n\tmargin-left: -25px;\n  }\n  body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):before, body #wrap input.initial:checked ~ *:not(.two):not(i):not(.buy):not(h1):not(h2):not(h3):not(.toggle):after {\n\ttransform: rotate(0deg);\n  }\n  body #wrap * {\n\ttransition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);\n  }\n  body #wrap *.frame {\n\ttransition: transform 0.6s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.4s cubic-bezier(0.75, 0.885, 0.32, 1);\n\ttransition-delay: 0.2s, 0.4s;\n  }\n  body #wrap *:before, body #wrap *:after {\n\ttransition: transform 0.3s cubic-bezier(0.75, 0.885, 0.32, 1), margin-left 0.3s cubic-bezier(0.75, 0.885, 0.32, 1);\n  }\n  body #wrap .background {\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tleft: 0;\n\ttop: 0;\n\tbackground: #4e567d;\n\toverflow: hidden;\n  }\n  body #wrap .background:before {\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\twidth: 65%;\n\theight: 100%;\n\tleft: 35%;\n\ttop: 0;\n\tbackground: #fff;\n\tz-index: 2;\n\ttransition: cubic-bezier(0.75, 0.885, 0.32, 1) 0.5s ease-in-out;\n  }\n  body #wrap .background:after {\n\tcontent: &quot;IF Mode&quot;;\n\tposition: absolute;\n\tz-index: 0;\n\twidth: 100%;\n\theight: 80%;\n\ttop: 10%;\n\tleft: 50px;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-size: 200px;\n\tfont-weight: 900;\n\tcolor: #444b6d;\n\ttransition: 1s ease-in-out;\n\ttransform: scaleY(1.25);\n  }\n  body #wrap .frame {\n\tposition: absolute;\n\ttop: 60px;\n\tleft: 85px;\n\twidth: 427px;\n\theight: 365px;\n\tz-index: 2;\n\ttransform-origin: 190px 210px;\n\ttransform: scale(0.8) rotate(-62.5deg);\n  }\n  body #wrap .frame div {\n\tposition: absolute;\n\tbackground-size: cover;\n\twidth: 100%;\n\theight: 100%;\n\ttop: 0;\n\tleft: 0;\n  }\n  body #wrap .frame div.wheel.two.front, body #wrap .frame div.wheel.three.front, body #wrap .frame div.wheel.four.front {\n\ttransform: translateX(700px);\n\tmargin-left: 0px;\n  }\n  body #wrap .frame div.wheel.two.back, body #wrap .frame div.wheel.three.back, body #wrap .frame div.wheel.four.back {\n\ttransform: translateX(-700px);\n  }\n  body #wrap .frame div.wheel.front {\n\ttransform-origin: 273px 190px;\n\tmargin-left: -75px;\n\ttransform: rotate(115deg);\n\ttransition-delay: 0.5s, 0.8s;\n\tz-index: 2;\n  }\n  body #wrap .frame div.wheel.back {\n\tz-index: -1;\n  }\n  body #wrap .frame div.wheel.back .inner {\n\tleft: -40px;\n  }\n  body #wrap .frame div.wheel .inner {\n\tposition: absolute;\n\twidth: 208px;\n\theight: 210px;\n\tborder-radius: 100%;\n\tz-index: -1;\n\ttop: 170px;\n\tleft: 300px;\n  }\n  body #wrap .frame div.wheel .inner:before {\n\tcontent: &quot;&quot;;\n\tposition: absolute;\n\twidth: 100%;\n\theight: 100%;\n\tbackground-image: url(&quot;https:\/\/assets.codepen.io\/383755\/wheel1.png&quot;);\n\tbackground-size: contain;\n\ttransform: rotate(360deg);\n\ttransition: transform 1.25s cubic-bezier(0.75, 0.885, 0.32, 1), background-image 0s ease-in-out;\n\ttransition-delay: 0.1s, 0.5s;\n  }\n  body #wrap .frame div.rear {\n\tbackground-image: url(&quot;https:\/\/assets.codepen.io\/383755\/rear.png&quot;);\n  }\n  body #wrap .frame div.stem {\n\tbackground-image: url(&quot;https:\/\/assets.codepen.io\/383755\/stem.png&quot;);\n\ttransform-origin: 273px 190px;\n\tmargin-left: -105px;\n\ttransform: rotate(115deg);\n\ttransition-delay: 0.5s, 0.8s;\n  }\n  body #wrap .frame div.shaft {\n\tbackground-image: url(&quot;https:\/\/assets.codepen.io\/383755\/shaft.png&quot;);\n\ttransform-origin: 220px 200px;\n\ttransform: translateX(-70px) translateY(40px);\n\ttransition-delay: 0.8s;\n  }\n  body #wrap .frame div.seat {\n\tbackground-image: url(&quot;https:\/\/assets.codepen.io\/383755\/seat.png&quot;);\n\ttransform: translateY(100px) translateX(40px);\n\ttransition: 0.4s ease-in-out;\n\ttransition-delay: 0.65s;\n\tz-index: -1;\n  }<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1443,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[16],"class_list":["post-1442","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cards","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1442","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1442"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1442\/revisions"}],"predecessor-version":[{"id":1444,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1442\/revisions\/1444"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1443"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1442"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1442"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1442"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}