{"id":1454,"date":"2023-05-18T17:52:11","date_gmt":"2023-05-18T14:52:11","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1454"},"modified":"2023-05-18T17:52:14","modified_gmt":"2023-05-18T14:52:14","slug":"expanding-cards","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/cards\/1454\/","title":{"rendered":"Expanding Cards"},"content":{"rendered":"<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Expanding Cards\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Jv5oDsCAUH8?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;div class=&quot;container&quot;&gt;\n    &lt;div class=&quot;panel active&quot; style=&quot;background-image: url(&#039;https:\/\/images.unsplash.com\/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&#039;)&quot;&gt;\n      &lt;h3&gt;Explore the World&lt;\/h3&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;panel&quot; style=&quot;background-image: url(&#039;https:\/\/images.unsplash.com\/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&#039;)&quot;&gt;\n      &lt;h3&gt;Wild Forest&lt;\/h3&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;panel&quot; style=&quot;background-image: url(&#039;https:\/\/images.unsplash.com\/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1353&amp;q=80&#039;)&quot;&gt;\n      &lt;h3&gt;Sunny Beach&lt;\/h3&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;panel&quot; style=&quot;background-image: url(&#039;https:\/\/images.unsplash.com\/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1351&amp;q=80&#039;)&quot;&gt;\n      &lt;h3&gt;City on Winter&lt;\/h3&gt;\n    &lt;\/div&gt;\n    &lt;div class=&quot;panel&quot; style=&quot;background-image: url(&#039;https:\/\/images.unsplash.com\/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&#039;)&quot;&gt;\n      &lt;h3&gt;Mountains - Clouds&lt;\/h3&gt;\n    &lt;\/div&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;}\">@import url('https:\/\/fonts.googleapis.com\/css?family=Muli&amp;display=swap');\n\n* {\n\tbox-sizing: border-box;\n}\n\nbody {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-family: 'Muli', sans-serif;\n\theight: 100vh;\n\tmargin: 0;\n  background-color: #0b3590b9;\n}\n\n.container {\n\tdisplay: flex;\n\twidth: 90vw;\n}\n\n.panel {\n\tbackground-size: auto 100%;\n\tbackground-position: center;\n\tbackground-repeat: no-repeat;\n\tborder-radius: 50px;\n\tcolor: #fff;\n\tflex: 0.5;\n\tcursor: pointer;\n\theight: 80vh;\n\tposition: relative;\n\tmargin: 10px;\n\ttransition: flex 0.7s cubic-bezier(0.05, 0.6, 0.4, 0.9);\n}\n\n.panel h3 {\n\tfont-size: 24px;\n\topacity: 0;\n\tposition: absolute;\n\tbottom: 20px;\n\tleft: 20px;\n\tmargin: 0;\n\ttransition: opacity 0s ease-in 0s;\n}\n\n.panel.active {\n\tflex: 5;\n}\n\n.panel.active h3 {\n\topacity: 1;\n\ttransition: opacity 0.3s ease-in 0.4s;\n}\n\n\n@media screen and (max-width: 480px) {\n\t.container {\n\t\twidth: 100vw;\n\t}\n\t\n\t.panel:nth-of-type(4) {\n\t\tdisplay: none;\n\t}\n\t\n\t.panel:nth-of-type(5) {\n\t\tdisplay: none;\n\t}\n}\n\n\/* SOCIAL PANEL CSS *\/\n.social-panel-container {\n\tposition: fixed;\n\tright: 0;\n\tbottom: 80px;\n\ttransform: translateX(100%);\n\ttransition: transform 0.4s ease-in-out;\n}\n\n.social-panel-container.visible {\n\ttransform: translateX(-10px);\n}\n\n.social-panel {\t\n\tbackground-color: #fff;\n\tborder-radius: 16px;\n\tbox-shadow: 0 16px 31px -17px rgba(0,31,97,0.6);\n\tborder: 5px solid #001F61;\n\tdisplay: flex;\n\tflex-direction: column;\n\tjustify-content: center;\n\talign-items: center;\n\tfont-family: 'Muli';\n\tposition: relative;\n\theight: 169px;\t\n\twidth: 370px;\n\tmax-width: calc(100% - 10px);\n}\n\n.social-panel button.close-btn {\n\tborder: 0;\n\tcolor: #97A5CE;\n\tcursor: pointer;\n\tfont-size: 20px;\n\tposition: absolute;\n\ttop: 5px;\n\tright: 5px;\n}\n\n.social-panel button.close-btn:focus {\n\toutline: none;\n}\n\n.social-panel p {\n\tbackground-color: #001F61;\n\tborder-radius: 0 0 10px 10px;\n\tcolor: #fff;\n\tfont-size: 14px;\n\tline-height: 18px;\n\tpadding: 2px 17px 6px;\n\tposition: absolute;\n\ttop: 0;\n\tleft: 50%;\n\tmargin: 0;\n\ttransform: translateX(-50%);\n\ttext-align: center;\n\twidth: 235px;\n}\n\n.social-panel p i {\n\tmargin: 0 5px;\n}\n\n.social-panel p a {\n\tcolor: #FF7500;\n\ttext-decoration: none;\n}\n\n.social-panel h4 {\n\tmargin: 20px 0;\n\tcolor: #97A5CE;\t\n\tfont-family: 'Muli';\t\n\tfont-size: 14px;\t\n\tline-height: 18px;\n\ttext-transform: uppercase;\n}\n\n.social-panel ul {\n\tdisplay: flex;\n\tlist-style-type: none;\n\tpadding: 0;\n\tmargin: 0;\n}\n\n.social-panel ul li {\n\tmargin: 0 10px;\n}\n\n.social-panel ul li a {\n\tborder: 1px solid #DCE1F2;\n\tborder-radius: 50%;\n\tcolor: #001F61;\n\tfont-size: 20px;\n\tdisplay: flex;\n\tjustify-content: center;\n\talign-items: center;\n\theight: 50px;\n\twidth: 50px;\n\ttext-decoration: none;\n}\n\n.social-panel ul li a:hover {\n\tborder-color: #FF6A00;\n\tbox-shadow: 0 9px 12px -9px #FF6A00;\n}\n\n.floating-btn {\n\tborder-radius: 26.5px;\n\tbackground-color: #001F61;\n\tborder: 1px solid #001F61;\n\tbox-shadow: 0 16px 22px -17px #03153B;\n\tcolor: #fff;\n\tcursor: pointer;\n\tfont-size: 16px;\n\tline-height: 20px;\n\tpadding: 12px 20px;\n\tposition: fixed;\n\tbottom: 20px;\n\tright: 20px;\n\tz-index: 999;\n}\n\n.floating-btn:hover {\n\tbackground-color: #ffffff;\n\tcolor: #001F61;\n}\n\n.floating-btn:focus {\n\toutline: none;\n}\n\n.floating-text {\n\tbackground-color: #001F61;\n\tborder-radius: 10px 10px 0 0;\n\tcolor: #fff;\n\tfont-family: 'Muli';\n\tpadding: 7px 15px;\n\tposition: fixed;\n\tbottom: 0;\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\ttext-align: center;\n\tz-index: 998;\n}\n\n.floating-text a {\n\tcolor: #FF7500;\n\ttext-decoration: none;\n}\n\n@media screen and (max-width: 480px) {\n\n\t.social-panel-container.visible {\n\t\ttransform: translateX(0px);\n\t}\n\t\n\t.floating-btn {\n\t\tright: 10px;\n\t}\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 panels = document.querySelectorAll('.panel');\n\npanels.forEach(panel =&gt; {\n\tpanel.addEventListener('click', () =&gt; {\n\t\tremoveActiveClasses();\n\t\tpanel.classList.add('active');\n\t});\n});\n\nfunction removeActiveClasses() {\n\tpanels.forEach(panel =&gt; {\n\t\tpanel.classList.remove('active');\n\t});\n}\n\n\/\/ SOCIAL PANEL JS\nconst floating_btn = document.querySelector('.floating-btn');\nconst close_btn = document.querySelector('.close-btn');\nconst social_panel_container = document.querySelector('.social-panel-container');\n\nfloating_btn.addEventListener('click', () =&gt; {\n\tsocial_panel_container.classList.toggle('visible')\n});\n\nclose_btn.addEventListener('click', () =&gt; {\n\tsocial_panel_container.classList.remove('visible')\n});<\/pre><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1455,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[42],"tags":[],"class_list":["post-1454","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cards"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1454","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=1454"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1454\/revisions"}],"predecessor-version":[{"id":1456,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1454\/revisions\/1456"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1455"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1454"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1454"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1454"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}