{"loaderData":{"0":null,"0-3":{"total":7398,"projects":[{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"2d1c56","snapshot":null,"tags":null,"title":"card by Kemboi-Dun","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":668,"cssLen":1924,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

johndoe@admin: ~

\n +\n

\n johndoe@admin:\n ~\n $\n \n

","css":".container {\n width: 250px;\n height: 250px;\n}\n\n.terminal_toolbar {\n display: flex;\n height: 30px;\n align-items: center;\n padding: 0 8px;\n box-sizing: border-box;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n background: #212121;\n justify-content: space-between;\n}\n\n.butt {\n display: flex;\n align-items: center;\n}\n\n.btn {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n margin-right: 5px;\n font-size: 8px;\n height: 12px;\n width: 12px;\n box-sizing: border-box;\n border: none;\n border-radius: 100%;\n background: linear-gradient(#7d7871 0%, #595953 100%);\n text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.2);\n box-shadow: 0px 0px 1px 0px #41403A, 0px 1px 1px 0px #474642;\n}\n\n.btn-color {\n background: #ee411a;\n}\n\n.btn:hover {\n cursor: pointer;\n}\n\n.btn:focus {\n outline: none;\n}\n\n.butt--exit {\n background: linear-gradient(#f37458 0%, #de4c12 100%);\n}\n\n.add_tab {\n border: 1px solid #fff;\n color: #fff;\n padding: 0 6px;\n border-radius: 4px 4px 0 0;\n border-bottom: none;\n cursor: pointer;\n}\n\n.user {\n color: #d5d0ce;\n margin-left: 6px;\n font-size: 14px;\n line-height: 15px;\n}\n\n.terminal_body {\n background: rgba(0, 0, 0, 0.6);\n height: calc(100% - 30px);\n padding-top: 2px;\n margin-top: -1px;\n font-size: 12px;\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n\n.terminal_promt {\n display: flex;\n}\n\n.terminal_promt span {\n margin-left: 4px;\n}\n\n.terminal_user {\n color: #1eff8e;\n}\n\n.terminal_location {\n color: #4878c0;\n}\n\n.terminal_bling {\n color: #dddddd;\n}\n\n.terminal_cursor {\n display: block;\n height: 14px;\n width: 5px;\n margin-left: 10px;\n animation: curbl 1200ms linear infinite;\n}\n\n@keyframes curbl {\n\n 0% {\n background: #ffffff;\n }\n\n 49% {\n background: #ffffff;\n }\n\n 60% {\n background: transparent;\n }\n\n 99% {\n background: transparent;\n }\n\n 100% {\n background: #ffffff;\n }\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"acd53f","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":15259,"cssLen":1862,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

23 °C

Dunmore, Ireland

\n\n

Humidity
30%

\n \n

\n\n

Wind
8 Km/h

\n \n

\n\n

\n \n

AQI
30

\n\n

\n \n

Real Feel
21 °C

\n\n

\n \n

Pressure
1012 mbar

\n Healthy\n

","css":".cardm {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 46.64%;\n left: 50%;\n}\n\n.card {\n position: absolute;\n width: 250px;\n height: 130px;\n border-radius: 25px;\n background: whitesmoke;\n color: black;\n z-index: 2;\n transition: .4s ease-in-out;\n}\n\n.weather {\n position: relative;\n margin: 1em;\n}\n\n.main {\n font-size: 2em;\n position: relative;\n top: -3em;\n left: 4.3em;\n}\n\n.mainsub {\n position: relative;\n top: -10.2em;\n left: 14em;\n font-size: 0.6em;\n}\n\n.card2 {\n position: absolute;\n display: flex;\n flex-direction: row;\n width: 240px;\n height: 130px;\n border-radius: 35px;\n background: white;\n z-index: -1;\n transition: .4s ease-in-out;\n}\n\n.card:hover {\n background-color: #FFE87C;\n cursor: pointer;\n}\n\n.card:hover + .card2 {\n height: 300px;\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n}\n\n.card:hover + .card2 .lower {\n top: 20.2em;\n}\n\n.upper {\n display: flex;\n flex-direction: row;\n position: relative;\n color: black;\n left: 1.8em;\n top: 0.5em;\n gap: 4em;\n}\n\n.humiditytext {\n position: relative;\n left: 3.6em;\n top: 2.7em;\n font-size: 0.6em;\n}\n\n.airtext {\n position: relative;\n left: 3.8em;\n top: 2.7em;\n font-size: 0.6em;\n}\n\n.lower {\n display: flex;\n flex-direction: row;\n position: absolute;\n text-align: center;\n color: black;\n left: 3em;\n top: 1em;\n margin-top: 0.7em;\n font-size: 0.7em;\n transition: .4s ease-in-out;\n}\n\n.aqi {\n margin-right: 3.25em;\n}\n\n.realfeel {\n margin-right: 1.8em;\n}\n\n.card3 {\n position: absolute;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n width: 240px;\n height: 30px;\n top: 4.7em;\n left: -2.4em;\n font-size: 1.24em;\n border-bottom-left-radius: 35px;\n border-bottom-right-radius: 35px;\n background: limegreen;\n transition: .4s ease-in-out;\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"7ef4b4","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":751,"cssLen":1236,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam ea quo unde\n vel adipisci blanditiis voluptates eum. Nam, cum minima?\n

\n\n

\n \n Take a Look\n \n\n \n Mark as Read\n \n

\n","css":".card {\n max-width: 320px;\n border-width: 1px;\n border-color: rgba(219, 234, 254, 1);\n border-radius: 1rem;\n background-color: rgba(255, 255, 255, 1);\n padding: 1rem;\n}\n\n.header {\n display: flex;\n align-items: center;\n grid-gap: 1rem;\n gap: 1rem;\n}\n\n.icon {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 9999px;\n background-color: rgba(96, 165, 250, 1);\n padding: 0.5rem;\n color: rgba(255, 255, 255, 1);\n}\n\n.icon svg {\n height: 1rem;\n width: 1rem;\n}\n\n.alert {\n font-weight: 600;\n color: rgba(107, 114, 128, 1);\n}\n\n.message {\n margin-top: 1rem;\n color: rgba(107, 114, 128, 1);\n}\n\n.actions {\n margin-top: 1.5rem;\n}\n\n.actions a {\n text-decoration: none;\n}\n\n.mark-as-read, .read {\n display: inline-block;\n border-radius: 0.5rem;\n width: 100%;\n padding: 0.75rem 1.25rem;\n text-align: center;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 600;\n}\n\n.read {\n background-color: rgba(59, 130, 246, 1);\n color: rgba(255, 255, 255, 1);\n}\n\n.mark-as-read {\n margin-top: 0.5rem;\n background-color: rgba(249, 250, 251, 1);\n color: rgba(107, 114, 128, 1);\n transition: all .15s ease;\n}\n\n.mark-as-read:hover {\n background-color: rgb(230, 231, 233);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"e8509b","snapshot":null,"tags":null,"title":"card by csozidev","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3031,"cssLen":2708,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Soldiers Rage

Tha Mechanic

\n \n

\n \n \n\n

\n\n

1:31

3:46

","css":"/* Spotify music card made by: csozi | Website: www.csozi.hu*/\n\n.card {\n position: relative;\n width: 250px;\n height: 120px;\n background: #191414;\n border-radius: 10px;\n padding: 10px;\n}\n\n.top {\n position: relative;\n width: 100%;\n display: flex;\n gap: 10px;\n}\n\n.pfp {\n position: relative;\n top: 5px;\n left: 5px;\n height: 40px;\n width: 40px;\n background-color: #d2d2d2;\n border-radius: 5px;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.title-1 {\n color: white;\n font-size: 25px;\n font-weight: bolder;\n}\n\n.title-2 {\n color: white;\n font-size: 12px;\n font-weight: bold;\n}\n\n.time {\n width: 90%;\n background-color: #5e5e5e;\n height: 6px;\n border-radius: 3px;\n position: absolute;\n left: 5%;\n bottom: 22px;\n}\n\n.elapsed {\n width: 42%;\n background-color: #1db954;\n height: 100%;\n border-radius: 3px;\n}\n\n.controls {\n color: white;\n display: flex;\n position: absolute;\n bottom: 30px;\n left: 0;\n width: 100%;\n justify-content: center;\n}\n\n.volume {\n height: 100%;\n width: 48px;\n}\n\n.air {\n height: 100%;\n width: 48px;\n}\n\n.controls svg {\n cursor: pointer;\n transition: 0.1s;\n}\n\n.controls svg:hover {\n color: #1db954;\n}\n\n.volume {\n opacity: 0;\n position: relative;\n transition: 0.2s;\n}\n\n.volume .slider {\n height: 4px;\n background-color: #5e5e5e;\n width: 80%;\n border-radius: 2px;\n margin-top: 8px;\n margin-left: 10%;\n}\n\n.volume .slider .green {\n background-color: #1db954;\n height: 100%;\n width: 80%;\n border-radius: 3px;\n}\n\n.volume .circle {\n background-color: white;\n height: 6px;\n width: 6px;\n border-radius: 3px;\n position: absolute;\n right: 20%;\n top: 60%;\n}\n\n.volume_button:hover ~ .volume {\n opacity: 1;\n}\n\n.timetext {\n color: white;\n font-size: 8px;\n position: absolute;\n}\n\n.time_now {\n bottom: 11px;\n left: 10px;\n}\n\n.time_full {\n bottom: 11px;\n right: 10px;\n}\n\n.playing {\n display: flex;\n position: relative;\n justify-content: center;\n gap: 1px;\n width: 30px;\n height: 20px;\n}\n\n.greenline {\n background-color: #1db954;\n height: 20px;\n width: 2px;\n position: relative;\n transform-origin: bottom;\n}\n\n.line-1 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0.2s;\n}\n\n.line-2 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0.5s;\n}\n\n.line-3 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0.6s;\n}\n\n.line-4 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0s;\n}\n\n.line-5 {\n animation: infinite playing 1s ease-in-out;\n animation-delay: 0.4s;\n}\n\n@keyframes playing {\n 0% {\n transform: scaleY(0.1);\n }\n\n 33% {\n transform: scaleY(0.6);\n }\n\n 66% {\n transform: scaleY(0.9);\n }\n\n 100% {\n transform: scaleY(0.1);\n }\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"5d973b","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4408,"cssLen":1136,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n About Me\n

I’m Walter, a multidisciplinary designer who focuses on telling my clients’ stories visually, through enjoyable and meaningful experiences. I specialize in responsive websites and functional user interfaces.

\n \n \n

","css":".card {\n width: 17em;\n height: 22.5em;\n background: #171717;\n transition: 1s ease-in-out;\n clip-path: polygon(30px 0%, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0% 30px);\n border-top-right-radius: 20px;\n border-bottom-left-radius: 20px;\n display: flex;\n flex-direction: column;\n}\n\n.card span {\n font-weight: bold;\n color: white;\n text-align: center;\n display: block;\n font-size: 1em;\n}\n\n.card .info {\n font-weight: 400;\n color: white;\n display: block;\n text-align: center;\n font-size: 0.72em;\n margin: 1em;\n}\n\n.card .img {\n width: 4.8em;\n height: 4.8em;\n background: white;\n border-radius: 15px;\n margin: auto;\n}\n\n.card .share {\n margin-top: 1em;\n display: flex;\n justify-content: center;\n gap: 1em;\n}\n\n.card a {\n color: white;\n transition: .4s ease-in-out;\n}\n\n.card a:hover {\n color: red;\n}\n\n.card button {\n padding: 0.8em 1.7em;\n display: block;\n margin: auto;\n border-radius: 25px;\n border: none;\n font-weight: bold;\n background: #ffffff;\n color: rgb(0, 0, 0);\n transition: .4s ease-in-out;\n}\n\n.card button:hover {\n background: red;\n color: white;\n cursor: pointer;\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"d42f77","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":59,"cssLen":314,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 20px;\n padding: 5px;\n box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;\n background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);\n}\n\n.card__content {\n background: rgb(5, 6, 45);\n border-radius: 17px;\n width: 100%;\n height: 100%;\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"f08a78","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1207,"cssLen":6097,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

HOVER OVER :D

look mom,
no JS

\n mouse hover tracker\n

\n \n

","css":"/*works janky on mobile :<*/\n.container {\n position: relative;\n width: 190px;\n height: 254px;\n transition: 200ms;\n}\n\n.container:active {\n width: 180px;\n height: 245px;\n}\n\n#card {\n position: absolute;\n inset: 0;\n z-index: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n transition: 700ms;\n background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);\n}\n\n.subtitle {\n transform: translateY(160px);\n color: rgb(134, 110, 221);\n text-align: center;\n width: 100%;\n}\n\n.title {\n opacity: 0;\n transition-duration: 300ms;\n transition-timing-function: ease-in-out-out;\n transition-delay: 100ms;\n position: absolute;\n font-size: x-large;\n font-weight: bold;\n color: white;\n}\n\n.tracker:hover ~ #card .title {\n opacity: 1;\n}\n\n#prompt {\n bottom: 8px;\n left: 12px;\n z-index: 20;\n font-size: 20px;\n font-weight: bold;\n transition: 300ms ease-in-out-out;\n position: absolute;\n max-width: 110px;\n color: rgb(255, 255, 255);\n}\n\n.tracker {\n position: absolute;\n z-index: 200;\n width: 100%;\n height: 100%;\n}\n\n.tracker:hover {\n cursor: pointer;\n}\n\n.tracker:hover ~ #card #prompt {\n opacity: 0;\n}\n\n.tracker:hover ~ #card {\n transition: 300ms;\n filter: brightness(1.1);\n}\n\n.container:hover #card::before {\n transition: 200ms;\n content: '';\n opacity: 80%;\n}\n\n.canvas {\n perspective: 800px;\n inset: 0;\n z-index: 200;\n position: absolute;\n display: grid;\n grid-template-columns: 1fr 1fr 1fr 1fr 1fr;\n grid-template-rows: 1fr 1fr 1fr 1fr 1fr;\n gap: 0px 0px;\n grid-template-areas: \"tr-1 tr-2 tr-3 tr-4 tr-5\"\n \"tr-6 tr-7 tr-8 tr-9 tr-10\"\n \"tr-11 tr-12 tr-13 tr-14 tr-15\"\n \"tr-16 tr-17 tr-18 tr-19 tr-20\"\n \"tr-21 tr-22 tr-23 tr-24 tr-25\";\n}\n\n#card::before {\n content: '';\n background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%);\n filter: blur(2rem);\n opacity: 30%;\n width: 100%;\n height: 100%;\n position: absolute;\n z-index: -1;\n transition: 200ms;\n}\n\n.tr-1 {\n grid-area: tr-1;\n}\n\n.tr-2 {\n grid-area: tr-2;\n}\n\n.tr-3 {\n grid-area: tr-3;\n}\n\n.tr-4 {\n grid-area: tr-4;\n}\n\n.tr-5 {\n grid-area: tr-5;\n}\n\n.tr-6 {\n grid-area: tr-6;\n}\n\n.tr-7 {\n grid-area: tr-7;\n}\n\n.tr-8 {\n grid-area: tr-8;\n}\n\n.tr-9 {\n grid-area: tr-9;\n}\n\n.tr-10 {\n grid-area: tr-10;\n}\n\n.tr-11 {\n grid-area: tr-11;\n}\n\n.tr-12 {\n grid-area: tr-12;\n}\n\n.tr-13 {\n grid-area: tr-13;\n}\n\n.tr-14 {\n grid-area: tr-14;\n}\n\n.tr-15 {\n grid-area: tr-15;\n}\n\n.tr-16 {\n grid-area: tr-16;\n}\n\n.tr-17 {\n grid-area: tr-17;\n}\n\n.tr-18 {\n grid-area: tr-18;\n}\n\n.tr-19 {\n grid-area: tr-19;\n}\n\n.tr-20 {\n grid-area: tr-20;\n}\n\n.tr-21 {\n grid-area: tr-21;\n}\n\n.tr-22 {\n grid-area: tr-22;\n}\n\n.tr-23 {\n grid-area: tr-23;\n}\n\n.tr-24 {\n grid-area: tr-24;\n}\n\n.tr-25 {\n grid-area: tr-25;\n}\n\n.tr-1:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(20deg) rotateY(-10deg) rotateZ(0deg);\n}\n\n.tr-2:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(20deg) rotateY(-5deg) rotateZ(0deg);\n}\n\n.tr-3:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(20deg) rotateY(0deg) rotateZ(0deg);\n}\n\n.tr-4:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(20deg) rotateY(5deg) rotateZ(0deg);\n}\n\n.tr-5:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(20deg) rotateY(10deg) rotateZ(0deg);\n}\n\n.tr-6:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(10deg) rotateY(-10deg) rotateZ(0deg);\n}\n\n.tr-7:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(10deg) rotateY(-5deg) rotateZ(0deg);\n}\n\n.tr-8:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(10deg) rotateY(0deg) rotateZ(0deg);\n}\n\n.tr-9:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(10deg) rotateY(5deg) rotateZ(0deg);\n}\n\n.tr-10:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(10deg) rotateY(10deg) rotateZ(0deg);\n}\n\n.tr-11:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(0deg) rotateY(-10deg) rotateZ(0deg);\n}\n\n.tr-12:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(0deg) rotateY(-5deg) rotateZ(0deg);\n}\n\n.tr-13:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);\n}\n\n.tr-14:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(0deg) rotateY(5deg) rotateZ(0deg);\n}\n\n.tr-15:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(0deg) rotateY(10deg) rotateZ(0deg);\n}\n\n.tr-16:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);\n}\n\n.tr-17:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);\n}\n\n.tr-18:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-10deg) rotateY(0deg) rotateZ(0deg);\n}\n\n.tr-19:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-10deg) rotateY(5deg) rotateZ(0deg);\n}\n\n.tr-20:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-10deg) rotateY(10deg) rotateZ(0deg);\n}\n\n.tr-21:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);\n}\n\n.tr-22:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);\n}\n\n.tr-23:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-20deg) rotateY(0deg) rotateZ(0deg);\n}\n\n.tr-24:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-20deg) rotateY(5deg) rotateZ(0deg);\n}\n\n.tr-25:hover ~ #card {\n transition: 125ms ease-in-out;\n transform: rotateX(-20deg) rotateY(10deg) rotateZ(0deg);\n}\n\n.noselect {\n -webkit-touch-callout: none;\n /* iOS Safari */\n -webkit-user-select: none;\n /* Safari */\n /* Konqueror HTML */\n -moz-user-select: none;\n /* Old versions of Firefox */\n -ms-user-select: none;\n /* Internet Explorer/Edge */\n user-select: none;\n /* Non-prefixed version, currently\n\t\t\t\t\t\t\t\t\tsupported by Chrome, Edge, Opera and Firefox */\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"96d2cd","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":10670,"cssLen":5156,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n \n \n \n \n

\n \n

CSS Theme Switch

Praashoo7

\n 22\n

\n 12\n

\n 332\n

","css":"/* CodePen Card */\n\n.card {\n width: 15em;\n height: 10em;\n background-color: #252525;\n border-radius: 7px;\n cursor: pointer;\n}\n\n.fl {\n display: flex;\n justify-content: flex-end;\n opacity: 0;\n transition: .2s ease-in-out;\n}\n\n.fl:hover .fullscreen {\n scale: 1.2;\n}\n\n.fl:hover .fullscreen_svg {\n fill: white;\n}\n\n.fullscreen {\n width: 1.5em;\n height: 1.5em;\n border-radius: 5px;\n background-color: #727890;\n margin: 1em;\n margin-right: 0.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: .2s ease-in-out;\n box-shadow: 2px 2px 6px rgba(0,0,0,.4);\n}\n\n.fullscreen_svg {\n width: 15px;\n height: 15px;\n fill: rgb(177, 176, 176);\n transition: .2s ease-in-out;\n}\n\n.card_back {\n position: absolute;\n width: 15em;\n height: 13em;\n background-color: rgba(30, 31, 38, 0.575);\n border-radius: 7px;\n margin-top: -5em;\n margin-left: 0.7em;\n transition: .2s ease-in-out;\n z-index: -1;\n}\n\n.main:hover .card_back {\n margin-top: -6.25em;\n margin-left: 0em;\n scale: 1.1;\n height: 15.25em;\n cursor: pointer;\n}\n\n.main:hover .fl {\n opacity: 1;\n cursor: pointer;\n margin-right: 0.5em;\n}\n\n.data {\n display: flex;\n flex-direction: row;\n margin-top: 1em;\n}\n\n.img {\n width: 2.25em;\n height: 2.25em;\n background-color: #252525;\n border-radius: 5px;\n overflow: hidden;\n}\n\n.text {\n display: flex;\n justify-content: center;\n flex-direction: column;\n margin-left: 0.5em;\n font-family: Montserrat;\n color: white;\n}\n\n.text_m {\n font-weight: bold;\n font-size: 0.9em;\n}\n\n.text_s {\n font-size: 0.7em;\n}\n\n.btns {\n display: flex;\n gap: 0.5em;\n transition: .2s ease-in-out;\n}\n\n.likes {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .2s ease-in-out;\n}\n\n.likes_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n}\n\n.likes_svg {\n width: 12px;\n height: 12px;\n fill: white;\n}\n\n.likes:hover {\n background-color: #5A5F73;\n cursor: pointer;\n}\n\n.comments {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .24s ease-in-out;\n}\n\n.comments_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n}\n\n.comments_svg {\n width: 12px;\n height: 12px;\n fill: white;\n}\n\n.comments:hover {\n background-color: #5A5F73;\n cursor: pointer;\n}\n\n.views {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 3em;\n height: 1.4em;\n border-radius: 4px;\n margin-top: -0.5em;\n opacity: 0;\n background-color: #444857;\n transition: .28s ease-in-out;\n}\n\n.views_text {\n font-family: Montserrat;\n font-size: 0.8em;\n margin-left: 0.25em;\n color: white;\n}\n\n.views_svg {\n width: 12px;\n height: 12px;\n fill: white;\n}\n\n.views:hover {\n background-color: #5A5F73;\n cursor: pointer;\n}\n\n.main:hover .likes {\n margin-top: 0.5em;\n opacity: 1;\n}\n\n.main:hover .comments {\n margin-top: 0.5em;\n opacity: 1;\n}\n\n.main:hover .views {\n margin-top: 0.5em;\n opacity: 1;\n}\n\n\n\n/* The Main Switch */\n\n.card_content {\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n/* The switch - the box around the slider */\n.switch_738 {\n font-size: 13px;\n position: relative;\n display: inline-block;\n width: 1.2em;\n height: 3.3em;\n}\n\n/* Hide default HTML checkbox */\n.switch_738 .chk_738 {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider_738 {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: .4s;\n border-radius: 5px;\n}\n\n.slider_738:before {\n position: absolute;\n content: \"\";\n height: .5em;\n width: 2.4em;\n border-radius: 5px;\n left: -0.6em;\n top: 0.2em;\n background-color: white;\n box-shadow: 0 6px 7px rgba(0,0,0,0.3);\n transition: .4s;\n}\n\n.slider_738:before, .slider_738:after {\n content: \"\";\n display: block;\n}\n\n.slider_738:after {\n background: linear-gradient(transparent 50%, rgba(255, 255, 255, 0.15) 0) 0 50% / 50% 100%,\n\t\trepeating-linear-gradient(90deg,rgb(255, 255, 255) 0,rgb(255, 255, 255),rgb(255, 255, 255) 20%,rgb(255, 255, 255) 20%,rgb(255, 255, 255) 40%) 0 50% / 50% 100%,\n\t\tradial-gradient(circle at 50% 50%,rgb(255, 255, 255) 25%, transparent 26%);\n background-repeat: no-repeat;\n border: 0.25em solid transparent;\n border-left: 0.4em solid #ffffff;\n border-right: 0 solid transparent;\n transition: border-left-color 0.1s 0.3s ease-out, transform 0.3s ease-out;\n transform: translateX(-22.5%) rotate(90deg);\n transform-origin: 25% 50%;\n position: relative;\n top: 0.5em;\n left: 0.55em;\n width: 2em;\n height: 1em;\n box-sizing: border-box;\n}\n\n.chk_738:checked + .slider_738 {\n background-color: limegreen;\n}\n\n.chk_738:focus + .slider_738 {\n box-shadow: 0 0 1px limegreen;\n}\n\n.chk_738:checked + .slider_738:before {\n transform: translateY(2.3em);\n}\n\n.chk_738:checked + .slider_738:after {\n transform: rotateZ(90deg) rotateY(180deg) translateY(0.45em) translateX(-1.4em);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"fa88ef","snapshot":null,"tags":null,"title":"card by G4b413l","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5889,"cssLen":1911,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Social\n \n \n \n \n

","css":".card svg {\n height: 25px;\n}\n\n.card {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #e7e7e7;\n box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\n overflow: hidden;\n height: 50px;\n width: 200px;\n}\n\n.card::before, .card::after {\n position: absolute;\n display: flex;\n align-items: center;\n width: 50%;\n height: 100%;\n transition: 0.25s linear;\n z-index: 1;\n}\n\n.card::before {\n content: \"\";\n left: 0;\n justify-content: flex-end;\n background-color: #4d60b6;\n}\n\n.card::after {\n content: \"\";\n right: 0;\n justify-content: flex-start;\n background-color: #4453a6;\n}\n\n.card:hover {\n box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);\n}\n\n.card:hover span {\n opacity: 0;\n z-index: -3;\n}\n\n.card:hover::before {\n opacity: 0.5;\n transform: translateY(-100%);\n}\n\n.card:hover::after {\n opacity: 0.5;\n transform: translateY(100%);\n}\n\n.card span {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n height: 100%;\n color: whitesmoke;\n font-family: 'Fira Mono', monospace;\n font-size: 24px;\n font-weight: 700;\n opacity: 1;\n transition: opacity 0.25s;\n z-index: 2;\n}\n\n.card .social-link {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 25%;\n height: 100%;\n color: whitesmoke;\n font-size: 24px;\n text-decoration: none;\n transition: 0.25s;\n}\n\n.card .social-link svg {\n text-shadow: 1px 1px rgba(31, 74, 121, 0.7);\n transform: scale(1);\n}\n\n.card .social-link:hover {\n background-color: rgba(249, 244, 255, 0.774);\n animation: bounce_613 0.4s linear;\n}\n\n@keyframes bounce_613 {\n 40% {\n transform: scale(1.4);\n }\n\n 60% {\n transform: scale(0.8);\n }\n\n 80% {\n transform: scale(1.2);\n }\n\n 100% {\n transform: scale(1);\n }\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"a671ae","snapshot":null,"tags":null,"title":"card by Bastiennnn","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":882,"cssLen":1023,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n.card {\n  width: 300px;\n  height: 400px;\n  margin: 0 auto;\n  background-color: #24233b;\n  border-radius: 8px;\n  z-index: 1;\n  box-shadow: 0px 10px 10px rgb(73, 70, 92);\n  transition: 0.5s;\n}\n\n.card:hover {\n  transform: translateY(-7px);\n  box-shadow: 0px 10px 10px black;\n}\n\n.top {\n  display: flex;\n  align-items: center;\n  padding-left: 10px;\n}</textarea\n    >\n  </div>\n</div>\n","css":".card {\n  width: 300px;\n  height: 400px;\n  margin: 0 auto;\n  background-color: #24233b;\n  border-radius: 8px;\n  z-index: 1;\n  box-shadow: 0px 10px 10px rgb(73, 70, 92);\n  transition: 0.5s;\n}\n\n.card:hover {\n  transform: translateY(-7px);\n  box-shadow: 0px 10px 10px black;\n}\n\n.top {\n  display: flex;\n  align-items: center;\n  padding-left: 10px;\n}\n\n.circle {\n  padding: 0 4px;\n}\n\n.circle2 {\n  display: inline-block;\n  align-items: center;\n  width: 10px;\n  height: 10px;\n  padding: 1px;\n  border-radius: 5px;\n}\n\n.red {\n  background-color: #ff605c;\n}\n\n.yellow {\n  background-color: #ffbd44;\n}\n\n.green {\n  background-color: #00ca4e;\n}\n\n.header {\n  margin: 5px;\n  margin-top: 5px;\n  border-radius: 5px;\n}\n\n#title2 {\n  color: white;\n  padding-left: 50px;\n  font-size: 15px;\n}\n\n.code-container {\n  text-align: center;\n}\n#code {\n  width: 270px;\n  height: 350px;\n  resize: none;\n  background-color: rgb(73, 70, 92);\n  border-radius: 5px;\n  border: none;\n  color: white;\n  padding: 10px;\n}\n#code:focus {\n  outline: none !important;\n}\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"bb41ab","snapshot":null,"tags":null,"title":"card by kennyotsu-monochromia","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":965,"cssLen":1697,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"card\">\n  <div class=\"title\">\n    <p class=\"heading\">MONOCHROMIA</p>\n    <p class=\"desc\">palette reference</p>\n  </div>\n  <div class=\"wrapper\">\n    <div class=\"color black\">\n      black\n      <span class=\"hex\">#000000</span>\n    </div>\n    <div class=\"color eerie-black\">\n      eerie-black\n      <span class=\"hex\">#1b1b1b</span>\n    </div>\n    <div class=\"color chinese-black\">\n      chinese-black\n      <span class=\"hex\">#141414</span>\n    </div>\n     <div class=\"color night-rider\">\n      night rider\n      <span class=\"hex\">#2e2e2e</span>\n    </div>\n    <div class=\"color chinese-white\">\n      chinese-white\n      <span class=\"hex\">#e1e1e1</span>\n    </div>\n    <div class=\"color anti-flash-white\">\n      anti-flash-white\n      <span class=\"hex\">#f3f3f3</span>\n    </div>\n    <div class=\"color white\">\n      white\n      <span class=\"hex\">#ffffff</span>\n    </div>\n  <div class=\"border\">common border radius <span>5px | 8px</span></div>\n  </div>\n</div>","css":".card {\n  width: 400px;\n  height: 350px;\n  --black: #000000;\n  --ch-black: #141414;\n  --eer-black: #1b1b1b;\n  --night-rider: #2e2e2e;\n  --white: #ffffff;\n  --af-white: #f3f3f3;\n  --ch-white: #e1e1e1;\n  font-family: Helvetica, sans-serif;\n}\n\n.wrapper {\n  margin: 2rem auto;\n  width: 250px;\n  font-size: small;\n}\n\n.title {\n  text-align: center;\n  color: #1b1b1b;\n}\n\n.heading {\n  font-weight: bold;\n  letter-spacing: 7px;\n  font-size: 1.5rem;\n  position: relative;\n  margin-bottom: 6px;\n}\n\n.heading::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background: #e8e8e8;\n  z-index: -1;\n  filter: blur(50px);\n  height: 50px;\n}\n\n.color {\n  padding: 10px 20px;\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n}\n\n.hex {\n  text-align: end;\n  font-family: monospace;\n  text-transform: uppercase;\n}\n\n.black {\n  background: var(--black);\n  color: var(--ch-white);\n  border-top-left-radius: 5px;\n  border-top-right-radius: 5px;\n}\n\n.eerie-black {\n  background: var(--ch-black);\n  color: var(--ch-white);\n}\n\n.chinese-black {\n  background: var(--eer-black);\n  color: var(--ch-white);\n}\n\n.night-rider {\n  background: var(--night-rider);\n  color: var(--ch-white);\n}\n\n.chinese-white {\n  background: var(--ch-white);\n  color: var(--night-rider);\n}\n\n.anti-flash-white {\n  background: var(--af-white);\n  color: var(--night-rider);\n}\n\n.white {\n  background: var(--white);\n  color: var(--night-rider);\n  border-bottom-left-radius: 5px;\n  border-bottom-right-radius: 5px;\n}\n\n.border {\n  color: var(--night-rider);\n  padding: 10px 10px;\n  text-align: center;\n}\n\n.border span {\n  border-radius: 5px;\n  color: var(--ch-white);\n  padding: 2px 4px;\n  background-color: var(--night-rider);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"370087","snapshot":null,"tags":null,"title":"card by Li-Deheng","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4596,"cssLen":9906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"<div class=\"like-dislike-container\">\n\t<div class=\"tool-box\">\n\t\t<button class=\"btn-close\">×</button>\n\t</div>\n\t<p class=\"text-content\">What did you think<br>of this post?</p>\t\t\t\t\n\t<div class=\"icons-box\">\n\t\t<div class=\"icons\">\n\t\t\t<label class=\"btn-label\" for=\"like-checkbox\">\n\t\t\t\t<span class=\"like-text-content\">123</span>\n\t\t\t\t<input class=\"input-box\" id=\"like-checkbox\" type=\"checkbox\">\n\t\t\t\t<svg class=\"svgs\" id=\"icon-like-solid\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z\"></path></svg>\n\t\t\t\t<svg class=\"svgs\" id=\"icon-like-regular\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z\"></path></svg>\n\t\t\t\t<div class=\"fireworks\">\n\t\t\t\t\t<div class=\"checked-like-fx\"></div>\n\t\t\t\t</div>\n\t\t\t</label>\n\t\t</div>\n\t\t<div class=\"icons\">\n\t\t\t<label class=\"btn-label\" for=\"dislike-checkbox\">\n\t\t\t\t<input class=\"input-box\" id=\"dislike-checkbox\" type=\"checkbox\">\n\t\t\t\t<div class=\"fireworks\">\n\t\t\t\t\t<div class=\"checked-dislike-fx\"></div>\n\t\t\t\t</div>\n\t\t\t\t<svg class=\"svgs\" id=\"icon-dislike-solid\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z\"></path></svg>\n\t\t\t\t<svg class=\"svgs\" id=\"icon-dislike-regular\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\"><path d=\"M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z\"></path></svg>\n\t\t\t\t<span class=\"dislike-text-content\">4</span>\n\t\t\t</label>\n\t\t</div>\n\t</div>\n</div>","css":".like-dislike-container {\n  --dark-grey: #353535;\n  --middle-grey: #767676;\n  --lightest-grey: linear-gradient(#fafafa,#ebebeb);\n  --shadow: 0 5px 15px 0 #00000026;\n  --shadow-active: 0 5px 5px 0 #00000026;\n  --border-radius-main: 10px;\n  --border-radius-icon: 50px;\n  position: relative;\n  display: flex;\n  text-align: center;\n  flex-direction: column;\n  align-items: center;\n  cursor: default;\n  color: var(--dark-grey);\n  opacity: .9;\n  margin: auto;\n  padding: 1.5rem;\n  font-weight: 600;\n  background: var(--lightest-grey);\n  max-width: max-content;\n  border-radius: var(--border-radius-main);\n  box-shadow: var(--shadow);\n  transition: .2s ease all;\n}\n\n.like-dislike-container:hover {\n  box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .tool-box {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  top: 0;\n  right: 0;\n  border-radius: var(--border-radius-main);\n}\n\n.like-dislike-container .btn-close {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  width: .8rem;\n  height: .8rem;\n  color: transparent;\n  font-size: 0;\n  cursor: pointer;\n  background-color: #ff000080;\n  border: none;\n  border-radius: var(--border-radius-main);\n  transition: .2s ease all;\n}\n\n.like-dislike-container .btn-close:hover {\n  width: 1rem;\n  height: 1rem;\n  font-size: 1rem;\n  color: #ffffff;\n  background-color: #ff0000cc;\n  box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .btn-close:active {\n  width: .9rem;\n  height: .9rem;\n  font-size: .9rem;\n  color: #ffffffde;\n  --shadow-btn-close: 0 3px 3px 0 #00000026;\n  box-shadow: var(--shadow-btn-close);\n}\n\n.like-dislike-container .text-content {\n  margin-bottom: 1rem;\n  font-size: 18px;\n  line-height: 1.6;\n  cursor: default;\n}\n\n.like-dislike-container .icons-box {\n  display: flex;\n}\n\n.like-dislike-container .icons {\n  position: relative;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  opacity: .6;\n  margin: 0 0.5rem;\n  cursor: pointer;\n  user-select: none;\n  border: 1px solid var(--middle-grey);\n  border-radius: var(--border-radius-icon);\n  transition: .2s ease all;\n}\n\n.like-dislike-container .icons:hover {\n  opacity: .9;\n  box-shadow: var(--shadow);\n}\n\n.like-dislike-container .icons:active {\n  opacity: .9;\n  box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .icons .btn-label {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 0 0.5rem;\n  cursor: pointer;\n  position: relative;\n}\n\n.like-dislike-container .like-text-content {\n  border-right: 0.1rem solid var(--dark-grey);\n  padding: 0 0.6rem 0 0.5rem;\n  pointer-events: none;\n}\n\n.like-dislike-container .dislike-text-content {\n  border-left: 0.1rem solid var(--dark-grey);\n  padding: 0 0.5rem 0 0.6rem;\n  pointer-events: none;\n}\n\n.like-dislike-container .icons .svgs {\n  width: 1.3rem;\n  fill: #000000;\n  box-sizing: content-box;\n  padding: 10px 10px;\n  transition: .2s ease all;\n}\n\n/* Hide the default checkbox */\n.like-dislike-container .icons .input-box {\n  position: absolute;\n  opacity: 0;\n  cursor: pointer;\n  height: 0;\n  width: 0;\n}\n\n.like-dislike-container .icons #icon-like-regular {\n  display: block;\n}\n\n.like-dislike-container .icons #icon-like-solid {\n  display: none;\n}\n\n.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {\n  animation: rotate-icon-like 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {\n  display: none;\n  animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {\n  display: block;\n  animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #icon-dislike-regular {\n  display: block;\n  transform: rotate(180deg);\n}\n\n.like-dislike-container .icons #icon-dislike-solid {\n  display: none;\n  transform: rotate(180deg);\n}\n\n.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {\n  animation: rotate-icon-dislike 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-regular {\n  display: none;\n  animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-solid {\n  display: block;\n  animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons .fireworks {\n  transform: scale(0.4);\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  right: 40px;\n  border-radius: 50%;\n  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n  animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ .fireworks > .checked-dislike-fx {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  left: 40px;\n  border-radius: 50%;\n  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n  animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n/* Shake Animation */\n@keyframes rotate-icon-like {\n  0% {\n    transform: rotate(0deg) translate3d(0, 0, 0);\n  }\n\n  25% {\n    transform: rotate(3deg) translate3d(0, 0, 0);\n  }\n\n  50% {\n    transform: rotate(-3deg) translate3d(0, 0, 0);\n  }\n\n  75% {\n    transform: rotate(1deg) translate3d(0, 0, 0);\n  }\n\n  100% {\n    transform: rotate(0deg) translate3d(0, 0, 0);\n  }\n}\n\n@keyframes rotate-icon-dislike {\n  0% {\n    transform: rotate(180deg) translate3d(0, 0, 0);\n  }\n\n  25% {\n    transform: rotate(183deg) translate3d(0, 0, 0);\n  }\n\n  50% {\n    transform: rotate(177deg) translate3d(0, 0, 0);\n  }\n\n  75% {\n    transform: rotate(181deg) translate3d(0, 0, 0);\n  }\n\n  100% {\n    transform: rotate(180deg) translate3d(0, 0, 0);\n  }\n}\n\n/* Checked Animation */\n@keyframes checked-icon-like {\n  0% {\n    transform: scale(0);\n    opacity: 0;\n  }\n\n  50% {\n    transform: scale(1.2) rotate(-10deg);\n  }\n}\n\n@keyframes checked-icon-dislike {\n  0% {\n    transform: scale(0) rotate(180deg);\n    opacity: 0;\n  }\n\n  50% {\n    transform: scale(1.2) rotate(170deg);\n  }\n}\n\n/* Fireworks Animation */\n@keyframes fireworks-position {\n  0%, 19.9% {\n    margin-top: 10%;\n    margin-left: 40%;\n  }\n\n  20%, 39.9% {\n    margin-top: 40%;\n    margin-left: 30%;\n  }\n\n  40%, 59.9% {\n    margin-top: 20%;\n    margin-left: 70%;\n  }\n\n  60%, 79.9% {\n    margin-top: 30%;\n    margin-left: 20%;\n  }\n\n  80%, 99.9% {\n    margin-top: 30%;\n    margin-left: 80%;\n  }\n}\n\n@keyframes fireworks-gravity {\n  to {\n    transform: translateY(200px);\n    opacity: 0;\n  }\n}\n\n@keyframes fireworks-bang {\n  to {\n    box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;\n  }\n}"}]}},"actionData":null,"errors":null}</article></body></html>