{"loaderData":{"0":null,"0-3":{"total":7364,"projects":[{"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}"},{"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"}]}},"actionData":null,"errors":null}</article></body></html>