{"id":1377,"date":"2019-07-29T14:44:51","date_gmt":"2019-07-29T21:44:51","guid":{"rendered":"https:\/\/doubleecpu.com\/?page_id=1377"},"modified":"2019-09-13T11:07:06","modified_gmt":"2019-09-13T18:07:06","slug":"myflexpanelgallery","status":"publish","type":"page","link":"https:\/\/doubleecpu.com\/index.php\/raspian-linux-programs\/javascript-2\/myjs30\/myflexpanelgallery\/","title":{"rendered":"myFlexPanelGallery"},"content":{"rendered":"\n<style>\n    html {\n      box-sizing: border-box;\n      font-family:'helvetica neue';\n      font-weight: 400;\n    }\n    body {\n      margin: 0;\n    }\n    *, *:before, *:after {\n      box-sizing: inherit;\n    }\n\n    \n    .panels {\n      min-height:45vh;\n      overflow: hidden;\n      display: flex;\n    }\n    .panel {\n      background:#1b9ff7;\n      box-shadow:inset 0 0 0 5px rgba(255,255,255,0.3);\n      color:#1b9ff7;\n      text-align: center;\n      align-items:center;\n      \/* Safari transitionend event.propertyName === flex *\/\n      \/* Chrome + FF transitionend event.propertyName === flex-grow *\/\n      transition:\n        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),\n        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),\n        background 0.2s;\n      font-size: 1em;\n      background-size:cover;\n      background-position:center;\n      flex: 1;\n      justify-content: center;\n      display: flex;\n      flex-direction: column;\n    }\n\n\n    .panel1 { \n         background-image:url(https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/07\/RestifyCustomerAPIIndexjs.png); \n      }\n    .panel2 { background-image:url(https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/07\/Serial_Sender_Receiver.png); }\n    .panel3 { background-image:url(https:\/\/doubleecpu.com\/wp-content\/uploads\/2018\/10\/LP171WP4-Dimensions-1.png); }\n    .panel4 { background-image:url(https:\/\/doubleecpu.com\/wp-content\/uploads\/2019\/01\/20190103_152030.jpg); }\n    .panel5 { background-image:url(https:\/\/doubleecpu.com\/wp-content\/uploads\/2018\/08\/IMG-3bec7dc70448b8daa8214063e2ab751b-V.jpg); }\n\n    \/* Flex Items *\/\n    .panel > * {\n      margin:0;\n      width:100%;\n      transition:transform 0.5s;\n      flex: 1 0 auto;\n      display:flex;\n      justify-content:center;\n      align-items:center;\n    }\n    .panel > *:first-child { transform: translateY(-100%); }\n    .panel.open-active > *:first-child { transform: translateY(0); }\n    .panel > *:last-child { transform: translateY(100%); }\n    .panel.open-active > *:last-child { transform: translateY(0); }\n    .panel p {\n      text-transform: uppercase;\n      text-shadow:0 0 2px rgba(0, 0, 0, .5), 0 0 14px rgba(0, 0, 0, .5);\n      font-size: 1em;\n    }\n    .panel p:nth-child(2) {\n      font-size: 1em;\n    }\n    .panel.open {\n      flex: 2;\n      font-size: 1em;\n    }\n    .cta {\n      color:#1b9ff7;\n      text-decoration: none;\n    }\n  <\/style>\n\n\n  <div class=\"panels\">\n    <div class=\"panel panel1\">\n      <p>Let&#8217;s<\/p>\n      <p>Write<\/p>\n      <p>Code<\/p>\n    <\/div>\n    <div class=\"panel panel2\">\n      <p>Learn<\/p>\n      <p>Connect<\/p>\n      <p>Receive<\/p>\n    <\/div>\n    <div class=\"panel panel3\">\n      <p>Read<\/p>\n      <p>Design<\/p>\n      <p>Drawing<\/p>\n    <\/div>\n    <div class=\"panel panel4\">\n      <p>Together<\/p>\n      <p>Build<\/p>\n      <p>Assemble<\/p>\n    <\/div>\n    <div class=\"panel panel5\">\n      <p>Finish<\/p>\n      <p>Deploy<\/p>\n      <p>Use It<\/p>\n    <\/div>\n  <\/div>\n\n  <script>\n    const panels = document.querySelectorAll('.panel');\n    function toggleOpen() {\n      this.classList.toggle('open');\n      loseFocus();\n    }\n    function toggleActive(e) {\n      if (e.propertyName.includes('flex')) {\n        this.classList.toggle('open-active');\n      }\n    }\n    panels.forEach(panel => panel.addEventListener('click', toggleOpen));\n    panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));\n  <\/script>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s Write Code Learn Connect Receive Read Design Drawing Together Build Assemble Finish Deploy Use It<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":1022,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1377","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1377","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/comments?post=1377"}],"version-history":[{"count":0,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1377\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/pages\/1022"}],"wp:attachment":[{"href":"https:\/\/doubleecpu.com\/index.php\/wp-json\/wp\/v2\/media?parent=1377"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}