About - WordPress through a lens of color

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"><link rel="preload" href="https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-css9006c8f7f24d7d7e357655d5b4659d699684eb8e81a29c80212ff9fd03865.css" as="style" media="all" /> <link rel="preload" href="https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-cssd587ea2fc8244057ad751598661ea12b99bacce0f2e9b0bbfeef24f1f5e86.css" as="style" media="all" /> <link rel="preload" href="https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-cssc032468696a08e050a6815d6ec3702645063b6478d4e5f79e436099a27d25.css" as="style" media="all" /> <link rel="preload" href="https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-cssdc2ffb3abd4de982d93cc3dab58c92f256033b461410db4494a1b2a33fd1f.css" as="style" media="all" /> <link rel="preload" href="https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-css2e06375813ff1e8dc97c56ecf61e3ec11a2b2b06284088ad137056f0dd104.css" as="style" media="all" /><script data-cfasync="false">function fvmuag(){var e=navigator.userAgent;if(e.match(/x11.*ox\/54|id\s4.*us.*ome\/62|oobo|ight|tmet|eadl|ngdo|PTST/i))return!1;if(e.match(/x11.*me\/86\.0/i)){var r=screen.width;if("number"==typeof r&&1367==r)return!1}return!0}</script><meta name="viewport" content="width=device-width, initial-scale=1"><title>About - WordPress through a lens of color</title><meta name="description" content="Qode Kaleidoscope is a collection of WordPress themes with distinct chromatic identity, exploring the potential of contemporary WordPress development." /><meta property="og:url" content="https://qodeinteractive.com/kaleidoscope/about/"><meta property="og:site_name" content="Qode Kaleidoscope"><meta property="og:image" content=""><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://qodeinteractive.com/kaleidoscope/about/"><meta property="twitter:title" content="About"><meta property="twitter:description" content="Qode Kaleidoscope is a collection of WordPress themes with distinct chromatic identity, exploring the potential of contemporary WordPress development." /><meta property="twitter:image" content=""><meta name='robots' content='max-image-preview:large' /><link rel="alternate" type="application/rss+xml" title="Qode Kaleidoscope » Feed" href="https://qodeinteractive.com/kaleidoscope/feed/" /><link rel="alternate" type="application/rss+xml" title="Qode Kaleidoscope » Comments Feed" href="https://qodeinteractive.com/kaleidoscope/comments/feed/" /><link rel="canonical" href="https://qodeinteractive.com/kaleidoscope/about/" /> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-N6TG7SZ');</script> <link rel="icon" href="https://qodeinteractive.com/kaleidoscope/wp-content/themes/kaleidoscope/assets/dist/images/fav-icon.png"> <link rel='stylesheet' id='wp-block-library-css' href='https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-css9006c8f7f24d7d7e357655d5b4659d699684eb8e81a29c80212ff9fd03865.css' type='text/css' media='all' /> <link rel='stylesheet' id='wpb-google-fonts-css' href='https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-cssd587ea2fc8244057ad751598661ea12b99bacce0f2e9b0bbfeef24f1f5e86.css' type='text/css' media='all' /> <link rel='stylesheet' id='main-style-css' href='https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-cssc032468696a08e050a6815d6ec3702645063b6478d4e5f79e436099a27d25.css' type='text/css' media='all' /> <link rel='stylesheet' id='external-styles-css' href='https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-cssdc2ffb3abd4de982d93cc3dab58c92f256033b461410db4494a1b2a33fd1f.css' type='text/css' media='all' /> <link rel='stylesheet' id='bundle-styles-css' href='https://qodeinteractive.com/kaleidoscope/wp-content/cache/fvm/min/1637850359-css2e06375813ff1e8dc97c56ecf61e3ec11a2b2b06284088ad137056f0dd104.css' type='text/css' media='all' /> <script type='text/javascript' src='https://qodeinteractive.com/kaleidoscope/wp-includes/js/jquery/jquery.min.js?ver=3.6.0' id='jquery-core-js'></script> <script type='text/javascript' src='https://qodeinteractive.com/kaleidoscope/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script> </head> <body class="page-template-default page page-id-78" data-barba="wrapper"> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-N6TG7SZ" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <div class="preloader -fixed"> <h1 class="preloader__title fade" title="Wordpress through a lens of color"> WWoorrddpprreessss tthhrroouugghh aa lleennss ooff ccoolloorr </h1> <div class="preloader__pre -abs"> CChhoooossee yyoouurr eexxppeerriieennccee bbaasseedd oonn yyoouurr ddeevviiccee''ss ppeerrffoorrmmaanncceess FFuullll EExxppeerriieennccee RReedduucceedd EExxppeerriieennccee <svg id="first-hand" xmlns="http://www.w3.org/2000/svg" width="39.1135" height="46.991" viewBox="0 0 39.1135 46.991"> <path class="clck-5" d="M32.42,25.5826a2.5769,2.5769,0,0,0-1.8667.7957,2.4964,2.4964,0,0,0-2.3469-1.6622l-.1834,0a2.4817,2.4817,0,0,0-1.6373.612,2.5088,2.5088,0,0,0-2.4969-2.34l-.1567,0a2.4948,2.4948,0,0,0-1.645.6144l.0052-4.1618a2.4864,2.4864,0,0,0-2.4806-2.4867l-.2,0a2.4864,2.4864,0,0,0-2.4867,2.4805l-.0183,14.7445-1.9621-1.9669a2.5838,2.5838,0,1,0-3.6586,3.65L18.5063,43.1a9.0436,9.0436,0,0,0,16.482-5.1322L35,28.17A2.5867,2.5867,0,0,0,32.42,25.5826ZM34.127,37.9667A8.1824,8.1824,0,0,1,19.1938,42.58l-.0223-.0326L11.8953,35.253a1.7226,1.7226,0,0,1,2.439-2.4331l3.4305,3.4391.0209-16.8238a1.6242,1.6242,0,0,1,1.6244-1.62l.2,0a1.6242,1.6242,0,0,1,1.62,1.6244l-.0067,5.3869-.0008.6639-.0084,6.7431a.4306.4306,0,0,0,.8613.0011l.0084-6.7431a1.6461,1.6461,0,0,1,1.6463-1.6422l.1567,0A1.646,1.646,0,0,1,25.53,25.4956l-.0021,1.69v.019l-.0063,5.0338a.4306.4306,0,0,0,.8613.0011l.0063-5.0339a1.6327,1.6327,0,0,1,1.6329-1.6289l.1834,0A1.6327,1.6327,0,0,1,29.834,27.21l-.0006.4978-.0006.4551-.0051,4.0809a.4306.4306,0,1,0,.8613.0011l.0051-4.0809a1.7226,1.7226,0,0,1,3.4451.0043Z" transform="translate(0.0568 -0.009)" /> </svg> </div> <div class="preloader__1"> <div class="preloader__svg"> <svg class="fade" xmlns="http://www.w3.org/2000/svg" width="900" height="900" viewBox="0 0 900 900"> <path class="cls-1" d="M450,0C201.4719,0,0,201.4719,0,450S201.4719,900,450,900,900,698.5281,900,450,698.5281,0,450,0Zm0,627.2889A177.2889,177.2889,0,1,1,627.2889,450,177.2889,177.2889,0,0,1,450,627.2889Z" /> <path class="cls-2" d="M594.92,826.94v49.2157c3.0172-1.0337,5.8211-2.0141,8.6344-3.0344l-.0163-30.8842Z" /> <path class="cls-2" d="M574.2367,792.0588v90.5724c2.7759-.7812,8.2161-2.4406,8.8335-2.631V807.3559Z" /> <path class="cls-2" d="M551.6143,752.2V888.48c2.8009-.6463,5.6264-1.2682,8.6353-2.0837l.1982-118.8986Z" /> <path class="cls-2" d="M531.5773,719.6517l-.2154,173.0075c2.908-.5457,5.8508-1.0742,8.6514-1.6635l.1821-156.0469Z" /> <path class="cls-2" d="M510.4631,683.5494l-.2155,212.4524c2.8478-.3868,5.8121-.8064,8.6129-1.2374l.2206-195.9179Z" /> <path class="cls-2" d="M490.4261,648.9624l-.2154,249.2657c2.9384-.2766,5.5752-.5153,8.6206-.8484l.2129-233.12Z" /> <path class="cls-2" d="M469.3238,626.248l-.2274,273.3564c2.7984-.1342,5.6056-.2534,8.6181-.4439l.4309-274.0933C475.1294,625.5353,472.3882,625.9176,469.3238,626.248Z" /> <path class="cls-2" d="M451.7533,627.28,450,627.2889V900c2.8009,0,5.5961-.0314,8.6181-.0809V627.0831C456.2241,627.2334,454.3353,627.237,451.7533,627.28Z" /> <path class="cls-2" d="M627.2474,453.1179l20.1641-14.699L654.61,422.058l-27.4921,20.2264c.105,2.5043.1709,5.0187.1709,7.5489C627.2891,450.9314,627.2673,452.0245,627.2474,453.1179Z" /> <path class="cls-2" d="M661.8091,401.3343l7.4169-16.1427-44.7811,32.8668q.8687,4.8,1.4762,9.6879Z" /> <path class="cls-2" d="M680.7876,359.2325l7.1987-16.3609L618.3144,394.02q1.4583,4.4,2.6882,8.9009Z" /> <path class="cls-2" d="M695.6213,323.0206l7.1987-16.1427-92.2971,67.6279q1.903,4.0483,3.605,8.2061Z" /> <path class="cls-2" d="M712.2,284.409l7.4169-16.3608L600.18,355.5925q2.3344,3.7121,4.4874,7.5457Z" /> <path class="cls-2" d="M728.7793,247.1064l7.1987-16.1427L588.4375,339.0883q2.7268,3.4044,5.288,6.9428Z" /> <path class="cls-2" d="M580.1641,329.48l168.03-122.9489,7.1987-16.3608L573.9963,323.1373Q577.1578,326.232,580.1641,329.48Z" /> <path class="cls-2" d="M788.005,152.9179c-2.307-2.6081-3.9022-4.3614-5.93-6.61L559.3169,310.251q3.5524,2.786,6.9561,5.7479Z" /> </svg> </div> </div> <div class="preloader__2 fade"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="433px" height="188px" viewBox="0 0 433 188" style="enable-background:new 0 0 433 188;" xml:space="preserve"> <g class="preloader-eye-lids"> <path d="M0.1,94.1c9.8-8.2,37.6-30.2,73.5-51.4c36.7-21.2,81.7-42.5,142.1-42.5 c117.6,0,198.4,79.2,217.2,93.9l-218.8,0.8L0.1,94.1z" /> <path d="M0.1,94.1c9.8,8.2,37.6,30.2,73.5,51.4c36.7,21.2,81.7,42.5,142.1,42.5 c117.6,0,197.6-79.2,217.2-93.9l-218.8-1.6L0.1,94.1z" /> </g> <circle cx="216.5" cy="94" r="59" /> <circle cx="216.5" cy="94" r="12.1" /> </svg> </div> Click anywhere to explore the Kaleidoscope <svg xmlns="http://www.w3.org/2000/svg" width="39.1135" height="46.991" viewBox="0 0 39.1135 46.991"> <circle class="clck-1" cx="19.5568" cy="19.5485" r="7.5802" /> <circle class="clck-2" cx="19.5568" cy="19.5568" r="13.1768" /> <circle class="clck-3" cx="19.5568" cy="19.5568" r="19.0568" /> <g id="the-hand"> <path class="clck-4" d="M32.42,25.5826a2.5769,2.5769,0,0,0-1.8667.7957,2.4964,2.4964,0,0,0-2.3469-1.6622l-.1834,0a2.4817,2.4817,0,0,0-1.6373.612,2.5088,2.5088,0,0,0-2.4969-2.34l-.1567,0a2.4948,2.4948,0,0,0-1.645.6144l.0052-4.1618a2.4864,2.4864,0,0,0-2.4806-2.4867l-.2,0a2.4864,2.4864,0,0,0-2.4867,2.4805l-.0183,14.7445-1.9621-1.9669a2.5838,2.5838,0,1,0-3.6586,3.65L18.5063,43.1a9.0436,9.0436,0,0,0,16.482-5.1322L35,28.17A2.5867,2.5867,0,0,0,32.42,25.5826Z" transform="translate(0.0568 -0.009)" /> <path class="clck-5" d="M32.42,25.5826a2.5769,2.5769,0,0,0-1.8667.7957,2.4964,2.4964,0,0,0-2.3469-1.6622l-.1834,0a2.4817,2.4817,0,0,0-1.6373.612,2.5088,2.5088,0,0,0-2.4969-2.34l-.1567,0a2.4948,2.4948,0,0,0-1.645.6144l.0052-4.1618a2.4864,2.4864,0,0,0-2.4806-2.4867l-.2,0a2.4864,2.4864,0,0,0-2.4867,2.4805l-.0183,14.7445-1.9621-1.9669a2.5838,2.5838,0,1,0-3.6586,3.65L18.5063,43.1a9.0436,9.0436,0,0,0,16.482-5.1322L35,28.17A2.5867,2.5867,0,0,0,32.42,25.5826ZM34.127,37.9667A8.1824,8.1824,0,0,1,19.1938,42.58l-.0223-.0326L11.8953,35.253a1.7226,1.7226,0,0,1,2.439-2.4331l3.4305,3.4391.0209-16.8238a1.6242,1.6242,0,0,1,1.6244-1.62l.2,0a1.6242,1.6242,0,0,1,1.62,1.6244l-.0067,5.3869-.0008.6639-.0084,6.7431a.4306.4306,0,0,0,.8613.0011l.0084-6.7431a1.6461,1.6461,0,0,1,1.6463-1.6422l.1567,0A1.646,1.646,0,0,1,25.53,25.4956l-.0021,1.69v.019l-.0063,5.0338a.4306.4306,0,0,0,.8613.0011l.0063-5.0339a1.6327,1.6327,0,0,1,1.6329-1.6289l.1834,0A1.6327,1.6327,0,0,1,29.834,27.21l-.0006.4978-.0006.4551-.0051,4.0809a.4306.4306,0,1,0,.8613.0011l.0051-4.0809a1.7226,1.7226,0,0,1,3.4451.0043Z" transform="translate(0.0568 -0.009)" /> </g> </svg> <div id="skip"> <a class="btn -round -abs" href="" target=_self > SSkkiipp iinnttrroo </a> </div> </div> <div class="site-logo"> <a class="site-logo__link to-home" href="https://qodeinteractive.com/kaleidoscope" aria-label="To homepage"> <svg class="site-logo__svg -logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 63 67" style="enable-background:new 0 0 63 67;" xml:space="preserve"> <g class="site-logo__simbol"> <path d="M28.4,16.2c-8.6,0.6-15.5,7.6-16.1,16.2c-0.4,8.2,4.7,15.3,12.1,17.6c1.9,0.7,4,0.8,5.2,0.8 c2.9,0,5.2-2.4,5.2-5.2c0-2.9-2.4-5.2-5.2-5.2c0,0,0,0-0.1,0l0,0l0,0l0,0h-0.1c-1.1,0-2.3-0.3-3.2-0.8c-2.4-1.2-3.9-3.9-3.6-6.8 c0.3-3.1,2.9-5.7,6-6c4.1-0.5,7.6,2.8,7.6,6.8c0,2.6-1.4,4.9-3.6,6c2.2,1.1,3.7,3.5,3.7,6.1c0,1.6-0.5,3.2-1.6,4.4 c7-2.3,11.9-8.7,11.9-16.4C47,23.6,38.5,15.6,28.4,16.2z" /> </g> <g class="site-logo__label"> <g> <path d="M6.3,14.8c-0.1-0.1-0.1-0.3,0-0.4s0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.2,0.3-0.3c0.1-0.1,0.3-0.1,0.4-0.1 s0.3,0.1,0.4,0.2L7.7,14c0.1,0.1,0.2,0.2,0.3,0.3c0,0.1,0,0.2,0,0.4c0,0.1-0.1,0.3-0.2,0.4s-0.2,0.2-0.3,0.3 c-0.1,0.1-0.3,0.1-0.4,0.1s-0.3-0.1-0.4-0.2l-0.1-0.1C6.4,15.1,6.3,15,6.3,14.8z" /> </g> <g> <path d="M17.7,12.7l-2-0.1c-0.1,0.1-0.3,0.3-0.5,0.4c-0.5,0.3-1,0.5-1.5,0.5s-1.1-0.1-1.6-0.4c-0.5-0.3-1-0.7-1.4-1.3 l-0.2-0.3c-0.4-0.6-0.7-1.2-0.8-1.8s0-1.1,0.2-1.6s0.6-0.9,1-1.3c0.5-0.3,1-0.5,1.6-0.6c0.5,0,1.1,0.1,1.6,0.4s1,0.7,1.4,1.3 l0.2,0.3c0.4,0.6,0.6,1.1,0.7,1.6s0.1,1.1-0.1,1.5l1.6,0.1L17.7,12.7z M12.7,12c0.3,0.2,0.7,0.3,1,0.4c0.3,0,0.6-0.1,0.9-0.3 c0.5-0.3,0.7-0.7,0.7-1.3c0-0.5-0.2-1.1-0.7-1.8l-0.2-0.3C13.9,8,13.5,7.6,13,7.4c-0.5-0.2-1-0.1-1.4,0.2 c-0.3,0.2-0.5,0.5-0.6,0.8s-0.1,0.6,0,1s0.3,0.8,0.6,1.2l0.2,0.3C12.1,11.5,12.4,11.8,12.7,12z" /> </g> <g> <path d="M24.2,7.2c-0.1,0.6-0.3,1.1-0.7,1.5s-0.8,0.7-1.4,0.9S21,9.8,20.5,9.7c-0.5-0.1-1-0.4-1.4-0.9s-0.7-1-0.9-1.7 l-0.1-0.4c-0.2-0.7-0.3-1.3-0.2-1.9c0.1-0.6,0.3-1.1,0.7-1.5C19,2.9,19.4,2.6,20,2.4s1.1-0.2,1.6-0.1c0.5,0.1,1,0.4,1.4,0.9 c0.4,0.4,0.7,1,0.9,1.7L24,5.3C24.3,6,24.3,6.6,24.2,7.2z M21.7,3.7c-0.4-0.3-0.9-0.4-1.4-0.2C20,3.6,19.7,3.8,19.5,4 c-0.2,0.3-0.3,0.6-0.3,1s0,0.9,0.2,1.4l0.1,0.4c0.2,0.5,0.4,0.9,0.6,1.2c0.2,0.3,0.5,0.5,0.8,0.6s0.6,0.1,1,0c0.5-0.2,0.9-0.5,1-1 c0.2-0.5,0.1-1.1-0.1-1.9l-0.1-0.4C22.4,4.5,22.1,4,21.7,3.7z" /> </g> <g> <path d="M31,1.5c0.5,0.3,0.9,0.7,1.1,1.2c0.3,0.5,0.4,1.1,0.4,1.8v0.4c0,0.7-0.2,1.3-0.4,1.8 c-0.3,0.5-0.7,0.9-1.2,1.2c-0.5,0.3-1.1,0.4-1.8,0.4h-1.5H27L27.1,1h1.3h0.9C29.9,1.1,30.5,1.2,31,1.5z M31.2,4.6 c0-0.8-0.1-1.4-0.5-1.8c-0.3-0.4-0.8-0.6-1.5-0.6h-0.9l-0.1,5.2H29c0.7,0,1.2-0.2,1.5-0.6C30.9,6.4,31,5.8,31,5L31.2,4.6z" /> </g> <g> <path d="M39.3,9.1l-0.3,1L35.3,9l-0.9-0.3l2-7l1.2,0.4l3.3,1l-0.3,1l-3.3-1L36.8,5l2.9,0.8l-0.3,1L36.5,6l-0.6,2.1 L39.3,9.1z" /> </g> <g> <path d="M43.8,7c0.1-0.1,0.3-0.2,0.4-0.1c0.1,0.1,0.3,0,0.4,0.1s0.2,0.2,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4 c0,0.1,0,0.3-0.1,0.4l-0.2,0.1c-0.1,0.1-0.2,0.2-0.2,0.4c-0.1,0-0.2,0-0.4,0.1c-0.1,0-0.3,0-0.4-0.1s-0.2-0.2-0.4-0.2 c-0.1-0.1-0.2-0.3-0.2-0.4c0-0.1,0-0.3,0.1-0.4l0.1-0.1C43.5,7.1,43.6,7,43.8,7z" /> </g> <g> <path d="M49,12.6l-1.2,0l-1.5,1.6l-1-0.9L50.4,8l1,0.9L49,11.5l1.1-0.1l3.2-0.4l1.1,1.1l-4.1,0.5l-0.8,4.9l-1.1-1.1 L49,12.6z" /> </g> <g> <path d="M53.8,21.3l-1.4-2.5l-1.8,0.3L50,18l7.7-1.2l0.4,0.7l0.2,0.3l-4.9,6l-0.6-1.2L53.8,21.3z M54.5,20.5l2.1-2.3 l-3.1,0.6L54.5,20.5z" /> </g> <g> <path d="M55.8,29.5l-1,0.3l-0.9-3.5l-0.2-1l7.1-1.8l0.3,1.3L55,26.3L55.8,29.5z" /> </g> <g> <path d="M56,36.3l-1,0l0.1-3.9l0-0.9l7.4,0.1l0,1.3l0,3.5l-1,0l-0.1-3.6l-1.9,0l0,3l-1,0l0-3l-2.2,0L56,36.3z" /> </g> <g> <path d="M54.5,38.1l7.1,1.6L61.3,41l-7.1-1.6L54.5,38.1z" /> </g> <g> <path d="M58.2,48.1c-0.5,0.3-1,0.5-1.6,0.5c-0.6,0-1.2-0.1-1.8-0.4l-0.3-0.1c-0.7-0.3-1.2-0.7-1.4-1.1 c-0.4-0.4-0.6-1-0.6-1.6c0-0.6,0.1-1.1,0.4-1.8l0.7-1.3l0.2-0.5l6.6,3.1l-0.6,1.1l-0.4,0.8C59.1,47.3,58.7,47.8,58.2,48.1z M55.4,47c0.7,0.4,1.3,0.5,1.9,0.2c0.6-0.2,0.9-0.5,1.2-1.1l0.4-0.8l-4.7-2.2l-0.4,0.8c-0.3,0.6-0.3,1.2-0.1,1.6 c0.2,0.5,0.7,0.9,1.4,1.3L55.4,47z" /> </g> <g> <path d="M47.7,53.3c-0.2-0.6-0.3-1.1-0.2-1.6c0.1-0.5,0.3-1,0.7-1.5c0.4-0.5,0.9-0.8,1.4-0.9c0.5-0.1,1.1-0.1,1.6,0.1 c0.5,0.2,1.1,0.5,1.6,1l0.3,0.3c0.5,0.5,0.9,1,1.1,1.6c0.2,0.6,0.3,1.1,0.2,1.6c-0.1,0.5-0.3,1-0.7,1.5c-0.4,0.5-0.9,0.8-1.4,0.9 s-1.1,0.1-1.6-0.1c-0.5-0.2-1.1-0.5-1.6-1l-0.3-0.3C48.4,54.4,48,53.8,47.7,53.3z M51.7,55c0.5,0.1,1-0.1,1.3-0.6 c0.3-0.3,0.4-0.6,0.4-0.9c0-0.3,0-0.7-0.2-1c-0.2-0.4-0.4-0.7-0.8-1.1l-0.3-0.3c-0.4-0.3-0.7-0.6-1.2-0.8c-0.3-0.1-0.7-0.2-1-0.1 c-0.3,0.1-0.6,0.2-0.8,0.5c-0.3,0.4-0.5,0.9-0.3,1.4c0.1,0.5,0.5,1,1,1.6l0.3,0.3C50.6,54.7,51.1,54.9,51.7,55z" /> </g> <g> <path d="M46.4,57.4c0.5,0.1,1,0.3,1.3,0.9c0.2,0.4,0.2,0.7,0.2,1.1c0,0.4-0.2,0.7-0.4,1.1c-0.2,0.4-0.6,0.6-1,0.9 c-0.5,0.3-0.9,0.4-1.3,0.5c-0.4,0-0.8,0-1.2-0.2c-0.3-0.1-0.6-0.5-0.9-0.8l1.1-0.6c0.2,0.3,0.4,0.5,0.7,0.6c0.3,0,0.6,0,1.1-0.2 c0.4-0.2,0.6-0.4,0.7-0.7c0.1-0.2,0.1-0.5-0.1-0.8c-0.1-0.2-0.4-0.3-0.7-0.4c-0.3,0-0.7,0-1.3,0.1s-1.1,0.2-1.5,0.2 c-0.4,0-0.7-0.1-1.1-0.2c-0.3-0.1-0.6-0.4-0.8-0.8S41,57.2,41,56.9c0-0.4,0.2-0.7,0.4-1.1s0.6-0.6,1-0.9c0.5-0.3,0.8-0.4,1.3-0.5 s0.9-0.1,1.4,0.1c0.4,0.1,0.7,0.5,1,0.9L45,56.1c-0.2-0.4-0.5-0.6-0.8-0.7s-0.7,0-1.2,0.3c-0.4,0.2-0.6,0.4-0.7,0.7 c-0.2,0.2-0.1,0.5,0.1,0.8c0.1,0.2,0.3,0.3,0.4,0.3c0.1,0.1,0.3,0.1,0.6,0.1c0.2,0,0.6-0.1,1-0.2C45.2,57.3,45.9,57.3,46.4,57.4z" /> </g> <g> <path d="M33.8,59.3c0.1-0.4,0.4-0.8,0.7-1.1s0.8-0.6,1.4-0.7c0.6-0.1,1.1-0.1,1.6,0c0.5,0.2,0.9,0.4,1.3,0.9 c0.4,0.4,0.6,1,0.8,1.7l0.1,0.6c0.1,0.7,0.2,1.3,0.1,1.9c-0.1,0.5-0.3,1.1-0.7,1.5c-0.3,0.4-0.9,0.7-1.5,0.8s-1.1,0.2-1.5,0.1 c-0.4-0.1-0.8-0.4-1.1-0.6c-0.4-0.2-0.5-0.7-0.7-1.2l1.3-0.3c0.2,0.5,0.4,0.7,0.7,1c0.2,0.2,0.6,0.2,1.1,0.1 c0.6-0.1,0.9-0.5,1-0.9c0.1-0.4,0.2-1.1,0-1.8l-0.1-0.6c-0.2-0.8-0.4-1.2-0.8-1.6c-0.4-0.3-0.8-0.5-1.4-0.3 c-0.3,0.1-0.6,0.2-0.7,0.3c-0.2,0.1-0.3,0.4-0.4,0.6c-0.1,0.2-0.1,0.5,0,0.8l-1.3,0.3C33.7,60.2,33.7,59.7,33.8,59.3z" /> </g> <g> <path d="M25.9,59.8c0.3-0.6,0.6-0.9,1.1-1.1c0.5-0.3,1-0.4,1.6-0.3c0.6,0,1.2,0.2,1.5,0.5c0.5,0.3,0.8,0.8,1.1,1.3 c0.2,0.6,0.3,1.2,0.3,1.9l0,0.4c-0.1,0.7-0.1,1.4-0.4,1.9c-0.3,0.6-0.6,0.9-1.1,1.2c-0.5,0.3-1,0.4-1.6,0.3 c-0.6,0-1.2-0.2-1.5-0.5c-0.5-0.3-0.8-0.8-1-1.3c-0.2-0.6-0.3-1.2-0.3-1.9l0-0.4C25.4,60.9,25.6,60.3,25.9,59.8z M27,64 c0.3,0.5,0.7,0.7,1.3,0.7c0.3,0,0.7,0,1-0.3c0.3-0.2,0.5-0.4,0.7-0.8c0.2-0.2,0.3-0.7,0.3-1.3l0-0.4c0-0.5,0-1-0.2-1.4 c-0.1-0.4-0.3-0.6-0.6-0.9c-0.2-0.2-0.6-0.3-0.9-0.3c-0.5,0-1,0.2-1.3,0.6c-0.3,0.4-0.5,1-0.6,1.8l0,0.4C26.6,63,26.7,63.5,27,64z " /> </g> <g> <path d="M17.3,62.9c-0.3-0.4-0.5-0.7-0.6-1.1c-0.1-0.4-0.1-0.8,0.1-1.2c0.1-0.4,0.4-0.8,0.7-1.1 c0.4-0.3,0.7-0.4,1.1-0.4c0.4,0,0.9,0,1.5,0.2l1.4,0.5l0.9-2.5l1.2,0.5l-2.5,6.9l-2.6-0.9C18,63.5,17.6,63.3,17.3,62.9z M18.7,60.3c-0.3,0.2-0.5,0.4-0.6,0.7C18,61.3,18,61.5,18,61.7c0,0.2,0.1,0.4,0.2,0.6c0.1,0.2,0.4,0.3,0.7,0.4l1.4,0.5l0.9-2.4 l-1.4-0.5C19.3,60.2,18.9,60.2,18.7,60.3z" /> </g> <g> <path d="M12.5,53.1l0.7-0.8l3.1,2.3L17,55l-4.3,5.9l-1.1-0.7l-2.8-2l0.7-0.8l2.8,2l1.1-1.6L11,56l0.6-0.8l2.5,1.8 l1.3-1.8L12.5,53.1z" /> </g> <g> <path d="M7.3,52.7c-0.1,0-0.3,0-0.4,0c-0.1-0.1-0.2-0.2-0.4-0.2c0-0.2-0.1-0.3-0.1-0.5c0-0.2-0.1-0.3,0-0.4 s0.2-0.2,0.2-0.4l0.1-0.1c0.1-0.1,0.3-0.2,0.4-0.2c0.1,0,0.3,0,0.4,0c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0.1,0.2,0.3,0.2,0.4 s0,0.3,0,0.4c-0.1,0.1-0.2,0.2-0.2,0.4l-0.1,0.1C7.6,52.7,7.4,52.7,7.3,52.7z" /> </g> </g> </svg> <div id="tagline">Wordpress through a lens of color</div> </a> </div> <div class="site-nav"> <div class="site-nav__cover -fixed"></div> <div class="site-nav__opener"> MMeennuu <div class="site-nav__btns"> <svg class="svg -open" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 29 29" style="enable-background:new 0 0 29 29;" xml:space="preserve"> <style type="text/css" media="all">.opener-0{fill:#F6AD10}.opener-1{fill:#D7A5FF}.opener-2{fill:#DB3300}.opener-3{fill:#3AB594}.opener-4{fill:#5C71FF}</style> <g class="polygons"> <polygon class="opener-0" points="9.2,14.5 14.5,18.3 0,29 0,0 14.5,10.7 " /> <polygon class="opener-1" points="19.7,14.5 14.5,18.3 29,29 29,0 14.5,10.7 " /> <polygon class="opener-3" points="0,0 29,0 14.5,10.7 " /> <polygon class="opener-4" points="29,29 0,29 14.5,18.3 " /> <polygon class="opener-2" points="9.2,14.5 14.5,10.7 19.7,14.5 14.5,18.3 " /> </g> </svg> <svg class="svg -x" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 33 33" style="enable-background:new 0 0 33 33;" xml:space="preserve"> <style type="text/css" media="all">.x-0{fill:#D3A4FF}.x-1{stroke:#fff}</style> <g> <circle class="x-0" cx="16.5" cy="16.5" r="16.4" /> </g> <g> <line class="x-1" x1="11.1" y1="11.2" x2="21.8" y2="21.7" /> <line class="x-1" x1="11.1" y1="21.9" x2="21.8" y2="11.2" /> </g> </svg> </div> </div> <nav class="site-nav__menu"> <div class="site-nav__menu-inner"> <div class="site-nav__main"><ul id="menu-main-menu" class="menu"><li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-project menu-item-48"><a href="https://qodeinteractive.com/kaleidoscope/project/tahoe/">Tahoe</a></li> <li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-project menu-item-43"><a href="https://qodeinteractive.com/kaleidoscope/project/bolge/">Bolge</a></li> <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-project menu-item-46"><a href="https://qodeinteractive.com/kaleidoscope/project/aoki/">Aoki</a></li> <li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-project menu-item-45"><a href="https://qodeinteractive.com/kaleidoscope/project/flow/">Flow</a></li> <li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-project menu-item-44"><a href="https://qodeinteractive.com/kaleidoscope/project/agava/">Agava</a></li> <li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-project menu-item-47"><a href="https://qodeinteractive.com/kaleidoscope/project/humme/">Humme</a></li> </ul></div> <form action="https://qodeinteractive.us19.list-manage.com/subscribe/post?u=e3c6956a879abd324b209ec74&id=230b626979" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate q-newsletter" target="_blank" autocomplete="off" novalidate> <label for="mce-EMAIL"> Subscribe to Newsletter </label> <fieldset> <input type="email" placeholder="Type your email" value="" name="EMAIL" class="required email" id="mce-EMAIL"> <button value="Send" name="subscribe" id="mc-embedded-subscribe">Send</button> </fieldset> <div style="position: absolute; left: -5000px;" aria-hidden="true"> <input type="text" name="b_e3c6956a879abd324b209ec74_230b626979" tabindex="-1" value=""> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <div class="indicates-required"> Please enter a valid email. </div> </form> <div class="site-nav__circle"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 208 420" style="enable-background:new 0 0 208 420;" xml:space="preserve"> <g> <g> <path class="site-nav__line" d="M97.2,197.5l-14,10.3c0.1,1.7,0.1,3.3,0,5l10.7-7.8L97.2,197.5z" /> <path class="site-nav__line" d="M103.9,180.6l-21.8,16c0.2,1.5,0.5,3,0.6,4.5l17.8-13.1L103.9,180.6z" /> <path class="site-nav__line" d="M112.5,161.2l-33.1,24.3c0.4,1.4,0.8,2.7,1.2,4.1l28.6-20.9L112.5,161.2z" /> <path class="site-nav__line" d="M119.3,144.7l-43.4,31.8c0.6,1.3,1.1,2.5,1.6,3.8l38.5-28.2L119.3,144.7z" /> <path class="site-nav__line" d="M127,126.9l-55.8,40.9c0.7,1.1,1.4,2.3,2,3.5l50.4-36.9L127,126.9z" /> <path class="site-nav__line" d="M134.5,109.9l-68.5,50.2c0.8,1.1,1.6,2.1,2.4,3.2l62.8-46L134.5,109.9z" /> <path class="site-nav__line" d="M143.4,91.2l-83.9,61.5c0.9,1,1.9,1.9,2.7,3l77.9-57L143.4,91.2z" /> <path class="site-nav__line" d="M155.2,71.4L52.9,146.7c1.1,0.9,2.1,1.8,3.1,2.7l101.8-74.9C157,73.4,156.1,72.4,155.2,71.4z" /> </g> <g> <path class="site-nav__line" d="M67.3,385.2l0,22.9c1.4-0.5,2.7-1,4-1.5l0-14.3L67.3,385.2z" /> <path class="site-nav__line" d="M57.7,369.9l0,41.5c1.2-0.4,2.4-0.8,3.7-1.3c0.1,0,0.2-0.1,0.4-0.1l0-33L57.7,369.9z" /> <path class="site-nav__line" d="M47.2,351.4l0,63c1.3-0.3,2.7-0.7,4-1.1l0.1-54.8L47.2,351.4z" /> <path class="site-nav__line" d="M37.9,336.2l-0.1,80.3c1.3-0.3,2.7-0.5,4-0.8l0.1-72.4L37.9,336.2z" /> <path class="site-nav__line" d="M28.1,319.5L28,418.1c1.3-0.2,2.7-0.4,4-0.6l0.1-90.9L28.1,319.5z" /> <path class="site-nav__line" d="M18.8,303.4l-0.1,115.7c1.3-0.1,2.6-0.2,4-0.4l0.1-108.2L18.8,303.4z" /> <path class="site-nav__line" d="M9,293.1L8.9,419.8c1.3-0.1,2.6-0.1,4-0.2l0.2-127C11.7,292.8,10.4,292.9,9,293.1z" /> <path class="site-nav__line" d="M0.7,293.5H0L0,420c1.3,0,2.6,0,4-0.1l0-126.5C2.9,293.5,1.8,293.5,0.7,293.5z" /> </g> </g> </svg> </div> </div> <div class="site-nav__links"> <div class="btn-holder -visit-qode"> <a class="btn -round -abs" href="https://qodeinteractive.com/" target=_blank rel="noopener" > VViissiitt QQooddee </a> </div> <div class="btn-holder -about-qode"> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope/about" target=_self > AAbboouutt QQooddee </a> </div> </div> <div class="triangles"> <svg class="svg -triangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 21 24" style="enable-background:new 0 0 21 24;" xml:space="preserve"> <polygon points="20.8,12.3 0.2,23.8 0.2,0.2 " /> </svg> <svg class="svg -triangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 21 24" style="enable-background:new 0 0 21 24;" xml:space="preserve"> <polygon points="20.8,12.3 0.2,23.8 0.2,0.2 " /> </svg></div> </nav> </div> <div id="cursor"> <div class="cursor__default"> <svg class="cursor-svg sclera -outline" x="0px" y="0px" viewBox="0 0 53 23" style="enable-background:new 0 0 53 23;" xml:space="preserve"> <path xmlns="http://www.w3.org/2000/svg" class="stroke st0" d="M26.4,0.2c-7.3,0-12.7,2.6-17.2,5.1c-4.3,2.6-7.7,5.2-8.9,6.2c1.2,1,4.5,3.6,8.9,6.2c4.4,2.6,9.9,5.1,17.2,5.1 c14.2,0,23.9-9.6,26.2-11.3C50.4,9.7,40.6,0.2,26.4,0.2z" /> </svg> <svg class="cursor-svg sclera -main" x="0px" y="0px" viewBox="0 0 53 23" style="enable-background:new 0 0 53 23;" xml:space="preserve"> <path class="st1 fill" d="M0,11.5c1.2-1,4.6-3.7,9-6.3C13.5,2.6,19,0,26.4,0C40.8,0,50.7,9.7,53,11.5l-26.8,0.1L0,11.5z" /> <path class="st1 fill" d="M0,11.5c1.2,1,4.6,3.7,9,6.3c4.5,2.6,10,5.2,17.4,5.2c14.4,0,24.2-9.7,26.6-11.5l-26.8-0.2 L0,11.5z" /> </svg> <svg class="cursor-svg cornea -outline" x="0px" y="0px" viewBox="0 0 53 23" style="enable-background:new 0 0 53 23;" xml:space="preserve"> <circle class="st0 stroke" cx="26.5" cy="11.5" r="7.8" /> </svg> <svg class="cursor-svg cornea -main" x="0px" y="0px" viewBox="0 0 53 23" style="enable-background:new 0 0 53 23;" xml:space="preserve"> <circle class="st2 fill" cx="26.5" cy="11.5" r="7.8" /> </svg> <svg class="cursor-svg pupil -outline" x="0px" y="0px" viewBox="0 0 53 23" style="enable-background:new 0 0 53 23;" xml:space="preserve"> <circle class="st0 stroke" cx="26.5" cy="11.5" r="3.5" /> </svg> <svg class="cursor-svg pupil -main" x="0px" y="0px" viewBox="0 0 53 23" style="enable-background:new 0 0 53 23;" xml:space="preserve"> <circle cx="26.5" cy="11.5" r="3.5" /> </svg> </div> </div> <div id="counter"> LLeennss cchhaannggee iinn CChhaannggee iinn RReessuummee 7 6 5 4 3 2 1 0 <svg xmlns="http://www.w3.org/2000/svg" width="5.9965" height="8.9826" viewBox="0 0 5.9965 8.9826"> <defs> <style media="all">.cls-1{fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:.75px}</style> </defs> <polygon class="cls-1" points="0.375 0.75 0.375 8.234 5.371 4.495 0.375 0.75" /> </svg> </div> <canvas id="kaleidoscope"></canvas> <div class="slider -fixed -titles"> <div class="slide -abs" style="--color: #91d0f5; --mainColor: #a3dbfc" > <div class="slide__part -top" data-title=tahoe> <div class="slide__inner"> <h2 class="slide__title"> Tahoe </h2> </div> </div> <div class="slide__part -btm" data-title=tahoe> <div class="slide__inner"> <h2 class="slide__title"> Tahoe </h2> </div> </div> </div> <div class="slide -abs" style="--color: #e5a3a3; --mainColor: #edc2c2" > <div class="slide__part -top" data-title=bolge> <div class="slide__inner"> <h2 class="slide__title"> Bolge </h2> </div> </div> <div class="slide__part -btm" data-title=bolge> <div class="slide__inner"> <h2 class="slide__title"> Bolge </h2> </div> </div> </div> <div class="slide -abs" style="--color: #e2cf24; --mainColor: #eedf57" > <div class="slide__part -top" data-title=aoki> <div class="slide__inner"> <h2 class="slide__title"> Aoki </h2> </div> </div> <div class="slide__part -btm" data-title=aoki> <div class="slide__inner"> <h2 class="slide__title"> Aoki </h2> </div> </div> </div> <div class="slide -abs" style="--color: #9ed7d2; --mainColor: #b3eadc" > <div class="slide__part -top" data-title=flow> <div class="slide__inner"> <h2 class="slide__title"> Flow </h2> </div> </div> <div class="slide__part -btm" data-title=flow> <div class="slide__inner"> <h2 class="slide__title"> Flow </h2> </div> </div> </div> <div class="slide -abs" style="--color: #b2d98c; --mainColor: #cde4a8" > <div class="slide__part -top" data-title=agava> <div class="slide__inner"> <h2 class="slide__title"> Agava </h2> </div> </div> <div class="slide__part -btm" data-title=agava> <div class="slide__inner"> <h2 class="slide__title"> Agava </h2> </div> </div> </div> <div class="slide -abs" style="--color: #c3d0dd; --mainColor: #d0dae3" > <div class="slide__part -top" data-title=humme> <div class="slide__inner"> <h2 class="slide__title"> Humme </h2> </div> </div> <div class="slide__part -btm" data-title=humme> <div class="slide__inner"> <h2 class="slide__title"> Humme </h2> </div> </div> </div> </div> <div class="slider -fixed -circles"> <div class="circle -abs" style="--color: #91d0f5; --mainColor: #a3dbfc" > </div> <div class="circle -abs" style="--color: #e5a3a3; --mainColor: #edc2c2" > </div> <div class="circle -abs" style="--color: #e2cf24; --mainColor: #eedf57" > </div> <div class="circle -abs" style="--color: #9ed7d2; --mainColor: #b3eadc" > </div> <div class="circle -abs" style="--color: #b2d98c; --mainColor: #cde4a8" > </div> <div class="circle -abs" style="--color: #c3d0dd; --mainColor: #d0dae3" > </div> </div> <div class="slider -fixed -backgrounds"> <div class="background -abs" style="--bgColor: #b6e4fe"> <div class="background-color"></div> </div> <div class="background -abs" style="--bgColor: #f3d3d3"> <div class="background-color"></div> </div> <div class="background -abs" style="--bgColor: #f6ec78"> <div class="background-color"></div> </div> <div class="background -abs" style="--bgColor: #cdf3ea"> <div class="background-color"></div> </div> <div class="background -abs" style="--bgColor: #dbefbc"> <div class="background-color"></div> </div> <div class="background -abs" style="--bgColor: #dbe2e8"> <div class="background-color"></div> </div></div> <div class="slider -view-more"> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope/project/tahoe/" target=_self > VViieeww mmoorree </a> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope/project/bolge/" target=_self > VViieeww mmoorree </a> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope/project/aoki/" target=_self > VViieeww mmoorree </a> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope/project/flow/" target=_self > VViieeww mmoorree </a> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope/project/agava/" target=_self > VViieeww mmoorree </a> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope/project/humme/" target=_self > VViieeww mmoorree </a></div> <div id="rotor"> <div class="slider -kaleidoscope-nav"> <div class="bullet-texts -abs"> Tahoe Bolge Aoki Flow Agava Humme </div> <div class="bullet-svgs -abs"> <svg class="bullet-svg" data-title="Tahoe" data-index="0" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <path class="st0" d="M400.4,799.6c147.8-0.2,277-80.5,346.1-199.9" /> </svg> <svg class="bullet-svg" data-title="Bolge" data-index="1" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <path class="st0" d="M400.4,799.6c147.8-0.2,277-80.5,346.1-199.9" /> </svg> <svg class="bullet-svg" data-title="Aoki" data-index="2" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <path class="st0" d="M400.4,799.6c147.8-0.2,277-80.5,346.1-199.9" /> </svg> <svg class="bullet-svg" data-title="Flow" data-index="3" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <path class="st0" d="M400.4,799.6c147.8-0.2,277-80.5,346.1-199.9" /> </svg> <svg class="bullet-svg" data-title="Agava" data-index="4" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <path class="st0" d="M400.4,799.6c147.8-0.2,277-80.5,346.1-199.9" /> </svg> <svg class="bullet-svg" data-title="Humme" data-index="5" x="0px" y="0px" width="800px" height="800px" viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve"> <path class="st0" d="M400.4,799.6c147.8-0.2,277-80.5,346.1-199.9" /> </svg> </div> <div class="bullets -abs"> </div> </div> </div> <div class="slider -details"> <div class="details"> <div class="details__text"> <h3 class="details__title -item">Tahoe</h3> Colors of the Californian Summer <div class="details__info -item"> Light Sky Blue / Maya Blue / Orange Peel </div> <div class="details__count"> Slides: 12345 / 5 </div> </div> </div> <div class="details"> <div class="details__text"> <h3 class="details__title -item">Bolge</h3> The Tranquility of Sundown in Digital Form <div class="details__info -item"> Torea Bay Blue / Sundown Pink </div> <div class="details__count"> Slides: 12345 / 5 </div> </div> </div> <div class="details"> <div class="details__text"> <h3 class="details__title -item">Aoki</h3> Urban Culture Brimming with Color <div class="details__info -item"> Ruby Pink / School Bus Yellow </div> <div class="details__count"> Slides: 12345 / 5 </div> </div> </div> <div class="details"> <div class="details__text"> <h3 class="details__title -item">Flow</h3> A Playful Pastel-flavored Mood <div class="details__info -item"> Mint Green / Amber Yellow / Crimson Red </div> <div class="details__count"> Slides: 12345 / 5 </div> </div> </div> <div class="details"> <div class="details__text"> <h3 class="details__title -item">Agava</h3> A Sunlit Tropical Palette <div class="details__info -item"> Tea Green / Light Goldenrod Yellow </div> <div class="details__count"> Slides: 12345 / 5 </div> </div> </div> <div class="details"> <div class="details__text"> <h3 class="details__title -item">Humme</h3> The Interplay of Chroma & Saturation <div class="details__info -item"> Melon Pink / Midnight Blue </div> <div class="details__count"> Slides: 12345 / 5 </div> </div> </div></div> <div id="site-bg"></div> <a id="main-link" href="#" aria-label="link to single"></a> <main id="about" data-barba="container" data-barba-namespace="page" data-skin="red"> <div class="page-sizer"> <div class="content"> <div class="about__eye"> <svg class="svg -eye" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 990 990" style="enable-background:new 0 0 990 990;" xml:space="preserve"> <style type="text/css" media="all">.a-st0{fill:#e9d5fb}.a-st1{fill:#FFF}.a-st2{fill:#F2B100}.a-st3{fill:#D0A2FC}.a-st4{fill:#4EB68E}.a-st5{fill:#CF2D00}</style> <g class="eye-sclera"> <circle class="a-st0" cx="494.5" cy="495" r="486.1" /> </g> <g class="eye-lids"> <path class="a-st1" d="M139,495.5c16.2-14.1,63.3-49.9,123-85c61.1-35.9,135.8-71,237-71c195.5,0,330.2,131.5,361.9,156L496,496.3 L139,495.5z" /> <path class="a-st1" d="M139,495.5c16.2,14.1,63.3,49.9,123,85c61.1,35.9,135.8,71,237,71c195.5,0,330.2-131.5,361.9-156l-364.9-3 L139,495.5z" /> </g> <g class="eye-logo"> <path class="a-st2" d="M460.1,442.5c-15.3,10.8-25.7,28.3-27.1,48.1c-0.8,16.3,4.3,31.3,13.4,43.1l31.1-21.9 c-4.7-5.1-7.3-12.2-6.5-19.7c1.1-11.3,10.6-21.1,22.2-22.2c0.9-0.1,1.9-0.2,2.8-0.2L460.1,442.5z" /> <path class="a-st3" d="M517.5,481.8c0.9,1.5,1.7,3.2,2.3,4.9l36.8,27.1c1.7-5.8,2.6-11.9,2.6-18.2c0.4-13.6-3.5-26.1-10.3-36.4 L517.5,481.8z" /> <path class="a-st4" d="M492.1,431c-11.9,0.8-22.8,5-32,11.5l36,27.1c9.1-0.1,17.1,4.8,21.5,12.1l31.3-22.7 C536.8,441,515.6,429.6,492.1,431z" /> <path class="a-st5" d="M519.8,486.6c0.9,2.5,1.3,5.3,1.3,8.1c0,9.4-5.3,18.1-13.2,22.2c7.9,4.1,13.6,12.8,13.6,22.6 c0,6-1.9,11.7-6,16.2c19.9-6.4,35.2-22.1,41.1-42.1L519.8,486.6z" /> <path class="a-st5" d="M496.6,520c0,0,0,0-0.4,0h-0.4c-4.1,0-8.3-1.1-11.7-3c-2.5-1.3-4.8-3.1-6.7-5.2l-31.1,21.9 c7.8,10.1,18.5,17.7,31,21.7c7.2,2.6,14.7,3,19.2,3c10.6,0,19.2-8.7,19.2-19.2S507.2,520,496.6,520z" /> </g> </svg> </div> <div class="col"> <h1>WordPress through a lens of color</h1> Qode Kaleidoscope is a collection of WordPress themes with distinct color-driven visual identities. Here at Qode Interactive, creations often incorporate various forms of experimentation related to color, and this has been one of the staples of our work. The Kaleidoscope is a direct reflection of this – the focal point of this presentation is the untapped potential of contemporary WordPress development and design, observed through a color-intense prism. The Kaleidoscope highlights this potential through an innovative showcase of original Qode Interactive themes with an aesthetic marked primarily by vivid, often pastel color palettes. United within Kaleidoscope鈥檚 vibrant, kinetic environment, these themes are elevated and form a unique showcase which displays the scope of possibilities that WordPress is capable of as a medium. Qode Interactive is a team of more than 100 dedicated professionals whose aim is to set new standards in WordPress theme and template business. Spearheaded by its team of over 30 UI and UX experts, graphic designers, visual artists and illustrators, Qode delivers only the most beautiful products which all carry their authentic vibe. Check out Qode Interactive鈥檚 extensive back catalog consisting of over <a href="https://qodeinteractive.com/" target="_blank" rel="noopener noreferrer">360 original projects</a>. The name “kaleidoscope” is derived from the Ancient Greek words kalos, which means “beautiful, beauty”, eidos, “that which is seen: form, shape”, and skope艒, “to look to, to examine”; in a nutshell, the term kaleidoscope signifies “the observation of beautiful forms.” </div> <div class="about__palette"> <div class="about__palette-inner"> <svg class="svg -palette" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 490 570" style="enable-background:new 0 0 490 570;" xml:space="preserve"> <style type="text/css" media="all">.st0{fill:#F6AD10}.st1{fill:#DB3300}.st2{fill:#D7A5FF}.st3{fill:#5C71FF}</style> <polygon class="p1" points="126.5,220.1 244.8,285.8 363.2,220.1 244.8,3.3 " /> <polygon class="p2" points="244.8,433.4 244.8,285.8 363.2,220.1 479.5,433.4 " /> <polygon class="p1 -btm" points="244.8,567.3 479.5,433.4 10.1,433.4 " /> <polygon class="p3" points="244.8,433.4 244.8,285.8 126.5,220.1 10.1,433.4 " /> <polygon class="p0" points="244.8,3.3 10.1,433.4 10.1,139.5 " /> <polygon class="p0" points="244.8,3.3 479.5,433.4 479.7,140.3 " /> </svg> </div> </div> </div> </div> <div class="social"> <h3>Connect</h3> <a href="https://dribbble.com/qodeinteractive" target="_blank" rel="noopener noreferrer">DDrriibbbbbbllee </a> <a href="https://www.behance.net/qodeinteractive" target="_blank" rel="noopener noreferrer">BBeehhaannccee </a> <a href="https://www.instagram.com/qodeinteractive/" target="_blank" rel="noopener noreferrer">IInnssttaaggrraamm </a> <a href="/cdn-cgi/l/email-protection#91fef7f7f8f2f4d1e0fef5f4f8ffe5f4e3f0f2e5f8e7f4bff2fefc" target="_blank" rel="noopener noreferrer">ooffffiiccee@@qqooddeeiinntteerraaccttiivvee..ccoomm </a> </div> <div class="about__links"> <div class="btn-holder -visit-qode"> <a class="btn -round -abs" href="https://qodeinteractive.com/" target=_blank rel="noopener" > VViissiitt QQooddee </a> </div> <div class="btn-holder -home"> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope" target=_self > GGoo HHoommee </a> </div> </div> <div class="triangles"> <svg class="svg -triangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 21 24" style="enable-background:new 0 0 21 24;" xml:space="preserve"> <polygon points="20.8,12.3 0.2,23.8 0.2,0.2 " /> </svg> <svg class="svg -triangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 21 24" style="enable-background:new 0 0 21 24;" xml:space="preserve"> <polygon points="20.8,12.3 0.2,23.8 0.2,0.2 " /> </svg></div></main> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script type='text/javascript' src='https://qodeinteractive.com/kaleidoscope/wp-content/themes/kaleidoscope/assets/dist/js/external.js?ver=1.0.0' id='external-js-js'></script> <script type='text/javascript' id='bundle-js-js-extra'> /* <![CDATA[ */ var globalVars = {"siteUrl":"https:\/\/qodeinteractive.com\/kaleidoscope","adminAjax":"https:\/\/qodeinteractive.com\/kaleidoscope\/wp-admin\/admin-ajax.php","templateUrl":"https:\/\/qodeinteractive.com\/kaleidoscope\/wp-content\/themes\/kaleidoscope","projectsEndpoint":"https:\/\/qodeinteractive.com\/kaleidoscope\/wp-json\/projects_endpoint\/v1\/project"}; /* ]]> */ </script> <script type='text/javascript' src='https://qodeinteractive.com/kaleidoscope/wp-content/themes/kaleidoscope/assets/dist/js/bundle.js?ver=1.0.0' id='bundle-js-js'></script> <script type='text/javascript' src='https://qodeinteractive.com/kaleidoscope/wp-includes/js/wp-embed.min.js?ver=5.8.10' id='wp-embed-js'></script> </body> </html>

CINXE.COM

About - WordPress through a lens of color