Qode Kaleidoscope - 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>Qode Kaleidoscope - 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/"><meta property="og:site_name" content="Qode Kaleidoscope"><meta property="og:image" content="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/Tahoe.jpg"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://qodeinteractive.com/kaleidoscope/"><meta property="twitter:title" content="Qode Kaleidoscope"><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="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/Tahoe.jpg"><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/" /> <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="home page-template-default page page-id-10" 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="home" data-barba="container" data-barba-namespace="page"> <div id="copy"> <div class="inner"> <a href="https://qodeinteractive.com" target="_blank" rel="noopener">© 2020 Qode Interactive</a> </div> </div> <div id="gestures"> <div class="g-drag"> <svg width="36.6289" height="42.5859" viewBox="0 0 36.6289 42.5859"> <defs> <style media="all">.gst-part{fill:#010101}</style> </defs> <path class="gst-part" d="M24.6236,16.8114a2.1444,2.1444,0,0,0-2.603,1.0966c-.4609,1.0753-1.5026,5.19-1.5026,5.19-.0435-.1171,1.2057-7.473,1.0928-8.79a2.5591,2.5591,0,0,0-2.687-2.0218l-.1886.0026a2.2756,2.2756,0,0,0-2.131,1.8863c-.1543,1.315-.6978,6.2914-.6978,6.2914s.1454-2.2227.1108-7.8532a2.3015,2.3015,0,0,0-2.448-1.9486l-.1612.0022c-1.0682-.0048-2.5192.7981-2.5488,2.083-.1181,5.1374-.0148,9.0384-.0148,9.0384s-.6725-4.8967-.951-6.5928c-.2231-1.84-1.0871-2.49-2.5907-2.5194l-.2062.0029A2.5582,2.5582,0,0,0,4.5772,15.27L6.5608,29.64,4.5117,27.6477A2.6583,2.6583,0,1,0,.805,31.4591l7.5412,7.334a9.31,9.31,0,0,0,7.7016,3.896c5.13-.0715,8.27-4.3031,8.199-9.433l.2307-4.7716s1.9026-7.8862,2.1636-9.05A2.178,2.178,0,0,0,24.6236,16.8114ZM23.3607,33.2685c.0647,4.6413-2.684,8.47-7.3253,8.5346a8.4243,8.4243,0,0,1-6.99-3.5559l-.0235-.0332-7.599-7.39a1.7723,1.7723,0,0,1,2.4711-2.5411l3.76,3.6959L5.4633,15.2574A1.671,1.671,0,0,1,7.109,13.5651l.2062-.0029c.92-.0128,1.5195.5531,1.6923,1.6457L10.963,27.5721a.4431.4431,0,1,0,.886-.0123s-.4783-10.165-.1185-14.3224a1.5223,1.5223,0,0,1,1.69-1.5957l.1612-.0022c1.1951.0325,1.5551.6583,1.5813,1.836L15.1273,26.89a.4431.4431,0,1,0,.886-.0123L17.3127,14.64a1.54,1.54,0,0,1,1.8007-1.468c1.1461.0835,1.7994.8656,1.7011,1.6544l-1.05,8.4237-.4732,4.11a.443.443,0,0,0,.4492.4368c.2447-.0034.3746-.1637.4368-.4492l2.0977-7.9444c.4135-1.499,1.1372-2.075,2.3187-1.78,1.1954.2988,1.3919.9157,1.2846,1.7547-.0807.6308-2.2356,8.9568-2.2356,8.9568Z" transform="translate(0 -0.1042)" /> <path class="gst-part" d="M33.9248,32.3659l-.4375-.2422A21.2567,21.2567,0,0,0,14.8789.6042v-.5A21.7568,21.7568,0,0,1,33.9248,32.3659Z" transform="translate(0 -0.1042)" /> </svg> <div class="g-label">Drag to spin</div> </div> <div class="g-scroll"> <svg width="24.4687" height="42.8925" viewBox="0 0 24.4687 42.8925"> <path class="gst-part" d="M21.8887,21.4743a2.5769,2.5769,0,0,0-1.8667.7957,2.4964,2.4964,0,0,0-2.3469-1.6622h-.1834a2.4817,2.4817,0,0,0-1.6373.612,2.5088,2.5088,0,0,0-2.4969-2.34h-.1567a2.4948,2.4948,0,0,0-1.645.6144l.0052-4.1618A2.4864,2.4864,0,0,0,9.08,12.8457h-.2a2.4864,2.4864,0,0,0-2.4867,2.48L6.3754,30.0707,4.4133,28.1038a2.584,2.584,0,0,0-3.6586,3.65l7.22,7.2379A9.0436,9.0436,0,0,0,24.457,33.86l.0117-9.7978A2.5867,2.5867,0,0,0,21.8887,21.4743Zm1.707,12.3841A8.1824,8.1824,0,0,1,8.6625,38.4717L8.64,38.4391,1.364,31.1447a1.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.62h.2a1.6242,1.6242,0,0,1,1.62,1.6244l-.0067,5.3869-.0008.6639-.0084,6.7431a.4307.4307,0,0,0,.8613.0011l.0084-6.7431a1.6461,1.6461,0,0,1,1.6463-1.6422h.1567a1.646,1.646,0,0,1,1.6431,1.6463l-.0021,1.69v.019L14.99,28.13a.4307.4307,0,0,0,.8613.0011h0l.0063-5.0339a1.6327,1.6327,0,0,1,1.6329-1.6289h.1834a1.6327,1.6327,0,0,1,1.6285,1.6333l-.0006.4978-.0006.4551-.0051,4.0809a.4307.4307,0,0,0,.8613.0011l.0051-4.0809a1.7226,1.7226,0,0,1,3.4451.0043Z" /> <polygon class="gst-part" points="8.887 9.924 5.242 5.982 5.609 5.643 8.899 9.201 12.415 5.637 12.77 5.988 8.887 9.924" /> <polygon class="gst-part" points="8.887 4.288 5.242 0.346 5.609 0.006 8.899 3.564 12.415 0 12.77 0.352 8.887 4.288" /> </svg> <div class="g-label">Scroll to change</div> </div> <div class="g-move"> <svg width="24.4687" height="30.0468" viewBox="0 0 24.4687 30.0468"> <path class="gst-part" d="M21.8887,8.6286a2.5769,2.5769,0,0,0-1.8667.7957,2.4964,2.4964,0,0,0-2.3469-1.6622h-.1834a2.4817,2.4817,0,0,0-1.6373.612,2.5088,2.5088,0,0,0-2.4969-2.34h-.1567a2.4948,2.4948,0,0,0-1.645.6144l.0052-4.1618A2.4864,2.4864,0,0,0,9.08,0h-.2A2.4864,2.4864,0,0,0,6.3937,2.48L6.3754,17.225,4.4133,15.2581a2.584,2.584,0,0,0-3.6586,3.65l7.22,7.2379a9.0436,9.0436,0,0,0,16.482-5.1322l.0117-9.7978A2.5867,2.5867,0,0,0,21.8887,8.6286Zm1.707,12.3841A8.1824,8.1824,0,0,1,8.6625,25.626L8.64,25.5934,1.364,18.299a1.7226,1.7226,0,0,1,2.439-2.4331L7.2335,19.305,7.2544,2.4812A1.6242,1.6242,0,0,1,8.8788.8612h.2a1.6242,1.6242,0,0,1,1.62,1.6244l-.0067,5.3869-.0008.6639-.0084,6.7431a.4307.4307,0,0,0,.8613.0011l.0084-6.7431a1.6461,1.6461,0,0,1,1.6463-1.6422h.1567a1.646,1.646,0,0,1,1.6431,1.6463l-.0021,1.69v.019L14.99,15.2844a.4307.4307,0,0,0,.8613.0011h0l.0063-5.0339a1.6327,1.6327,0,0,1,1.6329-1.6289h.1834a1.6327,1.6327,0,0,1,1.6285,1.6333l-.0006.4978-.0006.4551L19.2964,15.29a.4307.4307,0,0,0,.8613.0011l.0051-4.0809a1.7226,1.7226,0,0,1,3.4451.0043Z" /> </svg> <div class="g-label">Move to interact</div> </div> </div> </main> <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

Qode Kaleidoscope - WordPress through a lens of color