zeddash

let transitiontime = 1000;
let setuptimer;

$(document).on("click", "*[action]", function(){
	switch($(this).attr("action")) {
		case "open chat":
            $("#chatbox").addClass("open");
            setuptimer = setTimeout(() => {
                $("#chatbox").addClass("setup");
            }, transitiontime);

zeddash

div.face-container
    div.face
        div.eye.left
            div.lower
                div.lid
            div.upper
                div.lid
        div.eye.right
            div.lower
                div.lid

zeddash

div.main
div.footer
    div.bubbles
        - for (var i = 0; i < 128; i++) //Small numbers looks nice too
            div.bubble(style=`--size:${2+Math.random()*4}rem; --distance:${6+Math.random()*4}rem; --position:${-5+Math.random()*110}%; --time:${2+Math.random()*2}s; --delay:${-1*(2+Math.random()*2)}s;`)
    div.content
        div
            div
                b Eldew
                a(href="#") Secuce

zeddash

div#phone
	.tab
		div.icons
			a.fas.fa-gift(href="#")
			a.fab.fa-codepen(href="https://codepen.io/z-" target="_blank")
			br
			a.fas.fa-ufo(href="#")
			a.fas.fa-beer(href="#")
		div.circle
			i.fal.fa-times