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

\n \n

Some Fomous
Creative Designer

\n \n \n \n
\n \n \n \n
\n \n \n \n
\n \n \n \n

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background: #f00;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(315deg,#03a9f4,#ff0058);\n}\n\n.card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(315deg,#03a9f4,#ff0058);\n filter: blur(30px);\n}\n\n.card b {\n position: absolute;\n inset: 6px;\n background: rgba(0, 0, 0, 0.6);\n z-index: 2;\n}\n\n.card img {\n position: absolute;\n z-index: 3;\n scale: 0.8;\n opacity: 0.25;\n transition: 0.5s;\n}\n\n.card:hover img {\n scale: 0.5;\n opacity: 0.9;\n transform: translateY(-70px);\n}\n\n.card .content {\n position: absolute;\n z-index: 3;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: scale(0);\n transition: 0.5s;\n}\n\n.card:hover .content {\n transform: scale(1);\n bottom: 25px;\n}\n\n.content .title {\n position: relative;\n color: #fff;\n font-weight: 500;\n line-height: 1em;\n font-size: 1em;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n text-align: center;\n}\n\n.content .title span {\n font-weight: 300;\n font-size: 0.70em;\n}\n\n.content .sci {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin-top: 5px;\n}\n\n.sci li {\n list-style: none;\n}\n\n.sci li .fa-brands {\n width: 14px;\n}\n\n.sci li .fa-facebook {\n width: 10px;\n}\n\n.sci li a {\n position: relative;\n text-decoration: none;\n color: rgba(255, 255, 255, 0.5);\n background: rgba(0, 0, 0, 0.2);\n fill: currentColor;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n transition: 0.5s;\n}\n\n.sci li a:hover {\n fill: currentColor;\n color: rgba(255, 255, 255, 1);\n}\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"c1af63","snapshot":null,"tags":null,"title":"card by kamehame-ha","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":392,"cssLen":709,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

","css":".cards {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.cards .red {\n background-color: #f43f5e;\n}\n\n.cards .blue {\n background-color: #3b82f6;\n}\n\n.cards .green {\n background-color: #22c55e;\n}\n\n.cards .card {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n height: 100px;\n width: 250px;\n border-radius: 10px;\n color: white;\n cursor: pointer;\n transition: 400ms;\n}\n\n.cards .card p.tip {\n font-size: 1em;\n font-weight: 700;\n}\n\n.cards .card p.second-text {\n font-size: .7em;\n}\n\n.cards .card:hover {\n transform: scale(1.1, 1.1);\n}\n\n.cards:hover > .card:not(:hover) {\n filter: blur(10px);\n transform: scale(0.9, 0.9);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"f969d2","snapshot":null,"tags":null,"title":"card by SteveBloX","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36,"cssLen":561,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Click me\n

","css":".card {\n box-sizing: border-box;\n width: 190px;\n height: 254px;\n background: rgba(217, 217, 217, 0.58);\n border: 1px solid white;\n box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22);\n backdrop-filter: blur(6px);\n border-radius: 17px;\n text-align: center;\n cursor: pointer;\n transition: all 0.5s;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n font-weight: bolder;\n color: black;\n}\n\n.card:hover {\n border: 1px solid black;\n transform: scale(1.05);\n}\n\n.card:active {\n transform: scale(0.95) rotateZ(1.7deg);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"2aaa21","snapshot":null,"tags":null,"title":"card by Yaseen549","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":178,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 30px;\n background: #212121;\n box-shadow: 15px 15px 30px rgb(25, 25, 25),\n -15px -15px 30px rgb(60, 60, 60);\n}\n\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"eb5f14","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":481,"cssLen":711,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n","css":".inline-block {\n display: inline-block\n}\n\n.flex {\n display: flex\n}\n\n.h-3 {\n height: 0.75rem\n}\n\n.h-64 {\n height: 16rem\n}\n\n.w-3 {\n width: 0.75rem\n}\n\n.w-48 {\n width: 12rem\n}\n\n.gap-1 {\n gap: 0.25rem\n}\n\n.rounded-full {\n border-radius: 9999px\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n\n.bg-pink-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(236 72 153 / var(--tw-bg-opacity))\n}\n\n.bg-purple-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(168 85 247 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.p-2 {\n padding: 0.5rem\n}"},{"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}"}]}},"actionData":null,"errors":null}