oauo

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

oauo

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

oauo

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

oauo

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);

oauo

.card(style="--background:#3C3B3D; --text:white;")
    div.multi-button
        button.fas.fa-heart
    div.container
.card
    div.multi-button
        button.fas.fa-heart
        button.fas.fa-clipboard
    div.container
.card(style="--background:#EC87C0; --text:white;")

oauo

‎‎​

oauo

div#app
    

oauo

div#moon
svg(style="position:fixed; top:100vh")
    defs
        filter#blob
            feGaussianBlur(in="SourceGraphic" stdDeviation="10" result="blur")
            feColorMatrix(in="blur" mode="matrix" values="1 0 0 0 0  0 2 0 0 0  0 0 1 0 0  0 0 0 10 -5" result="blob")
            feComposite(in="SourceGraphic" in2="blob" operator="atop")

oauo

‎‎​

oauo

{
  "scripts": [],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
  ]
}