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

MONOCHROMIA

palette reference

\n black\n #000000\n

\n eerie-black\n #1b1b1b\n

\n chinese-black\n #141414\n

\n night rider\n #2e2e2e\n

\n chinese-white\n #e1e1e1\n

\n anti-flash-white\n #f3f3f3\n

\n white\n #ffffff\n

common border radius 5px | 8px

","css":".card {\n width: 400px;\n height: 350px;\n --black: #000000;\n --ch-black: #141414;\n --eer-black: #1b1b1b;\n --night-rider: #2e2e2e;\n --white: #ffffff;\n --af-white: #f3f3f3;\n --ch-white: #e1e1e1;\n font-family: Helvetica, sans-serif;\n}\n\n.wrapper {\n margin: 2rem auto;\n width: 250px;\n font-size: small;\n}\n\n.title {\n text-align: center;\n color: #1b1b1b;\n}\n\n.heading {\n font-weight: bold;\n letter-spacing: 7px;\n font-size: 1.5rem;\n position: relative;\n margin-bottom: 6px;\n}\n\n.heading::before {\n content: '';\n position: absolute;\n inset: 0;\n background: #e8e8e8;\n z-index: -1;\n filter: blur(50px);\n height: 50px;\n}\n\n.color {\n padding: 10px 20px;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n}\n\n.hex {\n text-align: end;\n font-family: monospace;\n text-transform: uppercase;\n}\n\n.black {\n background: var(--black);\n color: var(--ch-white);\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n}\n\n.eerie-black {\n background: var(--ch-black);\n color: var(--ch-white);\n}\n\n.chinese-black {\n background: var(--eer-black);\n color: var(--ch-white);\n}\n\n.night-rider {\n background: var(--night-rider);\n color: var(--ch-white);\n}\n\n.chinese-white {\n background: var(--ch-white);\n color: var(--night-rider);\n}\n\n.anti-flash-white {\n background: var(--af-white);\n color: var(--night-rider);\n}\n\n.white {\n background: var(--white);\n color: var(--night-rider);\n border-bottom-left-radius: 5px;\n border-bottom-right-radius: 5px;\n}\n\n.border {\n color: var(--night-rider);\n padding: 10px 10px;\n text-align: center;\n}\n\n.border span {\n border-radius: 5px;\n color: var(--ch-white);\n padding: 2px 4px;\n background-color: var(--night-rider);\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"370087","snapshot":null,"tags":null,"title":"card by Li-Deheng","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4596,"cssLen":9906,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t\n\t

\n\t

What did you think
of this post?

\t\t\t\t\n\t

\n\t\t

\n\t\t\t\n\t\t\t\t123\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\n\t\t

\n\t\t

\n\t\t\t\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t4\n\t\t\t\n\t\t

\n\t

","css":".like-dislike-container {\n --dark-grey: #353535;\n --middle-grey: #767676;\n --lightest-grey: linear-gradient(#fafafa,#ebebeb);\n --shadow: 0 5px 15px 0 #00000026;\n --shadow-active: 0 5px 5px 0 #00000026;\n --border-radius-main: 10px;\n --border-radius-icon: 50px;\n position: relative;\n display: flex;\n text-align: center;\n flex-direction: column;\n align-items: center;\n cursor: default;\n color: var(--dark-grey);\n opacity: .9;\n margin: auto;\n padding: 1.5rem;\n font-weight: 600;\n background: var(--lightest-grey);\n max-width: max-content;\n border-radius: var(--border-radius-main);\n box-shadow: var(--shadow);\n transition: .2s ease all;\n}\n\n.like-dislike-container:hover {\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .tool-box {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n top: 0;\n right: 0;\n border-radius: var(--border-radius-main);\n}\n\n.like-dislike-container .btn-close {\n display: flex;\n align-items: center;\n justify-content: center;\n text-align: center;\n width: .8rem;\n height: .8rem;\n color: transparent;\n font-size: 0;\n cursor: pointer;\n background-color: #ff000080;\n border: none;\n border-radius: var(--border-radius-main);\n transition: .2s ease all;\n}\n\n.like-dislike-container .btn-close:hover {\n width: 1rem;\n height: 1rem;\n font-size: 1rem;\n color: #ffffff;\n background-color: #ff0000cc;\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .btn-close:active {\n width: .9rem;\n height: .9rem;\n font-size: .9rem;\n color: #ffffffde;\n --shadow-btn-close: 0 3px 3px 0 #00000026;\n box-shadow: var(--shadow-btn-close);\n}\n\n.like-dislike-container .text-content {\n margin-bottom: 1rem;\n font-size: 18px;\n line-height: 1.6;\n cursor: default;\n}\n\n.like-dislike-container .icons-box {\n display: flex;\n}\n\n.like-dislike-container .icons {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n opacity: .6;\n margin: 0 0.5rem;\n cursor: pointer;\n user-select: none;\n border: 1px solid var(--middle-grey);\n border-radius: var(--border-radius-icon);\n transition: .2s ease all;\n}\n\n.like-dislike-container .icons:hover {\n opacity: .9;\n box-shadow: var(--shadow);\n}\n\n.like-dislike-container .icons:active {\n opacity: .9;\n box-shadow: var(--shadow-active);\n}\n\n.like-dislike-container .icons .btn-label {\n display: flex;\n justify-content: center;\n align-items: center;\n padding: 0 0.5rem;\n cursor: pointer;\n position: relative;\n}\n\n.like-dislike-container .like-text-content {\n border-right: 0.1rem solid var(--dark-grey);\n padding: 0 0.6rem 0 0.5rem;\n pointer-events: none;\n}\n\n.like-dislike-container .dislike-text-content {\n border-left: 0.1rem solid var(--dark-grey);\n padding: 0 0.5rem 0 0.6rem;\n pointer-events: none;\n}\n\n.like-dislike-container .icons .svgs {\n width: 1.3rem;\n fill: #000000;\n box-sizing: content-box;\n padding: 10px 10px;\n transition: .2s ease all;\n}\n\n/* Hide the default checkbox */\n.like-dislike-container .icons .input-box {\n position: absolute;\n opacity: 0;\n cursor: pointer;\n height: 0;\n width: 0;\n}\n\n.like-dislike-container .icons #icon-like-regular {\n display: block;\n}\n\n.like-dislike-container .icons #icon-like-solid {\n display: none;\n}\n\n.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {\n animation: rotate-icon-like 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {\n display: none;\n animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {\n display: block;\n animation: checked-icon-like 0.5s;\n}\n\n.like-dislike-container .icons #icon-dislike-regular {\n display: block;\n transform: rotate(180deg);\n}\n\n.like-dislike-container .icons #icon-dislike-solid {\n display: none;\n transform: rotate(180deg);\n}\n\n.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {\n animation: rotate-icon-dislike 0.7s ease-in-out both;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-regular {\n display: none;\n animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-solid {\n display: block;\n animation: checked-icon-dislike 0.5s;\n}\n\n.like-dislike-container .icons .fireworks {\n transform: scale(0.4);\n}\n\n.like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {\n position: absolute;\n width: 10px;\n height: 10px;\n right: 40px;\n border-radius: 50%;\n box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n.like-dislike-container .icons #dislike-checkbox:checked ~ .fireworks > .checked-dislike-fx {\n position: absolute;\n width: 10px;\n height: 10px;\n left: 40px;\n border-radius: 50%;\n box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;\n animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;\n animation-duration: 1.25s, 1.25s, 6.25s;\n}\n\n/* Shake Animation */\n@keyframes rotate-icon-like {\n 0% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(3deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(-3deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(1deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(0deg) translate3d(0, 0, 0);\n }\n}\n\n@keyframes rotate-icon-dislike {\n 0% {\n transform: rotate(180deg) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: rotate(183deg) translate3d(0, 0, 0);\n }\n\n 50% {\n transform: rotate(177deg) translate3d(0, 0, 0);\n }\n\n 75% {\n transform: rotate(181deg) translate3d(0, 0, 0);\n }\n\n 100% {\n transform: rotate(180deg) translate3d(0, 0, 0);\n }\n}\n\n/* Checked Animation */\n@keyframes checked-icon-like {\n 0% {\n transform: scale(0);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2) rotate(-10deg);\n }\n}\n\n@keyframes checked-icon-dislike {\n 0% {\n transform: scale(0) rotate(180deg);\n opacity: 0;\n }\n\n 50% {\n transform: scale(1.2) rotate(170deg);\n }\n}\n\n/* Fireworks Animation */\n@keyframes fireworks-position {\n 0%, 19.9% {\n margin-top: 10%;\n margin-left: 40%;\n }\n\n 20%, 39.9% {\n margin-top: 40%;\n margin-left: 30%;\n }\n\n 40%, 59.9% {\n margin-top: 20%;\n margin-left: 70%;\n }\n\n 60%, 79.9% {\n margin-top: 30%;\n margin-left: 20%;\n }\n\n 80%, 99.9% {\n margin-top: 30%;\n margin-left: 80%;\n }\n}\n\n@keyframes fireworks-gravity {\n to {\n transform: translateY(200px);\n opacity: 0;\n }\n}\n\n@keyframes fireworks-bang {\n to {\n box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a, 179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6, 117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8, -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95, -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff, -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, -12px -297.3333333333px #ff8400, 129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa, -71px -318.3333333333px #0073ff;\n }\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"829fb8","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":7132,"cssLen":2648,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n\t

\n\t\t\n\t\t

\n\t\t\tQuarum ambarum rerum cum medicinam pollicetur, luxuriae licentiam pollicetur.\n\n\t\t\t

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Hoc est non modo cor non habere, sed ne palatum quidem. Sic, et quidem diligentius saepiusque ista loquemur inter nos agemusque communiter. Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Quid igitur dubitamus in tota eius natura quaerere quid sit effectum? Duo Reges: constructio interrete.

\n\n\t\t\tUt proverbia non nulla veriora sint quam vestra dogmata.\n\n\t\t\t

Quasi vero, inquit, perpetua oratio rhetorum solum, non etiam philosophorum sit. Tria genera cupiditatum, naturales et necessariae, naturales et non necessariae, nec naturales nec necessariae. Sin aliud quid voles, postea. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest;

\n\n\t\t\t

Cur igitur easdem res, inquam, Peripateticis dicentibus verbum nullum est, quod non intellegatur? Primum in nostrane potestate est, quid meminerimus? Eam tum adesse, cum dolor omnis absit; Quodsi ipsam honestatem undique pertectam atque absolutam. Aliam vero vim voluptatis esse, aliam nihil dolendi, nisi valde pertinax fueris, concedas necesse est. Nec enim, cum tua causa cui commodes, beneficium illud habendum est, sed faeneratio, nec gratia deberi videtur ei, qui sua causa commodaverit. Universa enim illorum ratione cum tota vestra confligendum puto. Sed residamus, inquit, si placet. Sed vobis voluptatum perceptarum recordatio vitam beatam facit, et quidem corpore perceptarum. Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Ita enim se Athenis collocavit, ut sit paene unus ex Atticis, ut id etiam cognomen videatur habiturus. Atque hoc loco similitudines eas, quibus illi uti solent, dissimillimas proferebas.

\n\n\t\t\tAn hoc usque quaque, aliter in vita?\n\t\t\t

Etenim nec iustitia nec amicitia esse omnino poterunt, nisi ipsae per se expetuntur.
Pisone in eo gymnasio, quod Ptolomaeum vocatur, unaque nobiscum Q.
Certe nihil nisi quod possit ipsum propter se iure laudari.
Itaque e contrario moderati aequabilesque habitus, affectiones ususque corporis apti esse ad naturam videntur.

\n\n\t\t\t

Utilitatis causa amicitia est quaesita. Qui autem de summo bono dissentit de tota philosophiae ratione dissentit. Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Sed emolumenta communia esse dicuntur, recte autem facta et peccata non habentur communia. Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Potius inflammat, ut coercendi magis quam dedocendi esse videantur. Roges enim Aristonem, bonane ei videantur haec: vacuitas doloris, divitiae, valitudo; Totum autem id externum est, et quod externum, id in casu est. Non autem hoc: igitur ne illud quidem. Simul atque natum animal est, gaudet voluptate et eam appetit ut bonum, aspernatur dolorem ut malum. Quamquam tu hanc copiosiorem etiam soles dicere. Quid enim necesse est, tamquam meretricem in matronarum coetum, sic voluptatem in virtutum concilium adducere? Hoc positum in Phaedro a Platone probavit Epicurus sensitque in omni disputatione id fieri oportere. Videsne quam sit magna dissensio?

\n\n\t\t\tClaudii libidini, qui tum erat summo ne imperio, dederetur.\n\n\t\t\t

Eorum enim est haec querela, qui sibi cari sunt seseque diligunt. Cum audissem Antiochum, Brute, ut solebam, cum M. An obliviscimur, quantopere in audiendo in legendoque moveamur, cum pie, cum amice, cum magno animo aliquid factum cognoscimus? Qui igitur convenit ab alia voluptate dicere naturam proficisci, in alia summum bonum ponere? Magni enim aestimabat pecuniam non modo non contra leges, sed etiam legibus partam. Haec mirabilia videri intellego, sed cum certe superiora firma ac vera sint, his autem ea consentanea et consequentia, ne de horum quidem est veritate dubitandum. At, illa, ut vobis placet, partem quandam tuetur, reliquam deserit. Sed utrum hortandus es nobis, Luci, inquit, an etiam tua sponte propensus es? Sed est forma eius disciplinae, sicut fere ceterarum, triplex: una pars est naturae, disserendi altera, vivendi tertia. Nemo enim est, qui aliter dixerit quin omnium naturarum simile esset id, ad quod omnia referrentur, quod est ultimum rerum appetendarum. Quid est, quod ab ea absolvi et perfici debeat? Quod cum accidisset ut alter alterum necopinato videremus, surrexit statim. Tantum dico, magis fuisse vestrum agere Epicuri diem natalem, quam illius testamento cavere ut ageretur. Quod iam a me expectare noli. Quod totum contra est. Semper enim ita adsumit aliquid, ut ea, quae prima dederit, non deserat.

\n\n\t\t\tSed nimis multa.\n\n\t\t\t

Nec vero alia sunt quaerenda contra Carneadeam illam sententiam. Negat enim summo bono afferre incrementum diem. Causa autem fuit huc veniendi ut quosdam hinc libros promerem. Deinde prima illa, quae in congressu solemus: Quid tu, inquit, huc? Minime vero probatur huic disciplinae, de qua loquor, aut iustitiam aut amicitiam propter utilitates adscisci aut probari. Nulla profecto est, quin suam vim retineat a primo ad extremum. Sed ad illum redeo. Quem quidem vos, cum improbis poenam proponitis, inpetibilem facitis, cum sapientem semper boni plus habere vultis, tolerabilem. Huic ego, si negaret quicquam interesse ad beate vivendum quali uteretur victu, concederem, laudarem etiam; Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. His singulis copiose responderi solet, sed quae perspicua sunt longa esse non debent. Quae cum ita sint, effectum est nihil esse malum, quod turpe non sit.

\n\n\t\t

\n\t\t\n\t

","css":".button,\n.input,\n.select,\n.textarea {\n font: inherit;\n}\n\na {\n color: inherit;\n}\n\n.modal-container {\n max-height: 400px;\n max-width: 500px;\n margin-left: auto;\n margin-right: auto;\n background-color: #fff;\n border-radius: 16px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.25);\n}\n\n@media (max-width: 600px) {\n .modal-container {\n width: 90%;\n }\n}\n\n.modal-container-header {\n padding: 16px 32px;\n border-bottom: 1px solid #ddd;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.modal-container-title {\n display: flex;\n align-items: center;\n gap: 8px;\n line-height: 1;\n font-weight: 700;\n font-size: 1.125;\n}\n\n.modal-container-title svg {\n width: 32px;\n height: 32px;\n color: #750550;\n}\n\n.modal-container-body {\n padding: 24px 32px 51px;\n overflow-y: auto;\n}\n\n.rtf h1,\n.rtf h2,\n.rtf h3,\n.rtf h4,\n.rtf h5,\n.rtf h6 {\n font-weight: 700;\n}\n\n.rtf h1 {\n font-size: 1.5rem;\n line-height: 1.125;\n}\n\n.rtf h2 {\n font-size: 1.25rem;\n line-height: 1.25;\n}\n\n.rtf h3 {\n font-size: 1rem;\n line-height: 1.5;\n}\n\n.rtf > * + * {\n margin-top: 1em;\n}\n\n.rtf > * + :is(h1, h2, h3) {\n margin-top: 2em;\n}\n\n.rtf > :is(h1, h2, h3) + * {\n margin-top: 0.75em;\n}\n\n.rtf ul,\n.rtf ol {\n margin-left: 20px;\n list-style-position: inside;\n}\n\n.rtf ol {\n list-style: numeric;\n}\n\n.rtf ul {\n list-style: disc;\n}\n\n.modal-container-footer {\n padding: 20px 32px;\n display: flex;\n align-items: center;\n justify-content: flex-end;\n border-top: 1px solid #ddd;\n gap: 12px;\n position: relative;\n}\n\n.modal-container-footer:after {\n content: \"\";\n display: block;\n position: absolute;\n top: -51px;\n left: 24px;\n right: 24px;\n height: 50px;\n flex-shrink: 0;\n background-image: linear-gradient(to top, rgba(255, 255, 255, 0.75), transparent);\n pointer-events: none;\n}\n\n.button {\n padding: 12px 20px;\n border-radius: 8px;\n background-color: transparent;\n border: 0;\n font-weight: 600;\n cursor: pointer;\n transition: 0.15s ease;\n}\n\n.button.is-ghost:hover, .button.is-ghost:focus {\n background-color: #dfdad7;\n}\n\n.button.is-primary {\n background-color: #750550;\n color: #fff;\n}\n\n.button.is-primary:hover, .button.is-primary:focus {\n background-color: #4a0433;\n}\n\n.icon-button {\n padding: 0;\n border: 0;\n background-color: transparent;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n line-height: 1;\n cursor: pointer;\n border-radius: 8px;\n transition: 0.15s ease;\n}\n\n.icon-button svg {\n width: 24px;\n height: 24px;\n}\n\n.icon-button:hover, .icon-button:focus {\n background-color: #dfdad7;\n}"},{"created":"2024-01-22T17:10:59.000Z","isPrivate":0,"projectId":"d15840","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:59.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4997,"cssLen":2573,"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 color: white;\n font-weight: 700;\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:58.000Z","isPrivate":0,"projectId":"0b3fcf","snapshot":null,"tags":null,"title":"card by Admin12121","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":953,"cssLen":4183,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

New Transaction

\n \n \n \n

","css":".container {\n background-color: #ffffff;\n display: flex;\n width: 460px;\n height: 120px;\n position: relative;\n border-radius: 6px;\n transition: 0.3s ease-in-out;\n}\n\n.container:hover {\n transform: scale(1.03);\n width: 220px;\n}\n\n.container:hover .left-side {\n width: 100%;\n}\n\n.left-side {\n background-color: #5de2a3;\n width: 130px;\n height: 120px;\n border-radius: 4px;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n cursor: pointer;\n transition: 0.3s;\n flex-shrink: 0;\n overflow: hidden;\n}\n\n.right-side {\n width: calc(100% - 130px);\n display: flex;\n align-items: center;\n overflow: hidden;\n cursor: pointer;\n justify-content: space-between;\n white-space: nowrap;\n transition: 0.3s;\n}\n\n.right-side:hover {\n background-color: #f9f7f9;\n}\n\n.arrow {\n width: 20px;\n height: 20px;\n margin-right: 20px;\n}\n\n.new {\n font-size: 23px;\n font-family: \"Lexend Deca\", sans-serif;\n margin-left: 20px;\n}\n\n.card {\n width: 70px;\n height: 46px;\n background-color: #c7ffbc;\n border-radius: 6px;\n position: absolute;\n display: flex;\n z-index: 10;\n flex-direction: column;\n align-items: center;\n -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n -moz-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n -webkit-box-shadow: 9px 9px 9px -2px rgba(77, 200, 143, 0.72);\n}\n\n.card-line {\n width: 65px;\n height: 13px;\n background-color: #80ea69;\n border-radius: 2px;\n margin-top: 7px;\n}\n\n@media only screen and (max-width: 480px) {\n .container {\n transform: scale(0.7);\n }\n\n .container:hover {\n transform: scale(0.74);\n }\n\n .new {\n font-size: 18px;\n }\n}\n\n.buttons {\n width: 8px;\n height: 8px;\n background-color: #379e1f;\n box-shadow: 0 -10px 0 0 #26850e, 0 10px 0 0 #56be3e;\n border-radius: 50%;\n margin-top: 5px;\n transform: rotate(90deg);\n margin: 10px 0 0 -30px;\n}\n\n.container:hover .card {\n animation: slide-top 1.2s cubic-bezier(0.645, 0.045, 0.355, 1) both;\n}\n\n.container:hover .post {\n animation: slide-post 1s cubic-bezier(0.165, 0.84, 0.44, 1) both;\n}\n\n@keyframes slide-top {\n 0% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 50% {\n -webkit-transform: translateY(-70px) rotate(90deg);\n transform: translateY(-70px) rotate(90deg);\n }\n\n 60% {\n -webkit-transform: translateY(-70px) rotate(90deg);\n transform: translateY(-70px) rotate(90deg);\n }\n\n 100% {\n -webkit-transform: translateY(-8px) rotate(90deg);\n transform: translateY(-8px) rotate(90deg);\n }\n}\n\n.post {\n width: 63px;\n height: 75px;\n background-color: #dddde0;\n position: absolute;\n z-index: 11;\n bottom: 10px;\n top: 120px;\n border-radius: 6px;\n overflow: hidden;\n}\n\n.post-line {\n width: 47px;\n height: 9px;\n background-color: #545354;\n position: absolute;\n border-radius: 0px 0px 3px 3px;\n right: 8px;\n top: 8px;\n}\n\n.post-line:before {\n content: \"\";\n position: absolute;\n width: 47px;\n height: 9px;\n background-color: #757375;\n top: -8px;\n}\n\n.screen {\n width: 47px;\n height: 23px;\n background-color: #ffffff;\n position: absolute;\n top: 22px;\n right: 8px;\n border-radius: 3px;\n}\n\n.numbers {\n width: 12px;\n height: 12px;\n background-color: #838183;\n box-shadow: 0 -18px 0 0 #838183, 0 18px 0 0 #838183;\n border-radius: 2px;\n position: absolute;\n transform: rotate(90deg);\n left: 25px;\n top: 52px;\n}\n\n.numbers-line2 {\n width: 12px;\n height: 12px;\n background-color: #aaa9ab;\n box-shadow: 0 -18px 0 0 #aaa9ab, 0 18px 0 0 #aaa9ab;\n border-radius: 2px;\n position: absolute;\n transform: rotate(90deg);\n left: 25px;\n top: 68px;\n}\n\n@keyframes slide-post {\n 50% {\n -webkit-transform: translateY(0);\n transform: translateY(0);\n }\n\n 100% {\n -webkit-transform: translateY(-70px);\n transform: translateY(-70px);\n }\n}\n\n.dollar {\n position: absolute;\n font-size: 16px;\n font-family: \"Lexend Deca\", sans-serif;\n width: 100%;\n left: 0;\n top: 0;\n color: #4b953b;\n text-align: center;\n}\n\n.container:hover .dollar {\n animation: fade-in-fwd 0.3s 1s backwards;\n}\n\n@keyframes fade-in-fwd {\n 0% {\n opacity: 0;\n transform: translateY(-5px);\n }\n\n 100% {\n opacity: 1;\n transform: translateY(0);\n }\n}"},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"82ebac","snapshot":null,"tags":null,"title":"card by Smit-Prajapati","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":447,"cssLen":2357,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 3D Card\n

\n Lorem ipsum dolor sit amet, consectetur adipisicing elit. \n

\n See More\n

\n JUNE\n 29\n

","css":".parent {\n width: 300px;\n padding: 20px;\n perspective: 1000px;\n}\n\n.card {\n padding-top: 50px;\n /* border-radius: 10px; */\n border: 3px solid rgb(255, 255, 255);\n transform-style: preserve-3d;\n background: linear-gradient(135deg,#0000 18.75%,#f3f3f3 0 31.25%,#0000 0),\n repeating-linear-gradient(45deg,#f3f3f3 -6.25% 6.25%,#ffffff 0 18.75%);\n background-size: 60px 60px;\n background-position: 0 0, 0 0;\n background-color: #f0f0f0;\n width: 100%;\n box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px;\n transition: all 0.5s ease-in-out;\n}\n\n.card:hover {\n background-position: -100px 100px, -100px 100px;\n transform: rotate3d(0.5, 1, 0, 30deg);\n}\n\n.content-box {\n background: rgba(4, 193, 250, 0.732);\n /* border-radius: 10px 100px 10px 10px; */\n transition: all 0.5s ease-in-out;\n padding: 60px 25px 25px 25px;\n transform-style: preserve-3d;\n}\n\n.content-box .card-title {\n display: inline-block;\n color: white;\n font-size: 25px;\n font-weight: 900;\n transition: all 0.5s ease-in-out;\n transform: translate3d(0px, 0px, 50px);\n}\n\n.content-box .card-title:hover {\n transform: translate3d(0px, 0px, 60px);\n}\n\n.content-box .card-content {\n margin-top: 10px;\n font-size: 12px;\n font-weight: 700;\n color: #f2f2f2;\n transition: all 0.5s ease-in-out;\n transform: translate3d(0px, 0px, 30px);\n}\n\n.content-box .card-content:hover {\n transform: translate3d(0px, 0px, 60px);\n}\n\n.content-box .see-more {\n cursor: pointer;\n margin-top: 1rem;\n display: inline-block;\n font-weight: 900;\n font-size: 9px;\n text-transform: uppercase;\n color: rgb(7, 185, 255);\n /* border-radius: 5px; */\n background: white;\n padding: 0.5rem 0.7rem;\n transition: all 0.5s ease-in-out;\n transform: translate3d(0px, 0px, 20px);\n}\n\n.content-box .see-more:hover {\n transform: translate3d(0px, 0px, 60px);\n}\n\n.date-box {\n position: absolute;\n top: 30px;\n right: 30px;\n height: 60px;\n width: 60px;\n background: white;\n border: 1px solid rgb(7, 185, 255);\n /* border-radius: 10px; */\n padding: 10px;\n transform: translate3d(0px, 0px, 80px);\n box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;\n}\n\n.date-box span {\n display: block;\n text-align: center;\n}\n\n.date-box .month {\n color: rgb(4, 193, 250);\n font-size: 9px;\n font-weight: 700;\n}\n\n.date-box .date {\n font-size: 20px;\n font-weight: 900;\n color: rgb(4, 193, 250);\n}\n "},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"10192f","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":962,"cssLen":2117,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n \n

","css":".card {\n overflow: hidden;\n position: relative;\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 background-color: #fff;\n}\n\n.dismiss {\n position: absolute;\n right: 10px;\n top: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0.5rem 1rem;\n background-color: #fff;\n color: black;\n border: 2px solid #D1D5DB;\n font-size: 1rem;\n font-weight: 300;\n width: 30px;\n height: 30px;\n border-radius: 7px;\n transition: .3s ease;\n}\n\n.dismiss:hover {\n background-color: #ee0d0d;\n border: 2px solid #ee0d0d;\n color: #fff;\n}\n\n.header {\n padding: 1.25rem 1rem 1rem 1rem;\n}\n\n.image {\n display: flex;\n margin-left: auto;\n margin-right: auto;\n background-color: #e2feee;\n flex-shrink: 0;\n justify-content: center;\n align-items: center;\n width: 3rem;\n height: 3rem;\n border-radius: 9999px;\n animation: animate .6s linear alternate-reverse infinite;\n transition: .6s ease;\n}\n\n.image svg {\n color: #0afa2a;\n width: 2rem;\n height: 2rem;\n}\n\n.content {\n margin-top: 0.75rem;\n text-align: center;\n}\n\n.title {\n color: #066e29;\n font-size: 1rem;\n font-weight: 600;\n line-height: 1.5rem;\n}\n\n.message {\n margin-top: 0.5rem;\n color: #595b5f;\n font-size: 0.875rem;\n line-height: 1.25rem;\n}\n\n.actions {\n margin: 0.75rem 1rem;\n}\n\n.history {\n display: inline-flex;\n padding: 0.5rem 1rem;\n background-color: #1aa06d;\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: none;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.track {\n display: inline-flex;\n margin-top: 0.75rem;\n padding: 0.5rem 1rem;\n color: #242525;\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 background-color: #fff;\n box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n@keyframes animate {\n from {\n transform: scale(1);\n }\n\n to {\n transform: scale(1.09);\n }\n}"},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"c6638f","snapshot":null,"tags":null,"title":"card by Javierrocadev","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1867,"cssLen":1224,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n\t

\n\t\t

\n\t\t\tLorem ipsum dolor sit amet\n\t\t\t

Vivamus nisi purus

\n\t\t

\n\t\t\t\n\t\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t

\n\t

","css":".card {\n width: 250px;\n height: 200px;\n border-radius: 15px;\n background: rgba(105, 13, 197, 0.103);\n display: flex;\n flex-direction: column;\n position: relative;\n overflow: hidden;\n}\n\n.card::before {\n content: \"\";\n height: 100px;\n width: 100px;\n position: absolute;\n top: -40%;\n left: -20%;\n border-radius: 50%;\n border: 35px solid rgba(255, 255, 255, 0.102);\n transition: all .8s ease;\n filter: blur(.5rem);\n}\n\n.text {\n flex-grow: 1;\n padding: 15px;\n display: flex;\n flex-direction: column;\n color: aliceblue;\n font-weight: 900;\n font-size: 1.2em;\n}\n\n.subtitle {\n font-size: .6em;\n font-weight: 300;\n color: rgba(240, 248, 255, 0.691);\n}\n\n.icons {\n display: flex;\n justify-items: center;\n align-items: center;\n width: 250px;\n border-radius: 0px 0px 15px 15px;\n overflow: hidden;\n}\n\n.btn {\n border: none;\n width: 84px;\n height: 35px;\n background-color: rgba(247, 234, 234, 0.589);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.svg-icon {\n width: 25px;\n height: 25px;\n stroke: rgb(38, 59, 126);\n}\n\n.btn:hover {\n background-color: rgb(247, 234, 234);\n}\n\n.card:hover::before {\n width: 140px;\n height: 140px;\n top: -30%;\n left: 50%;\n filter: blur(0rem);\n}"},{"created":"2024-01-22T17:10:58.000Z","isPrivate":0,"projectId":"0598ea","snapshot":null,"tags":null,"title":"card by JohnnyCSilva","updated":"2024-01-22T17:10:58.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1351,"cssLen":1037,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

Ethereum

\n Cryptocurrency\n

1.654,34€

\n","css":".card {\n width: 195px;\n height: 285px;\n background: #313131;\n border-radius: 20px;\n ;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: white;\n transition: 0.2s ease-in-out;\n}\n\n.img {\n height: 30%;\n position: absolute;\n transition: 0.2s ease-in-out;\n z-index: 1;\n}\n\n.textBox {\n opacity: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 15px;\n transition: 0.2s ease-in-out;\n z-index: 2;\n}\n\n.textBox > .text {\n font-weight: bold;\n}\n\n.textBox > .head {\n font-size: 20px;\n}\n\n.textBox > .price {\n font-size: 17px;\n}\n\n.textBox > span {\n font-size: 12px;\n color: lightgrey;\n}\n\n.card:hover > .textBox {\n opacity: 1;\n}\n\n.card:hover > .img {\n height: 65%;\n filter: blur(7px);\n animation: anim 3s infinite;\n}\n\n@keyframes anim {\n 0% {\n transform: translateY(0);\n }\n\n 50% {\n transform: translateY(-20px);\n }\n\n 100% {\n transform: translateY(0);\n }\n}\n\n.card:hover {\n transform: scale(1.04) rotate(-1deg);\n}\n\n"},{"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}"}]}},"actionData":null,"errors":null}