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

\n \n

Photos

\n \n

","css":".card {\n position: relative;\n background: #a68b8a;\n width: 190px;\n height: 265px;\n cursor: pointer;\n transition: all .3 ease;\n overflow: visible;\n box-shadow: 0px 1px 5px rgba(0, 0, 0, .3);\n}\n\n.product {\n content: \"\";\n position: absolute;\n top: 10%;\n left: 50%;\n transform: translate(-50%, 0);\n width: 150px;\n height: 150px;\n background-color: #faf3e8;\n z-index: 1;\n}\n\n.product p {\n font-size: 17px;\n text-align: center;\n color: #181818;\n line-height: 150px;\n}\n\n.shine {\n position: relative;\n top: 0;\n left: 0;\n width: 190px;\n height: 265px;\n overflow: hidden;\n}\n\n.shine-effect {\n position: absolute;\n top: -15%;\n left: 150%;\n width: 25px;\n height: 400px;\n background-color: #ffffff2a;\n box-shadow: 0 0 15px 2px #ffffff42;\n transform: rotate(25deg);\n transition: all 1s cubic-bezier(0.78, 0.02, 0.5, 0.77);\n z-index: 5;\n}\n\n.pattern-1 {\n position: absolute;\n top: 0;\n left: 0;\n width: 125px;\n height: auto;\n z-index: 2;\n}\n\n.pattern-2 {\n position: absolute;\n top: -10%;\n left: -10%;\n width: 200px;\n height: auto;\n z-index: 2;\n}\n\n.tree {\n position: absolute;\n bottom: 1%;\n right: -2%;\n width: 100px;\n height: auto;\n transform-origin: 100% 0;\n transform: rotate(-15deg);\n z-index: 3;\n}\n\n.tape-1 {\n position: absolute;\n top: -20%;\n left: 2%;\n width: 35px;\n height: auto;\n filter: drop-shadow(1px 3px 3px #18181870);\n z-index: 6;\n}\n\n.tape-2 {\n position: absolute;\n top: -25%;\n right: 2%;\n width: 35px;\n height: auto;\n filter: drop-shadow(1px 3px 3px #18181870);\n z-index: 6;\n}\n\n.card:hover {\n transform: scale(1.02);\n}\n\n.card:hover .tape-1 {\n transform: scale(1);\n}\n\n.card:hover .tape-2 {\n transform: scale(1);\n}\n\n.card:hover .shine-effect {\n left: -100%;\n}\n\n.card:active {\n transform: scale(1.02) translate(0, 5%);\n}\n\n.card:active .tape-1 {\n transform-origin: 0 100%;\n transform: scaleY(1.1);\n}\n\n.card:active .tape-2 {\n transform-origin: 0 100%;\n transform: scaleY(1.1);\n}\n\n.fil-tape-10 {\n fill: #A99473\n}\n\n.fil-tape-11 {\n fill: #BBAA88;\n fill-rule: nonzero\n}\n\n.fil-tape-20 {\n fill: #A99473\n}\n\n.fil-tape-21 {\n fill: #BBAA88;\n fill-rule: nonzero\n}\n\n.fil-pattern-1 {\n fill: #f3dfde\n}\n\n.fil-pattern-2 {\n fill: #333333;\n fill-rule: nonzero\n}\n\n.fil0 {\n fill: #333333\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"f6343c","snapshot":null,"tags":null,"title":"card by mirbasit01","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":447,"cssLen":962,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n Different ways to use HTML, CSS, JAVA SCRIPT, IN REACT\n

\n HTML\n CSS\n JAVA SCRIPT\n REACT \n

\n \n

\n","css":".card {\n width: 330px;\n height: 370px;\n padding: 20px;\n color: white;\n background: linear-gradient(#212121, #212121) padding-box,\n linear-gradient(145deg, transparent 35%, #0a89a8, #252e31) border-box;\n border: 2px solid transparent;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n transform-origin: top bottom;\n transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n}\n\n.card .main-content {\n flex: 1;\n}\n\n.card .header span:first-child {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card .heading {\n font-size: 24px;\n margin: 24px 0 16px;\n font-weight: 600;\n}\n\n.card .categories {\n display: flex;\n gap: 10px;\n}\n\n.card .categories span {\n background-color: #0a89a8;\n padding: 4px 8px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 12px;\n border-radius: 50em;\n}\n\n.card .footer {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card:hover {\n rotate: -6deg;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"b59b94","snapshot":null,"tags":null,"title":"card by sabbircoder07","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1530,"cssLen":6036,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Your Result

of 100

excellent

\n You scored higher than 65% of the people who have taken these tests.\n

\n \n

","css":".results-summary-container {\n font-family: \"Hanken Grotesk\", sans-serif;\n display: flex;\n width: 320px;\n border-radius: 30px;\n box-shadow: 10px 20px 20px rgba(120, 87, 255, 0.3);\n backface-visibility: hidden;\n}\n\n.heading-primary,\n.heading-secondary,\n.heading-tertiary {\n color: #ffffff;\n text-transform: capitalize;\n margin-bottom: 10px;\n text-transform: uppercase;\n letter-spacing: 1px;\n}\n\n.heading-primary {\n font-size: 36px;\n font-weight: 600;\n background-image: linear-gradient(to right, #f7bb97, #dd5e89);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n transform: scale(1.6);\n}\n\n.heading-secondary {\n font-size: 24px;\n font-weight: 600;\n margin-top: 20px;\n letter-spacing: 2px;\n}\n\n.heading-tertiary {\n font-size: 20px;\n font-weight: 500;\n color: hsl(221, 100%, 96%);\n}\n\n.paragraph {\n font-size: 17px;\n line-height: 1.4;\n color: hsl(221, 100%, 96%);\n}\n\n.paragraph-text-box {\n width: 100%;\n}\n\n.text-center {\n text-align: center;\n}\n\n.margin-1 {\n margin-bottom: 10px;\n}\n\n.results-summary-container__result {\n width: 100%;\n display: flex;\n flex-direction: column;\n text-align: center;\n align-items: center;\n justify-content: center;\n padding: 20px;\n border-radius: 30px;\n background-image: linear-gradient(to bottom, #734b6d, #42275a);\n animation: gradient 9s infinite alternate linear;\n .result-box {\n width: 160px;\n height: 160px;\n border-radius: 50%;\n background-image: linear-gradient(-45deg, #ef629f, #42275a);\n background-color: #56ab2f;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n animation: gradient 9s linear infinite;\n}\n\n.result {\n margin-top: -8px;\n font-size: 16px;\n font-weight: 400;\n color: hsl(241, 100%, 89%);\n}\n}\n\n.btn {\n width: 240px;\n padding: 10px;\n color: #ffffff;\n background-image: linear-gradient(to right, #aa076b, #61045f);\n border: none;\n border-radius: 100px;\n font-size: 14px;\n text-transform: uppercase;\n letter-spacing: 3px;\n font-weight: 500;\n cursor: pointer;\n margin: 20px 0 2px 0;\n transition: all 0.3s;\n}\n\n.btn:hover {\n transform: translateY(5px);\n background-image: linear-gradient(to left, #aa076b, #61045f);\n}\n\n@keyframes gradient {\n 0% {\n background-position: 0% 50%;\n background-image: linear-gradient(-45deg, #ef629f, #42275a);\n }\n\n 50% {\n background-position: 100% 50%;\n background-image: linear-gradient(to bottom, #aa076b, #61045f);\n }\n\n 100% {\n background-position: 0% 50%;\n background-image: linear-gradient(to top, #ef629f, #42275a);\n }\n}\n\n.confetti {\n display: flex;\n justify-content: center;\n align-items: center;\n position: absolute;\n width: 300px;\n height: 60%;\n overflow: hidden;\n z-index: 1000;\n}\n\n.confetti-piece {\n position: absolute;\n width: 10px;\n height: 20px;\n background-color: hsl(39, 100%, 56%);\n top: 0;\n opacity: 0;\n animation: makeItRain 3000ms infinite linear;\n}\n\n.confetti-piece:nth-child(1) {\n left: 7%;\n transform: rotate(-10deg);\n animation-delay: 182ms;\n animation-duration: 2000ms;\n}\n\n.confetti-piece:nth-child(2) {\n left: 14%;\n transform: rotate(20deg);\n animation-delay: 161ms;\n animation-duration: 2076ms;\n}\n\n.confetti-piece:nth-child(3) {\n left: 21%;\n transform: rotate(-51deg);\n animation-delay: 481ms;\n animation-duration: 2103ms;\n}\n\n.confetti-piece:nth-child(4) {\n left: 28%;\n transform: rotate(61deg);\n animation-delay: 334ms;\n animation-duration: 1008ms;\n}\n\n.confetti-piece:nth-child(5) {\n left: 35%;\n transform: rotate(-52deg);\n animation-delay: 302ms;\n animation-duration: 1776ms;\n}\n\n.confetti-piece:nth-child(6) {\n left: 42%;\n transform: rotate(38deg);\n animation-delay: 180ms;\n animation-duration: 1168ms;\n}\n\n.confetti-piece:nth-child(7) {\n left: 49%;\n transform: rotate(11deg);\n animation-delay: 395ms;\n animation-duration: 1200ms;\n}\n\n.confetti-piece:nth-child(8) {\n left: 56%;\n transform: rotate(49deg);\n animation-delay: 14ms;\n animation-duration: 1887ms;\n}\n\n.confetti-piece:nth-child(9) {\n left: 63%;\n transform: rotate(-72deg);\n animation-delay: 149ms;\n animation-duration: 1805ms;\n}\n\n.confetti-piece:nth-child(10) {\n left: 70%;\n transform: rotate(10deg);\n animation-delay: 351ms;\n animation-duration: 2059ms;\n}\n\n.confetti-piece:nth-child(11) {\n left: 77%;\n transform: rotate(4deg);\n animation-delay: 307ms;\n animation-duration: 1132ms;\n}\n\n.confetti-piece:nth-child(12) {\n left: 84%;\n transform: rotate(42deg);\n animation-delay: 464ms;\n animation-duration: 1776ms;\n}\n\n.confetti-piece:nth-child(13) {\n left: 91%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 1818ms;\n}\n\n.confetti-piece:nth-child(14) {\n left: 94%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 818ms;\n}\n\n.confetti-piece:nth-child(15) {\n left: 96%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(16) {\n left: 98%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(17) {\n left: 50%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 2818ms;\n}\n\n.confetti-piece:nth-child(18) {\n left: 60%;\n transform: rotate(-72deg);\n animation-delay: 429ms;\n animation-duration: 1818ms;\n}\n\n.confetti-piece:nth-child(odd) {\n background-color: hsl(0, 100%, 67%);\n}\n\n.confetti-piece:nth-child(even) {\n z-index: 1;\n}\n\n.confetti-piece:nth-child(4n) {\n width: 6px;\n height: 14px;\n animation-duration: 4000ms;\n background-color: #c33764;\n}\n\n.confetti-piece:nth-child(5n) {\n width: 3px;\n height: 10px;\n animation-duration: 4000ms;\n background-color: #b06ab3;\n}\n\n.confetti-piece:nth-child(3n) {\n width: 4px;\n height: 12px;\n animation-duration: 2500ms;\n animation-delay: 3000ms;\n background-color: #dd2476;\n}\n\n.confetti-piece:nth-child(3n-7) {\n background-color: hsl(166, 100%, 37%);\n}\n\n@keyframes makeItRain {\n from {\n opacity: 0;\n }\n\n 50% {\n opacity: 1;\n }\n\n to {\n transform: translateY(250px);\n }\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"b89811","snapshot":null,"tags":null,"title":"card by laminelawal","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1086,"cssLen":2474,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

","css":".phoneContainer {\n width: 185px;\n height: 350px;\n background-color: black;\n border-radius: 20px;\n position: relative;\n}\n\n.screen {\n width: 180px;\n height: 340px;\n background: rgb(255,196,196);\n background: linear-gradient(167deg, rgba(255,196,196,1) 10%, rgba(45,138,253,1) 20%, rgba(34,193,195,1) 48%, rgba(211,216,255,1) 69%, rgba(0,164,24,1) 88%);\n border-radius: 20px;\n position: absolute;\n top: 4px;\n bottom: 2px;\n right: 2px;\n left: 2px;\n box-sizing: border-box;\n}\n\n.camera {\n width: 80px;\n background-color: black;\n position: absolute;\n height: 20px;\n top: 4%;\n right: 50%;\n transform: translate(50%, -50%);\n border-radius: 25px;\n transition: 0.3s;\n animation-name: callTransition;\n animation-duration: 1.9s;\n animation-direction: alternate;\n animation-iteration-count: infinite;\n animation-timing-function: ease;\n}\n\n@keyframes callTransition {\n 15% {\n width: 40px;\n }\n\n 95% {\n width: 95px;\n background-color: darkblue;\n }\n}\n\n.camera:before {\n content: \"\";\n width: 15px;\n height: 15px;\n background-color: rgb(19, 19, 51);\n position: absolute;\n border-radius: 50%;\n left: 5px;\n top: 2px;\n}\n\n.camera:after {\n content: \"\";\n width: 5px;\n height: 5px;\n background-color: lightgreen;\n position: absolute;\n border-radius: 50%;\n right: 5px;\n top: 6px;\n}\n\n.appsContainer {\n margin-top: 10px;\n position: absolute;\n right: 50%;\n top: 40%;\n transform: translate(50%, -50%);\n}\n\n.widgets {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 10px;\n box-sizing: border-box;\n}\n\n.one, .two {\n height: 80px;\n width: 80px;\n background-color: blue;\n border-radius: 10px;\n cursor: pointer;\n}\n\n.two {\n background-color: lightblue;\n}\n\n.oneApp, .twoApp {\n width: 35px;\n height: 35px;\n background-color: white;\n border-radius: 5px;\n margin-top: 10px;\n}\n\n.apps {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n margin-top: 15px;\n margin-left: 5px;\n}\n\n.menuBar {\n display: flex;\n border-radius: 20px;\n position: absolute;\n bottom: -70px;\n}\n\n.menuBar .twoApp:not(:last-child) {\n margin-right: 10px;\n}\n\n.menuBar::before {\n content: \"\";\n position: absolute;\n width: 50px;\n height: 13px;\n background-color: lightgray;\n border: none;\n border-radius: 20px;\n top: -5px;\n right: 50%;\n transform: translate(50%, -50%);\n}\n\n.menuBar::before {\n content: \"°°°°°°\";\n position: absolute;\n display: flex;\n justify-content: center;\n font-size: 18px;\n font-weight: bolder;\n color: gray;\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"fc50c0","snapshot":null,"tags":null,"title":"card by seyed-mohsen-mousavi","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1100,"cssLen":2459,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

Premium

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus rerum\n deleniti eaque ...\n

\n \n \n \n

\n \n glee\n \n \n download\n \n

\n\n","css":".flex {\n display: flex;\n}\n.h-6 {\n height: 1.5rem;\n}\n.w-72 {\n width: 18rem;\n}\n.w-6 {\n width: 1.5rem;\n}\n.flex-col {\n flex-direction: column;\n}\n.justify-between {\n justify-content: space-between;\n}\n.justify-around {\n justify-content: space-around;\n}\n.gap-2 {\n gap: 0.5rem;\n}\n.rounded-xl {\n border-radius: 0.75rem;\n}\n.rounded-b-lg {\n border-bottom-right-radius: 0.5rem;\n border-bottom-left-radius: 0.5rem;\n}\n.border-t-8 {\n border-top-width: 8px;\n}\n.border-green-400 {\n --tw-border-opacity: 1;\n border-color: rgb(74 222 128 / var(--tw-border-opacity));\n}\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity));\n}\n.bg-slate-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(226 232 240 / var(--tw-bg-opacity));\n}\n.px-4 {\n padding-left: 1rem;\n padding-right: 1rem;\n}\n.py-5 {\n padding-top: 1.25rem;\n padding-bottom: 1.25rem;\n}\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n}\n.px-2 {\n padding-left: 0.5rem;\n padding-right: 0.5rem;\n}\n.font-sans {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,\n \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif,\n \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n}\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem;\n}\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n.font-bold {\n font-weight: 700;\n}\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity));\n}\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),\n 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),\n var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n.transition-colors {\n transition-property: color, background-color, border-color, fill, stroke,\n -webkit-text-decoration-color;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke;\n transition-property: color, background-color, border-color,\n text-decoration-color, fill, stroke, -webkit-text-decoration-color;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms;\n}\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n.hover\\:bg-slate-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(148 163 184 / var(--tw-bg-opacity));\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"9d3a8a","snapshot":null,"tags":null,"title":"card by Gerente-S4V1T4R","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":103,"cssLen":2707,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".container {\n --background: linear-gradient(to left, #880505 0%, #f36b11 100%);\n width: 190px;\n height: 254px;\n padding: 4px;\n border-radius: 5px;\n overflow: visible;\n display: flex;\n align-items: center;\n background: var(--background);\n position: relative;\n}\n\n.container .box {\n position: relative;\n width: 190px;\n height: 244px;\n background: #1b1b1b;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n border-radius: 10px;\n}\n\n.container .box .content {\n position: relative;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-orient: vertical;\n -webkit-box-direction: normal;\n -ms-flex-direction: column;\n flex-direction: column;\n text-align: center;\n gap: 20px;\n padding: 0 20px;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.container .box .content .icon {\n width: 50px;\n height: 50px;\n -webkit-box-shadow: 0 0 0 4px #e6e6e6,\n 0 0 0 6px rgb(212, 10, 10);\n box-shadow: 0 0 0 4px #e6e6e6,\n 0 0 0 6px rgb(212, 10, 10);\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n font-size: 2.5em;\n -webkit-transition: 0.5s ease-in-out;\n transition: 0.5s ease-in-out;\n}\n\n.container .box::before {\n content: '';\n position: absolute;\n inset: -10px 50px;\n border-top: 4px solid rgb(99, 89, 247);\n z-index: -1;\n border-bottom: 4px solid rgb(65, 44, 250);\n z-index: -1;\n z-index: -1;\n -webkit-transform: skewY(15deg);\n -ms-transform: skewY(15deg);\n transform: skewY(15deg);\n -webkit-transition: 0.5s ease-in-out;\n transition: 0.5s ease-in-out;\n}\n\n.container .box:hover::before {\n -webkit-transform: skewY(0deg);\n -ms-transform: skewY(0deg);\n transform: skewY(0deg);\n inset: -10px 40px;\n}\n\n.container .box::after {\n content: '';\n position: absolute;\n inset: 60px -10px;\n border-left: 4px solid #880505;\n z-index: -1;\n border-right: 4px solid #aa551d;\n z-index: -1;\n -webkit-transform: skew(15deg);\n -ms-transform: skew(15deg);\n transform: skew(15deg);\n -webkit-transition: 0.5s ease-in-out;\n transition: 0.5s ease-in-out;\n}\n\n.container .box:hover::after {\n -webkit-transform: skew(0deg);\n -ms-transform: skew(0deg);\n transform: skew(0deg);\n inset: 40px -10px;\n}\n\n.container .box .content {\n border-radius: 50%;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"d0762a","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":945,"cssLen":4855,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n JR \n

Frontend developer

\n","css":".relative {\n position: relative\n}\n\n.z-10 {\n z-index: 10\n}\n\n.flex {\n display: flex\n}\n\n.h-56 {\n height: 14rem\n}\n\n.w-80 {\n width: 20rem\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-center {\n justify-content: center\n}\n\n.gap-2 {\n gap: 0.5rem\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-2xl {\n border-radius: 1rem\n}\n\n.bg-neutral-900 {\n --tw-bg-opacity: 1;\n background-color: rgb(23 23 23 / var(--tw-bg-opacity))\n}\n\n.bg-sky-700 {\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / var(--tw-bg-opacity))\n}\n\n.text-6xl {\n font-size: 3.75rem;\n line-height: 1\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.text-gray-50 {\n --tw-text-opacity: 1;\n color: rgb(249 250 251 / var(--tw-text-opacity))\n}\n\n.text-slate-400 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n\n.shadow-sm {\n --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.shadow-sky-500 {\n --tw-shadow-color: #0ea5e9;\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.outline {\n outline-style: solid\n}\n\n.-outline-offset-8 {\n outline-offset: -8px\n}\n\n.outline-slate-400 {\n outline-color: #94a3b8\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.before\\:absolute::before {\n content: var(--tw-content);\n position: absolute\n}\n\n.before\\:right-16::before {\n content: var(--tw-content);\n right: 4rem\n}\n\n.before\\:top-20::before {\n content: var(--tw-content);\n top: 5rem\n}\n\n.before\\:h-12::before {\n content: var(--tw-content);\n height: 3rem\n}\n\n.before\\:h-20::before {\n content: var(--tw-content);\n height: 5rem\n}\n\n.before\\:w-12::before {\n content: var(--tw-content);\n width: 3rem\n}\n\n.before\\:w-20::before {\n content: var(--tw-content);\n width: 5rem\n}\n\n.before\\:rounded-full::before {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.before\\:bg-sky-400::before {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(56 189 248 / var(--tw-bg-opacity))\n}\n\n.before\\:blur-xl::before {\n content: var(--tw-content);\n --tw-blur: blur(24px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.before\\:duration-500::before {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.after\\:absolute::after {\n content: var(--tw-content);\n position: absolute\n}\n\n.after\\:bottom-32::after {\n content: var(--tw-content);\n bottom: 8rem\n}\n\n.after\\:right-16::after {\n content: var(--tw-content);\n right: 4rem\n}\n\n.after\\:h-12::after {\n content: var(--tw-content);\n height: 3rem\n}\n\n.after\\:h-24::after {\n content: var(--tw-content);\n height: 6rem\n}\n\n.after\\:w-12::after {\n content: var(--tw-content);\n width: 3rem\n}\n\n.after\\:w-24::after {\n content: var(--tw-content);\n width: 6rem\n}\n\n.after\\:rounded-full::after {\n content: var(--tw-content);\n border-radius: 9999px\n}\n\n.after\\:bg-sky-700::after {\n content: var(--tw-content);\n --tw-bg-opacity: 1;\n background-color: rgb(3 105 161 / var(--tw-bg-opacity))\n}\n\n.after\\:blur-xl::after {\n content: var(--tw-content);\n --tw-blur: blur(24px);\n filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n\n.after\\:duration-500::after {\n content: var(--tw-content);\n transition-duration: 500ms\n}\n\n.hover\\:rotate-12:hover {\n --tw-rotate: 12deg;\n 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))\n}\n\n.hover\\:duration-500:hover {\n transition-duration: 500ms\n}\n\n.hover\\:before\\:-translate-x-32:hover::before {\n content: var(--tw-content);\n --tw-translate-x: -8rem;\n 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))\n}\n\n.hover\\:before\\:translate-y-12:hover::before {\n content: var(--tw-content);\n --tw-translate-y: 3rem;\n 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))\n}\n\n.hover\\:after\\:translate-x-24:hover::after {\n content: var(--tw-content);\n --tw-translate-x: 6rem;\n 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))\n}\n\n.hover\\:after\\:duration-500:hover::after {\n content: var(--tw-content);\n transition-duration: 500ms\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"9c4e14","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6669,"cssLen":1906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Web Design templates\n Selection

Lorem ipsum dolor sit amet, consectetur adipiscing elitsed do eiusmod.

135 Projects / 75%

","css":".card {\n --main-color: #000;\n --bg-color: #8DD4EB;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 300px;\n padding: 25px;\n background: var(--bg-color);\n border-radius: 20px;\n}\n\n.card__wrapper {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n}\n\n.card___wrapper-acounts {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: center;\n z-index: 1;\n cursor: pointer;\n}\n\n.card___wrapper-acounts > div:nth-child(2) {\n position: absolute;\n left: 25px;\n z-index: -1;\n}\n\n.card___wrapper-acounts > div:nth-child(3) {\n position: absolute;\n left: 50px;\n z-index: -2;\n}\n\n.card__score {\n display: flex;\n justify-content: center;\n align-items: center;\n font-weight: 500;\n font-size: 16px;\n color: #fff;\n width: 40px;\n height: 40px;\n border-radius: 100%;\n background: var(--main-color);\n}\n\n.card__acounts {\n width: 42px;\n height: 42px;\n}\n\n.card__acounts svg {\n width: 100%;\n height: 100%;\n}\n\n.card__menu {\n width: 40px;\n height: 40px;\n background: var(--bg-color);\n border-radius: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.card__title {\n margin-top: 50px;\n font-weight: 900;\n font-size: 25px;\n color: var(--main-color);\n}\n\n.card__subtitle {\n margin-top: 15px;\n font-weight: 400;\n font-size: 15px;\n color: var(--main-color);\n}\n\n.card__indicator {\n margin-top: 50px;\n font-weight: 500;\n font-size: 14px;\n color: var(--main-color);\n}\n\n.card__progress progress {\n width: 100%;\n height: 4px;\n border-radius: 100px;\n}\n\n.card__progress progress::-webkit-progress-bar {\n background-color: #00000030;\n border-radius: 100px;\n}\n\n.card__progress progress::-webkit-progress-value {\n background-color: var(--main-color);\n border-radius: 100px;\n}\n\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"057cdb","snapshot":null,"tags":null,"title":"card by escannord","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":789,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n","css":".card {\n width: 200px;\n height: 200px;\n background-color: transparent;\n box-shadow: inset 10px 10px 10px 10px rgba(0, 0, 0, 0.158),\n 10px 10px 20px rgba(0, 0, 0, 0.466),\n inset -10px -10px 10px 10px rgba(255, 255, 255, 0.897);\n border-radius: 51% 49% 62% 38% / 25% 57% 43% 75%;\n position: relative;\n}\n\n.card::after {\n content: \"\";\n display: inline-block;\n width: 10px;\n height: 10px;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.842);\n border-radius: 80% 20% 91% 9% / 48% 67% 33% 52%;\n top: 40px;\n left: 40px;\n}\n\n.card::before {\n content: \"\";\n display: inline-block;\n width: 20px;\n height: 20px;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.842);\n border-radius: 48% 52% 45% 55% / 48% 67% 33% 52%;\n top: 35px;\n left: 60px;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"5e69a1","snapshot":null,"tags":null,"title":"card by Vikikos","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":37,"cssLen":635,"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 box-shadow: 0 10px 10px rgba(0, 0, 0, 0.212);\n background: #fff;\n display: flex;\n border-radius: 20px;\n justify-content: center;\n position: relative;\n transition: all .4s;\n}\n\n.card::before {\n content: '---content---';\n letter-spacing: 0.2em;\n position: absolute;\n bottom: 8px;\n left: 20px;\n color: rgb(51, 51, 51);\n font-size: 0.8em;\n font-weight: 700;\n}\n\n.card div {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.212);\n cursor: pointer;\n z-index: 10;\n transition: all .4s;\n background-color: #fff;\n}\n\n.card:hover div {\n transform: translateY(-30px);\n}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"545a71","snapshot":null,"tags":null,"title":"card by themrsami","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1335,"cssLen":2608,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hello!

Hover Me (Love You Guys)

You're a monster. I can swallow a bottle of alcohol and I'll feel like Godzilla. Better hit the deck like the card dealer.

\n \n

\n","css":".m-5 {\n margin: 1.25rem\n}\n\n.mx-auto {\n margin-left: auto;\n margin-right: auto\n}\n\n.mt-1 {\n margin-top: 0.25rem\n}\n\n.mt-2 {\n margin-top: 0.5rem\n}\n\n.mt-4 {\n margin-top: 1rem\n}\n\n.block {\n display: block\n}\n\n.flex {\n display: flex\n}\n\n.max-w-md {\n max-width: 28rem\n}\n\n.items-center {\n align-items: center\n}\n\n.justify-between {\n justify-content: space-between\n}\n\n.space-x-4 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(1rem * var(--tw-space-x-reverse));\n margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)))\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-xl {\n border-radius: 0.75rem\n}\n\n.bg-gray-800 {\n --tw-bg-opacity: 1;\n background-color: rgb(31 41 55 / var(--tw-bg-opacity))\n}\n\n.p-8 {\n padding: 2rem\n}\n\n.text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\n}\n\n.text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n\n.font-medium {\n font-weight: 500\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.uppercase {\n text-transform: uppercase\n}\n\n.leading-tight {\n line-height: 1.25\n}\n\n.tracking-wide {\n letter-spacing: 0.025em\n}\n\n.text-gray-400 {\n --tw-text-opacity: 1;\n color: rgb(156 163 175 / var(--tw-text-opacity))\n}\n\n.text-indigo-500 {\n --tw-text-opacity: 1;\n color: rgb(99 102 241 / var(--tw-text-opacity))\n}\n\n.text-red-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity))\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n\n.duration-500 {\n transition-duration: 500ms\n}\n\n.ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n\n.hover\\:bg-black:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n\n.hover\\:text-white:hover {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.hover\\:shadow-2xl:hover {\n --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);\n --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n@media (min-width: 768px) {\n .md\\:flex {\n display: flex\n }\n\n .md\\:max-w-2xl {\n max-width: 42rem\n }\n}"},{"created":"2024-01-22T17:11:05.000Z","isPrivate":0,"projectId":"f8f2b3","snapshot":null,"tags":null,"title":"card by faxriddin20","updated":"2024-01-22T17:11:05.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4075,"cssLen":1278,"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 \n \n \n\n \n \n \n

\n","css":".card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(238, 238, 238);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 25px 25px;\n gap: 20px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);\n}\n\n/* for all social containers*/\n.socialContainer {\n width: 52px;\n height: 52px;\n border-radius: 5px;\n background-color: rgb(44, 44, 44);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition-duration: 0.3s;\n}\n/* instagram*/\n.containerOne:hover {\n background-color: #d62976;\n transition-duration: 0.3s;\n}\n/* twitter*/\n.containerTwo:hover {\n background-color: #00acee;\n transition-duration: 0.3s;\n}\n/* linkdin*/\n.containerThree:hover {\n background-color: #0072b1;\n transition-duration: 0.3s;\n}\n/* Whatsapp*/\n.containerFour:hover {\n background-color: green;\n transition-duration: 0.3s;\n}\n\n.socialContainer:active {\n transform: scale(0.9);\n transition-duration: 0.3s;\n}\n\n.socialSvg {\n width: 17px;\n}\n\n.socialSvg path {\n fill: rgb(255, 255, 255);\n}\n\n.socialContainer:hover .socialSvg {\n animation: slide-in-top 0.3s both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"}]}},"actionData":null,"errors":null}