{"loaderData":{"0":null,"0-2":{"total":7187,"projects":[{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"0a43d1","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1130,"cssLen":704,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

\n \n

lorem ipsum dolor sit amet

","css":".error {\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n width: 320px;\n padding: 12px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: start;\n background: #EF665B;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.error__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.error__icon path {\n fill: #fff;\n}\n\n.error__title {\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n}\n\n.error__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.error__close path {\n fill: #fff;\n}"},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"1c4538","snapshot":null,"tags":null,"title":"card by sahilxkhadka","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3420,"cssLen":631,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

24°

H:32° L: 16°

Kathmandu, Nepal

Mid Rain

","css":".card {\n width: 342px;\n height: 184px;\n position: relative;\n padding: 20px;\n color: #fff;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.background {\n fill: linear-gradient(90deg, #5936B4 0%, #362A84 100%);\n position: absolute;\n inset: 0;\n z-index: -1;\n}\n\n.cloud {\n position: absolute;\n right: 0;\n top: -12px;\n}\n\n.cloud svg {\n height: 120px;\n}\n\n.card .main-text {\n font-size: 48px;\n z-index: 2;\n}\n\n.card .info {\n display: flex;\n justify-content: space-between;\n}\n\n.card .info .text-gray {\n color: rgba(235, 235, 245, 0.60);\n}\n\n.card .info .info-right {\n align-self: flex-end;\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"765975","snapshot":null,"tags":null,"title":"card by SouravBandyopadhyay","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":229,"cssLen":1831,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Welcome To Uiverse

Contribute to Open Source UI Elements

","css":".notification {\n display: flex;\n flex-direction: column;\n isolation: isolate;\n position: relative;\n width: 18rem;\n height: 8rem;\n background: #29292c;\n border-radius: 1rem;\n overflow: hidden;\n font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;\n font-size: 16px;\n --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);\n --color: #32a6ff\n}\n\n.notification:before {\n position: absolute;\n content: \"\";\n inset: 0.0625rem;\n border-radius: 0.9375rem;\n background: #18181b;\n z-index: 2\n}\n\n.notification:after {\n position: absolute;\n content: \"\";\n width: 0.25rem;\n inset: 0.65rem auto 0.65rem 0.5rem;\n border-radius: 0.125rem;\n background: var(--gradient);\n transition: transform 300ms ease;\n z-index: 4;\n}\n\n.notification:hover:after {\n transform: translateX(0.15rem)\n}\n\n.notititle {\n color: var(--color);\n padding: 0.65rem 0.25rem 0.4rem 1.25rem;\n font-weight: 500;\n font-size: 1.1rem;\n transition: transform 300ms ease;\n z-index: 5;\n}\n\n.notification:hover .notititle {\n transform: translateX(0.15rem)\n}\n\n.notibody {\n color: #99999d;\n padding: 0 1.25rem;\n transition: transform 300ms ease;\n z-index: 5;\n}\n\n.notification:hover .notibody {\n transform: translateX(0.25rem)\n}\n\n.notiglow,\n.notiborderglow {\n position: absolute;\n width: 20rem;\n height: 20rem;\n transform: translate(-50%, -50%);\n background: radial-gradient(circle closest-side at center, white, transparent);\n opacity: 0;\n transition: opacity 300ms ease;\n}\n\n.notiglow {\n z-index: 3;\n}\n\n.notiborderglow {\n z-index: 1;\n}\n\n.notification:hover .notiglow {\n opacity: 0.1\n}\n\n.notification:hover .notiborderglow {\n opacity: 0.1\n}\n\n.note {\n color: var(--color);\n position: fixed;\n top: 80%;\n left: 50%;\n transform: translateX(-50%);\n text-align: center;\n font-size: 0.9rem;\n width: 75%;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"0d0299","snapshot":null,"tags":null,"title":"card by G4b413l","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":167,"cssLen":1252,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

This is a chair.

\n Cool Chair\n $100\n

","css":".card {\n position: relative;\n width: 11.875em;\n height: 16.5em;\n box-shadow: 0px 1px 13px rgba(0,0,0,0.1);\n cursor: pointer;\n transition: all 120ms;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n padding: 0.5em;\n padding-bottom: 3.4em;\n}\n\n.card::after {\n content: \"Add to Cart\";\n padding-top: 1.25em;\n padding-left: 1.25em;\n position: absolute;\n left: 0;\n bottom: -60px;\n background: #00AC7C;\n color: #fff;\n height: 2.5em;\n width: 90%;\n transition: all 80ms;\n font-weight: 600;\n text-transform: uppercase;\n opacity: 0;\n}\n\n.card .title {\n font-family: Arial, Helvetica, sans-serif;\n font-size: 0.9em;\n position: absolute;\n left: 0.625em;\n bottom: 1.875em;\n font-weight: 400;\n color: #000;\n}\n\n.card .price {\n font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;\n font-size: 0.9em;\n position: absolute;\n left: 0.625em;\n bottom: 0.625em;\n color: #000;\n}\n\n.card:hover::after {\n bottom: 0;\n opacity: 1;\n}\n\n.card:active {\n transform: scale(0.98);\n}\n\n.card:active::after {\n content: \"Added !\";\n height: 3.125em;\n}\n\n.text {\n max-width: 55px;\n}\n\n.image {\n background: rgb(241, 241, 241);\n width: 100%;\n height: 100%;\n display: grid;\n place-items: center;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"e499b3","snapshot":null,"tags":null,"title":"card by aadium","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1515,"cssLen":1214,"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

#include <iostream>\nusing namespace std;\n\nint main() {\n\n  int a = 12;\n  int b = 5;\n\n  cout << \"Sum of the numbers\n    is: \" << (a + b);\n\n  return 0;\n\n}\n

\n","css":".card {\n width: 250px;\n height: 300px;\n background: #15001f;\n border: 1px solid #c042ff;\n font-size: 14px;\n font-family: monospace;\n overflow: auto;\n}\n\n.titlebar {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n font-size: 21px;\n font-weight: 450;\n background-color: #2e0043;\n width: 100%;\n text-align: right;\n}\n\n.card button {\n width: 40px;\n height: 35px;\n margin-left: -5px;\n border: 0;\n outline: 0;\n background: transparent;\n transition: 0.2s;\n}\n\nbutton svg path, \nbutton svg rect, \nbutton svg polygon {\n fill: #ffffff;\n}\n\nbutton svg {\n width: 10px;\n height: 10px;\n}\n\n.close:hover {\n background-color: #e81123;\n}\n\n.maximize:hover {\n background-color: #c042ff2e;\n}\n\n.minimize:hover {\n background-color: #c042ff2e;\n}\n\n#pre {\n overflow: auto;\n width: 100%;\n padding: 10px;\n height: auto;\n color: #bafff8;\n}\n\n.curlies {\n color: #ff0000;\n}\n\n.sc {\n color: #e600ff;\n}\n\n.rounds {\n color: #ffffff;\n}\n\n.operator {\n color: #ffff00;\n}\n\n.s1 {\n color: #22ff00;\n}\n\n.s2 {\n color: #4281ff;\n}\n\n.s3 {\n color: #ff4284;\n}\n\n.s4 {\n color: #ffae00;\n}\n\n.s5 {\n color: #ffffff;\n}\n\n.s6 {\n color: #ffff00;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"bd3d31","snapshot":null,"tags":null,"title":"card by Pravins01","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1104,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Popular this month\n

\n Powered By\n

Uiverse\n

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background-color: #000;\n display: flex;\n flex-direction: column;\n justify-content: end;\n padding: 12px;\n gap: 12px;\n border-radius: 8px;\n cursor: pointer;\n color: white;\n}\n\n.card::before {\n content: '';\n position: absolute;\n inset: 0;\n left: -5px;\n margin: auto;\n width: 200px;\n height: 264px;\n border-radius: 10px;\n background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% );\n z-index: -10;\n pointer-events: none;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card::after {\n content: \"\";\n z-index: -1;\n position: absolute;\n inset: 0;\n background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% );\n transform: translate3d(0, 0, 0) scale(0.95);\n filter: blur(20px);\n}\n\n.heading {\n font-size: 20px;\n text-transform: capitalize;\n font-weight: 700;\n}\n\n.card p:not(.heading) {\n font-size: 14px;\n}\n\n.card p:last-child {\n color: #e81cff;\n font-weight: 600;\n}\n\n.card:hover::after {\n filter: blur(30px);\n}\n\n.card:hover::before {\n transform: rotate(-90deg) scaleX(1.34) scaleY(0.77);\n}\n\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"4fbd8e","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1192,"cssLen":4335,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Product title

Product description. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

$ 123.45

\n \n

","css":"/* before adding the img to the div with the \n\"card-img\" class, remove css styles \n.card-img .img::before and .card-img .img::after,\nthen set the desired styles for .card-img. */\n.card {\n --font-color: #323232;\n --font-color-sub: #666;\n --bg-color: #fff;\n --main-color: #323232;\n --main-focus: #2d8cf0;\n width: 230px;\n height: 300px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n box-shadow: 4px 4px var(--main-color);\n border-radius: 5px;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n padding: 20px;\n gap: 10px;\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\n}\n\n.card:last-child {\n justify-content: flex-end;\n}\n\n.card-img {\n /* clear and add new css */\n transition: all 0.5s;\n display: flex;\n justify-content: center;\n}\n\n.card-img .img {\n /* delete */\n transform: scale(1);\n position: relative;\n box-sizing: border-box;\n width: 100px;\n height: 100px;\n border-top-left-radius: 80px 50px;\n border-top-right-radius: 80px 50px;\n border: 2px solid black;\n background-color: #228b22;\n background-image: linear-gradient(to top,transparent 10px,rgba(0,0,0,0.3) 10px,rgba(0,0,0,0.3) 13px,transparent 13px);\n}\n\n.card-img .img::before {\n /* delete */\n content: '';\n position: absolute;\n width: 65px;\n height: 110px;\n margin-left: -32.5px;\n left: 50%;\n bottom: -4px;\n background-repeat: no-repeat;\n background-image: radial-gradient(ellipse at center,rgba(0,0,0,0.7) 30%,transparent 30%),linear-gradient(to top,transparent 17px,rgba(0,0,0,0.3) 17px,rgba(0,0,0,0.3) 20px,transparent 20px),linear-gradient(to right,black 2px,transparent 2px),linear-gradient(to left,black 2px,transparent 2px),linear-gradient(to top,black 2px,#228b22 2px);\n background-size: 60% 10%,100% 100%,100% 65%,100% 65%,100% 50%;\n background-position: center 3px,center bottom,center bottom,center bottom,center bottom;\n border-radius: 0 0 4px 4px;\n z-index: 2;\n}\n\n.card-img .img::after {\n /* delete */\n content: '';\n position: absolute;\n box-sizing: border-box;\n width: 28px;\n height: 28px;\n margin-left: -14px;\n left: 50%;\n top: -13px;\n background-repeat: no-repeat;\n background-image: linear-gradient(80deg,#ffc0cb 45%,transparent 45%),linear-gradient(-175deg,#ffc0cb 45%,transparent 45%),linear-gradient(80deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),linear-gradient(-175deg,rgba(0,0,0,0.2) 51%,rgba(0,0,0,0) 51%),radial-gradient(circle at center,#ffa6b6 45%,rgba(0,0,0,0.2) 45%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(45deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(65deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 52%,rgba(0,0,0,0) 52%),linear-gradient(22deg,rgba(0,0,0,0) 48%,rgba(0,0,0,0.2) 48%,rgba(0,0,0,0.2) 54%,rgba(0,0,0,0) 54%);\n background-size: 100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 75%,100% 95%,100% 60%;\n background-position: center center;\n border-top-left-radius: 120px;\n border-top-right-radius: 10px;\n border-bottom-left-radius: 10px;\n border-bottom-right-radius: 70px;\n border-top: 2px solid black;\n border-left: 2px solid black;\n transform: rotate(45deg);\n z-index: 1;\n}\n\n.card-title {\n font-size: 20px;\n font-weight: 500;\n text-align: center;\n color: var(--font-color);\n}\n\n.card-subtitle {\n font-size: 14px;\n font-weight: 400;\n color: var(--font-color-sub);\n}\n\n.card-divider {\n width: 100%;\n border: 1px solid var(--main-color);\n border-radius: 50px;\n}\n\n.card-footer {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.card-price {\n font-size: 20px;\n font-weight: 500;\n color: var(--font-color);\n}\n\n.card-price span {\n font-size: 20px;\n font-weight: 500;\n color: var(--font-color-sub);\n}\n\n.card-btn {\n height: 35px;\n background: var(--bg-color);\n border: 2px solid var(--main-color);\n border-radius: 5px;\n padding: 0 15px;\n transition: all 0.3s;\n}\n\n.card-btn svg {\n width: 100%;\n height: 100%;\n fill: var(--main-color);\n transition: all 0.3s;\n}\n\n.card-img:hover {\n transform: translateY(-3px);\n}\n\n.card-btn:hover {\n border: 2px solid var(--main-focus);\n}\n\n.card-btn:hover svg {\n fill: var(--main-focus);\n}\n\n.card-btn:active {\n transform: translateY(3px);\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"4e8a42","snapshot":null,"tags":null,"title":"card by github-bishwajeet","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":222,"cssLen":930,"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

","css":".card {\n width: 190px;\n height: 190px;\n border-radius: 44px;\n background: lightgrey;\n background: linear-gradient(145deg, #ff6b6b, #d43636);\n box-shadow: 2px 3px 3px #ba2f2f,\n 2px 3px 3px #ff4949;\n}\n\n.avatar {\n width: 45px;\n height: 45px;\n display: inline-block;\n background-color: rgba(255,255,255,0.9);\n margin: 30px 15px 20px 25px;\n border-radius: 14px;\n}\n\n.info {\n display: inline-block;\n vertical-align: top;\n margin-top: 33px;\n width: 85px;\n}\n\n.info-1, .info-2 {\n display: inline-block;\n height: 20px;\n width: 100%;\n border-radius: 6px;\n background: rgba(255,255,255,0.9);\n}\n\n.info-2 {\n height: 11px;\n width: 50%;\n border-radius: 3px;\n}\n\n.content-1 {\n width: 80%;\n border-radius: 12px;\n background: rgba(255,255,255,0.9);\n height: 40px;\n margin: auto;\n}\n\n.content-2 {\n width: 60%;\n border-radius: 6px;\n background: rgba(255,255,255,0.9);\n height: 18px;\n margin: 10px 0 0 20px;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"0177de","snapshot":null,"tags":null,"title":"card by LilaRest","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":116,"cssLen":897,"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 --bg: #e8e8e8;\n --contrast: #e2e0e0;\n --grey: #93a1a1;\n position: relative;\n padding: 9px;\n background-color: var(--bg);\n border-radius: 35px;\n box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;\n}\n\n.card-overlay {\n position: absolute;\n inset: 0;\n pointer-events: none;\n background: repeating-conic-gradient(var(--bg) 0.0000001%, var(--grey) 0.000104%) 60% 60%/600% 600%;\n filter: opacity(10%) contrast(105%);\n}\n\n.card-inner {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n width: 190px;\n height: 254px;\n background-color: var(--contrast);\n border-radius: 30px;\n /* Content style */\n font-size: 30px;\n font-weight: 900;\n color: #c7c4c4;\n text-align: center;\n font-family: monospace;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"d74503","snapshot":null,"tags":null,"title":"card by Codewithvinay","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":96,"cssLen":2068,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Hover me!

","css":".box {\n position: relative;\n width: 220px;\n height: 300px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: 0.5s;\n z-index: 1;\n}\n\n.box::before {\n content: ' ';\n position: absolute;\n top: 0;\n left: 50px;\n width: 50%;\n height: 100%;\n text-decoration: none;\n background: #fff;\n border-radius: 8px;\n transform: skewX(15deg);\n transition: 0.5s;\n}\n\n.box::after {\n content: '';\n position: absolute;\n top: 0;\n left: 50;\n width: 50%;\n height: 100%;\n background: #fff;\n border-radius: 8px;\n transform: skewX(15deg);\n transition: 0.5s;\n filter: blur(30px);\n}\n\n.box:hover:before,\n.box:hover:after {\n transform: skewX(0deg) scaleX(1.3);\n}\n\n.box:before,\n.box:after {\n background: linear-gradient(315deg, #ffbc00, #ff0058)\n}\n\n.box span {\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 5;\n pointer-events: none;\n}\n\n.box span::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 0;\n height: 0;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n opacity: 0;\n transition: 0.1s;\n animation: animate 2s ease-in-out infinite;\n box-shadow: 0 5px 15px rgba(0,0,0,0.08)\n}\n\n.box span::before {\n top: -40px;\n left: 40px;\n width: 50px;\n height: 50px;\n opacity: 1;\n}\n\n.box span::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n width: 100%;\n height: 100%;\n border-radius: 8px;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n opacity: 0;\n transition: 0.5s;\n box-shadow: 0 5px 15px rgba(0,0,0,0.08);\n animation-delay: -1s;\n}\n\n.box span:after {\n bottom: -40px;\n right: 40px;\n width: 50px;\n height: 50px;\n opacity: 1;\n}\n\n.box .content {\n position: relative;\n width: 190px;\n height: 254px;\n padding: 20px 40px;\n background: rgba(255, 255, 255, 0.05);\n backdrop-filter: blur(10px);\n box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);\n border-radius: 8px;\n z-index: 1;\n transform: 0.5s;\n color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.box .content h2 {\n font-size: 20px;\n color: #fff;\n margin-bottom: 10px;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"070d4e","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":880,"cssLen":1603,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".card {\n overflow: hidden;\n position: relative;\n background-color: #ffffff;\n text-align: left;\n border-radius: 0.5rem;\n max-width: 290px;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n}\n\n.header {\n padding: 1.25rem 1rem 1rem 1rem;\n background-color: #ffffff;\n}\n\n.image {\n display: flex;\n margin-left: auto;\n margin-right: auto;\n background-color: #FEE2E2;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 3rem;\n height: 3rem;\n border-radius: 9999px;\n}\n\n.image svg {\n color: #DC2626;\n width: 1.5rem;\n height: 1.5rem;\n}\n\n.content {\n margin-top: 0.75rem;\n text-align: center;\n}\n\n.title {\n color: #111827;\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.5rem;\n}\n\n.message {\n margin-top: 0.5rem;\n color: #6B7280;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.actions {\n margin: 0.75rem 1rem;\n background-color: #F9FAFB;\n}\n\n.desactivate {\n display: inline-flex;\n padding: 0.5rem 1rem;\n background-color: #DC2626;\n color: #ffffff;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 500;\n justify-content: center;\n width: 100%;\n border-radius: 0.375rem;\n border-width: 1px;\n border-color: transparent;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.cancel {\n display: inline-flex;\n margin-top: 0.75rem;\n padding: 0.5rem 1rem;\n background-color: #ffffff;\n color: #374151;\n font-size: 1rem;\n line-height: 1.5rem;\n font-weight: 500;\n justify-content: center;\n width: 100%;\n border-radius: 0.375rem;\n border: 1px solid #D1D5DB;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"8cc19a","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":215,"cssLen":855,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Card title

Here are the details of the card

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 20px;\n background: #f5f5f5;\n position: relative;\n padding: 1.8rem;\n border: 2px solid #c3c6ce;\n transition: 0.5s ease-out;\n overflow: visible;\n}\n\n.card-details {\n color: black;\n height: 100%;\n gap: .5em;\n display: grid;\n place-content: center;\n}\n\n.card-button {\n transform: translate(-50%, 125%);\n width: 60%;\n border-radius: 1rem;\n border: none;\n background-color: #008bf8;\n color: #fff;\n font-size: 1rem;\n padding: .5rem 1rem;\n position: absolute;\n left: 50%;\n bottom: 0;\n opacity: 0;\n transition: 0.3s ease-out;\n}\n\n.text-body {\n color: rgb(134, 134, 134);\n}\n\n/*Text*/\n.text-title {\n font-size: 1.5em;\n font-weight: bold;\n}\n\n/*Hover*/\n.card:hover {\n border-color: #008bf8;\n box-shadow: 0 4px 18px 0 rgba(0, 0, 0, 0.25);\n}\n\n.card:hover .card-button {\n transform: translate(-50%, 50%);\n opacity: 1;\n}"}]}},"actionData":null,"errors":null}