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

264653

2A9D8F

E9C46A

F4A261

E76F51

\n 53421 saves\n \n

","css":".container {\n height: 200px;\n width: 350px;\n border-radius: 1em;\n overflow: hidden;\n box-shadow: 0 10px 20px #dbdbdb;\n font-family: sans-serif;\n}\n\n.palette {\n display: flex;\n height: 86%;\n width: 100%;\n}\n\n.color {\n height: 100%;\n flex: 1;\n display: flex;\n align-items: center;\n justify-content: center;\n color: white;\n font-weight: 600;\n letter-spacing: 1px;\n transition: flex 0.1s linear;\n}\n\n.color span {\n opacity: 0;\n transition: opacity 0.1s linear;\n}\n\n.color:nth-child(1) {\n background: #264653;\n}\n\n.color:nth-child(2) {\n background: #2a9d8f;\n}\n\n.color:nth-child(3) {\n background: #e9c46a;\n}\n\n.color:nth-child(4) {\n background: #f4a261;\n}\n\n.color:nth-child(5) {\n background: #e76f51;\n}\n\n.color:hover {\n flex: 2;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;\n}\n\n.color:hover span {\n opacity: 1;\n}\n\n#stats {\n height: 14%;\n width: 100%;\n background: white;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 1.5em;\n box-sizing: border-box;\n color: #bebebe;\n}\n\n#stats svg {\n fill: #bebebe;\n transform: scale(1.2);\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"33ec9c","snapshot":null,"tags":null,"title":"card by htwarriors108","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":103,"cssLen":1078,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Hover Me : )

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n color: #fff;\n transition: 0.5s;\n cursor: pointer;\n}\n\n.card:hover {\n transform: translateY(-20px);\n}\n\n.card::before {\n content: '';\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n left: 0;\n background: linear-gradient(45deg, #ffbc00, #ff0058);\n border-radius: 1.2em;\n}\n\n.card::after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(45deg, #ffbc00, #ff0058);\n filter: blur(30px);\n}\n\n.card span {\n position: absolute;\n top: 6px;\n left: 6px;\n right: 6px;\n bottom: 6px;\n background-color: rgba(0, 0, 0, 0.6);\n z-index: 2;\n border-radius: 1em;\n}\n\n.card span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 50%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.1);\n}\n\n.card .content {\n position: relative;\n padding: 10px;\n z-index: 10;\n width: 100%;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 800;\n font-size: 1.5em;\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"ac1e59","snapshot":null,"tags":null,"title":"card by EmmaxPlay","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":316,"cssLen":455,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n margin: 0 auto;\n background-color: #011522;\n border-radius: 8px;\n z-index: 1;\n}\n\n.tools {\n display: flex;\n align-items: center;\n padding: 9px;\n}\n\n.circle {\n padding: 0 4px;\n}\n\n.box {\n display: inline-block;\n align-items: center;\n width: 10px;\n height: 10px;\n padding: 1px;\n border-radius: 50%;\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"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"f8b880","snapshot":null,"tags":null,"title":"card by catraco","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1081,"cssLen":1577,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n card title\n

\n Using Lorem ipsum to focus attention on graphic elements in a webpage design proposal · One of the earliest examples\n of the Lorem ipsum placeholder text on 1960s advertising...\n

\n \n

\n \n\n

","css":".col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.grid{display:grid}.w-60{width:15rem}.justify-center{justify-content:center}.gap-4{gap:1rem}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-slate-300{--tw-border-opacity:1;border-color:rgb(203 213 225 / var(--tw-border-opacity))}.bg-slate-200{--tw-bg-opacity:1;background-color:rgb(226 232 240 / var(--tw-bg-opacity))}.bg-gradient-to-l{background-image:linear-gradient(to left, var(--tw-gradient-stops))}.from-slate-300{--tw-gradient-from:#cbd5e1 var(--tw-gradient-from-position);--tw-gradient-to:rgb(203 213 225 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-slate-100{--tw-gradient-to:#f1f5f9 var(--tw-gradient-to-position)}.p-2{padding:0.5rem}.p-4{padding:1rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}.capitalize{text-transform:capitalize}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity))}.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)}.duration-300{transition-duration:300ms}.hover\\:bg-slate-600:hover{--tw-bg-opacity:1;background-color:rgb(71 85 105 / var(--tw-bg-opacity))}.hover\\:text-slate-200:hover{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity))}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"b3e787","snapshot":null,"tags":null,"title":"card by catraco","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":2709,"cssLen":1872,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Send Feedback

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

","css":".col-span-1{grid-column:span 1 / span 1}.col-span-2{grid-column:span 2 / span 2}.col-span-6{grid-column:span 6 / span 6}.flex{display:flex}.grid{display:grid}.h-28{height:7rem}.resize-none{resize:none}.grid-cols-6{grid-template-columns:repeat(6, minmax(0, 1fr))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.rounded-lg{border-radius:0.5rem}.rounded-xl{border-radius:0.75rem}.border{border-width:1px}.border-slate-200{--tw-border-opacity:1;border-color:rgb(226 232 240 / var(--tw-border-opacity))}.bg-slate-100{--tw-bg-opacity:1;background-color:rgb(241 245 249 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.fill-slate-600{fill:#475569}.stroke-slate-600{stroke:#475569}.p-2{padding:0.5rem}.text-center{text-align:center}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.font-bold{font-weight:700}.text-slate-200{--tw-text-opacity:1;color:rgb(226 232 240 / var(--tw-text-opacity))}.text-slate-600{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity))}.outline-none{outline:2px solid transparent;outline-offset:2px}.duration-300{transition-duration:300ms}.placeholder\\:text-slate-600::placeholder{--tw-text-opacity:1;color:rgb(71 85 105 / var(--tw-text-opacity))}.placeholder\\:opacity-50::placeholder{opacity:0.5}.hover\\:border-slate-600:hover{--tw-border-opacity:1;border-color:rgb(71 85 105 / var(--tw-border-opacity))}.hover\\:text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.focus\\:border-slate-600:focus{--tw-border-opacity:1;border-color:rgb(71 85 105 / var(--tw-border-opacity))}.focus\\:bg-blue-400:focus{--tw-bg-opacity:1;background-color:rgb(96 165 250 / var(--tw-bg-opacity))}.focus\\:fill-blue-200:focus{fill:#bfdbfe}.focus\\:stroke-blue-200:focus{stroke:#bfdbfe}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"939353","snapshot":null,"tags":null,"title":"card by david-mohseni","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":286,"cssLen":2105,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

II\n

","css":".face {\n position: relative;\n width: 180px;\n height: 180px;\n border-radius: 50%;\n outline: 10px solid #333;\n background: repeating-radial-gradient(circle at 50% 50%, \n rgba(200,200,200,.2) 0%, rgba(200,200,200,.2) 2%, \n transparent 2%, transparent 3%, rgba(200,200,200,.2) 3%, \n transparent 3%), conic-gradient(white 0%, silver 10%, \n white 35%, silver 45%, white 60%, silver 70%, \n white 80%, silver 95%, white 100%);\n box-shadow: inset 0 0 20px #0007;\n}\n\n.hour {\n position: absolute;\n width: 5px;\n height: 60px;\n background: #aaa;\n left: 87.5px;\n top: 43px;\n border-radius: 3px 3px 1px 1px;\n transform-origin: 2px 47px;\n box-shadow: 0 0 5px #0005,inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333;\n z-index: 1;\n animation: watch 43200s linear infinite;\n}\n\n.minute {\n position: absolute;\n width: 4px;\n height: 78px;\n background: #aaa;\n left: 88px;\n top: 25px;\n border-radius: 3px 3px 1px 1px;\n transform-origin: 2px 65px;\n box-shadow: 0 0 5px #0005, inset 1.5px 3px 0px #333, inset -1.5px -3px 0px #333;\n z-index: 2;\n animation: watch 3600s linear infinite;\n}\n\n.second {\n position: absolute;\n width: 10px;\n height: 10px;\n background: red;\n left: 85px;\n top: 85px;\n border-radius: 50%;\n border: 1px solid #eee;\n z-index: 3;\n animation: watch 60s steps(60, end) 0s infinite;\n}\n\n.second::before {\n content: \"\";\n position: absolute;\n width: 1px;\n height: 85px;\n left: 3px;\n bottom: -10px;\n background: red;\n border-radius: 2px;\n box-shadow: 5px 0 2px rgba(128, 128, 128, 0.2);\n}\n\n.second::after {\n content: \"\";\n position: absolute;\n width: 4px;\n height: 4px;\n left: 2px;\n top: 2px;\n background: #555;\n border-radius: 50%;\n}\n\n.v-index {\n position: absolute;\n color: #333;\n font-size: 24px;\n left: 83.5px;\n top: -3px;\n text-shadow: 0 157px 0 #333;\n z-index: 1\n}\n\n.h-index {\n position: absolute;\n color: #333;\n font-size: 24px;\n top: 72px;\n left: 5px;\n transform: rotate(-90deg);\n text-shadow: 0 158px 0 #333;\n z-index: 1;\n}\n\n@keyframes watch {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"c4b240","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5646,"cssLen":4884,"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 UIVERSE (3D UI)\n Create, share, and use beautiful custom elements made with CSS\n

\n \n \n

","css":".parent {\n width: 290px;\n height: 300px;\n perspective: 1000px;\n}\n\n.card {\n height: 100%;\n border-radius: 50px;\n background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%);\n transition: all 0.5s ease-in-out;\n transform-style: preserve-3d;\n box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px;\n}\n\n.glass {\n transform-style: preserve-3d;\n position: absolute;\n inset: 8px;\n border-radius: 55px;\n border-top-right-radius: 100%;\n background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);\n /* -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px); */\n transform: translate3d(0px, 0px, 25px);\n border-left: 1px solid white;\n border-bottom: 1px solid white;\n transition: all 0.5s ease-in-out;\n}\n\n.content {\n padding: 100px 60px 0px 30px;\n transform: translate3d(0, 0, 26px);\n}\n\n.content .title {\n display: block;\n color: #00894d;\n font-weight: 900;\n font-size: 20px;\n}\n\n.content .text {\n display: block;\n color: rgba(0, 137, 78, 0.7647058824);\n font-size: 15px;\n margin-top: 20px;\n}\n\n.bottom {\n padding: 10px 12px;\n transform-style: preserve-3d;\n position: absolute;\n bottom: 20px;\n left: 20px;\n right: 20px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n transform: translate3d(0, 0, 26px);\n}\n\n.bottom .view-more {\n display: flex;\n align-items: center;\n width: 40%;\n justify-content: flex-end;\n transition: all 0.2s ease-in-out;\n}\n\n.bottom .view-more:hover {\n transform: translate3d(0, 0, 10px);\n}\n\n.bottom .view-more .view-more-button {\n background: none;\n border: none;\n color: #00c37b;\n font-weight: bolder;\n font-size: 12px;\n}\n\n.bottom .view-more .svg {\n fill: none;\n stroke: #00c37b;\n stroke-width: 3px;\n max-height: 15px;\n}\n\n.bottom .social-buttons-container {\n display: flex;\n gap: 10px;\n transform-style: preserve-3d;\n}\n\n.bottom .social-buttons-container .social-button {\n width: 30px;\n aspect-ratio: 1;\n padding: 5px;\n background: rgb(255, 255, 255);\n border-radius: 50%;\n border: none;\n display: grid;\n place-content: center;\n box-shadow: rgba(5, 71, 17, 0.5) 0px 7px 5px -5px;\n}\n\n.bottom .social-buttons-container .social-button:first-child {\n transition: transform 0.2s ease-in-out 0.4s, box-shadow 0.2s ease-in-out 0.4s;\n}\n\n.bottom .social-buttons-container .social-button:nth-child(2) {\n transition: transform 0.2s ease-in-out 0.6s, box-shadow 0.2s ease-in-out 0.6s;\n}\n\n.bottom .social-buttons-container .social-button:nth-child(3) {\n transition: transform 0.2s ease-in-out 0.8s, box-shadow 0.2s ease-in-out 0.8s;\n}\n\n.bottom .social-buttons-container .social-button .svg {\n width: 15px;\n fill: #00894d;\n}\n\n.bottom .social-buttons-container .social-button:hover {\n background: black;\n}\n\n.bottom .social-buttons-container .social-button:hover .svg {\n fill: white;\n}\n\n.bottom .social-buttons-container .social-button:active {\n background: rgb(255, 234, 0);\n}\n\n.bottom .social-buttons-container .social-button:active .svg {\n fill: black;\n}\n\n.logo {\n position: absolute;\n right: 0;\n top: 0;\n transform-style: preserve-3d;\n}\n\n.logo .circle {\n display: block;\n position: absolute;\n aspect-ratio: 1;\n border-radius: 50%;\n top: 0;\n right: 0;\n box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px;\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n background: rgba(0, 249, 203, 0.2);\n transition: all 0.5s ease-in-out;\n}\n\n.logo .circle1 {\n width: 170px;\n transform: translate3d(0, 0, 20px);\n top: 8px;\n right: 8px;\n}\n\n.logo .circle2 {\n width: 140px;\n transform: translate3d(0, 0, 40px);\n top: 10px;\n right: 10px;\n -webkit-backdrop-filter: blur(1px);\n backdrop-filter: blur(1px);\n transition-delay: 0.4s;\n}\n\n.logo .circle3 {\n width: 110px;\n transform: translate3d(0, 0, 60px);\n top: 17px;\n right: 17px;\n transition-delay: 0.8s;\n}\n\n.logo .circle4 {\n width: 80px;\n transform: translate3d(0, 0, 80px);\n top: 23px;\n right: 23px;\n transition-delay: 1.2s;\n}\n\n.logo .circle5 {\n width: 50px;\n transform: translate3d(0, 0, 100px);\n top: 30px;\n right: 30px;\n display: grid;\n place-content: center;\n transition-delay: 1.6s;\n}\n\n.logo .circle5 .svg {\n width: 20px;\n fill: white;\n}\n\n.parent:hover .card {\n transform: rotate3d(1, 1, 0, 30deg);\n box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px;\n}\n\n.parent:hover .card .bottom .social-buttons-container .social-button {\n transform: translate3d(0, 0, 50px);\n box-shadow: rgba(5, 71, 17, 0.2) -5px 20px 10px 0px;\n}\n\n.parent:hover .card .logo .circle2 {\n transform: translate3d(0, 0, 60px);\n}\n\n.parent:hover .card .logo .circle3 {\n transform: translate3d(0, 0, 80px);\n}\n\n.parent:hover .card .logo .circle4 {\n transform: translate3d(0, 0, 100px);\n}\n\n.parent:hover .card .logo .circle5 {\n transform: translate3d(0, 0, 120px);\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"9ca1c4","snapshot":null,"tags":null,"title":"card by akshat-patel28","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1214,"cssLen":1084,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

11:11PM

Wednesday, June 15th

\n\n

","css":".card {\n width: 280px;\n height: 150px;\n background: rgb(17, 4, 134);\n border-radius: 15px;\n box-shadow: rgb(0,0,0,0.7) 5px 10px 50px ,rgb(0,0,0,0.7) -5px 0px 250px;\n display: flex;\n color: white;\n justify-content: center;\n position: relative;\n flex-direction: column;\n background: linear-gradient(to right, rgb(20, 30, 48), rgb(36, 59, 85));\n cursor: pointer;\n transition: all 0.3s ease-in-out;\n overflow: hidden;\n}\n\n.card:hover {\n box-shadow: rgb(0,0,0) 5px 10px 50px ,rgb(0,0,0) -5px 0px 250px;\n}\n\n.time-text {\n font-size: 50px;\n margin-top: 0px;\n margin-left: 15px;\n font-weight: 600;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n}\n\n.time-sub-text {\n font-size: 15px;\n margin-left: 5px;\n}\n\n.day-text {\n font-size: 18px;\n margin-top: 0px;\n margin-left: 15px;\n font-weight: 500;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n}\n\n.moon {\n font-size: 20px;\n position: absolute;\n right: 15px;\n top: 15px;\n transition: all 0.3s ease-in-out;\n}\n\n.card:hover > .moon {\n font-size: 23px;\n}\n"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"db99c1","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6898,"cssLen":10521,"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 \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 \n \n \n \n \n \n \n \n \n \n \n \n \n \n

UIVERS.IO

","css":".card {\n width: 200px;\n height: 300px;\n position: relative;\n background-image: linear-gradient(230deg, rgba(93, 93, 93, 0.03) 0%, rgba(93, 93, 93, 0.03) 50%, rgba(78, 78, 78, 0.03) 50%, rgba(78, 78, 78, 0.03) 100%), linear-gradient(107deg, rgba(55, 55, 55, 0.01) 0%, rgba(55, 55, 55, 0.01) 50%, rgba(170, 170, 170, 0.01) 50%, rgba(170, 170, 170, 0.01) 100%), linear-gradient(278deg, rgba(16, 16, 16, 0.03) 0%, rgba(16, 16, 16, 0.03) 50%, rgba(24, 24, 24, 0.03) 50%, rgba(24, 24, 24, 0.03) 100%), linear-gradient(205deg, rgba(116, 116, 116, 0.03) 0%, rgba(116, 116, 116, 0.03) 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03) 100%), linear-gradient(150deg, rgba(5, 5, 5, 0.03) 0%, rgba(5, 5, 5, 0.03) 50%, rgba(80, 80, 80, 0.03) 50%, rgba(80, 80, 80, 0.03) 100%), linear-gradient(198deg, rgba(231, 231, 231, 0.03) 0%, rgba(231, 231, 231, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(278deg, rgba(89, 89, 89, 0.03) 0%, rgba(89, 89, 89, 0.03) 50%, rgba(26, 26, 26, 0.03) 50%, rgba(26, 26, 26, 0.03) 100%), linear-gradient(217deg, rgba(28, 28, 28, 0.03) 0%, rgba(28, 28, 28, 0.03) 50%, rgba(202, 202, 202, 0.03) 50%, rgba(202, 202, 202, 0.03) 100%), linear-gradient(129deg, rgba(23, 23, 23, 0.03) 0%, rgba(23, 23, 23, 0.03) 50%, rgba(244, 244, 244, 0.03) 50%, rgba(244, 244, 244, 0.03) 100%), linear-gradient(135deg, rgb(1, 132, 255), rgb(198, 5, 91));\n display: grid;\n place-content: center;\n border-radius: 20px;\n transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n.size-5 {\n width: 5px;\n border-radius: 2px;\n}\n\n.size-10 {\n width: 10px;\n border-radius: 4px;\n}\n\n.size-15 {\n width: 15px;\n border-radius: 5px;\n}\n\n.size-20 {\n width: 20px;\n border-radius: 7px;\n}\n\n.dot-container-main {\n width: 95px;\n height: 110px;\n position: relative;\n}\n\n.dot {\n position: absolute;\n aspect-ratio: 1;\n background: linear-gradient(45deg, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.34) 100%);\n border-top: 1px solid rgb(255, 255, 255);\n border-right: 1px solid white;\n transition: left 1s ease-in-out, top 1s ease-in-out, transform 0.2s ease-in-out;\n}\n\n.dot:hover {\n transform: scale(1.8);\n}\n\n.dot1 {\n left: -40px;\n top: -80px;\n}\n\n.dot52 {\n left: 10px;\n top: -75px;\n}\n\n.dot4 {\n left: 40px;\n top: -50px;\n}\n\n.dot3 {\n left: -20px;\n top: -70px;\n}\n\n.dot72 {\n left: 50px;\n top: -85px;\n}\n\n.dot2 {\n left: 110px;\n top: -30px;\n}\n\n.dot53 {\n left: 125px;\n top: -80px;\n}\n\n.dot5 {\n left: 100px;\n top: -20px;\n}\n\n.dot73 {\n left: -25px;\n top: -50px;\n}\n\n.dot6 {\n left: 30px;\n top: -45px;\n}\n\n.dot7 {\n left: 80px;\n top: -60px;\n}\n\n.dot55 {\n left: 60px;\n top: -30px;\n}\n\n.dot8 {\n left: 70px;\n top: -35px;\n}\n\n.dot54 {\n left: 120px;\n top: -20px;\n}\n\n.dot56 {\n left: 85px;\n top: -5px;\n}\n\n.dot10 {\n left: 80px;\n top: -20px;\n}\n\n.dot12 {\n left: -40px;\n top: -25px;\n}\n\n.dot9 {\n left: 0px;\n top: -50px;\n}\n\n.dot76 {\n left: 10px;\n top: -20px;\n}\n\n.dot11 {\n left: 110px;\n top: 0px;\n}\n\n.dot59 {\n left: 110px;\n top: 30px;\n}\n\n.dot14 {\n left: 100px;\n top: 10px;\n}\n\n.dot58 {\n left: -20px;\n top: 0px;\n}\n\n.dot13 {\n left: 50px;\n top: -10px;\n}\n\n.dot15 {\n left: 70px;\n top: 0px;\n}\n\n.dot57 {\n left: 30px;\n top: 15px;\n}\n\n.dot17 {\n left: 80px;\n top: 10px;\n}\n\n.dot19 {\n left: 95px;\n top: 30px;\n}\n\n.dot23 {\n left: 130px;\n top: 45px;\n}\n\n.dot61 {\n left: 75px;\n top: 20px;\n}\n\n.dot28 {\n left: 100px;\n top: 40px;\n}\n\n.dot18 {\n left: -35px;\n top: 0px;\n}\n\n.dot16 {\n left: 0px;\n top: 20px;\n}\n\n.dot20 {\n left: -30px;\n top: 10px;\n}\n\n.dot24 {\n left: -30px;\n top: 30px;\n}\n\n.dot21 {\n left: 50px;\n top: 10px;\n}\n\n.dot65 {\n left: 30px;\n top: 30px;\n}\n\n.dot60 {\n left: -15px;\n top: 20px;\n}\n\n.dot25 {\n left: -5px;\n top: 40px;\n}\n\n.dot30 {\n left: 20px;\n top: 40px;\n}\n\n.dot32 {\n left: 0px;\n top: 60px;\n}\n\n.dot78 {\n left: -35px;\n top: 170px;\n}\n\n.dot50 {\n left: 120px;\n top: 180px;\n}\n\n.dot79 {\n left: 60px;\n top: 170px;\n}\n\n.dot69 {\n left: 100px;\n top: 135px;\n}\n\n.dot68 {\n left: 110px;\n top: 100px;\n}\n\n.dot47 {\n left: 0px;\n top: 175px;\n}\n\n.dot71 {\n left: 20px;\n top: 160px;\n}\n\n.dot83 {\n left: 100px;\n top: 170px;\n}\n\n.dot45 {\n left: 10px;\n top: 160px;\n}\n\n.dot67 {\n left: 40px;\n top: 140px;\n}\n\n.dot49 {\n left: 45px;\n top: 190px;\n}\n\n.dot48 {\n left: 20px;\n top: 180px;\n}\n\n.dot46 {\n left: 100px;\n top: 120px;\n}\n\n.dot70 {\n left: 80px;\n top: 145px;\n}\n\n.dot75 {\n left: -20px;\n top: 140px;\n}\n\n.dot82 {\n left: 60px;\n top: 160px;\n}\n\n.dot43 {\n left: 50px;\n top: 170px;\n}\n\n.dot44 {\n left: 60px;\n top: 130px;\n}\n\n.dot77 {\n left: 110px;\n top: 70px;\n}\n\n.dot42 {\n left: 90px;\n top: 110px;\n}\n\n.dot81 {\n left: 90px;\n top: 140px;\n}\n\n.dot62 {\n left: 100px;\n top: 55px;\n}\n\n.dot31 {\n left: 85px;\n top: 80px;\n}\n\n.dot33 {\n left: -30px;\n top: 130px;\n}\n\n.dot80 {\n left: 70px;\n top: 120px;\n}\n\n.dot39 {\n left: 30px;\n top: 115px;\n}\n\n.dot63 {\n left: -30px;\n top: 55px;\n}\n\n.dot41 {\n left: 50px;\n top: 110px;\n}\n\n.dot40 {\n left: 40px;\n top: 120px;\n}\n\n.dot66 {\n left: 70px;\n top: 95px;\n}\n\n.dot37 {\n left: 10px;\n top: 130px;\n}\n\n.dot51 {\n left: -5px;\n top: 105px;\n}\n\n.dot29 {\n left: -15px;\n top: 90px;\n}\n\n.dot38 {\n left: 10px;\n top: 90px;\n}\n\n.dot35 {\n left: 50px;\n top: 90px;\n}\n\n.dot64 {\n left: 80px;\n top: 45px;\n}\n\n.dot34 {\n left: 70px;\n top: 70px;\n}\n\n.dot36 {\n left: 65px;\n top: 80px;\n}\n\n.dot74 {\n left: 30px;\n top: 70px;\n}\n\n.dot26 {\n left: 45px;\n top: 60px;\n}\n\n.dot22 {\n left: 60px;\n top: 35px;\n}\n\n.dot27 {\n left: 50px;\n top: 70px;\n}\n\n.card:hover {\n transform: scale(1.1);\n}\n\n.card:hover .text {\n opacity: 1;\n}\n\n.card:hover .dot1 {\n left: 0px;\n top: 0px;\n}\n\n.card:hover .dot2 {\n left: 90px;\n top: 0px;\n}\n\n.card:hover .dot3 {\n left: 5px;\n top: 5px;\n}\n\n.card:hover .dot4 {\n left: 45px;\n top: 5px;\n}\n\n.card:hover .dot5 {\n left: 85px;\n top: 5px;\n}\n\n.card:hover .dot6 {\n left: 15px;\n top: 10px;\n}\n\n.card:hover .dot7 {\n left: 75px;\n top: 10px;\n}\n\n.card:hover .dot8 {\n left: 55px;\n top: 15px;\n}\n\n.card:hover .dot9 {\n left: 15px;\n top: 20px;\n}\n\n.card:hover .dot10 {\n left: 60px;\n top: 20px;\n}\n\n.card:hover .dot11 {\n left: 90px;\n top: 20px;\n}\n\n.card:hover .dot12 {\n left: 0px;\n top: 25px;\n}\n\n.card:hover .dot13 {\n left: 75px;\n top: 25px;\n}\n\n.card:hover .dot14 {\n left: 85px;\n top: 25px;\n}\n\n.card:hover .dot15 {\n left: 80px;\n top: 30px;\n}\n\n.card:hover .dot16 {\n left: 15px;\n top: 35px;\n}\n\n.card:hover .dot17 {\n left: 75px;\n top: 35px;\n}\n\n.card:hover .dot18 {\n left: 0px;\n top: 40px;\n}\n\n.card:hover .dot19 {\n left: 85px;\n top: 40px;\n}\n\n.card:hover .dot20 {\n left: 5px;\n top: 45px;\n}\n\n.card:hover .dot21 {\n left: 50px;\n top: 45px;\n}\n\n.card:hover .dot22 {\n left: 60px;\n top: 45px;\n}\n\n.card:hover .dot23 {\n left: 90px;\n top: 45px;\n}\n\n.card:hover .dot24 {\n left: 0px;\n top: 50px;\n}\n\n.card:hover .dot25 {\n left: 15px;\n top: 50px;\n}\n\n.card:hover .dot26 {\n left: 45px;\n top: 50px;\n}\n\n.card:hover .dot27 {\n left: 55px;\n top: 50px;\n}\n\n.card:hover .dot28 {\n left: 80px;\n top: 50px;\n}\n\n.card:hover .dot29 {\n left: 10px;\n top: 55px;\n}\n\n.card:hover .dot30 {\n left: 20px;\n top: 55px;\n}\n\n.card:hover .dot31 {\n left: 75px;\n top: 55px;\n}\n\n.card:hover .dot32 {\n left: 25px;\n top: 60px;\n}\n\n.card:hover .dot33 {\n left: 5px;\n top: 65px;\n}\n\n.card:hover .dot34 {\n left: 55px;\n top: 65px;\n}\n\n.card:hover .dot35 {\n left: 30px;\n top: 70px;\n}\n\n.card:hover .dot36 {\n left: 50px;\n top: 70px;\n}\n\n.card:hover .dot37 {\n left: 25px;\n top: 75px;\n}\n\n.card:hover .dot38 {\n left: 35px;\n top: 75px;\n}\n\n.card:hover .dot39 {\n left: 30px;\n top: 90px;\n}\n\n.card:hover .dot40 {\n left: 40px;\n top: 90px;\n}\n\n.card:hover .dot41 {\n left: 50px;\n top: 90px;\n}\n\n.card:hover .dot42 {\n left: 80px;\n top: 90px;\n}\n\n.card:hover .dot43 {\n left: 35px;\n top: 95px;\n}\n\n.card:hover .dot44 {\n left: 55px;\n top: 95px;\n}\n\n.card:hover .dot45 {\n left: 25px;\n top: 100px;\n}\n\n.card:hover .dot46 {\n left: 50px;\n top: 100px;\n}\n\n.card:hover .dot47 {\n left: 20px;\n top: 105px;\n}\n\n.card:hover .dot48 {\n left: 45px;\n top: 105px;\n}\n\n.card:hover .dot49 {\n left: 55px;\n top: 105px;\n}\n\n.card:hover .dot50 {\n left: 90px;\n top: 105px;\n}\n\n.card:hover .dot51 {\n left: 15px;\n top: 60px;\n}\n\n.card:hover .dot52 {\n left: 10px;\n top: 0px;\n}\n\n.card:hover .dot53 {\n left: 75px;\n top: 0px;\n}\n\n.card:hover .dot54 {\n left: 85px;\n top: 10px;\n}\n\n.card:hover .dot55 {\n left: 45px;\n top: 15px;\n}\n\n.card:hover .dot56 {\n left: 75px;\n top: 15px;\n}\n\n.card:hover .dot57 {\n left: 10px;\n top: 25px;\n}\n\n.card:hover .dot58 {\n left: 0px;\n top: 30px;\n}\n\n.card:hover .dot59 {\n left: 85px;\n top: 30px;\n}\n\n.card:hover .dot60 {\n left: 10px;\n top: 40px;\n}\n\n.card:hover .dot61 {\n left: 75px;\n top: 40px;\n}\n\n.card:hover .dot62 {\n left: 85px;\n top: 50px;\n}\n\n.card:hover .dot63 {\n left: 0px;\n top: 55px;\n}\n\n.card:hover .dot64 {\n left: 55px;\n top: 55px;\n}\n\n.card:hover .dot65 {\n left: 30px;\n top: 60px;\n}\n\n.card:hover .dot66 {\n left: 40px;\n top: 70px;\n}\n\n.card:hover .dot67 {\n left: 20px;\n top: 90px;\n}\n\n.card:hover .dot68 {\n left: 85px;\n top: 90px;\n}\n\n.card:hover .dot69 {\n left: 80px;\n top: 100px;\n}\n\n.card:hover .dot70 {\n left: 40px;\n top: 95px;\n}\n\n.card:hover .dot71 {\n left: 30px;\n top: 100px;\n}\n\n.card:hover .dot72 {\n left: 50px;\n top: 0px;\n}\n\n.card:hover .dot73 {\n left: 0px;\n top: 10px;\n}\n\n.card:hover .dot74 {\n left: 40px;\n top: 55px;\n}\n\n.card:hover .dot75 {\n left: 10px;\n top: 65px;\n}\n\n.card:hover .dot76 {\n left: 45px;\n top: 25px;\n}\n\n.card:hover .dot77 {\n left: 75px;\n top: 60px;\n}\n\n.card:hover .dot78 {\n left: 0px;\n top: 90px;\n}\n\n.card:hover .dot79 {\n left: 60px;\n top: 95px;\n}\n\n.card:hover .dot80 {\n left: 60px;\n top: 90px;\n}\n\n.card:hover .dot81 {\n left: 70px;\n top: 90px;\n}\n\n.card:hover .dot82 {\n left: 75px;\n top: 95px;\n}\n\n.card:hover .dot83 {\n left: 75px;\n top: 105px;\n}\n\n.size-20 {\n display: grid;\n place-content: center;\n border: 1px solid rgb(255, 255, 255);\n}\n\n.size-20::before {\n content: \"\";\n width: 100%;\n height: 100%;\n position: absolute;\n border-radius: inherit;\n background: black;\n opacity: 0;\n transition: all 0.2s ease-in-out;\n}\n\n.size-20 .svg {\n fill: rgba(255, 255, 255, 0);\n height: 10px;\n width: 10px;\n transition: all 0.2s ease-in-out;\n}\n\n.size-20:hover {\n transform: scale(1.5);\n border: none;\n}\n\n.size-20:hover::before {\n opacity: 1;\n}\n\n.size-20:hover .svg {\n fill: white;\n z-index: 99;\n}\n\n.text {\n position: absolute;\n bottom: 20px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 10px;\n letter-spacing: 5px;\n color: white;\n opacity: 0;\n transition: all 1s cubic-bezier(0.895, 0.03, 0.685, 0.22);\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"ea42d0","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":324,"cssLen":971,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Different ways to use CSS in React

\n React\n Css\n

\n\n

","css":".card {\n width: 320px;\n height: 350px;\n padding: 20px;\n color: white;\n background: linear-gradient(#212121, #212121) padding-box,\n linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;\n border: 2px solid transparent;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n transform-origin: right bottom;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 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: 8px;\n}\n\n.card .categories span {\n background-color: #e81cff;\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: 8deg;\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"de9d09","snapshot":null,"tags":null,"title":"card by alexmaracinaru","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":263,"cssLen":698,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Illustration

A heading that must span over two lines\n

By Abi 4 days ago

","css":".card {\n width: 190px;\n background: white;\n padding: .4em;\n border-radius: 6px;\n}\n\n.card-image {\n background-color: rgb(236, 236, 236);\n width: 100%;\n height: 130px;\n border-radius: 6px 6px 0 0;\n}\n\n.card-image:hover {\n transform: scale(0.98);\n}\n\n.category {\n text-transform: uppercase;\n font-size: 0.7em;\n font-weight: 600;\n color: rgb(63, 121, 230);\n padding: 10px 7px 0;\n}\n\n.category:hover {\n cursor: pointer;\n}\n\n.heading {\n font-weight: 600;\n color: rgb(88, 87, 87);\n padding: 7px;\n}\n\n.heading:hover {\n cursor: pointer;\n}\n\n.author {\n color: gray;\n font-weight: 400;\n font-size: 11px;\n padding-top: 20px;\n}\n\n.name {\n font-weight: 600;\n}\n\n.name:hover {\n cursor: pointer;\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"05ce7b","snapshot":null,"tags":null,"title":"card by joe-watson-sbf","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":124,"cssLen":653,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

HOVER ME

","css":".card {\n width: 210px;\n height: 254px;\n border-radius: 4px;\n background: #212121;\n display: flex;\n gap: 5px;\n padding: .4em;\n}\n\n.card p {\n height: 100%;\n flex: 1;\n overflow: hidden;\n cursor: pointer;\n border-radius: 2px;\n transition: all .5s;\n background: #212121;\n border: 1px solid #ff5a91;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card p:hover {\n flex: 4;\n}\n\n.card p span {\n min-width: 14em;\n padding: .5em;\n text-align: center;\n transform: rotate(-90deg);\n transition: all .5s;\n text-transform: uppercase;\n color: #ff568e;\n letter-spacing: .1em;\n}\n\n.card p:hover span {\n transform: rotate(0);\n}"}]}},"actionData":null,"errors":null}