Humme Theme - The Interplay of Chroma and Saturation

<!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>Humme Theme - The Interplay of Chroma and Saturation</title><meta name="description" content="Humme theme for WordPress offers a stripped-down, clean, contemporary design environment with calm layouts and a bold, daring personality." /><meta property="og:url" content="https://qodeinteractive.com/kaleidoscope/project/humme/"><meta property="og:site_name" content="Qode Kaleidoscope"><meta property="og:image" content="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/Humme.jpg"><meta property="twitter:card" content="summary_large_image"><meta property="twitter:url" content="https://qodeinteractive.com/kaleidoscope/project/humme/"><meta property="twitter:title" content="Humme Theme - The Interplay of Chroma and Saturation"><meta property="twitter:description" content="Humme theme for WordPress offers a stripped-down, clean, contemporary design environment with calm layouts and a bold, daring personality." /><meta property="twitter:image" content="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/Humme.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/project/humme/" /> <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="project-template-default single single-project postid-12" 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 current-menu-item menu-item-47"><a href="https://qodeinteractive.com/kaleidoscope/project/humme/" aria-current="page">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="single" data-title="humme" data-barba="container" data-barba-namespace="single" style="--bordersColor: #c3d0dd"> <div class="single-slide -standard -abs"> <div class="single-slide__wrapper"> <div class="single-slide__inner"> <div class="single-slide__media" style="--aspect: 1.7734627831715"> <a href="https://humme.mikado-themes.com/alternating-portfolio/" target="_blank" rel="noopener" class="-abs" style="z-index: 10;"></a> <video loop muted playsinline data-src="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/humme_1-1.mp4" src="#"></video> </div> <div class="single-slide__text"> Humme sets up a simple, stripped-down setting with its clean, evenly colored textures. Its layouts are not overly busy & feature subdued colors, yet they show off a strong, contemporary character. </div> </div> </div> </div> <div class="single-slide -standard -abs"> <div class="single-slide__wrapper"> <div class="single-slide__inner"> <div class="single-slide__media" style="--aspect: 1.7734627831715"> <a href="https://humme.mikado-themes.com/vertical-split-slider/" target="_blank" rel="noopener" class="-abs" style="z-index: 10;"></a> <video loop muted playsinline data-src="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/humme_2.mp4" src="#"></video> </div> <div class="single-slide__text"> A number of elements integral to Humme are displayed divided in half, often with accompanying animations. These bits of glitch-like visual cues contribute to Humme鈥檚 contemporary, bold personality. </div> </div> </div> </div> <div class="single-slide -phone -abs"> <div class="single-slide__wrapper"> <div class="single-slide__inner"> <div class="single-slide__image"> <div class="single-slide__image-1"> <a href="https://humme.mikado-themes.com/portfolio-gallery/" target="_blank" rel="noopener" class="-abs" style="z-index: 10;"></a> <div class="single-slide__image-cover -scrollable-upwards"> <img data-src="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/humme-3-1-1.jpg" src="#" alt="slide"/> </div> <div class="single-slide__phone-frame"> <svg class="svg -phone" 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 320 635" style="enable-background:new 0 0 320 635;" xml:space="preserve"> <g> <path d="M303.5,635.5h-287c-8.8,0-16-7.2-16-16v-602c0-8.8,7.2-16,16-16h287c8.8,0,16,7.2,16,16v602 C319.5,628.3,312.3,635.5,303.5,635.5z" /> </g> <g> <circle style="stroke: #c0cedb" cx="126.5" cy="33.6" r="3" /> <path style="stroke: #c0cedb" d="M193.7,36.1h-45.1c-1.5,0-2.8-1.3-2.8-2.8v0c0-1.5,1.3-2.8,2.8-2.8h45.1c1.5,0,2.8,1.3,2.8,2.8v0 C196.5,34.9,195.2,36.1,193.7,36.1z" /> <circle style="stroke: #c0cedb" cx="160" cy="602.1" r="18.5" /> </g> </svg> </div> </div> <div class="single-slide__image-2"> <a href="https://humme.mikado-themes.com/portfolio-gallery/" target="_blank" rel="noopener" class="-abs" style="z-index: 10;"></a> <div class="single-slide__image-cover -scrollable-no"> <img data-src="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/humme-3-2-1.jpg" src="#" alt="slide"/> </div> <div class="single-slide__phone-frame"> <svg class="svg -phone" 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 320 635" style="enable-background:new 0 0 320 635;" xml:space="preserve"> <g> <path d="M303.5,635.5h-287c-8.8,0-16-7.2-16-16v-602c0-8.8,7.2-16,16-16h287c8.8,0,16,7.2,16,16v602 C319.5,628.3,312.3,635.5,303.5,635.5z" /> </g> <g> <circle style="stroke: #c0cedb" cx="126.5" cy="33.6" r="3" /> <path style="stroke: #c0cedb" d="M193.7,36.1h-45.1c-1.5,0-2.8-1.3-2.8-2.8v0c0-1.5,1.3-2.8,2.8-2.8h45.1c1.5,0,2.8,1.3,2.8,2.8v0 C196.5,34.9,195.2,36.1,193.7,36.1z" /> <circle style="stroke: #c0cedb" cx="160" cy="602.1" r="18.5" /> </g> </svg> </div> </div> </div> <div class="single-slide__text"> The color selection mixes gray with soft, laid back pastel tones of midnight blue. To liven up the atmosphere and accentuate certain lines, Humme uses more intense shades of pink and blue. </div> </div> </div> </div> <div class="single-slide -standard -abs"> <div class="single-slide__wrapper"> <div class="single-slide__inner"> <div class="single-slide__media" style="--aspect: 1.7741935483871"> <a href="https://humme.mikado-themes.com/logo-gallery-home/" target="_blank" rel="noopener" class="-abs" style="z-index: 10;"></a> <img data-src="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/humme-4.jpg" src="#" alt="slide"/> </div> <div class="single-slide__text"> Humme鈥檚 color combination is vivid, yet saturated at the same time, with sharp Melon Pink undertones and warm, deep Midnight Blue hues working in unison, placed within Humme鈥檚 calm grey ambiance. </div> </div> </div> </div> <div class="single-slide -standard -abs"> <div class="single-slide__wrapper"> <div class="single-slide__inner"> <div class="single-slide__media" style="--aspect: 1.7734627831715"> <a href="https://humme.mikado-themes.com/interactive-scroll-links/" target="_blank" rel="noopener" class="-abs" style="z-index: 10;"></a> <video loop muted playsinline data-src="https://qodeinteractive.com/kaleidoscope/wp-content/uploads/2019/09/humme_5.mp4" src="#"></video> </div> <div class="single-slide__text"> Humme also relies on decidedly bold, yet minimalist typography. Titles & certain sections are shown at a tilted angle, introducing an almost distorted perspective to this seemingly calm context. </div> </div> </div> </div> <svg class="svg -prev" 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 20 14" style="enable-background:new 0 0 20 14;" xml:space="preserve"> <polyline class="st0" points="7.5,0.5 0.7,7 7.5,13.5 " /> <line class="st1" x1="0.7" y1="7" x2="19.8" y2="7" /> </svg> <svg class="svg -prev" 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 20 14" style="enable-background:new 0 0 20 14;" xml:space="preserve"> <polyline class="st0" points="7.5,0.5 0.7,7 7.5,13.5 " /> <line class="st1" x1="0.7" y1="7" x2="19.8" y2="7" /> </svg> <svg class="svg -next" 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 20 14" style="enable-background:new 0 0 20 14;" xml:space="preserve"> <polyline class="st0" points="12.5,0.5 19.4,7 12.5,13.5 " /> <line class="st1" x1="19.4" y1="7" x2="0.2" y2="7" /> </svg> <svg class="svg -next" 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 20 14" style="enable-background:new 0 0 20 14;" xml:space="preserve"> <polyline class="st0" points="12.5,0.5 19.4,7 12.5,13.5 " /> <line class="st1" x1="19.4" y1="7" x2="0.2" y2="7" /> </svg> <div class="single__nav"> <div class="btn-holder -go-back"> <a class="btn -round -abs" href="https://qodeinteractive.com/kaleidoscope" target=_self > GGoo BBaacckk </a> </div> <div class="btn-holder -visit-live"> <a class="btn -round -abs" href="https://humme.mikado-themes.com/landing" target=_blank rel="noopener" > VViissiitt LLiivvee </a> </div> </div> <a class="project-nav" href="https://qodeinteractive.com/kaleidoscope/project/agava/">PPrreevviioouuss pprroojjeecctt </a> <a class="project-nav" href="https://qodeinteractive.com/kaleidoscope/project/tahoe/">NNeexxtt pprroojjeecctt </a> </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

Humme Theme - The Interplay of Chroma and Saturation