[{"id":41,"created_at":"2023-09-14T18:09:11.310699+00:00","html":"

\r\n

\r\n \r\n

","css":" body {\r\n background-color: firebrick;\r\n }\r\n\r\n .container {\r\n width: 300px;\r\n height: 280px;\r\n position: absolute;\r\n top: calc(50% - 140px);\r\n left: calc(50% - 150px);\r\n }\r\n\r\n .coffee-header {\r\n width: 100%;\r\n height: 80px;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n background-color: #ddcfcc;\r\n border-radius: 10px;\r\n }\r\n\r\n .coffee-header__buttons {\r\n width: 25px;\r\n height: 25px;\r\n position: absolute;\r\n top: 25px;\r\n background-color: #282323;\r\n border-radius: 50%;\r\n }\r\n\r\n .coffee-header__buttons::after {\r\n content: \"\";\r\n width: 8px;\r\n height: 8px;\r\n position: absolute;\r\n bottom: -8px;\r\n left: calc(50% - 4px);\r\n background-color: #615e5e;\r\n }\r\n\r\n .coffee-header__button-one {\r\n left: 15px;\r\n }\r\n\r\n .coffee-header__button-two {\r\n left: 50px;\r\n }\r\n\r\n .coffee-header__display {\r\n width: 50px;\r\n height: 50px;\r\n position: absolute;\r\n top: calc(50% - 25px);\r\n left: calc(50% - 25px);\r\n border-radius: 50%;\r\n background-color: #9acfc5;\r\n border: 5px solid #43beae;\r\n box-sizing: border-box;\r\n }\r\n\r\n .coffee-header__details {\r\n width: 8px;\r\n height: 20px;\r\n position: absolute;\r\n top: 10px;\r\n right: 10px;\r\n background-color: #9b9091;\r\n box-shadow: -12px 0 0 #9b9091, -24px 0 0 #9b9091;\r\n }\r\n\r\n .coffee-medium {\r\n width: 90%;\r\n height: 160px;\r\n position: absolute;\r\n top: 80px;\r\n left: calc(50% - 45%);\r\n background-color: #bcb0af;\r\n }\r\n\r\n .coffee-medium:before {\r\n content: \"\";\r\n width: 90%;\r\n height: 100px;\r\n background-color: #776f6e;\r\n position: absolute;\r\n bottom: 0;\r\n left: calc(50% - 45%);\r\n border-radius: 20px 20px 0 0;\r\n }\r\n\r\n .coffe-medium__exit {\r\n width: 60px;\r\n height: 20px;\r\n position: absolute;\r\n top: 0;\r\n left: calc(50% - 30px);\r\n background-color: #231f20;\r\n }\r\n\r\n .coffe-medium__exit::before {\r\n content: \"\";\r\n width: 50px;\r\n height: 20px;\r\n border-radius: 0 0 50% 50%;\r\n position: absolute;\r\n bottom: -20px;\r\n left: calc(50% - 25px);\r\n background-color: #231f20;\r\n }\r\n\r\n .coffe-medium__exit::after {\r\n content: \"\";\r\n width: 10px;\r\n height: 10px;\r\n position: absolute;\r\n bottom: -30px;\r\n left: calc(50% - 5px);\r\n background-color: #231f20;\r\n }\r\n\r\n .coffee-medium__arm {\r\n width: 70px;\r\n height: 20px;\r\n position: absolute;\r\n top: 15px;\r\n right: 25px;\r\n background-color: #231f20;\r\n }\r\n\r\n .coffee-medium__arm::before {\r\n content: \"\";\r\n width: 15px;\r\n height: 5px;\r\n position: absolute;\r\n top: 7px;\r\n left: -15px;\r\n background-color: #9e9495;\r\n }\r\n\r\n .coffee-medium__cup {\r\n width: 80px;\r\n height: 47px;\r\n position: absolute;\r\n bottom: 0;\r\n left: calc(50% - 40px);\r\n background-color: #FFF;\r\n border-radius: 0 0 70px 70px / 0 0 110px 110px;\r\n }\r\n\r\n .coffee-medium__cup::after {\r\n content: \"\";\r\n width: 20px;\r\n height: 20px;\r\n position: absolute;\r\n top: 6px;\r\n right: -13px;\r\n border: 5px solid #FFF;\r\n border-radius: 50%;\r\n }\r\n\r\n @keyframes liquid {\r\n 0% {\r\n height: 0px;\r\n opacity: 1;\r\n }\r\n\r\n 5% {\r\n height: 0px;\r\n opacity: 1;\r\n }\r\n\r\n 20% {\r\n height: 62px;\r\n opacity: 1;\r\n }\r\n\r\n 95% {\r\n height: 62px;\r\n opacity: 1;\r\n }\r\n\r\n 100% {\r\n height: 62px;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n .coffee-medium__liquid {\r\n width: 6px;\r\n height: 63px;\r\n opacity: 0;\r\n position: absolute;\r\n top: 50px;\r\n left: calc(50% - 3px);\r\n background-color: #74372b;\r\n animation: liquid 4s 4s linear infinite;\r\n }\r\n\r\n .coffee-medium__smoke {\r\n width: 8px;\r\n height: 20px;\r\n position: absolute;\r\n border-radius: 5px;\r\n background-color: #b3aeae;\r\n }\r\n\r\n @keyframes smokeOne {\r\n 0% {\r\n bottom: 20px;\r\n opacity: 0;\r\n }\r\n\r\n 40% {\r\n bottom: 50px;\r\n opacity: .5;\r\n }\r\n\r\n 80% {\r\n bottom: 80px;\r\n opacity: .3;\r\n }\r\n\r\n 100% {\r\n bottom: 80px;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n @keyframes smokeTwo {\r\n 0% {\r\n bottom: 40px;\r\n opacity: 0;\r\n }\r\n\r\n 40% {\r\n bottom: 70px;\r\n opacity: .5;\r\n }\r\n\r\n 80% {\r\n bottom: 80px;\r\n opacity: .3;\r\n }\r\n\r\n 100% {\r\n bottom: 80px;\r\n opacity: 0;\r\n }\r\n }\r\n\r\n .coffee-medium__smoke-one {\r\n opacity: 0;\r\n bottom: 50px;\r\n left: 102px;\r\n animation: smokeOne 3s 4s linear infinite;\r\n }\r\n\r\n .coffee-medium__smoke-two {\r\n opacity: 0;\r\n bottom: 70px;\r\n left: 118px;\r\n animation: smokeTwo 3s 5s linear infinite;\r\n }\r\n\r\n .coffee-medium__smoke-three {\r\n opacity: 0;\r\n bottom: 65px;\r\n right: 118px;\r\n animation: smokeTwo 3s 6s linear infinite;\r\n }\r\n\r\n .coffee-medium__smoke-for {\r\n opacity: 0;\r\n bottom: 50px;\r\n right: 102px;\r\n animation: smokeOne 3s 5s linear infinite;\r\n }\r\n\r\n .coffee-footer {\r\n width: 95%;\r\n height: 15px;\r\n position: absolute;\r\n bottom: 25px;\r\n left: calc(50% - 47.5%);\r\n background-color: #41bdad;\r\n border-radius: 10px;\r\n }\r\n\r\n .coffee-footer::after {\r\n content: \"\";\r\n width: 106%;\r\n height: 26px;\r\n position: absolute;\r\n bottom: -25px;\r\n left: -8px;\r\n background-color: #000;\r\n }","js":"// code here","user_id":"1c3624cd-ae3b-4b60-946f-65ea8f296ff7","project_key":"8t09gS","description":"COffee machine ART & Animation with HTML & CSS","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":false,"materialicons":true,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"framermotion":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":[],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":111}],"profiles":{"username":"devcanvas"}}]