HTML ⛶ <!-- A Pen Inspired by a codepen from Gayane Gasparyan https://codepen.io/gayane- gasparyan/pen/dyPEgVo --> <div id="wrapper"><input type="range" id="slider" min="1" max="9" value=2 onchange="update(this.value);"> <div> <span id="work">WORK</span><span id="life">LIFE</span> </div> <div id="balance">BALANCE</div> </div>
CSS 🛠⛶ @font-face { font-family: "Inconsolata"; src: url("https://ggayane.github.io/css-experiments/Inconsolata-VF.ttf"); font-weight: 100 900; font-stretch: 50% 200%; } body { margin: 0; padding: 0; background-color: black; color: #FFFFFF; font-size: 8em; font-family: 'Inconsolata'; } #wrapper { width: 90vw; margin: 0px auto; color: rgb(255,255,255); } #work { font-weight:900; } #life { font-weight:100; } #balance { font-size: 0.3em; line-height: 0.3em; font-weight: 400; }
JavaScript ⛶ function update(value) { var stretch = ['ultra-condensed','extra-condensed','condensed','semi-condensed','normal','semi-expanded','expanded','extra-expanded ','ultra-expanded']; document.getElementById("work").style.fontWeight=value*100; document.getElementById("work").style.fontStretch=stretch[value-1]; document.getElementById("life").style.fontWeight=(1000-value*100); document.getElementById("life").style.fontStretch=stretch[9-value]; } update();