{"id":441,"date":"2023-03-08T15:48:56","date_gmt":"2023-03-08T12:48:56","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=441"},"modified":"2023-03-27T14:29:50","modified_gmt":"2023-03-27T11:29:50","slug":"header-2","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/headermenu\/441\/","title":{"rendered":"Header"},"content":{"rendered":"<figure class=\"wp-block-video\"><video height=\"345\" style=\"aspect-ratio: 1136 \/ 345;\" width=\"1136\" controls src=\"https:\/\/notes.profidev.online\/wp-content\/uploads\/2023\/03\/vokoscreenng-2023-03-08_13-47-41.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;nav class=&quot;nav&quot;&gt;\n  &lt;ul&gt;\n    &lt;li&gt;\u0414\u043e\u043c\u043e\u0439&lt;\/li&gt;\n    &lt;li&gt;About&lt;\/li&gt;\n    &lt;li&gt;Services&lt;\/li&gt;\n    &lt;li&gt;Whatever&lt;\/li&gt;\n    &lt;li&gt;Contact&lt;\/li&gt;\n    &lt;span class=&quot;hover-hack hov-1&quot;&gt;&lt;\/span&gt;\n    &lt;span class=&quot;hover-hack hov-2&quot;&gt;&lt;\/span&gt;\n    &lt;span class=&quot;hover-hack hov-3&quot;&gt;&lt;\/span&gt;\n    &lt;span class=&quot;hover-hack hov-4&quot;&gt;&lt;\/span&gt;\n    &lt;span class=&quot;hover-hack hov-5&quot;&gt;&lt;\/span&gt;\n    &lt;div class=&quot;magic&quot;&gt;\n      &lt;ul class=&quot;clone&quot;&gt;\n        &lt;li&gt;\u0414\u043e\u043c\u043e\u0439&lt;\/li&gt;\n        &lt;li&gt;About&lt;\/li&gt;\n        &lt;li&gt;Services&lt;\/li&gt;\n        &lt;li&gt;Whatever&lt;\/li&gt;\n        &lt;li&gt;Contact&lt;\/li&gt;\n      &lt;\/ul&gt;\n    &lt;\/div&gt;\n  &lt;\/ul&gt;\n&lt;\/nav&gt;\n&lt;link href=&#039;https:\/\/fonts.googleapis.com\/css?family=Open+Sans&#039; rel=&#039;stylesheet&#039; type=&#039;text\/css&#039;&gt;\n\/\/\u0410\u0432\u0442\u043e\u0440: Nikolay Talanov. @suez<\/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;}\">*, *:before, *:after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  -webkit-font-smoothing: antialiased;\n}\n\nhtml, body {\n  height: 100%;\n  font-size: 62.5%;\n  background: #64B5F6;\n  overflow: hidden;\n}\n@media (max-width: 600px) {\n  html, body {\n    font-size: 50%;\n  }\n}\n@media (max-width: 480px) {\n  html, body {\n    font-size: 40%;\n  }\n}\n\n.nav {\n  position: relative;\n  width: 55rem;\n  height: 5rem;\n  margin: 10rem auto 0;\n  padding: 0 1rem;\n  background: #25f1b0;\n  transform: skewX(-30deg);\n  text-align: center;\n  border-radius: 0.5rem;\n  box-shadow: 0.3rem 0.3rem 0.3rem rgba(0, 0, 0, 0.3);\n}\n\nul {\n  display: inline-block;\n  list-style-type: none;\n}\nul:after {\n  content: &quot;&quot;;\n  display: table;\n  clear: both;\n}\n\nli {\n  position: relative;\n  display: inline-block;\n  float: left;\n  height: 100%;\n  padding: 0 1rem;\n  font-family: 'Open Sans';\n  font-size: 2rem;\n  line-height: 5rem;\n  text-align: center;\n  text-transform: uppercase;\n  color: #fff;\n  transform: skewX(30deg);\n  cursor: pointer;\n  -webkit-font-smoothing: antialiased;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n}\n\n.hover-hack {\n  z-index: 3;\n  display: block;\n  position: absolute;\n  top: 0;\n  height: 100%;\n  cursor: pointer;\n  transform: skewX(30deg);\n}\n.hover-hack.hov-1 {\n  left: 2.1rem;\n  width: 8rem;\n}\n.hover-hack.hov-1:hover ~ .magic {\n  transform: translateX(0);\n  width: 8rem;\n}\n.hover-hack.hov-1:hover ~ .magic .clone {\n  transform: translateX(0);\n}\n.hover-hack.hov-2 {\n  left: 10.1rem;\n  width: 8.6rem;\n}\n.hover-hack.hov-2:hover ~ .magic {\n  transform: translateX(8rem);\n  width: 8.6rem;\n}\n.hover-hack.hov-2:hover ~ .magic .clone {\n  transform: translateX(-8rem);\n}\n.hover-hack.hov-3 {\n  left: 18.7rem;\n  width: 10.7rem;\n}\n.hover-hack.hov-3:hover ~ .magic {\n  transform: translateX(16.6rem);\n  width: 10.7rem;\n}\n.hover-hack.hov-3:hover ~ .magic .clone {\n  transform: translateX(-16.6rem);\n}\n.hover-hack.hov-4 {\n  left: 29.4rem;\n  width: 12.4rem;\n}\n.hover-hack.hov-4:hover ~ .magic {\n  transform: translateX(27.3rem);\n  width: 12.4rem;\n}\n.hover-hack.hov-4:hover ~ .magic .clone {\n  transform: translateX(-27.3rem);\n}\n.hover-hack.hov-5 {\n  left: 41.8rem;\n  width: 11rem;\n}\n.hover-hack.hov-5:hover ~ .magic {\n  transform: translateX(39.7rem);\n  width: 11rem;\n}\n.hover-hack.hov-5:hover ~ .magic .clone {\n  transform: translateX(-39.7rem);\n}\n\n.magic {\n  z-index: 1;\n  position: absolute;\n  top: -0.5rem;\n  left: 2.1rem;\n  width: 8rem;\n  height: 5.5rem;\n  overflow: hidden;\n  background: #f47321;\n  border-radius: 0.5rem;\n  transition: transform 0.5s cubic-bezier(0.77, 0.37, 0.71, 1.27), width 0.5s cubic-bezier(0.77, 0.37, 0.71, 1.27);\n  box-shadow: 0 0.5rem 0 #dc6519;\n}\n.magic .clone {\n  z-index: 2;\n  position: absolute;\n  top: 0.5rem;\n  left: 0;\n  width: 50.8rem;\n  height: 5rem;\n  transition: transform 0.5s cubic-bezier(0.77, 0.37, 0.71, 1.27);\n}\n.magic .clone li {\n  color: #000;\n  -webkit-font-smoothing: antialiased;\n  -webkit-backface-visibility: hidden;\n          backface-visibility: hidden;\n  transform: translate3d(0, 0, 0) skewX(30deg) perspective(1px);\n}<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":444,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[36,16],"class_list":["post-441","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-headermenu","tag-header","tag-htmlcss"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/441","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=441"}],"version-history":[{"count":0,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/441\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/444"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=441"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=441"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=441"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}