{"id":149,"date":"2023-03-05T05:13:34","date_gmt":"2023-03-05T02:13:34","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=149"},"modified":"2023-03-28T23:51:56","modified_gmt":"2023-03-28T20:51:56","slug":"cards","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/effect\/149\/","title":{"rendered":"Beautiful card effect"},"content":{"rendered":"\n<figure class=\"wp-block-video\"><video height=\"724\" style=\"aspect-ratio: 1388 \/ 724;\" width=\"1388\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-05_02-53-36.webm\"><\/video><\/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;header&gt;\n  &lt;div class='container'&gt;\n    &lt;h1&gt;\u0422\u0435\u0441\u0442&lt;\/h1&gt;\n    &lt;p&gt;\u0422\u0435\u0441\u0442&lt;\/p&gt;\n  &lt;\/div&gt;\n&lt;\/header&gt;\n&lt;div class='container'&gt;\n  &lt;ul&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n    &lt;li&gt;\n      &lt;a class='normal' href='#'&gt;\n        &lt;svg viewBox='0 0 80 76' x='0px' y='0px'&gt;\n          &lt;g&gt;\n            &lt;path d='M 68.9708 24.8623 L 60.4554 2.3018 C 59.9641 0.7017 58.1628 -0.2583 56.5252 0.3817 L 1.9822 20.2222 C 0.3822 20.7022 -0.4179 22.6222 0.2222 24.2223 L 8.8624 47.7797 L 8.8624 35.1484 C 8.8624 29.5024 13.3425 24.8623 18.8857 24.8623 L 32.9442 24.8623 L 50.63 12.862 L 60.7829 24.8623 L 68.9708 24.8623 L 68.9708 24.8623 ZM 77.098 32.0625 L 18.8857 32.0625 C 17.2512 32.0625 16.0625 33.4511 16.0625 35.1484 L 16.0625 72.8491 C 16.0625 74.5477 17.2512 75.9375 18.8857 75.9375 L 77.098 75.9375 C 78.742 75.9375 79.9376 74.5477 79.9376 72.8491 L 79.9376 35.1484 C 79.9376 33.4511 78.742 32.0625 77.098 32.0625 L 77.098 32.0625 ZM 73.0626 68.0625 L 23.9375 68.0625 L 23.9375 61.0852 L 31.4704 43.7232 L 42.7696 57.6777 L 53.4138 46.8062 L 67.1695 41.9375 L 73.0626 55.0815 L 73.0626 68.0625 L 73.0626 68.0625 Z'&gt;&lt;\/path&gt;\n          &lt;\/g&gt;\n        &lt;\/svg&gt;\n      &lt;\/a&gt;\n      &lt;div class='info'&gt;\n        &lt;h3&gt;\u041d\u0430\u0432\u0435\u0434\u0438 \u0441\u044e\u0434\u0430&lt;\/h3&gt;\n        &lt;p&gt;\u041e\u0431\u0440\u0430\u0437\u0435\u0446 \u0442\u0435\u043a\u0441\u0442\u0430 \u0432\u043d\u0443\u0442\u0440\u0438.&lt;\/p&gt;\n      &lt;\/div&gt;\n    &lt;\/li&gt;\n  &lt;\/ul&gt;\n&lt;\/div&gt;<\/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;}\"> \nli {\n  perspective: 400px;\n}\n\n.info {\n  transform: rotate3d(1, 0, 0, 90deg);\n  width: 100%;\n  height: 100%;\n  padding: 20px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  border-radius: 4px;\n  pointer-events: none;\n  background-color: rgba(0, 74, 130, 0.9);\n}\n\n.in-top .info {\n  transform-origin: 50% 0%;\n  -webkit-animation: in-top 300ms ease 0ms 1 forwards;\n          animation: in-top 300ms ease 0ms 1 forwards;\n}\n\n.in-right .info {\n  transform-origin: 100% 0%;\n  -webkit-animation: in-right 300ms ease 0ms 1 forwards;\n          animation: in-right 300ms ease 0ms 1 forwards;\n}\n\n.in-bottom .info {\n  transform-origin: 50% 100%;\n  -webkit-animation: in-bottom 300ms ease 0ms 1 forwards;\n          animation: in-bottom 300ms ease 0ms 1 forwards;\n}\n\n.in-left .info {\n  transform-origin: 0% 0%;\n  -webkit-animation: in-left 300ms ease 0ms 1 forwards;\n          animation: in-left 300ms ease 0ms 1 forwards;\n}\n\n.out-top .info {\n  transform-origin: 50% 0%;\n  -webkit-animation: out-top 300ms ease 0ms 1 forwards;\n          animation: out-top 300ms ease 0ms 1 forwards;\n}\n\n.out-right .info {\n  transform-origin: 100% 50%;\n  -webkit-animation: out-right 300ms ease 0ms 1 forwards;\n          animation: out-right 300ms ease 0ms 1 forwards;\n}\n\n.out-bottom .info {\n  transform-origin: 50% 100%;\n  -webkit-animation: out-bottom 300ms ease 0ms 1 forwards;\n          animation: out-bottom 300ms ease 0ms 1 forwards;\n}\n\n.out-left .info {\n  transform-origin: 0% 0%;\n  -webkit-animation: out-left 300ms ease 0ms 1 forwards;\n          animation: out-left 300ms ease 0ms 1 forwards;\n}\n\n@-webkit-keyframes in-top {\n  from {\n    transform: rotate3d(-1, 0, 0, 90deg);\n  }\n  to {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n}\n\n@keyframes in-top {\n  from {\n    transform: rotate3d(-1, 0, 0, 90deg);\n  }\n  to {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n}\n@-webkit-keyframes in-right {\n  from {\n    transform: rotate3d(0, -1, 0, 90deg);\n  }\n  to {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n}\n@keyframes in-right {\n  from {\n    transform: rotate3d(0, -1, 0, 90deg);\n  }\n  to {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n}\n@-webkit-keyframes in-bottom {\n  from {\n    transform: rotate3d(1, 0, 0, 90deg);\n  }\n  to {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n}\n@keyframes in-bottom {\n  from {\n    transform: rotate3d(1, 0, 0, 90deg);\n  }\n  to {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n}\n@-webkit-keyframes in-left {\n  from {\n    transform: rotate3d(0, 1, 0, 90deg);\n  }\n  to {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n}\n@keyframes in-left {\n  from {\n    transform: rotate3d(0, 1, 0, 90deg);\n  }\n  to {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n}\n@-webkit-keyframes out-top {\n  from {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n  to {\n    transform: rotate3d(-1, 0, 0, 104deg);\n  }\n}\n@keyframes out-top {\n  from {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n  to {\n    transform: rotate3d(-1, 0, 0, 104deg);\n  }\n}\n@-webkit-keyframes out-right {\n  from {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n  to {\n    transform: rotate3d(0, -1, 0, 104deg);\n  }\n}\n@keyframes out-right {\n  from {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n  to {\n    transform: rotate3d(0, -1, 0, 104deg);\n  }\n}\n@-webkit-keyframes out-bottom {\n  from {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n  to {\n    transform: rotate3d(1, 0, 0, 104deg);\n  }\n}\n@keyframes out-bottom {\n  from {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n  to {\n    transform: rotate3d(1, 0, 0, 104deg);\n  }\n}\n@-webkit-keyframes out-left {\n  from {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n  to {\n    transform: rotate3d(0, 1, 0, 104deg);\n  }\n}\n@keyframes out-left {\n  from {\n    transform: rotate3d(0, 0, 0, 0deg);\n  }\n  to {\n    transform: rotate3d(0, 1, 0, 104deg);\n  }\n}\n\/* you can ignore this ones *\/\nul {\n  padding: 0;\n  margin: 0 0 50px;\n}\nul:after {\n  content: &quot;&quot;;\n  display: table;\n  clear: both;\n}\n\nli {\n  position: relative;\n  float: left;\n  width: 200px;\n  height: 200px;\n  margin: 5px;\n  padding: 0;\n  list-style: none;\n}\nli a {\n  display: inline-block;\n  vertical-align: top;\n  text-decoration: none;\n  border-radius: 4px;\n}\nli h3 {\n  margin: 0;\n  font-size: 16px;\n  color: rgba(255, 255, 255, 0.9);\n}\nli p {\n  font-size: 12px;\n  line-height: 1.5;\n  color: rgba(255, 255, 255, 0.8);\n}\nli .normal {\n  width: 100%;\n  height: 100%;\n  background-color: #ECF0F1;\n  color: rgba(52, 73, 94, 0.6);\n  box-shadow: inset 0 2px 20px #e6ebed;\n  text-align: center;\n  font-size: 50px;\n  line-height: 200px;\n}\nli .normal svg {\n  pointer-events: none;\n  width: 50px;\n}\nli .normal svg path {\n  fill: rgba(52, 73, 94, 0.2);\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  background-color: #fff;\n}\n\nh1 {\n  margin: 0 auto 5px;\n  text-align: center;\n}\n\nh3 {\n  font-family: &quot;Bree Serif&quot;, serif;\n}\n\n.container {\n  width: 840px;\n  margin: 0 auto;\n}\n\nheader {\n  font-family: &quot;Bree Serif&quot;, serif;\n  text-align: center;\n  margin: 50px 0 25px;\n  color: #34495E;\n}\nheader p {\n  margin: 0;\n  color: rgba(52, 73, 94, 0.4);\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;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&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;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">const nodes = [].slice.call(document.querySelectorAll('li'), 0);\nconst directions = { 0: 'top', 1: 'right', 2: 'bottom', 3: 'left' };\nconst classNames = ['in', 'out'].map(p =&gt; Object.values(directions).map(d =&gt; `${p}-${d}`)).reduce((a, b) =&gt; a.concat(b));\n\nconst getDirectionKey = (ev, node) =&gt; {\n  const { width, height, top, left } = node.getBoundingClientRect();\n  const l = ev.pageX - (left + window.pageXOffset);\n  const t = ev.pageY - (top + window.pageYOffset);\n  const x = l - width \/ 2 * (width &gt; height ? height \/ width : 1);\n  const y = t - height \/ 2 * (height &gt; width ? width \/ height : 1);\n  return Math.round(Math.atan2(y, x) \/ 1.57079633 + 5) % 4;\n};\n\nclass Item {\n  constructor(element) {\n    this.element = element;\n    this.element.addEventListener('mouseover', ev =&gt; this.update(ev, 'in'));\n    this.element.addEventListener('mouseout', ev =&gt; this.update(ev, 'out'));\n  }\n\n  update(ev, prefix) {\n    this.element.classList.remove(...classNames);\n    this.element.classList.add(`${prefix}-${directions[getDirectionKey(ev, this.element)]}`);\n  }}\nnodes.forEach(node =&gt; new Item(node));\n \/\/\u0410\u0432\u0442\u043e\u0440: <\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":151,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-effect"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/149","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=149"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/149\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/151"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}