{"id":299048,"date":"2020-02-21T09:00:21","date_gmt":"2020-02-21T09:00:21","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=299048"},"modified":"-0001-11-30T00:00:00","modified_gmt":"2020-02-21T09:00:21","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=299048","title":{"rendered":"\u0420\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043c\u0441\u044f \u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u043c\u0438 \u0432 CSS \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435"},"content":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/489294\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vm\/qm\/q-\/vmqmq-wzxwft5au4kpp3ddgy-u0.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u041e\u0434\u043d\u0430\u0436\u0434\u044b \u0432\u0435\u0431 \u0441\u0435\u0440\u0444\u0438\u043d\u0433 \u043f\u0440\u0438\u0432\u0435\u043b \u043c\u0435\u043d\u044f \u043a <a href=\"https:\/\/codepen.io\/robdimarzo\/full\/LMOLer\" rel=\"nofollow\">\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443<\/a>.<\/p>\n<p>  \u00ab\u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u00bb \u0435\u0433\u043e (\u0442\u043e \u0431\u0438\u0448\u044c \u043a\u043e\u0434\u0430) \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 CSS, \u0447\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0443\u0441\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 CSS). \u0418, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u0435\u043c\u0430 \u0438\u043c\u043f\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0432\u0435\u0441\u044c\u043c\u0430 \u2014 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0421\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>  \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Pug \u0438 Sass, \u043c\u044b \u0436\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0435\u0433\u043e \u043d\u0430 HTML\/CSS.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043f\u043e\u0435\u0445\u0430\u043b\u0438.<br \/>  <a name=\"habracut\"><\/a><br \/>  \u0420\u0430\u0437\u043c\u0435\u0442\u043a\u0430 \u043e\u0434\u043d\u043e\u0439 \u043f\u043b\u0430\u043d\u0435\u0442\u044b (\u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u041c\u0435\u0440\u043a\u0443\u0440\u0438\u044f) \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c (\u043f\u0440\u0438\u0432\u043e\u0436\u0443 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043e\u0431\u043b\u0435\u0433\u0447\u0435\u043d\u043d\u044b\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442):<\/p>\n<pre><code class=\"xml\">&lt;div class=&quot;card mercury&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;mercury&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;0.034\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;1,407 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;88 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  \u0412\u0438\u0434\u0438\u043c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<ul>\n<li>\u041e\u0431\u0435\u0440\u0442\u043a\u0443 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0438 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043d\u0435\u0439 \u2014 .card<\/li>\n<li>\u041f\u0440\u0438\u0432\u044f\u0437\u043a\u0443 \u043e\u0431\u0435\u0440\u0442\u043a\u0438 \u043a \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u043f\u043b\u0430\u043d\u0435\u0442\u0435 \u2014 .mercury<\/li>\n<li>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u2014 .planet<\/li>\n<li>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0430\u0442\u043c\u043e\u0441\u0444\u0435\u0440\u044b \u2014 .atmosphere<\/li>\n<li>\u0412\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u2014 \u043f\u043e\u0432\u0435\u0440\u0445\u043d\u043e\u0441\u0442\u044c \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u2014 .surface<\/li>\n<li>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043e \u043f\u043b\u0430\u043d\u0435\u0442\u0435 \u2014 .info<\/li>\n<li>\u041d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0439 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u2014 .title<\/li>\n<li>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u0432\u0435\u0434\u0435\u043d\u0438\u0439 \u2014 .form<\/li>\n<li>\u041a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u2014 .item<\/li>\n<li>\u0412\u0441\u0435\u0433\u043e \u0443 \u043d\u0430\u0441 \u0442\u0440\u0438 \u0435\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438:<br \/> \n<ol>\n<li>\u0412 \u043f\u0435\u0440\u0432\u043e\u0439 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043d\u0430\u043a\u043b\u043e\u043d\u0435 \u043e\u0441\u0438 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0438 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043a\u0438<\/li>\n<li>\u0412\u043e \u0432\u0442\u043e\u0440\u043e\u0439 \u2014 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043d\u044f \u0432 \u0447\u0430\u0441\u0430\u0445<\/li>\n<li>\u0412 \u0442\u0440\u0435\u0442\u044c\u0435\u0439 \u2014 \u043e \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0433\u043e\u0434\u0430 \u0432 \u0434\u043d\u044f\u0445<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>  \u0414\u0430, \u0447\u0443\u0442\u044c \u043d\u0435 \u0437\u0430\u0431\u044b\u043b \u2014 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0435 \u00abhead\u00bb \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0448\u0440\u0438\u0444\u0442:<\/p>\n<pre><code class=\"xml\">&lt;link href=&quot;https:\/\/fonts.googleapis.com\/css?family=Major+Mono+Display&quot; rel=&quot;stylesheet&quot;&gt; <\/code><\/pre>\n<p>  \u2026 \u0438 Font Awesome (\u0434\u043b\u044f \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043a\u0438):<\/p>\n<pre><code class=\"xml\">&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.12.1\/js\/all.min.js&quot;&gt;&lt;\/script&gt; <\/code><\/pre>\n<p>  <\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0412\u0435\u0441\u044c HTML:<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"xml\">&lt;div class=&quot;card mercury&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;mercury&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;0.034\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;1,407 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;88 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card venus&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;venus&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;177.3\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;5,832 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;224.7 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card earth&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;earth&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;23.26\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;23.9 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;365.2 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card mars&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;mars&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;25.2\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;24.6 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;687 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card jupiter&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;jupiter&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;3.1\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;9.9 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;4,331 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card saturn&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;saturn&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;26.7\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;10.7 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;10,747 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card uranus&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;uranus&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;97.8\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;17.2 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;30,589 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card neptune&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;neptune&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;28.3\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;16.1 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;59,800 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card pluto&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;pluto&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;122.5\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;153.3 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;90,560 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; &lt;div class=&quot;card sun&quot;&gt;     &lt;div class=&quot;planet&quot;&gt;         &lt;div class=&quot;atmosphere&quot;&gt;             &lt;div class=&quot;surface&quot;&gt;&lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt;     &lt;div class=&quot;info&quot;&gt;         &lt;h2 class=&quot;title&quot;&gt;sun&lt;\/h2&gt;         &lt;div class=&quot;form&quot;&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Tilt&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;i class=&quot; icon fas fa-long-arrow-alt-right&quot;&gt;&lt;\/i&gt;&lt;span class=&quot;detail&quot;&gt;0\u00b0 &lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Day&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;~600 hours&lt;\/span&gt;             &lt;\/div&gt;             &lt;div class=&quot;item&quot;&gt;                 &lt;label class=&quot;label&quot;&gt;Year&lt;\/label&gt;&lt;span class=&quot;line&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;detail&quot;&gt;0 days&lt;\/span&gt;             &lt;\/div&gt;         &lt;\/div&gt;     &lt;\/div&gt; &lt;\/div&gt; <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a CSS.<\/p>\n<p>  \u0414\u043b\u044f \u043e\u0431\u044a\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 CSS \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441:<\/p>\n<pre><code class=\"css\">:root {   --\u0438\u043c\u044f-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435; } <\/code><\/pre>\n<p>  \u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 \u043e \u043f\u0441\u0435\u0432\u0434\u043e\u043a\u043b\u0430\u0441\u0441\u0435 :root \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0447\u0438\u0442\u0430\u0442\u044c <a href=\"https:\/\/webref.ru\/layout\/structural-pseudo-classes\/root\" rel=\"nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"css\">:root {     --mercury-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/mercury.jpg);     --mercury-tilt: rotate(0.034deg);     --mercury-day: 1407.6;     --mercury-color: #999; } <\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u043c, \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f, \u0443\u0433\u043b\u0430 \u043d\u0430\u043a\u043b\u043e\u043d\u0430, \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043d\u044f \u0438 \u0446\u0432\u0435\u0442\u0430 \u043f\u043b\u0430\u043d\u0435\u0442\u044b, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e.<\/p>\n<p>  \u0414\u043b\u044f \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u043d\u0435\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0442\u0430\u043a\u0430\u044f \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f:<\/p>\n<pre><code class=\"css\">@keyframes planetRotate {     0% {         background-position: 0% center;     }      100% {         background-position: -200% center;     } } <\/code><\/pre>\n<p>  \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u044e\u0442\u0441\u044f \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0432 CSS \u0442\u0430\u043a:<\/p>\n<pre><code class=\"css\">var(--\u0438\u043c\u044f-\u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439); <\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442\u0441\u044f \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u043b\u0430\u043d\u0435\u0442\u044b:<\/p>\n<pre><code class=\"css\">.mercury .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color); }  .mercury .surface {     background-image: var(--mercury-image);     transform: var(--mercury-tilt) scale(1.2);     animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite; }  .mercury .planet::before {     transform: var(--mercury-tilt) scale(1.2);     border-color: var(--mercury-color);     color: var(--mercury-color); }  .mercury .icon {     transform: var(--mercury-tilt);     color: var(--mercury-color); } <\/code><\/pre>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435, \u043a\u0430\u043a \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u0430\u044f \u0434\u043b\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0434\u043d\u044f (&#8212;mercure-day) \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u0434\u043e\u043b\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 (\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438 \u0432\u0440\u0430\u0449\u0435\u043d\u0438\u044f \u043f\u043b\u0430\u043d\u0435\u0442\u044b).<\/p>\n<div class=\"spoiler\"><b class=\"spoiler_title\">\u0412\u0435\u0441\u044c CSS:<\/b><\/p>\n<div class=\"spoiler_text\">\n<pre><code class=\"css\">:root {     --mercury-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/mercury.jpg);     --mercury-tilt: rotate(0.034deg);     --mercury-day: 1407.6;     --mercury-color: #999;     --venus-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/venus.jpg);     --venus-tilt: rotate(177.3deg);     --venus-day: 5832.5;     --venus-color: #e8cda2;     --earth-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/earth.jpg);     --earth-tilt: rotate(23.26deg);     --earth-day: 23.9;     --earth-color: #b3caff;     --mars-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/mars.jpg);     --mars-tilt: rotate(25.2deg);     --mars-day: 24.6;     --mars-color: #c07158;     --jupiter-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/jupiter.jpg);     --jupiter-tilt: rotate(3.1deg);     --jupiter-day: 9.9;     --jupiter-color: #c9b5a4;     --saturn-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/saturn.jpg);     --saturn-tilt: rotate(26.7deg);     --saturn-day: 10.7;     --saturn-color: #f0e2c4;     --uranus-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/uranus.jpg);     --uranus-tilt: rotate(97.8deg);     --uranus-day: 17.2;     --uranus-color: #b8d8e1;     --neptune-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/neptune.jpg);     --neptune-tilt: rotate(28.3deg);     --neptune-day: 16.1;     --neptune-color: #5e73bb;     --pluto-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/pluto.jpg);     --pluto-tilt: rotate(122.5deg);     --pluto-day: 153.3;     --pluto-color: #c3b6aa;     --sun-image: url(https:\/\/thebestcode.ru\/media\/solarSystem\/sun.jpg);     --sun-tilt: rotate(0deg);     --sun-day: 600;     --sun-color: #cc9f4c; }  @keyframes planetRotate {     0% {         background-position: 0% center;     }      100% {         background-position: -200% center;     } }  body {     background: #000;     color: #fff;     height: 100%;     width: 100vw;     margin: 10px 0 40px 0;     display: grid;     grid-template-columns: repeat(auto-fill, 190px);     grid-template-rows: repeat(auto-fill, 400px);     grid-gap: 40px;     align-items: center;     justify-items: center;     justify-content: center;     overflow-x: hidden;     font-family: &quot;Major Mono Display&quot;;     text-transform: lowercase; }  .card {     display: flex;     flex-direction: column;     align-items: center;     position: relative; }  .mercury .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color); }  .mercury .surface {     background-image: var(--mercury-image);     transform: var(--mercury-tilt) scale(1.2);     animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite; }  .mercury .planet::before {     transform: var(--mercury-tilt) scale(1.2);     border-color: var(--mercury-color);     color: var(--mercury-color); }  .mercury .icon {     transform: var(--mercury-tilt);     color: var(--mercury-color); }  .venus .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--venus-color); }  .venus .surface {     background-image: var(--venus-image);     transform: var(--venus-tilt) scale(1.2);     animation: planetRotate calc(var(--venus-day)*.1s) linear infinite; }  .venus .planet::before {     transform: var(--venus-tilt) scale(1.2);     border-color: var(--venus-color);     color: var(--venus-color); }  .venus .icon {     transform: var(--venus-tilt);     color: var(--venus-color); }  .earth .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--earth-color); }  .earth .surface {     background-image: var(--earth-image);     transform: var(--earth-tilt) scale(1.2);     animation: planetRotate calc(var(--earth-day)*.1s) linear infinite; }  .earth .planet::before {     transform: var(--earth-tilt) scale(1.2);     border-color: var(--earth-color);     color: var(--earth-color); }  .earth .icon {     transform: var(--earth-tilt);     color: var(--earth-color); }  .mars .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mars-color); }  .mars .surface {     background-image: var(--mars-image);     transform: var(--mars-tilt) scale(1.2);     animation: planetRotate calc(var(--mars-day)*.1s) linear infinite; }  .mars .planet::before {     transform: var(--mars-tilt) scale(1.2);     border-color: var(--mars-color);     color: var(--mars-color); }  .mars .icon {     transform: var(--mars-tilt);     color: var(--mars-color); }  .jupiter .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--jupiter-color); }  .jupiter .surface {     background-image: var(--jupiter-image);     transform: var(--jupiter-tilt) scale(1.2);     animation: planetRotate calc(var(--jupiter-day)*.1s) linear infinite; }  .jupiter .planet::before {     transform: var(--jupiter-tilt) scale(1.2);     border-color: var(--jupiter-color);     color: var(--jupiter-color); }  .jupiter .icon {     transform: var(--jupiter-tilt);     color: var(--jupiter-color); }  .saturn .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--saturn-color); }  .saturn .surface {     background-image: var(--saturn-image);     transform: var(--saturn-tilt) scale(1.2);     animation: planetRotate calc(var(--saturn-day)*.1s) linear infinite; }  .saturn .planet::before {     transform: var(--saturn-tilt) scale(1.2);     border-color: var(--saturn-color);     color: var(--saturn-color); }  .saturn .icon {     transform: var(--saturn-tilt);     color: var(--saturn-color); }  .uranus .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--uranus-color); }  .uranus .surface {     background-image: var(--uranus-image);     transform: var(--uranus-tilt) scale(1.2);     animation: planetRotate calc(var(--uranus-day)*.1s) linear infinite; }  .uranus .planet::before {     transform: var(--uranus-tilt) scale(1.2);     border-color: var(--uranus-color);     color: var(--uranus-color); }  .uranus .icon {     transform: var(--uranus-tilt);     color: var(--uranus-color); }  .neptune .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--neptune-color); }  .neptune .surface {     background-image: var(--neptune-image);     transform: var(--neptune-tilt) scale(1.2);     animation: planetRotate calc(var(--neptune-day)*.1s) linear infinite; }  .neptune .planet::before {     transform: var(--neptune-tilt) scale(1.2);     border-color: var(--neptune-color);     color: var(--neptune-color); }  .neptune .icon {     transform: var(--neptune-tilt);     color: var(--neptune-color); }  .pluto .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--pluto-color); }  .pluto .surface {     background-image: var(--pluto-image);     transform: var(--pluto-tilt) scale(1.2);     animation: planetRotate calc(var(--pluto-day)*.1s) linear infinite; }  .pluto .planet::before {     transform: var(--pluto-tilt) scale(1.2);     border-color: var(--pluto-color);     color: var(--pluto-color); }  .pluto .icon {     transform: var(--pluto-tilt);     color: var(--pluto-color); }  .sun .atmosphere {     box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--sun-color); }  .sun .surface {     background-image: var(--sun-image);     transform: var(--sun-tilt) scale(1.2);     animation: planetRotate calc(var(--sun-day)*.1s) linear infinite; }  .sun .planet::before {     transform: var(--sun-tilt) scale(1.2);     border-color: var(--sun-color);     color: var(--sun-color); }  .sun .icon {     transform: var(--sun-tilt);     color: var(--sun-color); }  .planet::before {     content: '';     position: absolute;     height: 190px;     z-index: -2;     left: 50%;     top: 0%;     border-left: 1px dashed rgba(255, 255, 255, 0.25); }  .atmosphere {     height: 190px;     width: 190px;     position: relative;     background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 65%);     border-radius: 100px;     overflow: hidden; }  .surface {     position: absolute;     height: 100%;     width: 100%;     z-index: -1;     background-size: cover; }  .sun .atmosphere {     box-shadow: 0px 0px 10px 0px var(--sun-color), 0px 0px 1000px -2px var(--sun-color); }  .info {     width: 100%; }  .title {     text-align: center;     font-size: 28px; }  .form {     display: flex;     flex-direction: column;     justify-content: space-between; }  .item {     display: flex;     align-items: flex-end;     margin-bottom: 5px;     font-size: 14px; }  .item .icon {     margin: 0 5px; }  .label {     font-size: 11px; }  .line {     flex: 1;     margin: 0 5px;     border-bottom: 1px dashed rgba(255, 255, 255, 0.3); } <\/code><\/pre>\n<p>  <\/div>\n<\/div>\n<p>  \u041c\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c <a href=\"https:\/\/codepen.io\/igor_agapov\/pen\/eYNdjWo\" rel=\"nofollow\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<p>  \u0410 <a href=\"https:\/\/codepen.io\/juliangarnier\/pen\/idhuG\" rel=\"nofollow\">\u0432\u043e\u0442<\/a> \u0435\u0449\u0435 \u043e\u0434\u043d\u0430 \u0421\u043e\u043b\u043d\u0435\u0447\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 (\u043b\u0443\u0447\u0448\u0435\u0435 \u0438\u0437 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044f \u0432\u0438\u0434\u0435\u043b).<\/p>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044e \u0437\u0430 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435.<\/p>\n<p>  \u0421\u0447\u0430\u0441\u0442\u043b\u0438\u0432\u043e\u0433\u043e \u043a\u043e\u0434\u0438\u043d\u0433\u0430!<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/489294\/\"> https:\/\/habr.com\/ru\/post\/489294\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html\" id=\"post-content-body\" data-io-article-url=\"https:\/\/habr.com\/ru\/post\/489294\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/vm\/qm\/q-\/vmqmq-wzxwft5au4kpp3ddgy-u0.png\"><\/p>\n<p>  \u0414\u043e\u0431\u0440\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0441\u0443\u0442\u043e\u043a, \u0434\u0440\u0443\u0437\u044c\u044f!<\/p>\n<p>  \u041e\u0434\u043d\u0430\u0436\u0434\u044b \u0432\u0435\u0431 \u0441\u0435\u0440\u0444\u0438\u043d\u0433 \u043f\u0440\u0438\u0432\u0435\u043b \u043c\u0435\u043d\u044f \u043a <a href=\"https:\/\/codepen.io\/robdimarzo\/full\/LMOLer\" rel=\"nofollow\">\u044d\u0442\u043e\u043c\u0443 \u0437\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u043c\u0443 \u043a\u043e\u0434\u0443<\/a>.<\/p>\n<p>  \u00ab\u0417\u0430\u043c\u0435\u0447\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c\u00bb \u0435\u0433\u043e (\u0442\u043e \u0431\u0438\u0448\u044c \u043a\u043e\u0434\u0430) \u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0432 \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0432 CSS, \u0447\u0442\u043e \u0441\u0438\u043b\u044c\u043d\u043e \u043e\u0431\u043b\u0435\u0433\u0447\u0430\u0435\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 (\u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0430\u043a\u0436\u0435 \u043e\u0431\u0443\u0441\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u0442 \u043d\u0435\u043e\u0431\u044b\u0447\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 CSS). \u0418, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u0442\u0435\u043c\u0430 \u0438\u043c\u043f\u043e\u043d\u0438\u0440\u0443\u0435\u0442 \u0432\u0435\u0441\u044c\u043c\u0430 \u2014 \u043f\u043b\u0430\u043d\u0435\u0442\u044b \u0421\u043e\u043b\u043d\u0435\u0447\u043d\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/p>\n<p>  \u041e\u0440\u0438\u0433\u0438\u043d\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0435\u043a\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d \u043d\u0430 Pug \u0438 Sass, \u043c\u044b \u0436\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0435\u0433\u043e \u043d\u0430 HTML\/CSS.<\/p>\n<p>  \u0418\u0442\u0430\u043a, \u043f\u043e\u0435\u0445\u0430\u043b\u0438.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-299048","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/299048","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=299048"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/299048\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=299048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=299048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=299048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}