{"loaderData":{"0":null,"0-3":{"total":7364,"projects":[{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"00dd8d","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":373,"cssLen":1417,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\n

How to make this material card ?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime mollitia,\nmolestiae quas vel sint commodi.

\n\n

","css":".card {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n border-radius: 0.75rem;\n background-color: white;\n width: 300px;\n height: 370px;\n box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),\n 0 2px 4px -2px rgba(0,0,0,.1);\n}\n\n.header {\n position: relative;\n background-clip: border-box;\n margin-top: 1.5rem;\n margin-left: 1rem;\n margin-right: 1rem;\n border-radius: 0.75rem;\n background-color: rgb(33 150 243);\n box-shadow: 0 10px 15px -3px rgba(33,150,243,.4),0 4px 6px -4px rgba(33,150,243,.4);\n height: 14rem;\n}\n\n.info {\n border: none;\n padding: 1.5rem;\n text-align: center;\n}\n\n.title {\n color: rgb(38 50 56);\n letter-spacing: 0;\n line-height: 1.375;\n font-weight: 600;\n font-size: 1.25rem;\n margin-bottom: 0.5rem;\n}\n\n.footer {\n padding: 0.75rem;\n border: 1px solid rgb(236 239 241);\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: rgba(0, 140, 255, 0.082);\n}\n\n.tag {\n font-weight: 300;\n font-size: .75rem;\n display: block;\n}\n\n.action {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n border: none;\n outline: none;\n box-shadow: 0 4px 6px -1px rgba(33,150,243,.4),0 2px 4px -2px rgba(33,150,243,.4);\n color: rgb(255 255 255);\n text-transform: uppercase;\n font-weight: 700;\n font-size: .75rem;\n padding: 0.75rem 1.5rem;\n background-color: rgb(33 150 243);\n border-radius: 0.5rem;\n}\n\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"dac69f","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5236,"cssLen":1207,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In massa ipsum, laoreet quis mollis nec, feugiat in dui. Suspendisse et enim pretium, ullamcorper enim laoreet.

from: @Yaya12085\n \n

","css":".card {\n position: relative;\n background-color: #30344c;\n padding: 1em;\n z-index: 5;\n box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);\n border-radius: 10px;\n max-width: 300px;\n transition: 200ms ease-in-out;\n}\n\n.username {\n color: #C6E1ED;\n font-size: 0.85em;\n font-weight: 600;\n}\n\n.body {\n display: flex;\n flex-direction: column;\n}\n\n.body .text {\n margin: 0 10px 0 0;\n white-space: pre-line;\n color: #c0c3d7;\n font-weight: 400;\n line-height: 1.5;\n margin-bottom: 4px;\n}\n\n.footer {\n position: relative;\n width: 100%;\n color: #9fa4aa;\n font-size: 12px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border: none;\n margin-top: 10px;\n}\n\n.footer div {\n margin-right: 1rem;\n height: 20px;\n display: flex;\n align-items: center;\n cursor: pointer;\n}\n\n.footer svg {\n margin-right: 5px;\n height: 100%;\n stroke: #9fa4aa;\n}\n\n.viewer span {\n height: 20px;\n width: 20px;\n background-color: rgb(28, 117, 219);\n margin-right: -6px;\n border-radius: 50%;\n border: 1px solid #fff;\n display: grid;\n align-items: center;\n text-align: center;\n font-weight: bold;\n font-size: 8px;\n color: #fff;\n padding: 2px;\n}\n\n.viewer span svg {\n stroke: #fff;\n}\n\n\n\n\n\n\n\n\n\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"a2cec8","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4997,"cssLen":2537,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n UNIVERSE OF UI\n

\n 2626\n UI elements\n

\n 100%\n Free for use\n

\n 38,631\n Contributers\n

","css":".card {\n width: 230px;\n border-radius: 20px;\n background: #1b233d;\n padding: 5px;\n overflow: hidden;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 20px 0px;\n transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover {\n transform: scale(1.05);\n}\n\n.card .top-section {\n height: 150px;\n border-radius: 15px;\n display: flex;\n flex-direction: column;\n background: linear-gradient(45deg, rgb(4, 159, 187) 0%, rgb(80, 246, 255) 100%);\n position: relative;\n}\n\n.card .top-section .border {\n border-bottom-right-radius: 10px;\n height: 30px;\n width: 130px;\n background: white;\n background: #1b233d;\n position: relative;\n transform: skew(-40deg);\n box-shadow: -10px -10px 0 0 #1b233d;\n}\n\n.card .top-section .border::before {\n content: \"\";\n position: absolute;\n width: 15px;\n height: 15px;\n top: 0;\n right: -15px;\n background: rgba(255, 255, 255, 0);\n border-top-left-radius: 10px;\n box-shadow: -5px -5px 0 2px #1b233d;\n}\n\n.card .top-section::before {\n content: \"\";\n position: absolute;\n top: 30px;\n left: 0;\n background: rgba(255, 255, 255, 0);\n height: 15px;\n width: 15px;\n border-top-left-radius: 15px;\n box-shadow: -5px -5px 0 2px #1b233d;\n}\n\n.card .top-section .icons {\n position: absolute;\n top: 0;\n width: 100%;\n height: 30px;\n display: flex;\n justify-content: space-between;\n}\n\n.card .top-section .icons .logo {\n height: 100%;\n aspect-ratio: 1;\n padding: 7px 0 7px 15px;\n}\n\n.card .top-section .icons .logo .top-section {\n height: 100%;\n}\n\n.card .top-section .icons .social-media {\n height: 100%;\n padding: 8px 15px;\n display: flex;\n gap: 7px;\n}\n\n.card .top-section .icons .social-media .svg {\n height: 100%;\n fill: #1b233d;\n}\n\n.card .top-section .icons .social-media .svg:hover {\n fill: white;\n}\n\n.card .bottom-section {\n margin-top: 15px;\n padding: 10px 5px;\n}\n\n.card .bottom-section .title {\n display: block;\n font-size: 17px;\n font-weight: bolder;\n color: white;\n text-align: center;\n letter-spacing: 2px;\n}\n\n.card .bottom-section .row {\n display: flex;\n justify-content: space-between;\n margin-top: 20px;\n}\n\n.card .bottom-section .row .item {\n flex: 30%;\n text-align: center;\n padding: 5px;\n color: rgba(170, 222, 243, 0.721);\n}\n\n.card .bottom-section .row .item .big-text {\n font-size: 12px;\n display: block;\n}\n\n.card .bottom-section .row .item .regular-text {\n font-size: 9px;\n}\n\n.card .bottom-section .row .item:nth-child(2) {\n border-left: 1px solid rgba(255, 255, 255, 0.126);\n border-right: 1px solid rgba(255, 255, 255, 0.126);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"0b67fb","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":96,"cssLen":903,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Magic Card

","css":".card {\n --background: linear-gradient(to left, #f7ba2b 0%, #ea5358 100%);\n width: 190px;\n height: 254px;\n padding: 5px;\n border-radius: 1rem;\n overflow: visible;\n background: #f7ba2b;\n background: var(--background);\n position: relative;\n z-index: 1;\n}\n\n.card::after {\n position: absolute;\n content: \"\";\n top: 30px;\n left: 0;\n right: 0;\n z-index: -1;\n height: 100%;\n width: 100%;\n transform: scale(0.8);\n filter: blur(25px);\n background: #f7ba2b;\n background: var(--background);\n transition: opacity .5s;\n}\n\n.card-info {\n --color: #181818;\n background: var(--color);\n color: var(--color);\n display: flex;\n justify-content: center;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: visible;\n border-radius: .7rem;\n}\n\n.card .title {\n font-weight: bold;\n letter-spacing: .1em;\n}\n\n/*Hover*/\n.card:hover::after {\n opacity: 0;\n}\n\n.card:hover .card-info {\n color: #f7ba2b;\n transition: color 1s;\n}\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"f447a4","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1144,"cssLen":4538,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Tailwind card\n

\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc felis ligula. \n

\n \n

","css":".relative {\n position: relative\n}\n\n.mx-4 {\n margin-left: 1rem;\n margin-right: 1rem\n}\n\n.-mt-6 {\n margin-top: -1.5rem\n}\n\n.mb-2 {\n margin-bottom: 0.5rem\n}\n\n.block {\n display: block\n}\n\n.flex {\n display: flex\n}\n\n.h-40 {\n height: 10rem\n}\n\n.w-80 {\n width: 20rem\n}\n\n.select-none {\n -webkit-user-select: none;\n user-select: none\n}\n\n.flex-col {\n flex-direction: column\n}\n\n.overflow-hidden {\n overflow: hidden\n}\n\n.rounded-lg {\n border-radius: 0.5rem\n}\n\n.rounded-xl {\n border-radius: 0.75rem\n}\n\n.bg-blue-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n\n.bg-white {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n\n.bg-gradient-to-r {\n background-image: linear-gradient(to right, var(--tw-gradient-stops))\n}\n\n.from-blue-500 {\n --tw-gradient-from: #3b82f6 var(--tw-gradient-from-position);\n --tw-gradient-to: rgb(59 130 246 / 0) var(--tw-gradient-to-position);\n --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to)\n}\n\n.to-blue-600 {\n --tw-gradient-to: #2563eb var(--tw-gradient-to-position)\n}\n\n.bg-clip-border {\n background-clip: border-box\n}\n\n.p-6 {\n padding: 1.5rem\n}\n\n.px-6 {\n padding-left: 1.5rem;\n padding-right: 1.5rem\n}\n\n.py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n\n.pt-0 {\n padding-top: 0px\n}\n\n.text-center {\n text-align: center\n}\n\n.align-middle {\n vertical-align: middle\n}\n\n.font-sans {\n font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"\n}\n\n.text-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n\n.text-xl {\n font-size: 1.25rem;\n line-height: 1.75rem\n}\n\n.text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n\n.font-bold {\n font-weight: 700\n}\n\n.font-light {\n font-weight: 300\n}\n\n.font-semibold {\n font-weight: 600\n}\n\n.uppercase {\n text-transform: uppercase\n}\n\n.leading-relaxed {\n line-height: 1.625\n}\n\n.leading-snug {\n line-height: 1.375\n}\n\n.tracking-normal {\n letter-spacing: 0em\n}\n\n.text-gray-700 {\n --tw-text-opacity: 1;\n color: rgb(55 65 81 / var(--tw-text-opacity))\n}\n\n.text-inherit {\n color: inherit\n}\n\n.text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n\n.antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale\n}\n\n.shadow-lg {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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-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.shadow-blue-500\\/20 {\n --tw-shadow-color: rgb(59 130 246 / 0.2);\n --tw-shadow: var(--tw-shadow-colored)\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.hover\\:shadow-lg:hover {\n --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px 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.hover\\:shadow-blue-500\\/40:hover {\n --tw-shadow-color: rgb(59 130 246 / 0.4);\n --tw-shadow: var(--tw-shadow-colored)\n}\n\n.focus\\:opacity-\\[0\\.85\\]:focus {\n opacity: 0.85\n}\n\n.focus\\:shadow-none:focus {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.active\\:opacity-\\[0\\.85\\]:active {\n opacity: 0.85\n}\n\n.active\\:shadow-none:active {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n\n.disabled\\:pointer-events-none:disabled {\n pointer-events: none\n}\n\n.disabled\\:opacity-50:disabled {\n opacity: 0.5\n}\n\n.disabled\\:shadow-none:disabled {\n --tw-shadow: 0 0 #0000;\n --tw-shadow-colored: 0 0 #0000;\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"95bbd4","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1571,"cssLen":1071,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Product title

Product description and details

\n $499.49\n

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n padding: .8em;\n background: #f5f5f5;\n position: relative;\n overflow: visible;\n box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);\n}\n\n.card-img {\n background-color: #ffcaa6;\n height: 40%;\n width: 100%;\n border-radius: .5rem;\n transition: .3s ease;\n}\n\n.card-info {\n padding-top: 10%;\n}\n\nsvg {\n width: 20px;\n height: 20px;\n}\n\n.card-footer {\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 10px;\n border-top: 1px solid #ddd;\n}\n\n/*Text*/\n.text-title {\n font-weight: 900;\n font-size: 1.2em;\n line-height: 1.5;\n}\n\n.text-body {\n font-size: .9em;\n padding-bottom: 10px;\n}\n\n/*Button*/\n.card-button {\n border: 1px solid #252525;\n display: flex;\n padding: .3em;\n cursor: pointer;\n border-radius: 50px;\n transition: .3s ease-in-out;\n}\n\n/*Hover*/\n.card-img:hover {\n transform: translateY(-25%);\n box-shadow: rgba(226, 196, 63, 0.25) 0px 13px 47px -5px, rgba(180, 71, 71, 0.3) 0px 8px 16px -8px;\n}\n\n.card-button:hover {\n border: 1px solid #ffcaa6;\n background-color: #ffcaa6;\n}\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"c5362a","snapshot":null,"tags":null,"title":"card by suleymanlaarabidev","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":149,"cssLen":974,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n First\n

\nSecond\n

\n\n\n

","css":".card {\n width: 190px;\n height: 254px;\n background: rgb(103, 225, 255);\n transition: all 0.4s;\n border-radius: 10px;\n box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705);\n font-size: 30px;\n font-weight: 900;\n}\n\n.card:hover {\n border-radius: 15px;\n cursor: pointer;\n transform: scale(1.2);\n box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.705);\n background: rgb(103, 151, 255);\n}\n\n.first-content {\n height: 100%;\n width: 100%;\n transition: all 0.4s;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: 1;\n border-radius: 15px;\n}\n\n.card:hover .first-content {\n height: 0px;\n opacity: 0;\n}\n\n.second-content {\n height: 0%;\n width: 100%;\n opacity: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 15px;\n transition: all 0.4s;\n font-size: 0px;\n transform: rotate(90deg) scale(-1);\n}\n\n.card:hover .second-content {\n opacity: 1;\n height: 100%;\n font-size: 1.8rem;\n transform: rotate(0deg);\n}\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"910ffc","snapshot":null,"tags":null,"title":"card by abrahamcalsin","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3717,"cssLen":1941,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Jhon Doe\n CEO of WritBook\n \n

\n \n

","css":".card-client {\n background: #2cb5a0;\n width: 13rem;\n padding-top: 25px;\n padding-bottom: 25px;\n padding-left: 20px;\n padding-right: 20px;\n border: 4px solid #7cdacc;\n box-shadow: 0 6px 10px rgba(207, 212, 222, 1);\n border-radius: 10px;\n text-align: center;\n color: #fff;\n font-family: \"Poppins\", sans-serif;\n transition: all 0.3s ease;\n}\n\n.card-client:hover {\n transform: translateY(-10px);\n}\n\n.user-picture {\n overflow: hidden;\n object-fit: cover;\n width: 5rem;\n height: 5rem;\n border: 4px solid #7cdacc;\n border-radius: 999px;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: auto;\n}\n\n.user-picture svg {\n width: 2.5rem;\n fill: currentColor;\n}\n\n.name-client {\n margin: 0;\n margin-top: 20px;\n font-weight: 600;\n font-size: 18px;\n}\n\n.name-client span {\n display: block;\n font-weight: 200;\n font-size: 16px;\n}\n\n.social-media:before {\n content: \" \";\n display: block;\n width: 100%;\n height: 2px;\n margin: 20px 0;\n background: #7cdacc;\n}\n\n.social-media a {\n position: relative;\n margin-right: 15px;\n text-decoration: none;\n color: inherit;\n}\n\n.social-media a:last-child {\n margin-right: 0;\n}\n\n.social-media a svg {\n width: 1.1rem;\n fill: currentColor;\n}\n\n/*-- Tooltip Social Media --*/\n.tooltip-social {\n background: #262626;\n display: block;\n position: absolute;\n bottom: 0;\n left: 50%;\n padding: 0.5rem 0.4rem;\n border-radius: 5px;\n font-size: 0.8rem;\n font-weight: 600;\n opacity: 0;\n pointer-events: none;\n transform: translate(-50%, -90%);\n transition: all 0.2s ease;\n z-index: 1;\n}\n\n.tooltip-social:after {\n content: \" \";\n position: absolute;\n bottom: 1px;\n left: 50%;\n border: solid;\n border-width: 10px 10px 0 10px;\n border-color: transparent;\n transform: translate(-50%, 100%);\n}\n\n.social-media a .tooltip-social:after {\n border-top-color: #262626;\n}\n\n.social-media a:hover .tooltip-social {\n opacity: 1;\n transform: translate(-50%, -130%);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"b0e299","snapshot":null,"tags":null,"title":"card by zanina-yassine","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":570,"cssLen":3249,"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 Messadine, Susah
Tunisia\n March 13\n

\n\n 23°\n\n

\n Celcius\n

","css":".card {\n width: 350px;\n height: 235px;\n position: relative;\n padding: 25px;\n background: radial-gradient(178.94% 106.41% at 26.42% 106.41%, #FFF7B1 0%, rgba(255, 255, 255, 0) 71.88%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */, #FFFFFF;\n box-shadow: 0px 155px 62px rgba(0, 0, 0, 0.01), 0px 87px 52px rgba(0, 0, 0, 0.05), 0px 39px 39px rgba(0, 0, 0, 0.09), 0px 10px 21px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n border-radius: 23px;\n transition: all 0.8s cubic-bezier(0.15, 0.83, 0.66, 1);\n cursor: pointer;\n}\n\n.card:hover {\n transform: scale(1.05);\n}\n\n.container {\n width: 250px;\n height: 250px;\n position: absolute;\n right: -35px;\n top: -50px;\n display: flex;\n align-items: center;\n justify-content: center;\n transform: scale(0.7);\n}\n\n.cloud {\n width: 250px;\n}\n\n.front {\n padding-top: 45px;\n margin-left: 25px;\n display: inline;\n position: absolute;\n z-index: 11;\n animation: clouds 8s infinite;\n animation-timing-function: ease-in-out;\n}\n\n.back {\n margin-top: -30px;\n margin-left: 150px;\n z-index: 12;\n animation: clouds 12s infinite;\n animation-timing-function: ease-in-out;\n}\n\n.right-front {\n width: 45px;\n height: 45px;\n border-radius: 50% 50% 50% 0%;\n background-color: #4c9beb;\n display: inline-block;\n margin-left: -25px;\n z-index: 5;\n}\n\n.left-front {\n width: 65px;\n height: 65px;\n border-radius: 50% 50% 0% 50%;\n background-color: #4c9beb;\n display: inline-block;\n z-index: 5;\n}\n\n.right-back {\n width: 50px;\n height: 50px;\n border-radius: 50% 50% 50% 0%;\n background-color: #4c9beb;\n display: inline-block;\n margin-left: -20px;\n z-index: 5;\n}\n\n.left-back {\n width: 30px;\n height: 30px;\n border-radius: 50% 50% 0% 50%;\n background-color: #4c9beb;\n display: inline-block;\n z-index: 5;\n}\n\n.sun {\n width: 120px;\n height: 120px;\n background: -webkit-linear-gradient(to right, #fcbb04, #fffc00);\n background: linear-gradient(to right, #fcbb04, #fffc00);\n border-radius: 60px;\n display: inline;\n position: absolute;\n}\n\n.sunshine {\n animation: sunshines 2s infinite;\n}\n\n@keyframes sunshines {\n 0% {\n transform: scale(1);\n opacity: 0.6;\n }\n\n 100% {\n transform: scale(1.4);\n opacity: 0;\n }\n}\n\n@keyframes clouds {\n 0% {\n transform: translateX(15px);\n }\n\n 50% {\n transform: translateX(0px);\n }\n\n 100% {\n transform: translateX(15px);\n }\n}\n\n.card-header {\n display: flex;\n flex-direction: column;\n gap: 10px;\n}\n\n.card-header span:first-child {\n word-break: break-all;\n font-weight: 800;\n font-size: 15px;\n line-height: 135%;\n color: rgba(87, 77, 51, 0.66);\n}\n\n.card-header span:last-child {\n font-weight: 700;\n font-size: 15px;\n line-height: 135%;\n color: rgba(87, 77, 51, 0.33);\n}\n\n.temp {\n position: absolute;\n left: 25px;\n bottom: 12px;\n font-weight: 700;\n font-size: 64px;\n line-height: 77px;\n color: rgba(87, 77, 51, 1);\n}\n\n.temp-scale {\n width: 80px;\n height: 36px;\n position: absolute;\n right: 25px;\n bottom: 25px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(0, 0, 0, 0.06);\n border-radius: 9px;\n}\n\n.temp-scale span {\n font-weight: 700;\n font-size: 13px;\n line-height: 134.49%;\n color: rgba(87, 77, 51, 0.66);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"3c9ef6","snapshot":null,"tags":null,"title":"card by Daniel1227k","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3141,"cssLen":1904,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Some Fomous
Creative Designer

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

","css":".card {\n position: relative;\n width: 190px;\n height: 254px;\n background: #f00;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: linear-gradient(315deg,#03a9f4,#ff0058);\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(315deg,#03a9f4,#ff0058);\n filter: blur(30px);\n}\n\n.card b {\n position: absolute;\n inset: 6px;\n background: rgba(0, 0, 0, 0.6);\n z-index: 2;\n}\n\n.card img {\n position: absolute;\n z-index: 3;\n scale: 0.8;\n opacity: 0.25;\n transition: 0.5s;\n}\n\n.card:hover img {\n scale: 0.5;\n opacity: 0.9;\n transform: translateY(-70px);\n}\n\n.card .content {\n position: absolute;\n z-index: 3;\n bottom: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n transform: scale(0);\n transition: 0.5s;\n}\n\n.card:hover .content {\n transform: scale(1);\n bottom: 25px;\n}\n\n.content .title {\n position: relative;\n color: #fff;\n font-weight: 500;\n line-height: 1em;\n font-size: 1em;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n text-align: center;\n}\n\n.content .title span {\n font-weight: 300;\n font-size: 0.70em;\n}\n\n.content .sci {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n margin-top: 5px;\n}\n\n.sci li {\n list-style: none;\n}\n\n.sci li .fa-brands {\n width: 14px;\n}\n\n.sci li .fa-facebook {\n width: 10px;\n}\n\n.sci li a {\n position: relative;\n text-decoration: none;\n color: rgba(255, 255, 255, 0.5);\n background: rgba(0, 0, 0, 0.2);\n fill: currentColor;\n width: 30px;\n height: 30px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 4px;\n transition: 0.5s;\n}\n\n.sci li a:hover {\n fill: currentColor;\n color: rgba(255, 255, 255, 1);\n}\n"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"c1af63","snapshot":null,"tags":null,"title":"card by kamehame-ha","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":392,"cssLen":709,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

Hover Me

Lorem Ipsum

","css":".cards {\n display: flex;\n flex-direction: column;\n gap: 15px;\n}\n\n.cards .red {\n background-color: #f43f5e;\n}\n\n.cards .blue {\n background-color: #3b82f6;\n}\n\n.cards .green {\n background-color: #22c55e;\n}\n\n.cards .card {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n height: 100px;\n width: 250px;\n border-radius: 10px;\n color: white;\n cursor: pointer;\n transition: 400ms;\n}\n\n.cards .card p.tip {\n font-size: 1em;\n font-weight: 700;\n}\n\n.cards .card p.second-text {\n font-size: .7em;\n}\n\n.cards .card:hover {\n transform: scale(1.1, 1.1);\n}\n\n.cards:hover > .card:not(:hover) {\n filter: blur(10px);\n transform: scale(0.9, 0.9);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"f969d2","snapshot":null,"tags":null,"title":"card by SteveBloX","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":36,"cssLen":561,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Click me\n

","css":".card {\n box-sizing: border-box;\n width: 190px;\n height: 254px;\n background: rgba(217, 217, 217, 0.58);\n border: 1px solid white;\n box-shadow: 12px 17px 51px rgba(0, 0, 0, 0.22);\n backdrop-filter: blur(6px);\n border-radius: 17px;\n text-align: center;\n cursor: pointer;\n transition: all 0.5s;\n display: flex;\n align-items: center;\n justify-content: center;\n user-select: none;\n font-weight: bolder;\n color: black;\n}\n\n.card:hover {\n border: 1px solid black;\n transform: scale(1.05);\n}\n\n.card:active {\n transform: scale(0.95) rotateZ(1.7deg);\n}"}]}},"actionData":null,"errors":null}