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

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

UIVERS.IO

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

\n \n

Different ways to use CSS in React

\n React\n Css\n

\n\n

","css":".card {\n width: 320px;\n height: 350px;\n padding: 20px;\n color: white;\n background: linear-gradient(#212121, #212121) padding-box,\n linear-gradient(145deg, transparent 35%,#e81cff, #40c9ff) border-box;\n border: 2px solid transparent;\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n cursor: pointer;\n transform-origin: right bottom;\n transition: all 0.6s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.card .main-content {\n flex: 1;\n}\n\n.card .header span:first-child {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card .heading {\n font-size: 24px;\n margin: 24px 0 16px;\n font-weight: 600;\n}\n\n.card .categories {\n display: flex;\n gap: 8px;\n}\n\n.card .categories span {\n background-color: #e81cff;\n padding: 4px 8px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 12px;\n border-radius: 50em;\n}\n\n.card .footer {\n font-weight: 600;\n color: #717171;\n margin-right: 4px;\n}\n\n.card:hover {\n rotate: 8deg;\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"de9d09","snapshot":null,"tags":null,"title":"card by alexmaracinaru","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":263,"cssLen":698,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Illustration

A heading that must span over two lines\n

By Abi 4 days ago

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

HOVER ME

","css":".card {\n width: 210px;\n height: 254px;\n border-radius: 4px;\n background: #212121;\n display: flex;\n gap: 5px;\n padding: .4em;\n}\n\n.card p {\n height: 100%;\n flex: 1;\n overflow: hidden;\n cursor: pointer;\n border-radius: 2px;\n transition: all .5s;\n background: #212121;\n border: 1px solid #ff5a91;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card p:hover {\n flex: 4;\n}\n\n.card p span {\n min-width: 14em;\n padding: .5em;\n text-align: center;\n transform: rotate(-90deg);\n transition: all .5s;\n text-transform: uppercase;\n color: #ff568e;\n letter-spacing: .1em;\n}\n\n.card p:hover span {\n transform: rotate(0);\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"b3de9f","snapshot":null,"tags":null,"title":"card by 00Kubi","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":3120,"cssLen":1764,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

We use cookies.

We use cookies to ensure that we give you the best experience on our website.
Read cookies policies.

\n\n

\n \n \n

\n \n\n

\n\n","css":".card {\n width: 300px;\n height: 220px;\n background-color: rgb(255, 255, 255);\n border-radius: 8px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 20px 30px;\n gap: 13px;\n position: relative;\n overflow: hidden;\n box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.062);\n}\n\n#cookieSvg {\n width: 50px;\n}\n\n#cookieSvg g path {\n fill: rgb(97, 81, 81);\n}\n\n.cookieHeading {\n font-size: 1.2em;\n font-weight: 800;\n color: rgb(26, 26, 26);\n}\n\n.cookieDescription {\n text-align: center;\n font-size: 0.7em;\n font-weight: 600;\n color: rgb(99, 99, 99);\n}\n\n.cookieDescription a {\n --tw-text-opacity: 1;\n color: rgb(59 130 246);\n}\n\n.cookieDescription a:hover {\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n}\n\n.buttonContainer {\n display: flex;\n gap: 20px;\n flex-direction: row;\n}\n\n.acceptButton {\n width: 80px;\n height: 30px;\n background-color: #7b57ff;\n transition-duration: .2s;\n border: none;\n color: rgb(241, 241, 241);\n cursor: pointer;\n font-weight: 600;\n border-radius: 20px;\n box-shadow: 0 4px 6px -1px #977ef3, 0 2px 4px -1px #977ef3;\n transition: all .6s ease;\n}\n\n.declineButton {\n width: 80px;\n height: 30px;\n background-color: #dadada;\n transition-duration: .2s;\n color: rgb(46, 46, 46);\n border: none;\n cursor: not-allowed;\n font-weight: 600;\n border-radius: 20px;\n box-shadow: 0 4px 6px -1px #bebdbd, 0 2px 4px -1px #bebdbd;\n transition: all .6s ease;\n}\n\n.declineButton:hover {\n background-color: #ebebeb;\n box-shadow: 0 10px 15px -3px #bebdbd, 0 4px 6px -2px #bebdbd;\n transition-duration: .2s;\n}\n\n.acceptButton:hover {\n background-color: #9173ff;\n box-shadow: 0 10px 15px -3px #977ef3, 0 4px 6px -2px #977ef3;\n transition-duration: .2s;\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"9572d4","snapshot":null,"tags":null,"title":"card by alexmaracinaru","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1625,"cssLen":975,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Quote of the month

\n \n

Fortune favors the bold.

- by Virgil
(Latin poet) \n

","css":".card {\n width: 190px;\n height: 264px;\n background: rgb(183, 226, 25);\n font-family: inherit;\n position: relative;\n border-radius: 8px;\n}\n\n.quote {\n color: rgb(223, 248, 134);\n padding-left: 30px;\n position: relative;\n}\n\n.card-name {\n text-transform: uppercase;\n font-weight: 700;\n color: rgb(127, 155, 29);\n padding: 35px;\n line-height: 23px;\n}\n\n.body-text {\n font-size: 20px;\n font-weight: 900;\n padding: 60px 40px 0;\n color: #465512;\n position: absolute;\n top: 40px;\n left: 1px;\n line-height: 23px;\n}\n\n.author {\n margin-top: 5px;\n opacity: 0;\n transition: 0.5s;\n}\n\n.card:hover .author {\n opacity: 1;\n}\n\n.pic {\n width: 50px;\n height: 50px;\n background-color: rgb(158, 196, 21);\n border-radius: 50%;\n}\n\n.author-container {\n display: flex;\n align-items: center;\n}\n\n.author {\n font-weight: 700;\n color: rgb(127, 155, 29);\n padding-left: 30px;\n}\n\n.card .author svg {\n display: inline;\n font-size: 12px;\n color: rgba(128, 155, 29, 0.452);\n}"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"abcb39","snapshot":null,"tags":null,"title":"card by vinodjangid07","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":4006,"cssLen":1253,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

\n\n","css":".card {\n width: fit-content;\n height: fit-content;\n background-color: rgb(238, 238, 238);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 25px 25px;\n gap: 20px;\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.055);\n}\n\n/* for all social containers*/\n.socialContainer {\n width: 52px;\n height: 52px;\n background-color: rgb(44, 44, 44);\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n transition-duration: .3s;\n}\n/* instagram*/\n.containerOne:hover {\n background-color: #d62976;\n transition-duration: .3s;\n}\n/* twitter*/\n.containerTwo:hover {\n background-color: #00acee;\n transition-duration: .3s;\n}\n/* linkdin*/\n.containerThree:hover {\n background-color: #0072b1;\n transition-duration: .3s;\n}\n/* Whatsapp*/\n.containerFour:hover {\n background-color: #128C7E;\n transition-duration: .3s;\n}\n\n.socialContainer:active {\n transform: scale(0.9);\n transition-duration: .3s;\n}\n\n.socialSvg {\n width: 17px;\n}\n\n.socialSvg path {\n fill: rgb(255, 255, 255);\n}\n\n.socialContainer:hover .socialSvg {\n animation: slide-in-top 0.3s both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"55b2a8","snapshot":null,"tags":null,"title":"card by bhaveshxrawat","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":43,"cssLen":876,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

CARD

","css":".card {\n width: 190px;\n height: 254px;\n background: #07182E;\n position: relative;\n display: flex;\n place-content: center;\n place-items: center;\n overflow: hidden;\n border-radius: 20px;\n}\n\n.card h2 {\n z-index: 1;\n color: white;\n font-size: 2em;\n}\n\n.card::before {\n content: '';\n position: absolute;\n width: 100px;\n background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));\n height: 130%;\n animation: rotBGimg 3s linear infinite;\n transition: all 0.2s linear;\n}\n\n@keyframes rotBGimg {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.card::after {\n content: '';\n position: absolute;\n background: #07182E;\n ;\n inset: 5px;\n border-radius: 15px;\n} \n/* .card:hover:before {\n background-image: linear-gradient(180deg, rgb(81, 255, 0), purple);\n animation: rotBGimg 3.5s linear infinite;\n} */\n\n"},{"created":"2024-01-22T17:10:54.000Z","isPrivate":0,"projectId":"c7c896","snapshot":null,"tags":null,"title":"card by joe-watson-sbf","updated":"2024-01-22T17:10:54.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":238,"cssLen":1356,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n GLASS EFFECT\n

\n JOE WATSON SBF\n

0000 000 000 0000

\n VALID 01/28\n

\n","css":".container {\n color: white;\n position: relative;\n font-family: sans-serif;\n}\n\n.container::before,\n.container::after {\n content: \"\";\n background-color: #fab5704c;\n position: absolute;\n}\n\n.container::before {\n border-radius: 50%;\n width: 6rem;\n height: 6rem;\n top: 30%;\n right: 7%;\n}\n\n.container::after {\n content: \"\";\n position: absolute;\n height: 3rem;\n top: 8%;\n right: 5%;\n border: 1px solid;\n}\n\n.container .box {\n width: 11.875em;\n height: 15.875em;\n padding: 1rem;\n background-color: rgba(255, 255, 255, 0.074);\n border: 1px solid rgba(255, 255, 255, 0.222);\n -webkit-backdrop-filter: blur(20px);\n backdrop-filter: blur(20px);\n border-radius: 0.7rem;\n transition: all ease 0.3s;\n}\n\n.container .box {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n}\n\n.container .box .title {\n font-size: 2rem;\n font-weight: 500;\n letter-spacing: 0.1em;\n}\n\n.container .box div strong {\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.container .box div p {\n margin: 0;\n font-size: 0.9em;\n font-weight: 300;\n letter-spacing: 0.1em;\n}\n\n.container .box div span {\n font-size: 0.7rem;\n font-weight: 300;\n}\n\n.container .box div span:nth-child(3) {\n font-weight: 500;\n margin-right: 0.2rem;\n}\n\n.container .box:hover {\n box-shadow: 0px 0px 20px 1px #ffbb763f;\n border: 1px solid rgba(255, 255, 255, 0.454);\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"51d60f","snapshot":null,"tags":null,"title":"switch by alfoly1988","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":91,"cssLen":864,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n\n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: rgb(75, 73, 74);\n transition: 0.4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: black;\n box-shadow: inset 8px -4px 0 0 white;\n transition: 0.4s;\n}\n\n.switch input:checked + .slider {\n background-color: #2196f3;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.5em);\n background-color: yellow;\n box-shadow: none;\n}\n"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"802d08","snapshot":null,"tags":null,"title":"switch by AmIt-DasIT","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":88,"cssLen":1176,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n \n \n","css":"/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #223243;\n transition: .4s;\n border-radius: 30px;\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n border-radius: 20px;\n left: 0.3em;\n bottom: 0.3em;\n background-color: #223243;\n box-shadow: inset 2px -2px 0 1.8px #fff;\n transition: .4s;\n animation: anima1 0.3s linear;\n}\n\n@keyframes anima1 {\n 0% {\n transform: translateX(1.5em);\n }\n\n 80% {\n transform: translateX(-0.3em);\n }\n\n 100% {\n transform: translateX(0em);\n }\n}\n\n.switch input:checked + .slider:before {\n background-color: yellow;\n box-shadow: none;\n transform: translateX(1.5em);\n animation: anima 0.3s linear;\n}\n\n@keyframes anima {\n 0% {\n transform: translateX(0px)\n }\n\n 80% {\n transform: translateX(1.6em)\n }\n\n 100% {\n transform: translateX(1.4em)\n }\n}"},{"created":"2024-01-22T17:07:51.000Z","isPrivate":0,"projectId":"55d920","snapshot":null,"tags":null,"title":"switch by devestter","updated":"2024-01-22T17:07:51.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":229,"cssLen":1905,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n

","css":".toggle-button-cover {\n display: table-cell;\n position: relative;\n width: 200px;\n height: 140px;\n box-sizing: border-box;\n}\n\n.button-cover {\n height: 100px;\n margin: 20px;\n background-color: #fff;\n box-shadow: 0 10px 20px -8px #c5d6d6;\n border-radius: 4px;\n}\n\n.button-cover:before {\n counter-increment: button-counter;\n content: counter(button-counter);\n position: absolute;\n right: 0;\n bottom: 0;\n color: #d7e3e3;\n font-size: 12px;\n line-height: 1;\n padding: 5px;\n}\n\n.button-cover,\n.knobs,\n.layer {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n.button {\n position: relative;\n top: 50%;\n width: 90px;\n height: 38px;\n margin: -20px auto 0 auto;\n overflow: hidden;\n box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;\n}\n\n.checkbox {\n position: relative;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n opacity: 0;\n cursor: pointer;\n z-index: 3;\n}\n\n.knobs {\n z-index: 2;\n}\n\n.layer {\n width: 100%;\n background-color: #524949;\n transition: 1s ease all;\n z-index: 1;\n}\n\n.button.r,\n.button.r .layer {\n border-radius: 12px;\n}\n\n#button-3 .knobs:before {\n content: \"ON\";\n position: absolute;\n top: 4px;\n left: 7px;\n width: 23px;\n height: 11px;\n color: rgb(22, 21, 21);\n font-size: 10px;\n font-weight: bold;\n text-align: center;\n line-height: 1;\n padding: 9px 4px;\n background-color: rgb(240, 235, 233);\n border-radius: 30%;\n transition: 0.3s ease all, left 0.3s cubic-bezier(0.18, 0.89, 0.35, 1.15);\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n#button-3 .checkbox:active + .knobs:before {\n width: 36px;\n border-radius: 2px;\n}\n\n#button-3 .checkbox:checked:active + .knobs:before {\n margin-left: -26px;\n}\n\n#button-3 .checkbox:checked + .knobs:before {\n content: \"OFF\";\n left: 50px;\n background-color: #f44336;\n color: white;\n}\n\n#button-3 .checkbox:checked ~ .layer {\n background-color: #524949;\n}"}]}},"actionData":null,"errors":null}