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

Clans of Clash

\n 12 min ago\n

Xhattmahs is not attacking your base!

","css":".card {\n width: 100%;\n max-width: 290px;\n height: 70px;\n background: #353535;\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: left;\n backdrop-filter: blur(10px);\n transition: 0.5s ease-in-out;\n}\n\n.card:hover {\n cursor: pointer;\n transform: scale(1.05);\n}\n\n.img {\n width: 50px;\n height: 50px;\n margin-left: 10px;\n border-radius: 10px;\n background: linear-gradient(#d7cfcf, #9198e5);\n}\n\n.card:hover > .img {\n transition: 0.5s ease-in-out;\n background: linear-gradient(#9198e5, #712020);\n}\n\n.textBox {\n width: calc(100% - 90px);\n margin-left: 10px;\n color: white;\n font-family: 'Poppins' sans-serif;\n}\n\n.textContent {\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.span {\n font-size: 10px;\n}\n\n.h1 {\n font-size: 16px;\n font-weight: bold;\n}\n\n.p {\n font-size: 12px;\n font-weight: lighter;\n}\n\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"569459","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4021,"cssLen":1714,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Currently Playing

Time in a Bottle

Jim Corce

My Way

Frank Sinatra

Lemon Tree

Fools Garden

","css":".main {\n background-color: white;\n padding: 1em;\n padding-bottom: 1.1em;\n border-radius: 15px;\n margin: 1em;\n}\n\n.loader {\n display: flex;\n flex-direction: row;\n height: 4em;\n padding-left: 1em;\n padding-right: 1em;\n transform: rotate(180deg);\n justify-content: right;\n border-radius: 10px;\n transition: .4s ease-in-out;\n}\n\n.loader:hover {\n cursor: pointer;\n background-color: lightgray;\n}\n\n.currentplaying {\n display: flex;\n margin: 1em;\n}\n\n.spotify {\n width: 50px;\n height: 50px;\n margin-right: 0.6em;\n}\n\n.heading {\n color: black;\n font-size: 1.1em;\n font-weight: bold;\n align-self: center;\n}\n\n.loading {\n display: flex;\n margin-top: 1em;\n margin-left: 0.3em;\n}\n\n.load {\n width: 2px;\n height: 33px;\n background-color: limegreen;\n animation: 1s move6 infinite;\n border-radius: 5px;\n margin: 0.1em;\n}\n\n.load:nth-child(1) {\n animation-delay: 0.2s;\n}\n\n.load:nth-child(2) {\n animation-delay: 0.4s;\n}\n\n.load:nth-child(3) {\n animation-delay: 0.6s;\n}\n\n.play {\n position: relative;\n left: 0.35em;\n height: 1.6em;\n width: 1.6em;\n clip-path: polygon(50% 50%, 100% 50%, 75% 6.6%);\n background-color: black;\n transform: rotate(-90deg);\n align-self: center;\n margin-top: 0.7em;\n justify-self: center;\n}\n\n.albumcover {\n position: relative;\n margin-right: 1em;\n height: 40px;\n width: 40px;\n background-color: rgb(233, 232, 232);\n align-self: center;\n border-radius: 5px;\n}\n\n.song {\n position: relative;\n transform: rotate(180deg);\n margin-right: 1em;\n color: black;\n align-self: center;\n}\n\n.artist {\n font-size: 0.6em;\n}\n\n@keyframes move6 {\n 0% {\n height: 0.2em;\n }\n\n 25% {\n height: 0.7em;\n }\n\n 50% {\n height: 1.5em;\n }\n\n 100% {\n height: 0.2em;\n }\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"7a2165","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":122,"cssLen":1088,"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}\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":"9986d7","snapshot":null,"tags":null,"title":"card by alexruix","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":6426,"cssLen":779,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Starter

/mo

free forever

\n \n \n \n \n \n \n \n \n Lorem Ipsum\n
\n \n \n \n \n \n \n \n \n Lorem Ipsum\n
\n \n \n \n \n \n \n \n \n Lorem Ipsum\n
\n \n \n \n \n \n \n \n \n Lorem Ipsum\n

\n","css":"/*Neo Brutalism pricing card*/\n.card {\n width: 190px;\n background: #00ffa0;\n padding: 1rem;\n border-radius: 1rem;\n border: 0.5vmin solid #05060f;\n box-shadow: 0.4rem 0.4rem #05060f;\n overflow: hidden;\n color: black;\n}\n\n/*Card content*/\n.pricing-block-content {\n display: flex;\n height: 100%;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.pricing-plan {\n color: #05060f;\n font-size: 1.3rem;\n line-height: 1.25;\n font-weight: 700;\n}\n\n.price-value {\n display: flex;\n color: #05060f;\n font-size: 1.8rem;\n line-height: 1.25;\n font-weight: 700;\n}\n\n.pricing-note {\n opacity: 0.8;\n}\n\n/*Checklist*/\n.check-list {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-top: 0.5rem;\n}\n\n.check-list-item {\n display: flex;\n align-items: center;\n gap: 4px;\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"d0412a","snapshot":null,"tags":null,"title":"card by alexmaracinaru","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":179,"cssLen":852,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n Person\n

Job Title

\n \n

","css":".card {\n width: 190px;\n height: 254px;\n background: #3405a3;\n border-radius: 15px;\n box-shadow: 1px 5px 60px 0px #100a886b;\n}\n\n.card .card-border-top {\n width: 60%;\n height: 3%;\n background: #6b64f3;\n margin: auto;\n border-radius: 0px 0px 15px 15px;\n}\n\n.card span {\n font-weight: 600;\n color: white;\n text-align: center;\n display: block;\n padding-top: 10px;\n font-size: 16px;\n}\n\n.card .job {\n font-weight: 400;\n color: white;\n display: block;\n text-align: center;\n padding-top: 3px;\n font-size: 12px;\n}\n\n.card .img {\n width: 70px;\n height: 80px;\n background: #6b64f3;\n border-radius: 15px;\n margin: auto;\n margin-top: 25px;\n}\n\n.card button {\n padding: 8px 25px;\n display: block;\n margin: auto;\n border-radius: 8px;\n border: none;\n margin-top: 30px;\n background: #6b64f3;\n color: white;\n font-weight: 600;\n}\n\n.card button:hover {\n background: #534bf3;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"01a57d","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":513,"cssLen":879,"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 consectetur adipisicing elit.\n \n \n\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae\n dolores, possimus pariatur animi temporibus nesciunt praesentium \n

\n\n \n Find out more\n \n →\n \n \n

","css":".card {\n max-width: 300px;\n border-radius: 0.5rem;\n background-color: #fff;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n border: 1px solid transparent;\n}\n\n.card a {\n text-decoration: none\n}\n\n.content {\n padding: 1.1rem;\n}\n\n.image {\n object-fit: cover;\n width: 100%;\n height: 150px;\n background-color: rgb(239, 205, 255);\n}\n\n.title {\n color: #111827;\n font-size: 1.125rem;\n line-height: 1.75rem;\n font-weight: 600;\n}\n\n.desc {\n margin-top: 0.5rem;\n color: #6B7280;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.action {\n display: inline-flex;\n margin-top: 1rem;\n color: #ffffff;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: 500;\n align-items: center;\n gap: 0.25rem;\n background-color: #2563EB;\n padding: 4px 8px;\n border-radius: 4px;\n}\n\n.action span {\n transition: .3s ease;\n}\n\n.action:hover span {\n transform: translateX(4px);\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"046a1e","snapshot":null,"tags":null,"title":"card by gharsh11032000","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":774,"cssLen":1092,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.

\n","css":".card {\n position: relative;\n width: 300px;\n height: 200px;\n background-color: #f2f2f2;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n perspective: 1000px;\n box-shadow: 0 0 0 5px #ffffff80;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card svg {\n width: 48px;\n fill: #333;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover {\n transform: scale(1.05);\n box-shadow: 0 8px 16px rgba(255, 255, 255, 0.2);\n}\n\n.card__content {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n padding: 20px;\n box-sizing: border-box;\n background-color: #f2f2f2;\n transform: rotateX(-90deg);\n transform-origin: bottom;\n transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.card:hover .card__content {\n transform: rotateX(0deg);\n}\n\n.card__title {\n margin: 0;\n font-size: 24px;\n color: #333;\n font-weight: 700;\n}\n\n.card:hover svg {\n scale: 0;\n}\n\n.card__description {\n margin: 10px 0 0;\n font-size: 14px;\n color: #777;\n line-height: 1.4;\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"0c2dfc","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4752,"cssLen":2733,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

\n uiverse.io\n

\n universe of ui\n

","css":".card {\n width: 300px;\n height: 200px;\n background: #243137;\n position: relative;\n display: grid;\n place-content: center;\n border-radius: 10px;\n overflow: hidden;\n transition: all 0.5s ease-in-out;\n}\n\n#logo-main, #logo-second {\n height: 100%;\n}\n\n#logo-main {\n fill: #bd9f67;\n}\n\n#logo-second {\n padding-bottom: 10px;\n fill: none;\n stroke: #bd9f67;\n stroke-width: 1px;\n}\n\n.border {\n position: absolute;\n inset: 0px;\n border: 2px solid #bd9f67;\n opacity: 0;\n transform: rotate(10deg);\n transition: all 0.5s ease-in-out;\n}\n\n.bottom-text {\n position: absolute;\n left: 50%;\n bottom: 13px;\n transform: translateX(-50%);\n font-size: 6px;\n text-transform: uppercase;\n padding: 0px 5px 0px 8px;\n color: #bd9f67;\n background: #243137;\n opacity: 0;\n letter-spacing: 7px;\n transition: all 0.5s ease-in-out;\n}\n\n.content {\n transition: all 0.5s ease-in-out;\n}\n\n.content .logo {\n height: 35px;\n position: relative;\n width: 33px;\n overflow: hidden;\n transition: all 1s ease-in-out;\n}\n\n.content .logo .logo1 {\n height: 33px;\n position: absolute;\n left: 0;\n}\n\n.content .logo .logo2 {\n height: 33px;\n position: absolute;\n left: 33px;\n}\n\n.content .logo .trail {\n position: absolute;\n right: 0;\n height: 100%;\n width: 100%;\n opacity: 0;\n}\n\n.content .logo-bottom-text {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n margin-top: 30px;\n color: #bd9f67;\n padding-left: 8px;\n font-size: 11px;\n opacity: 0;\n letter-spacing: none;\n transition: all 0.5s ease-in-out 0.5s;\n}\n\n.card:hover {\n border-radius: 0;\n transform: scale(1.1);\n}\n\n.card:hover .logo {\n width: 134px;\n animation: opacity 1s ease-in-out;\n}\n\n.card:hover .border {\n inset: 15px;\n opacity: 1;\n transform: rotate(0);\n}\n\n.card:hover .bottom-text {\n letter-spacing: 3px;\n opacity: 1;\n transform: translateX(-50%);\n}\n\n.card:hover .content .logo-bottom-text {\n opacity: 1;\n letter-spacing: 9.5px;\n}\n\n.card:hover .trail {\n animation: trail 1s ease-in-out;\n}\n\n@keyframes opacity {\n 0% {\n border-right: 1px solid transparent;\n }\n\n 10% {\n border-right: 1px solid #bd9f67;\n }\n\n 80% {\n border-right: 1px solid #bd9f67;\n }\n\n 100% {\n border-right: 1px solid transparent;\n }\n}\n\n@keyframes trail {\n 0% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);\n opacity: 0;\n }\n\n 30% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);\n opacity: 1;\n }\n\n 70% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 70%, rgb(189, 159, 103) 100%);\n opacity: 1;\n }\n\n 95% {\n background: linear-gradient(90deg, rgba(189, 159, 103, 0) 90%, rgb(189, 159, 103) 100%);\n opacity: 0;\n }\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"ffddc9","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":419,"cssLen":1485,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"","css":".cookie-card {\n max-width: 320px;\n padding: 1rem;\n background-color: #fff;\n border-radius: 10px;\n box-shadow: 20px 20px 30px rgba(0, 0, 0, .05);\n}\n\n.title {\n font-weight: 600;\n color: rgb(31 41 55);\n}\n\n.description {\n margin-top: 1rem;\n font-size: 0.875rem;\n line-height: 1.25rem;\n color: rgb(75 85 99);\n}\n\n.description a {\n --tw-text-opacity: 1;\n color: rgb(59 130 246);\n}\n\n.description a:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n\n.actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-top: 1rem;\n -moz-column-gap: 1rem;\n column-gap: 1rem;\n flex-shrink: 0;\n}\n\n.pref {\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgb(31 41 55 );\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);\n border: none;\n background-color: transparent;\n}\n\n.pref:hover {\n color: rgb(156 163 175);\n}\n\n.pref:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}\n\n.accept {\n font-size: 0.75rem;\n line-height: 1rem;\n background-color: rgb(17 24 39);\n font-weight: 500;\n border-radius: 0.5rem;\n color: #fff;\n padding-left: 1rem;\n padding-right: 1rem;\n padding-top: 0.625rem;\n padding-bottom: 0.625rem;\n border: none;\n transition: all .15s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.accept:hover {\n background-color: rgb(55 65 81);\n}\n\n.accept:focus {\n outline: 2px solid transparent;\n outline-offset: 2px;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"d5e0a7","snapshot":null,"tags":null,"title":"card by vk-uiux","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1274,"cssLen":1528,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Favourites

Check all your favourites in one place.

","css":".card {\n width: 100%;\n max-width: 300px;\n min-width: 200px;\n height: 250px;\n background-color: #292929;\n margin: 10px;\n border-radius: 10px;\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);\n border: 2px solid rgba(7, 7, 7, 0.12);\n font-size: 16px;\n transition: all 0.3s ease;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n cursor: pointer;\n font-family: 'Poppins', sans-serif;\n}\n\n.icon {\n margin: 0 auto;\n width: 100%;\n height: 80px;\n max-width: 80px;\n background: linear-gradient(90deg, #7eaaff 0%, #ff48fb 40%, rgba(0, 0, 0, 0.28) 60%);\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.8s ease;\n background-position: 0px;\n background-size: 200px;\n}\n\n.icon svg {\n fill: white;\n}\n\n.card .title {\n width: 100%;\n margin: 0;\n text-align: center;\n margin-top: 30px;\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 4px;\n}\n\n.card .text {\n width: 80%;\n margin: 0 auto;\n font-size: 13px;\n text-align: center;\n margin-top: 20px;\n color: white;\n font-weight: 200;\n letter-spacing: 2px;\n opacity: 0;\n max-height: 0;\n transition: all 0.3s ease;\n}\n\n.card:hover {\n height: 270px;\n}\n\n.card:hover .text {\n transition: all 0.3s ease;\n opacity: 1;\n max-height: 40px;\n}\n\n.card:hover .icon {\n background-position: -120px;\n transition: all 0.3s ease;\n}\n\n.card:hover .icon svg path {\n fill: url('#gradientColor');\n transition: all 0.3s ease;\n}"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"b4cfb6","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5479,"cssLen":1544,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

PINK CITY

PARTILY CLOUDY

\n \n \n \n

32°

Min

30°

Max

32°

\n","css":".cardContainer {\n width: fit-content;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.card {\n position: relative;\n width: 220px;\n height: 250px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n padding: 20px 10px;\n border-radius: 10px;\n backdrop-filter: blur(30px);\n background-color: rgba(65, 65, 65, 0.308);\n border: 1px solid rgba(255, 255, 255, 0.089);\n cursor: pointer;\n}\n\n.city {\n font-weight: 700;\n font-size: 0.9em;\n letter-spacing: 1.2px;\n color: white;\n}\n\n.weather {\n font-weight: 500;\n font-size: 0.7em;\n letter-spacing: 1.2px;\n color: rgb(197, 197, 197);\n}\n\n.temp {\n font-size: 1.8em;\n color: white;\n}\n\n.minmaxContainer {\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.min,\n.max {\n width: 50%;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n justify-content: center;\n padding: 0px 20px;\n gap: 4px;\n}\n\n.max {\n align-items: flex-start;\n border-left: 2px solid white;\n}\n\n.maxHeading,\n.minHeading {\n font-size: 0.7em;\n font-weight: 600;\n color: white;\n}\n\n.maxTemp,\n.minTemp {\n font-size: 0.6em;\n font-weight: 500;\n color: rgb(197, 197, 197);\n}\n\n.cardContainer::before {\n width: 100px;\n height: 100px;\n content: \"\";\n position: absolute;\n background-color: rgb(144, 161, 255);\n z-index: -1;\n border-radius: 50%;\n left: 100px;\n top: 50px;\n transition: all 1s;\n}\n\n.cardContainer:hover::before {\n transform: translate(-50px, 50px);\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"5dccad","snapshot":null,"tags":null,"title":"card by kennyotsu","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":973,"cssLen":817,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

Your password isn't strong enough\n

Password must be at least !8 characters
Password must include Elon's baby name

","css":".notifications-container {\n width: 320px;\n height: auto;\n font-size: 0.875rem;\n line-height: 1.25rem;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n.flex {\n display: flex;\n}\n\n.flex-shrink-0 {\n flex-shrink: 0;\n}\n\n.error-alert {\n border-radius: 0.375rem;\n padding: 1rem;\n background-color: rgb(254 242 242);\n}\n\n.error-svg {\n color: #F87171;\n width: 1.25rem;\n height: 1.25rem;\n}\n\n.error-prompt-heading {\n color: #991B1B;\n font-size: 0.875rem;\n line-height: 1.25rem;\n font-weight: bold;\n}\n\n.error-prompt-container {\n display: flex;\n flex-direction: column;\n margin-left: 1.25rem;\n}\n\n.error-prompt-wrap {\n margin-top: 0.5rem;\n color: #B91C1C;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.error-prompt-list {\n padding-left: 1.25rem;\n margin-top: 0.25rem;\n list-style-type: disc;\n}"}]}},"actionData":null,"errors":null}