{"loaderData":{"0":null,"0-17":{"tags":[{"name":"button","label":"Button","count":1289},{"name":"checkbox","label":"Checkbox","count":139},{"name":"loader","label":"Loader","count":732},{"name":"switch","label":"Switch","count":229},{"name":"card","label":"Card","count":648},{"name":"input","label":"Input","count":158},{"name":"radio-button","label":"Radio Button","count":37},{"name":"form","label":"Form","count":157},{"name":"pattern","label":"Pattern","count":83},{"name":"tooltip","label":"Tooltip","count":33},{"name":"twitter","label":"Twitter","count":5},{"name":"runjscollect","label":"RunJS Collect","count":10}]},"0-17-0":{"total":648,"projects":[{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"1f506a","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":91,"jsLen":0,"cssLen":925,"pureCSS":1,"html":"

your content here ↓

","css":".card {\n width: 190px;\n height: 254px;\n background: lightgrey;\n position: relative;\n transform: skewY(-10deg);\n border: 5px solid #6d74e3;\n box-sizing: border-box;\n transition: all 0.3s;\n}\n\n.card::before {\n content: '';\n width: 10px;\n height: 254px;\n background: #6d74e3;\n position: absolute;\n top: -5px;\n left: -14.7px;\n transform-origin: right;\n transform: skewY(45deg);\n border: none;\n transition: all 0.5s;\n}\n\n.card::after {\n content: '';\n height: 10px;\n width: 190px;\n background: #6d74e3;\n position: absolute;\n top: -14.7px;\n left: -5px;\n transform-origin: bottom;\n transform: skewX(45deg);\n border: none;\n transition: all 0.5s;\n}\n\n.card:hover {\n transform: skewY(0deg);\n}\n\n.card:hover::before {\n width: 0px;\n height: 249px;\n left: 0;\n top: 0.1px;\n}\n\n.card:hover::after {\n width: 184px;\n height: 0px;\n left: 0.1px;\n top: 0;\n}\n\n.card__content {\n padding: 10px;\n color: #323232;\n}"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"43077a","snapshot":null,"tags":null,"title":"card by Saad3092003","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":117,"jsLen":0,"cssLen":1312,"pureCSS":1,"html":"

\n \n

","css":".obj {\n position: relative;\n width: 200px;\n height: 200px;\n /* background-color: rgb(96, 96, 232); */\n transform-style: preserve-3d;\n transition: 0.5s all;\n transform: rotateX(-25deg) rotateY(20deg);\n}\n\n.objchild {\n animation: rotate 4s infinite linear;\n transform-style: preserve-3d;\n position: absolute;\n width: 100%;\n height: 100%;\n /* background:linear-gradient( to top,rgb(11, 11, 102),rgb(96, 96, 232) ) ; */\n}\n\n.objchild::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: 100%;\n /* background: rgb(37, 101, 230); */\n /* background: radial-gradient(center center, farthest-side , #9993, transparent); */\n filter: blur(20px);\n box-shadow: 0 0 200px 15px white;\n transform: rotateX(90deg) scale(1.1) translateZ(-120px);\n}\n\n.inn6 {\n position: absolute;\n width: 100%;\n height: 100%;\n background: rgb(21, 21, 21);\n transform: rotateX(90deg) translateZ(100px);\n animation: updown 4s infinite ease-in-out;\n}\n\n@keyframes rotate {\n 0% {\n transform: rotate3d(0,1,0,0deg);\n }\n\n 100% {\n transform: rotate3d(0,1,0,360deg);\n }\n}\n\n@keyframes updown {\n 0% {\n transform: translateY(100px) rotateX(90deg) translateZ(100px);\n }\n\n 50% {\n transform: translateY(200px);\n }\n\n 100% {\n transform: translateY(100px) rotateX(450deg) translateZ(100px);\n }\n}"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"558118","snapshot":null,"tags":null,"title":"card by NouvelleTechno","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":460,"jsLen":0,"cssLen":1760,"pureCSS":1,"html":"

\n 🍪 Cookie Notice\n

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

\n \n Manage preferences\n \n

\n \n \n

","css":".card {\n width: 370px;\n background: white;\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n padding: 40px;\n border-radius: 40px;\n background-color: hsl(120deg 20% 95%);\n box-shadow: 17px 17px 34px 0px rgb(124, 134, 124), \n inset -8px -8px 16px 0px rgba(117, 133, 117, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n\n.card .title {\n color: black;\n font-size: 2rem;\n font-weight: 600;\n}\n\n.card .description {\n color: black;\n margin-top: 10px;\n margin-bottom: 20px;\n}\n\n.card .prefs {\n color: blue;\n font-size: .8em;\n margin-bottom: 20px;\n}\n\n.card .actions {\n margin-top: 10px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.card button {\n color: white;\n border: none;\n background: none;\n padding: 20px;\n border-radius: 15px;\n cursor: pointer;\n font-size: 1.2em;\n font-weight: bold;\n}\n\n.card .decline {\n color: rgb(255, 0, 0);\n box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), \n inset -8px -8px 16px 0px rgba(92, 92, 92, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n\n.card .valid {\n color: rgb(0, 156, 0);\n box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), \n inset -8px -8px 16px 0px rgba(121, 121, 121, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n\n.card .decline:hover {\n color: white;\n background-color: rgb(255, 0, 0);\n box-shadow: 4px 4px 8px 0px rgb(134, 124, 124), \n inset -8px -8px 16px 0px rgba(134, 20, 20, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n\n.card .valid:hover {\n color: white;\n background-color: rgb(0, 156, 0);\n box-shadow: 4px 4px 8px 0px rgb(124, 134, 125), \n inset -8px -8px 16px 0px rgba(47, 134, 20, 0.7), \n inset 0px 14px 28px 0px hsl(120deg 20% 95%);\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"5a1423","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":221,"jsLen":0,"cssLen":779,"pureCSS":1,"html":"

\n \n

Total Page Views

89,400

21% more than last month

\n \n

","css":".stats {\n display: inline-grid;\n background-color: #111111;\n color: #fff;\n border-radius: 1rem;\n border: 1px solid gray;\n}\n\n.shadow {\n box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n}\n\n.stat {\n display: inline-grid;\n width: 100%;\n grid-template-columns: repeat(1, 1fr);\n column-gap: 1rem;\n padding-left: 1.5rem;\n padding-right: 1.5rem;\n padding-top: 1rem;\n padding-bottom: 1rem;\n}\n\n.stat-title {\n grid-column-start: 1;\n white-space: nowrap;\n color: rgb(197, 194, 194);\n}\n\n.stat-value {\n grid-column-start: 1;\n white-space: nowrap;\n font-size: 2.25rem;\n line-height: 2.5rem;\n font-weight: 800;\n}\n\n.stat-desc {\n grid-column-start: 1;\n white-space: nowrap;\n font-size: 0.75rem;\n line-height: 1rem;\n color: rgb(197, 194, 194);\n}"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"627ec4","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1943,"jsLen":0,"cssLen":9217,"pureCSS":1,"html":"

\n \n \n \n

\n NOT FOUND\n

\n","css":"/* Design Inspired by one of Stefan Devai's Design on Dribble */\n\n.main_wrapper {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30em;\n height: 30em;\n}\n\n.main {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n margin-top: 5em;\n}\n\n.antenna {\n width: 5em;\n height: 5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #f27405;\n margin-bottom: -6em;\n margin-left: 0em;\n z-index: -1;\n}\n.antenna_shadow {\n position: absolute;\n background-color: transparent;\n width: 50px;\n height: 56px;\n margin-left: 1.68em;\n border-radius: 45%;\n transform: rotate(140deg);\n border: 4px solid transparent;\n box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;\n -moz-box-shadow: inset 0px 16px #a85103, inset 0px 16px 1px 1px #a85103;\n}\n.antenna::after {\n content: \"\";\n position: absolute;\n margin-top: -9.4em;\n margin-left: 0.4em;\n transform: rotate(-25deg);\n width: 1em;\n height: 0.5em;\n border-radius: 50%;\n background-color: #f69e50;\n}\n.antenna::before {\n content: \"\";\n position: absolute;\n margin-top: 0.2em;\n margin-left: 1.25em;\n transform: rotate(-20deg);\n width: 1.5em;\n height: 0.8em;\n border-radius: 50%;\n background-color: #f69e50;\n}\n.a1 {\n position: relative;\n top: -102%;\n left: -130%;\n width: 12em;\n height: 5.5em;\n border-radius: 50px;\n background-image: linear-gradient(\n #171717,\n #171717,\n #353535,\n #353535,\n #171717\n );\n transform: rotate(-29deg);\n clip-path: polygon(50% 0%, 49% 100%, 52% 100%);\n}\n.a1d {\n position: relative;\n top: -211%;\n left: -35%;\n transform: rotate(45deg);\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #979797;\n z-index: 99;\n}\n.a2 {\n position: relative;\n top: -210%;\n left: -10%;\n width: 12em;\n height: 4em;\n border-radius: 50px;\n background-color: #171717;\n background-image: linear-gradient(\n #171717,\n #171717,\n #353535,\n #353535,\n #171717\n );\n margin-right: 5em;\n clip-path: polygon(\n 47% 0,\n 47% 0,\n 34% 34%,\n 54% 25%,\n 32% 100%,\n 29% 96%,\n 49% 32%,\n 30% 38%\n );\n transform: rotate(-8deg);\n}\n.a2d {\n position: relative;\n top: -294%;\n left: 94%;\n width: 0.5em;\n height: 0.5em;\n border-radius: 50%;\n border: 2px solid black;\n background-color: #979797;\n z-index: 99;\n}\n\n.notfound_text {\n background-color: black;\n padding-left: 0.3em;\n padding-right: 0.3em;\n font-size: 0.75em;\n color: white;\n letter-spacing: 0;\n border-radius: 5px;\n z-index: 10;\n}\n.tv {\n width: 17em;\n height: 9em;\n margin-top: 3em;\n border-radius: 15px;\n background-color: #d36604;\n display: flex;\n justify-content: center;\n border: 2px solid #1d0e01;\n box-shadow: inset 0.2em 0.2em #e69635;\n}\n.tv::after {\n content: \"\";\n position: absolute;\n width: 17em;\n height: 9em;\n border-radius: 15px;\n background: repeating-radial-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%)\n 50% 0/2500px 2500px,\n repeating-conic-gradient(#d36604 0 0.0001%, #00000070 0 0.0002%) 60% 60%/2500px\n 2500px;\n background-blend-mode: difference;\n opacity: 0.09;\n}\n.curve_svg {\n position: absolute;\n margin-top: 0.25em;\n margin-left: -0.25em;\n height: 12px;\n width: 12px;\n}\n.display_div {\n display: flex;\n align-items: center;\n align-self: center;\n justify-content: center;\n border-radius: 15px;\n box-shadow: 3.5px 3.5px 0px #e69635;\n}\n.screen_out {\n width: auto;\n height: auto;\n\n border-radius: 10px;\n}\n.screen_out1 {\n width: 11em;\n height: 7.75em;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n}\n.screen {\n width: 13em;\n height: 7.85em;\n font-family: Montserrat;\n border: 2px solid #1d0e01;\n background: repeating-radial-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 50% 0/2500px\n 2500px,\n repeating-conic-gradient(#000 0 0.0001%, #ffffff 0 0.0002%) 60% 60%/2500px\n 2500px;\n background-blend-mode: difference;\n animation: b 0.2s infinite alternate;\n border-radius: 10px;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: #252525;\n letter-spacing: 0.15em;\n text-align: center;\n}\n@keyframes b {\n 100% {\n background-position: 50% 0, 60% 50%;\n }\n}\n\n/* Another Error Screen to Use \n\n.screen {\n width: 13em;\n height: 7.85em;\n position: relative;\n background: linear-gradient(to right, #002fc6 0%, #002bb2 14.2857142857%, #3a3a3a 14.2857142857%, #303030 28.5714285714%, #ff0afe 28.5714285714%, #f500f4 42.8571428571%, #6c6c6c 42.8571428571%, #626262 57.1428571429%, #0affd9 57.1428571429%, #00f5ce 71.4285714286%, #3a3a3a 71.4285714286%, #303030 85.7142857143%, white 85.7142857143%, #fafafa 100%);\n border-radius: 10px;\n border: 2px solid black;\n z-index: 99;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: bold;\n color: #252525;\n letter-spacing: 0.15em;\n text-align: center;\n overflow: hidden;\n}\n.screen:before, .screen:after {\n content: \"\";\n position: absolute;\n left: 0;\n z-index: 1;\n width: 100%;\n}\n.screen:before {\n top: 0;\n height: 68.4782608696%;\n background: linear-gradient(to right, white 0%, #fafafa 14.2857142857%, #ffe60a 14.2857142857%, #f5dc00 28.5714285714%, #0affd9 28.5714285714%, #00f5ce 42.8571428571%, #10ea00 42.8571428571%, #0ed600 57.1428571429%, #ff0afe 57.1428571429%, #f500f4 71.4285714286%, #ed0014 71.4285714286%, #d90012 85.7142857143%, #002fc6 85.7142857143%, #002bb2 100%);\n}\n.screen:after {\n bottom: 0;\n height: 21.7391304348%;\n background: linear-gradient(to right, #006c6b 0%, #005857 16.6666666667%, white 16.6666666667%, #fafafa 33.3333333333%, #001b75 33.3333333333%, #001761 50%, #6c6c6c 50%, #626262 66.6666666667%, #929292 66.6666666667%, #888888 83.3333333333%, #3a3a3a 83.3333333333%, #303030 100%);\n}\n\n */\n\n.lines {\n display: flex;\n column-gap: 0.1em;\n align-self: flex-end;\n}\n.line1,\n.line3 {\n width: 2px;\n height: 0.5em;\n background-color: black;\n border-radius: 25px 25px 0px 0px;\n margin-top: 0.5em;\n}\n.line2 {\n flex-grow: 1;\n width: 2px;\n height: 1em;\n background-color: black;\n border-radius: 25px 25px 0px 0px;\n}\n\n.buttons_div {\n width: 4.25em;\n align-self: center;\n height: 8em;\n background-color: #e69635;\n border: 2px solid #1d0e01;\n padding: 0.6em;\n border-radius: 10px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n row-gap: 0.75em;\n box-shadow: 3px 3px 0px #e69635;\n}\n.b1 {\n width: 1.65em;\n height: 1.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,\n -2px 0px 0px 1px black;\n}\n.b1::before {\n content: \"\";\n position: absolute;\n margin-top: 1em;\n margin-left: 0.5em;\n transform: rotate(47deg);\n border-radius: 5px;\n width: 0.1em;\n height: 0.4em;\n background-color: #000000;\n}\n.b1::after {\n content: \"\";\n position: absolute;\n margin-top: 0.9em;\n margin-left: 0.8em;\n transform: rotate(47deg);\n border-radius: 5px;\n width: 0.1em;\n height: 0.55em;\n background-color: #000000;\n}\n.b1 div {\n content: \"\";\n position: absolute;\n margin-top: -0.1em;\n margin-left: 0.65em;\n transform: rotate(45deg);\n width: 0.15em;\n height: 1.5em;\n background-color: #000000;\n}\n.b2 {\n width: 1.65em;\n height: 1.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow: inset 2px 2px 1px #b49577, -2px 0px #513721,\n -2px 0px 0px 1px black;\n}\n.b2::before {\n content: \"\";\n position: absolute;\n margin-top: 1.05em;\n margin-left: 0.8em;\n transform: rotate(-45deg);\n border-radius: 5px;\n width: 0.15em;\n height: 0.4em;\n background-color: #000000;\n}\n.b2::after {\n content: \"\";\n position: absolute;\n margin-top: -0.1em;\n margin-left: 0.65em;\n transform: rotate(-45deg);\n width: 0.15em;\n height: 1.5em;\n background-color: #000000;\n}\n.speakers {\n display: flex;\n flex-direction: column;\n row-gap: 0.5em;\n}\n.speakers .g1 {\n display: flex;\n column-gap: 0.25em;\n}\n.speakers .g1 .g11,\n.g12,\n.g13 {\n width: 0.65em;\n height: 0.65em;\n border-radius: 50%;\n background-color: #7f5934;\n border: 2px solid black;\n box-shadow: inset 1.25px 1.25px 1px #b49577;\n}\n.speakers .g {\n width: auto;\n height: 2px;\n background-color: #171717;\n}\n\n.bottom {\n width: 100%;\n height: auto;\n display: flex;\n align-items: center;\n justify-content: center;\n column-gap: 8.7em;\n}\n.base1 {\n height: 1em;\n width: 2em;\n border: 2px solid #171717;\n background-color: #4d4d4d;\n margin-top: -0.15em;\n z-index: -1;\n}\n.base2 {\n height: 1em;\n width: 2em;\n border: 2px solid #171717;\n background-color: #4d4d4d;\n margin-top: -0.15em;\n z-index: -1;\n}\n.base3 {\n position: absolute;\n height: 0.15em;\n width: 17.5em;\n background-color: #171717;\n margin-top: 0.8em;\n}\n\n.text_404 {\n position: absolute;\n display: flex;\n flex-direction: row;\n column-gap: 6em;\n z-index: -5;\n margin-bottom: 2em;\n align-items: center;\n justify-content: center;\n opacity: 0.5;\n font-family: Montserrat;\n}\n.text_4041 {\n transform: scaleY(24.5) scaleX(9);\n}\n.text_4042 {\n transform: scaleY(24.5) scaleX(9);\n}\n.text_4043 {\n transform: scaleY(24.5) scaleX(9);\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"873fab","snapshot":null,"tags":null,"title":"card by ahmedyasserdev","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":235,"jsLen":0,"cssLen":916,"pureCSS":1,"html":"

Unique Card

Hover over me for a distinct effect!

\n","css":".unique-card {\n position: relative;\n width: 300px;\n height: 200px;\n overflow: hidden;\n border-radius: 15px;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n transition: transform 0.3s, box-shadow 0.3s;\n}\n\n.unique-card:hover {\n transform: scale(1.1);\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);\n}\n\n.card-content {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n color: #888;\n z-index: 2;\n transition: color 0.3s;\n}\n\n.unique-card:hover .card-content {\n color: #ff7e5f;\n}\n\n.background-overlay {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(52, 73, 94, 0.7);\n border-radius: 15px;\n opacity: 0;\n transition: opacity 0.3s;\n}\n\n.unique-card:hover .background-overlay {\n opacity: 1;\n}\n\n.card-title {\n font-size: 24px;\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.card-description {\n font-size: 16px;\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"95f03d","snapshot":null,"tags":null,"title":"card by vladaxinte","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":366,"jsLen":0,"cssLen":1995,"pureCSS":1,"html":"

\n","css":".container {\n width: 300px;\n height: 320px;\n}\n\n.twitter {\n transform: translate(-15%, 20%);\n}\n\n.wing-bottom {\n background: radial-gradient(circle at -100% 90%, transparent 75%, #fff 10%);\n width: 120px;\n height: 120px;\n position: absolute;\n border-radius: 100%;\n left: 92px;\n top: 94px;\n transform: rotate(86deg);\n z-index: 90;\n}\n\n.wing-top {\n background: radial-gradient(circle at -100% 90%, transparent 70%, #fff 10%);\n width: 125px;\n height: 160px;\n position: absolute;\n z-index: 20;\n border-radius: 100%;\n left: 88px;\n top: 8px;\n transform: rotate(132deg);\n}\n\n.wing-middle {\n background: radial-gradient(circle at 50% -80%, transparent 80%, #fff 10%);\n width: 130px;\n height: 130px;\n position: absolute;\n z-index: 20;\n border-radius: 100%;\n left: 73px;\n top: 44px;\n transform: rotate(7deg);\n}\n\n.beak {\n background: radial-gradient(circle at 10% -30%, transparent 76%, #fff 30%);\n width: 112px;\n height: 112px;\n position: absolute;\n z-index: 20;\n border-radius: 100%;\n}\n\n.beak-bottom {\n left: 240px;\n top: -36px;\n width: 112px;\n height: 140px;\n transform: rotate(20deg);\n}\n\n.beak-top {\n left: 225px;\n top: -33px;\n transform: rotate(15deg);\n}\n\n.tummy {\n background: radial-gradient(circle at 0% -38%, transparent 80%, #fff 30%);\n width: 320px;\n height: 320px;\n position: absolute;\n z-index: 20;\n border-radius: 100%;\n left: -3px;\n top: -55px;\n z-index: -1;\n}\n\n.torso {\n width: 200px;\n height: 200px;\n border-radius: 100%;\n position: absolute;\n left: 117px;\n top: 8px;\n transform: rotate(10deg);\n background: radial-gradient(circle at 0% -40%, transparent 60%, #fff 30%);\n}\n\n.tail {\n width: 228px;\n height: 150px;\n border-radius: 100%;\n position: absolute;\n left: 28px;\n top: 116px;\n background: radial-gradient(circle at 10% -42%, transparent 66%, #fff 30%);\n transform: rotate(5deg);\n}\n\n.head {\n background: #fff;\n width: 116px;\n height: 116px;\n border-radius: 100%;\n position: absolute;\n left: 200px;\n top: 34px;\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"a6af41","snapshot":null,"tags":null,"title":"card by sohoning","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":6078,"jsLen":0,"cssLen":2456,"pureCSS":1,"html":"

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

1st

\n \n \n \n

Jessie Ben

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

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

SCORE

1105

\n","css":".cards {\n position: relative;\n height: 150px;\n transition-duration: 0.5s;\n background: none;\n overflow: hidden;\n}\n\n.cards:hover {\n height: 270px;\n}\n\n.cards:hover .outlinePage {\n box-shadow: 0 10px 15px #b1985e;\n}\n\n.cards:hover .detailPage {\n display: flex;\n}\n\n.outlinePage {\n position: relative;\n background: linear-gradient(45deg, #fffbf0, #ffdd87);\n width: 300px;\n height: 150px;\n border-radius: 25px;\n transition-duration: 0.5s;\n z-index: 2;\n}\n\n.detailPage {\n position: relative;\n display: none;\n width: 300px;\n height: 120px;\n background: white;\n top: -20px;\n z-index: 1;\n transition-duration: 1s;\n border-radius: 0 0 25px 25px;\n overflow: hidden;\n align-items: center;\n justify-content: flex-start;\n}\n\n.splitLine {\n position: absolute;\n width: 200px;\n height: 10px;\n top: 100px;\n background-image: linear-gradient(\n to right,\n transparent 10%,\n #ffe8a0 20%,\n #f7b733 50%,\n #ffe8a0 70%,\n transparent 90%\n );\n z-index: 1;\n}\n\n.trophy {\n position: absolute;\n right: 0px;\n top: 4px;\n z-index: 2;\n}\n\n.ranking_number {\n position: relative;\n color: #ffc64b;\n font-family: \"Segoe UI\", Tahoma, Geneva, Verdana, sans-serif;\n font-weight: 700;\n font-size: 80px;\n left: 20px;\n padding: 0;\n margin: 0;\n top: -5px;\n}\n\n.ranking_word {\n position: relative;\n font-size: 40px;\n color: #424c50;\n}\n\n.userAvatar {\n position: absolute;\n bottom: 6px;\n left: 20px;\n}\n\n.userName {\n position: relative;\n font-weight: 600;\n color: #6b7578;\n left: 55px;\n font-size: 18px;\n top: -2px;\n}\n\n.medals {\n position: absolute;\n top: 15px;\n right: 5px;\n}\n\n.gradesBox {\n position: relative;\n height: 75px;\n top: 10px;\n margin-right: 10px;\n margin-left: 15px;\n}\n\n.gradesIcon {\n position: absolute;\n top: 10px;\n}\n\n.gradesBoxLabel {\n position: relative;\n display: block;\n margin-left: 60px;\n color: #424c50;\n letter-spacing: 6px;\n font-family: Arial, Helvetica, sans-serif;\n margin-top: 20px;\n font-weight: 800;\n font-size: 13px;\n}\n\n.gradesBoxNum {\n position: relative;\n font-family: Arial, Helvetica, sans-serif;\n display: block;\n font-size: 25px;\n font-weight: 800;\n margin-left: 60px;\n color: #ea9518;\n top: -5px;\n}\n\n.timeNum {\n color: #6cabf6;\n}\n\n.slide-in-top {\n animation: slide-in-top 1s cubic-bezier(0.65, 0.05, 0.36, 1) both;\n}\n\n@keyframes slide-in-top {\n 0% {\n transform: translateY(-100px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"b41ebb","snapshot":null,"tags":null,"title":"card by csemszepp","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":1456,"jsLen":0,"cssLen":1647,"pureCSS":1,"html":"

\n \n \n \n

\n","css":"@keyframes animate {\n 0% {\n filter: hue-rotate(0deg);\n }\n 100% {\n filter: hue-rotate(360deg);\n }\n}\n\n.container {\n position: relative;\n top: -80px;\n transform: skewY(-20deg);\n animation: animate 5s linear infinite;\n .cube {\n position: relative;\n z-index: 2;\n &:nth-child(2) {\n z-index: 1;\n translate: -60px -60px;\n }\n &:nth-child(3) {\n z-index: 3;\n translate: 60px 60px;\n }\n div {\n position: absolute;\n display: flex;\n flex-direction: column;\n gap: 30px;\n translate: calc(-70px * var(--x)) calc(-60px * var(--y));\n span {\n position: relative;\n display: inline-block;\n width: 50px;\n height: 50px;\n background: #dcdcdc;\n z-index: calc(1 * var(--i));\n transition: 1.5s;\n &:hover {\n transition: 0s;\n background: #ef4149;\n filter: drop-shadow(0 0 30px #ef4149);\n &:before,\n &:after {\n transition: 0s;\n background: #ef4149;\n }\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -40px;\n width: 40px;\n height: 100%;\n background: #fff;\n transform-origin: right;\n transform: skewY(45deg);\n transition: 1.5s;\n }\n &:after {\n content: \"\";\n position: absolute;\n top: -40px;\n left: 0px;\n width: 100%;\n height: 40px;\n background: #f2f2f2;\n transform-origin: bottom;\n transform: skewX(45deg);\n transition: 1.5s;\n }\n }\n }\n }\n}\n"},{"created":"2024-01-22T17:11:07.000Z","isPrivate":0,"projectId":"c4183a","snapshot":null,"tags":null,"title":"card by sahilxkhadka","updated":"2024-01-22T17:11:07.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":8069,"jsLen":0,"cssLen":3364,"pureCSS":1,"html":"

\n Hover Them\n

\n \n

\n \n Home\n \n

\n \n

\n \n Messages\n \n

\n \n

\n \n User\n \n

\n \n

\n \n Settings\n \n

","css":".absolute{position:absolute}.relative{position:relative}.-top-8{top:-2rem}.left-\\[50\\%\\]{left:50%}.z-20{z-index:20}.mb-6{margin-bottom:1.5rem}.flex{display:flex}.h-10{height:2.5rem}.w-10{width:2.5rem}.origin-left{transform-origin:left}.-translate-x-\\[50\\%\\]{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.scale-0{--tw-scale-x:0;--tw-scale-y:0;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.rounded-md{border-radius:0.375rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219 / var(--tw-border-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.bg-gradient-to-r{background-image:linear-gradient(to right, var(--tw-gradient-stops))}.from-teal-500{--tw-gradient-from:#14b8a6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(20 184 166 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.via-purple-500{--tw-gradient-to:rgb(168 85 247 / 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), #a855f7 var(--tw-gradient-via-position), var(--tw-gradient-to)}.to-orange-500{--tw-gradient-to:#f97316 var(--tw-gradient-to-position)}.bg-clip-text{-webkit-background-clip:text;background-clip:text}.px-3{padding-left:0.75rem;padding-right:0.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-3{padding-top:0.75rem;padding-bottom:0.75rem}.text-center{text-align:center}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-black{font-weight:900}.font-medium{font-weight:500}.text-transparent{color:transparent}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.hover\\:text-blue-500:hover{--tw-text-opacity:1;color:rgb(59 130 246 / var(--tw-text-opacity))}.group:hover .group-hover\\:scale-100{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"284619","snapshot":null,"tags":null,"title":"card by AnthonyPreite","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":412,"jsLen":0,"cssLen":1514,"pureCSS":1,"html":"\n

Free Plan

$0/month

Access to all features
Unlimited storage
No ads

\n Get Started\n

\n","css":".main__heading {\n font-weight: 600;\n font-size: 2.25em;\n margin-bottom: 0.75em;\n text-align: center;\n color: #eceff1;\n}\n\n.cards {\n position: relative;\n}\n\n.card {\n --flow-space: 0.5em;\n --hsl: var(--hue), var(--saturation), var(--lightness);\n flex: 1 1 14rem;\n padding: 1.5em 2em;\n display: grid;\n grid-template-rows: auto auto auto 1fr;\n align-items: start;\n gap: 1.25em;\n color: #eceff1;\n background-color: #2b2b2b;\n border: 1px solid #eceff133;\n border-radius: 15px;\n}\n\n.card:nth-child(1) {\n --hue: 165;\n --saturation: 82.26%;\n --lightness: 51.37%;\n}\n\n.card__bullets {\n line-height: 1.4;\n}\n\n.card__heading {\n font-size: 1.05em;\n font-weight: 600;\n}\n\n.card__price {\n font-size: 1.75em;\n font-weight: 700;\n}\n\n.flow > * + * {\n margin-top: var(--flow-space, 1.25em);\n}\n\n.cta {\n display: block;\n align-self: end;\n margin: 1em 0 0.5em 0;\n text-align: center;\n text-decoration: none;\n color: #fff;\n background-color: transparent;\n outline: 1px solid white;\n padding: 0.7em;\n border-radius: 10px;\n font-size: 1rem;\n font-weight: 600;\n}\n\n.card:hover {\n --lightness: 80%;\n background: #ffffff80;\n color: #000;\n outline: 1px solid rgb(255, 255, 255);\n box-shadow: inset 0 0 80px whitesmoke, inset 20px 0 80px rgba(255, 0, 255, 0.747),\n inset -20px 0 80px #0ff, inset 20px 0 300px #f0f, inset -20px 0 300px #0ff,\n 0 0 50px #fff, -10px 0 80px #f0f, 10px 0 80px #0ff;\n transition: all ease-in-out 0.3s;\n}\n\n.card:hover > .cta {\n outline: none;\n background-color: #0d0d0d;\n}\n"},{"created":"2024-01-22T17:11:06.000Z","isPrivate":0,"projectId":"5e69a1","snapshot":null,"tags":null,"title":"card by Vikikos","updated":"2024-01-22T17:11:06.000Z","isTemplate":1,"relatedUrl":"","forkFrom":null,"htmlType":"html","htmlLen":37,"jsLen":0,"cssLen":635,"pureCSS":1,"html":"

","css":".card {\n width: 190px;\n height: 254px;\n box-shadow: 0 10px 10px rgba(0, 0, 0, 0.212);\n background: #fff;\n display: flex;\n border-radius: 20px;\n justify-content: center;\n position: relative;\n transition: all .4s;\n}\n\n.card::before {\n content: '---content---';\n letter-spacing: 0.2em;\n position: absolute;\n bottom: 8px;\n left: 20px;\n color: rgb(51, 51, 51);\n font-size: 0.8em;\n font-weight: 700;\n}\n\n.card div {\n width: 100%;\n height: 100%;\n border-radius: 20px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.212);\n cursor: pointer;\n z-index: 10;\n transition: all .4s;\n background-color: #fff;\n}\n\n.card:hover div {\n transform: translateY(-30px);\n}"}]}},"actionData":null,"errors":null}