{"loaderData":{"0":null,"0-2":{"total":7185,"projects":[{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"e684ec","snapshot":null,"tags":null,"title":"card by Lakshay-art","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1939,"cssLen":4131,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".face {\n position: relative;\n width: 300px;\n height: 350px;\n background-color: #6C757D;\n background: linear-gradient(180deg,#452824 184px,#f2bbad 34px);\n /* transform: translateX(0px); */\n border-top-right-radius: 250px 350px;\n border-top-left-radius: 250px 350px;\n border-bottom-left-radius: 250px 250px;\n border-bottom-right-radius: 250px 250px;\n border: 5px solid black;\n}\n\n.hairs {\n height: 180px;\n background-color: #f2bbad;\n position: absolute;\n width: 290px;\n border-top-right-radius: 250px 350px;\n border-top-left-radius: 250px 350px;\n top: 25px;\n}\n\n.snow {\n transform: translateX(150px);\n transform-origin: right;\n}\n\n.mountain-cap-1, .mountain-cap-2, .mountain-cap-3,.mountain-cap-4 {\n position: absolute;\n top: 20px;\n border-left: 20px solid transparent;\n border-right: 20px solid transparent;\n border-top: 40px solid #452824;\n}\n\n.mountain-cap-1 {\n left: -65px;\n}\n\n.mountain-cap-2 {\n left: -35px;\n}\n\n.mountain-cap-3 {\n left: -5px;\n}\n\n.mountain-cap-4 {\n left: 25px;\n}\n\n.earL {\n border-top-right-radius: 250px 350px;\n border-top-left-radius: 250px 350px;\n border-bottom-left-radius: 250px 250px;\n border-bottom-right-radius: 250px 250px;\n height: 70px;\n width: 50px;\n background-color: #f2bbad;\n position: absolute;\n left: -30px;\n top: 150px;\n z-index: -1;\n border: 5px solid black;\n}\n\n.earR {\n border-top-right-radius: 250px 350px;\n border-top-left-radius: 250px 350px;\n border-bottom-left-radius: 250px 250px;\n border-bottom-right-radius: 250px 250px;\n height: 70px;\n width: 50px;\n background-color: #f2bbad;\n position: absolute;\n right: -30px;\n top: 150px;\n z-index: -4;\n border: 5px solid black;\n}\n\n.eyeR {\n border-top-right-radius: 250px 350px;\n border-top-left-radius: 250px 350px;\n border-bottom-left-radius: 250px 250px;\n border-bottom-right-radius: 250px 250px;\n height: 10px;\n width: 10px;\n background-color: black;\n position: absolute;\n left: 128px;\n top: 120px;\n z-index: 2;\n animation: blinkR 5s infinite linear;\n}\n\n.eyeL {\n border-top-right-radius: 250px 350px;\n border-top-left-radius: 250px 350px;\n border-bottom-left-radius: 250px 250px;\n border-bottom-right-radius: 250px 250px;\n height: 10px;\n width: 10px;\n background-color: black;\n position: absolute;\n right: 128px;\n top: 120px;\n z-index: 2;\n animation: blinkL 5s infinite linear;\n}\n\n.nose {\n background: #fefefe;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n color: #0F0;\n position: absolute;\n top: 220px;\n left: 140px;\n scale: 1 1;\n transition: all ease-in-out .3s;\n z-index: 100;\n}\n\n.nose:hover {\n scale: 1 1.25;\n top: 236px;\n}\n\n.nose:active {\n animation: propeller .5s infinite linear;\n transform-origin: 50% -55px;\n scale: 1 1.25;\n top: 220px;\n animation-delay: .5s;\n}\n\n@keyframes propeller {\n to {\n transform: rotateZ(360deg);\n }\n}\n\n@keyframes blinkL {\n 98% {\n height: 10px;\n width: 10px;\n right: 128px;\n top: 120px;\n }\n\n 100% {\n height: 3px;\n width: 11px;\n right: 126px;\n top: 123px;\n }\n}\n\n@keyframes blinkR {\n 98% {\n height: 10px;\n width: 10px;\n left: 128px;\n top: 120px;\n }\n\n 100% {\n height: 3px;\n width: 11px;\n left: 126px;\n top: 123px;\n }\n}\n\n.nose:before {\n content: \"\";\n position: absolute;\n top: -64px;\n left: 50%;\n border: 10px solid transparent;\n border-bottom: 62px solid #fefefe;\n transform: translateX(-50%);\n}\n\n.mouth {\n position: absolute;\n top: 300px;\n left: 140px;\n background: #a36655;\n width: 25px;\n height: 18px;\n border: 5px solid black;\n border-radius: 50%;\n transition: all .3s linear;\n}\n\n.face:active .mouth {\n top: 290px;\n width: 60px;\n height: 25px;\n left: 123px;\n border-radius: 7px 7px 130px 130px;\n}\n\n.face:active .smileL {\n height: 30px;\n width: 30px;\n}\n\n.face:active .smileR {\n height: 30px;\n width: 30px;\n}\n\n.bo {\n z-index: 10;\n zoom: 0.8;\n}\n\n.smileL {\n position: absolute;\n height: 0px;\n width: 0px;\n rotate: 310deg;\n top: 180px;\n left: 70px;\n transition: all .1s linear;\n}\n\n.smileR {\n position: absolute;\n height: 0px;\n width: 0px;\n rotate: 310deg;\n top: 180px;\n right: 70px;\n transition: all .1s linear;\n}\n\n"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"3dd604","snapshot":null,"tags":null,"title":"card by Saad3092003","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":67,"cssLen":768,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hello There

\n","css":".one-div {\n position: relative;\n height: 250px;\n width: 200px;\n background-color: rgb(15, 15, 15);\n transform-style: preserve-3d;\n animation: rot 2s infinite ease;\n border-radius: 20px;\n box-shadow: 0 0 50px 0px, inset 0 0 90px 0px;\n color: white;\n transition: 1.5s;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.one-div .text {\n opacity: 0;\n transition: all 0.5s;\n}\n\n.one-div:hover.one-div .text {\n scale: 1.2;\n opacity: 0.7;\n}\n\n.one-div:hover {\n box-shadow: 0 0 30px 1000px black, inset 5px 5px 5px 0px rgb(31, 31, 31);\n}\n\n@keyframes rot {\n 0% {\n transform: rotateX(-15deg) translateY(0px);\n }\n\n 50% {\n transform: rotateX(-15deg) translateY(-10px);\n }\n\n 100% {\n transform: rotateX(-15deg) translateY(0px);\n }\n}\n"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"e8c064","snapshot":null,"tags":null,"title":"card by themrsami","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":9126,"cssLen":2594,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Welcome!

\n Thanks for visiting our website. Stay connected with us on social media.\n

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

\n\n \n Close\n \n

\n\n","css":".mb-4{margin-bottom:1rem}.mt-4{margin-top:1rem}.flex{display:flex}.w-80{width:20rem}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-4 > :not([hidden]) ~ :not([hidden]){--tw-space-x-reverse:0;margin-right:calc(1rem * var(--tw-space-x-reverse));margin-left:calc(1rem * calc(1 - var(--tw-space-x-reverse)))}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-pink-500{--tw-gradient-to:#ec4899 var(--tw-gradient-to-position)}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.text-blue-400{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition{transition-property:color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.hover\\:text-blue-300:hover{--tw-text-opacity:1;color:rgb(147 197 253 / var(--tw-text-opacity))}.hover\\:text-blue-400:hover{--tw-text-opacity:1;color:rgb(96 165 250 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:11:08.000Z","isPrivate":0,"projectId":"460d01","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:11:08.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":217,"cssLen":1199,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

John Doe

\n Developer\n

","css":".card {\n overflow: visible;\n position: relative;\n width: 190px;\n height: 254px;\n background: #fff;\n box-shadow: 0 2px 10px rgba(0, 0, 0, .2);\n}\n\n.card:before,\n.card:after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 4px;\n background: #fff;\n transition: 0.5s;\n z-index: -99;\n}\n\n.details {\n position: absolute;\n left: -10px;\n right: 0;\n bottom: 5px;\n height: 60px;\n text-align: center;\n text-transform: uppercase;\n}\n\n/*Image*/\n.imgbox {\n position: absolute;\n top: 10px;\n left: 10px;\n bottom: 10px;\n right: 10px;\n background: #222;\n transition: 0.5s;\n z-index: 1;\n}\n\n.img {\n background: #4158D0;\n background-image: linear-gradient(45deg, #4158D0, #C850C0);\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n}\n\n/*Text*/\n.title {\n font-weight: 600;\n font-size: 20px;\n color: #777;\n}\n\n.caption {\n font-weight: 500;\n font-size: 16px;\n color: #4158D0;\n display: block;\n margin-top: 5px;\n}\n\n/*Hover*/\n.card:hover .imgbox {\n bottom: 80px;\n}\n\n.card:hover:before {\n transform: rotate(20deg);\n}\n\n.card:hover:after {\n transform: rotate(10deg);\n box-shadow: 0 2px 20px rgba(0, 0, 0, .2);\n}"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"1f506a","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":925,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

your content here ↓

","css":".card {\n width: 190px;\n height: 254px;\n background: lightgrey;\n position: relative;\n transform: skewY(-10deg);\n border: 5px solid #6d74e3;\n box-sizing: border-box;\n transition: all 0.3s;\n}\n\n.card::before {\n content: '';\n width: 10px;\n height: 254px;\n background: #6d74e3;\n position: absolute;\n top: -5px;\n left: -14.7px;\n transform-origin: right;\n transform: skewY(45deg);\n border: none;\n transition: all 0.5s;\n}\n\n.card::after {\n content: '';\n height: 10px;\n width: 190px;\n background: #6d74e3;\n position: absolute;\n top: -14.7px;\n left: -5px;\n transform-origin: bottom;\n transform: skewX(45deg);\n border: none;\n transition: all 0.5s;\n}\n\n.card:hover {\n transform: skewY(0deg);\n}\n\n.card:hover::before {\n width: 0px;\n height: 249px;\n left: 0;\n top: 0.1px;\n}\n\n.card:hover::after {\n width: 184px;\n height: 0px;\n left: 0.1px;\n top: 0;\n}\n\n.card__content {\n padding: 10px;\n color: #323232;\n}"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"873fab","snapshot":null,"tags":null,"title":"card by ahmedyasserdev","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":235,"cssLen":916,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Unique Card

Hover over me for a distinct effect!

\n","css":".unique-card {\n position: relative;\n width: 300px;\n height: 200px;\n overflow: hidden;\n border-radius: 15px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.unique-card:hover {\n transform: scale(1.1);\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);\n}\n\n.card-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n color: #888;\n z-index: 2;\n transition: color 0.3s;\n}\n\n.unique-card:hover .card-content {\n color: #ff7e5f;\n}\n\n.background-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(52, 73, 94, 0.7);\n border-radius: 15px;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.unique-card:hover .background-overlay {\n opacity: 1;\n}\n\n.card-title {\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.card-description {\n font-size: 16px;\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"627ec4","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1943,"cssLen":9217,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n \n

\n NOT FOUND\n

\n","css":"/* Design Inspired by one of Stefan Devai's Design on Dribble */\n\n.main_wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30em;\n height: 30em;\n}\n\n.main {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-top: 5em;\n}\n\n.antenna {\n width: 5em;\n height: 5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #f27405;\n margin-bottom: -6em;\n margin-left: 0em;\n z-index: -1;\n}\n.antenna_shadow {\n position: absolute;\n background-color: transparent;\n width: 50px;\n height: 56px;\n margin-left: 1.68em;\n border-radius: 45%;\n transform: rotate(140deg);\n border: 4px solid transparent;\n box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;\n -moz-box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;\n}\n.antenna::after {\n content: \"\";\n position: absolute;\n margin-top: -9.4em;\n margin-left: 0.4em;\n transform: rotate(-25deg);\n width: 1em;\n height: 0.5em;\n border-radius: 50%;\n background-color: #f69e50;\n}\n.antenna::before {\n content: \"\";\n position: absolute;\n margin-top: 0.2em;\n margin-left: 1.25em;\n transform: rotate(-20deg);\n width: 1.5em;\n height: 0.8em;\n border-radius: 50%;\n background-color: #f69e50;\n}\n.a1 {\n position: relative;\n top: -102%;\n left: -130%;\n width: 12em;\n height: 5.5em;\n border-radius: 50px;\n background-image: linear-gradient(\n #171717,\n #171717,\n #353535,\n #353535,\n #171717\n );\n transform: rotate(-29deg);\n clip-path: polygon(50% 0%, 49% 100%, 52% 100%);\n}\n.a1d {\n position: relative;\n top: -211%;\n left: -35%;\n transform: rotate(45deg);\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #979797;\n z-index: 99;\n}\n.a2 {\n position: relative;\n top: -210%;\n left: -10%;\n width: 12em;\n height: 4em;\n border-radius: 50px;\n background-color: #171717;\n background-image: linear-gradient(\n #171717,\n #171717,\n #353535,\n #353535,\n #171717\n );\n margin-right: 5em;\n clip-path: polygon(\n 47% 0,\n 47% 0,\n 34% 34%,\n 54% 25%,\n 32% 100%,\n 29% 96%,\n 49% 32%,\n 30% 38%\n );\n transform: rotate(-8deg);\n}\n.a2d {\n position: relative;\n top: -294%;\n left: 94%;\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #979797;\n z-index: 99;\n}\n\n.notfound_text {\n background-color: black;\n padding-left: 0.3em;\n padding-right: 0.3em;\n font-size: 0.75em;\n color: white;\n letter-spacing: 0;\n border-radius: 5px;\n z-index: 10;\n}\n.tv {\n width: 17em;\n height: 9em;\n margin-top: 3em;\n border-radius: 15px;\n background-color: #d36604;\n display: flex;\n justify-content: center;\n border: 2px solid #1d0e01;\n box-shadow: inset 0.2em 0.2em #e69635;\n}\n.tv::after {\n content: \"\";\n position: absolute;\n width: 17em;\n height: 9em;\n border-radius: 15px;\n background: repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%)\n 50% 0/2500px 2500px,\n repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px\n 2500px;\n background-blend-mode: difference;\n opacity: 0.09;\n}\n.curve_svg {\n position: absolute;\n margin-top: 0.25em;\n margin-left: -0.25em;\n height: 12px;\n width: 12px;\n}\n.display_div {\n display: flex;\n align-items: center;\n align-self: center;\n justify-content: center;\n border-radius: 15px;\n box-shadow: 3.5px 3.5px 0px #e69635;\n}\n.screen_out {\n width: auto;\n height: auto;\n\n border-radius: 10px;\n}\n.screen_out1 {\n width: 11em;\n height: 7.75em;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n}\n.screen {\n width: 13em;\n height: 7.85em;\n font-family: Montserrat;\n border: 2px solid #1d0e01;\n background: repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px\n 2500px,\n repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px\n 2500px;\n background-blend-mode: difference;\n animation: b 0.2s infinite alternate;\n border-radius: 10px;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: #252525;\n letter-spacing: 0.15em;\n text-align: center;\n}\n@keyframes b {\n 100% {\n background-position: 50% 0, 60% 50%;\n }\n}\n\n/* Another Error Screen to Use \n\n.screen {\n width: 13em;\n height: 7.85em;\n position: relative;\n background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);\n border-radius: 10px;\n border: 2px solid black;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: #252525;\n letter-spacing: 0.15em;\n text-align: center;\n overflow: hidden;\n}\n.screen:before, .screen:after {\n content: \"\";\n position: absolute;\n left: 0;\n z-index: 1;\n width: 100%;\n}\n.screen:before {\n top: 0;\n height: 68.4782608696%;\n background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);\n}\n.screen:after {\n bottom: 0;\n height: 21.7391304348%;\n background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);\n}\n\n */\n\n.lines {\n display: flex;\n column-gap: 0.1em;\n align-self: flex-end;\n}\n.line1,\n.line3 {\n width: 2px;\n height: 0.5em;\n background-color: black;\n border-radius: 25px 25px 0px 0px;\n margin-top: 0.5em;\n}\n.line2 {\n flex-grow: 1;\n width: 2px;\n height: 1em;\n background-color: black;\n border-radius: 25px 25px 0px 0px;\n}\n\n.buttons_div {\n width: 4.25em;\n align-self: center;\n height: 8em;\n background-color: #e69635;\n border: 2px solid #1d0e01;\n padding: 0.6em;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n row-gap: 0.75em;\n box-shadow: 3px 3px 0px #e69635;\n}\n.b1 {\n width: 1.65em;\n height: 1.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,\n -2px 0px 0px 1px black;\n}\n.b1::before {\n content: \"\";\n position: absolute;\n margin-top: 1em;\n margin-left: 0.5em;\n transform: rotate(47deg);\n border-radius: 5px;\n width: 0.1em;\n height: 0.4em;\n background-color: #000000;\n}\n.b1::after {\n content: \"\";\n position: absolute;\n margin-top: 0.9em;\n margin-left: 0.8em;\n transform: rotate(47deg);\n border-radius: 5px;\n width: 0.1em;\n height: 0.55em;\n background-color: #000000;\n}\n.b1 div {\n content: \"\";\n position: absolute;\n margin-top: -0.1em;\n margin-left: 0.65em;\n transform: rotate(45deg);\n width: 0.15em;\n height: 1.5em;\n background-color: #000000;\n}\n.b2 {\n width: 1.65em;\n height: 1.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,\n -2px 0px 0px 1px black;\n}\n.b2::before {\n content: \"\";\n position: absolute;\n margin-top: 1.05em;\n margin-left: 0.8em;\n transform: rotate(-45deg);\n border-radius: 5px;\n width: 0.15em;\n height: 0.4em;\n background-color: #000000;\n}\n.b2::after {\n content: \"\";\n position: absolute;\n margin-top: -0.1em;\n margin-left: 0.65em;\n transform: rotate(-45deg);\n width: 0.15em;\n height: 1.5em;\n background-color: #000000;\n}\n.speakers {\n display: flex;\n flex-direction: column;\n row-gap: 0.5em;\n}\n.speakers .g1 {\n display: flex;\n column-gap: 0.25em;\n}\n.speakers .g1 .g11,\n.g12,\n.g13 {\n width: 0.65em;\n height: 0.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow: inset 1.25px 1.25px 1px #b49577;\n}\n.speakers .g {\n width: auto;\n height: 2px;\n background-color: #171717;\n}\n\n.bottom {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 8.7em;\n}\n.base1 {\n height: 1em;\n width: 2em;\n border: 2px solid #171717;\n background-color: #4d4d4d;\n margin-top: -0.15em;\n z-index: -1;\n}\n.base2 {\n height: 1em;\n width: 2em;\n border: 2px solid #171717;\n background-color: #4d4d4d;\n margin-top: -0.15em;\n z-index: -1;\n}\n.base3 {\n position: absolute;\n height: 0.15em;\n width: 17.5em;\n background-color: #171717;\n margin-top: 0.8em;\n}\n\n.text_404 {\n position: absolute;\n display: flex;\n flex-direction: row;\n column-gap: 6em;\n z-index: -5;\n margin-bottom: 2em;\n align-items: center;\n justify-content: center;\n opacity: 0.5;\n font-family: Montserrat;\n}\n.text_4041 {\n transform: scaleY(24.5) scaleX(9);\n}\n.text_4042 {\n transform: scaleY(24.5) scaleX(9);\n}\n.text_4043 {\n transform: scaleY(24.5) scaleX(9);\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"ea8042","snapshot":null,"tags":null,"title":"card by Satwinder04","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1058,"cssLen":1128,"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":"#cal-body {\n width: 400px;\n border-radius: 20px;\n background: #dde1e7;\n box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);\n padding: 45px;\n scale: 0.6;\n}\n\n.input input {\n height: 100px;\n width: 100%;\n border-radius: 10px;\n background: #dde1e7;\n box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);\n border: 0;\n color: rgb(116, 116, 116);\n font-size: 2.5rem;\n padding: 0 30px;\n}\n\n.input input:focus {\n outline: none;\n background: #dde1e7;\n box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);\n}\n\n.buttons button {\n cursor: pointer;\n height: 60px;\n width: 60px;\n border: 0;\n font-size: 2rem;\n border-radius: 50px;\n background: #dde1e7;\n box-shadow: -5px -5px 9px rgba(255,255,255,0.45), 5px 5px 9px rgba(94,104,121,0.3);\n color: rgb(137, 137, 137);\n}\n\n.buttons button:focus {\n background: #dde1e7;\n box-shadow: inset -5px -5px 9px rgba(255,255,255,0.45), inset 5px 5px 9px rgba(94,104,121,0.3);\n}\n\n.buttons {\n padding-top: 30px;\n display: flex;\n justify-content: space-between;\n}"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"43077a","snapshot":null,"tags":null,"title":"card by Saad3092003","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":117,"cssLen":1312,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".obj {\n position: relative;\n width: 200px;\n height: 200px;\n /* background-color: rgb(96, 96, 232); */\n transform-style: preserve-3d;\n transition: 0.5s all;\n transform: rotateX(-25deg) rotateY(20deg);\n}\n\n.objchild {\n animation: rotate 4s infinite linear;\n transform-style: preserve-3d;\n position: absolute;\n width: 100%;\n height: 100%;\n /* background:linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) ) ; */\n}\n\n.objchild::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n /* background: rgb(37, 101, 230); */\n /* background: radial-gradient(center center, farthest-side , #9993, transparent); */\n filter: blur(20px);\n box-shadow: 0 0 200px 15px white;\n transform: rotateX(90deg) scale(1.1) translateZ(-120px);\n}\n\n.inn6 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(21, 21, 21);\n transform: rotateX(90deg) translateZ(100px);\n animation: updown 4s infinite ease-in-out;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate3d(0,1,0,0deg);\n }\n\n 100% {\n transform: rotate3d(0,1,0,360deg);\n }\n}\n\n@keyframes updown {\n 0% {\n transform: translateY(100px) rotateX(90deg) translateZ(100px);\n }\n\n 50% {\n transform: translateY(200px);\n }\n\n 100% {\n transform: translateY(100px) rotateX(450deg) translateZ(100px);\n }\n}"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"c4183a","snapshot":null,"tags":null,"title":"card by sahilxkhadka","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":8069,"cssLen":3364,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Hover Them\n

\n \n

\n \n Home\n \n

\n \n

\n \n Messages\n \n

\n \n

\n \n User\n \n

\n \n

\n \n Settings\n \n

","css":".absolute{position:absolute}.relative{position:relative}.-top-8{top:-2rem}.left-\\[50\\%\\]{left:50%}.z-20{z-index:20}.mb-6{margin-bottom:1.5rem}.flex{display:flex}.h-10{height:2.5rem}.w-10{width:2.5rem}.origin-left{transform-origin:left}.-translate-x-\\[50\\%\\]{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-0{--tw-scale-x:0;--tw-scale-y:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-teal-500{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(20 184 166 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-orange-500{--tw-gradient-to:#f97316 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-black{font-weight:900}.font-medium{font-weight:500}.text-transparent{color:transparent}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.group:hover .group-hover\\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"558118","snapshot":null,"tags":null,"title":"card by NouvelleTechno","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":460,"cssLen":1760,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 🍪 Cookie Notice\n

We use cookies to ensure that we give you the best experience on our website. Read cookies policies.

\n \n Manage preferences\n \n

\n \n \n

","css":".card {\n width: 370px;\n background: white;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 40px;\n border-radius: 40px;\n background-color: hsl(120deg 20% 95%);\n box-shadow: 17px 17px 34px 0px rgb(124, 134, 124), \n inset -8px -8px 16px 0px rgba(117, 133, 117, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n\n.card .title {\n color: black;\n font-size: 2rem;\n font-weight: 600;\n}\n\n.card .description {\n color: black;\n margin-top: 10px;\n margin-bottom: 20px;\n}\n\n.card .prefs {\n color: blue;\n font-size: .8em;\n margin-bottom: 20px;\n}\n\n.card .actions {\n margin-top: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.card button {\n color: white;\n border: none;\n background: none;\n padding: 20px;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1.2em;\n font-weight: bold;\n}\n\n.card .decline {\n color: rgb(255, 0, 0);\n box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), \n inset -8px -8px 16px 0px rgba(92, 92, 92, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n\n.card .valid {\n color: rgb(0, 156, 0);\n box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), \n inset -8px -8px 16px 0px rgba(121, 121, 121, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n\n.card .decline:hover {\n color: white;\n background-color: rgb(255, 0, 0);\n box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), \n inset -8px -8px 16px 0px rgba(134, 20, 20, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n\n.card .valid:hover {\n color: white;\n background-color: rgb(0, 156, 0);\n box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), \n inset -8px -8px 16px 0px rgba(47, 134, 20, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"5a1423","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":221,"cssLen":779,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Total Page Views

89,400

21% more than last month

\n \n

","css":".stats {\n display: inline-grid;\n background-color: #111111;\n color: #fff;\n border-radius: 1rem;\n border: 1px solid gray;\n}\n\n.shadow {\n box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n}\n\n.stat {\n display: inline-grid;\n width: 100%;\n grid-template-columns: repeat(1, 1fr);\n column-gap: 1rem;\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.stat-title {\n grid-column-start: 1;\n white-space: nowrap;\n color: rgb(197, 194, 194);\n}\n\n.stat-value {\n grid-column-start: 1;\n white-space: nowrap;\n font-size: 2.25rem;\n line-height: 2.5rem;\n font-weight: 800;\n}\n\n.stat-desc {\n grid-column-start: 1;\n white-space: nowrap;\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgb(197, 194, 194);\n}"}]}},"actionData":null,"errors":null}