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

\n","css":".card {\n position: relative;\n width: 200px;\n height: 250px;\n border-radius: 14px;\n z-index: 1111;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff;\n ;\n}\n\n.bg {\n position: absolute;\n top: 5px;\n left: 5px;\n width: 190px;\n height: 240px;\n z-index: 2;\n background: rgba(255, 255, 255, .95);\n backdrop-filter: blur(24px);\n border-radius: 10px;\n overflow: hidden;\n outline: 2px solid white;\n}\n\n.blob {\n position: absolute;\n z-index: 1;\n top: 50%;\n left: 50%;\n width: 150px;\n height: 150px;\n border-radius: 50%;\n background-color: #ff0000;\n opacity: 1;\n filter: blur(12px);\n animation: blob-bounce 5s infinite ease;\n}\n\n@keyframes blob-bounce {\n 0% {\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\n }\n\n 25% {\n transform: translate(-100%, -100%) translate3d(100%, 0, 0);\n }\n\n 50% {\n transform: translate(-100%, -100%) translate3d(100%, 100%, 0);\n }\n\n 75% {\n transform: translate(-100%, -100%) translate3d(0, 100%, 0);\n }\n\n 100% {\n transform: translate(-100%, -100%) translate3d(0, 0, 0);\n }\n}\n"},{"created":"2024-01-22T17:10:57.000Z","isPrivate":0,"projectId":"77dd77","snapshot":null,"tags":null,"title":"card by emmanuelh-dev","updated":"2024-01-22T17:10:57.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1111,"cssLen":2276,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n \n Starter\n \n

Suitable to grow steadily.

\n \n $25\n \n /mo \n

\n \n Get started\n \n

\n","css":".mt-2{margin-top:0.5rem}.mt-6{margin-top:1.5rem}.flex{display:flex}.grid{display:grid}.w-full{width:100%}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-black{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-2\\.5{padding-top:0.625rem;padding-bottom:0.625rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pb-8{padding-bottom:2rem}.text-left{text-align:left}.text-center{text-align:center}.text-5xl{font-size:3rem;line-height:1}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-light{font-weight:300}.font-medium{font-weight:500}.tracking-tight{letter-spacing:-0.025em}.tracking-tighter{letter-spacing:-0.05em}.text-black{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128 / var(--tw-text-opacity))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99 / var(--tw-text-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.duration-200{transition-duration:200ms}.hover\\:border-black:hover{--tw-border-opacity:1;border-color:rgb(0 0 0 / var(--tw-border-opacity))}.hover\\:bg-transparent:hover{background-color:transparent}.hover\\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0 / var(--tw-text-opacity))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-black:focus-visible{outline-color:#000}.focus-visible\\:ring-black:focus-visible{--tw-ring-opacity:1;--tw-ring-color:rgb(0 0 0 / var(--tw-ring-opacity))}@media (min-width: 640px){.sm\\:p-10{padding:2.5rem}.sm\\:px-8{padding-left:2rem;padding-right:2rem}.sm\\:pb-6{padding-bottom:1.5rem}}@media (min-width: 1024px){.lg\\:text-3xl{font-size:1.875rem;line-height:2.25rem}}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"48fe98","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":418,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 190px;\n height: 254px;\n background: rgb(223, 225, 235);\n border-radius: 50px;\n box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"1996a6","snapshot":null,"tags":null,"title":"card by satyamchaudharydev","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":823,"cssLen":1199,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Title\n

Lorem ipsum dolor sit amet consectetur adipisicing elit.

\n April 15, 2022\n

\n \n

","css":"/* this card is inspired form this - https://georgefrancis.dev/ */\n\n.card {\n --border-radius: 0.75rem;\n --primary-color: #7257fa;\n --secondary-color: #3c3852;\n width: 210px;\n font-family: \"Arial\";\n padding: 1rem;\n cursor: pointer;\n border-radius: var(--border-radius);\n background: #f1f1f3;\n box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 3%);\n position: relative;\n}\n\n.card > * + * {\n margin-top: 1.1em;\n}\n\n.card .card__content {\n color: var(--secondary-color);\n font-size: 0.86rem;\n}\n\n.card .card__title {\n padding: 0;\n font-size: 1.3rem;\n font-weight: bold;\n}\n\n.card .card__date {\n color: #6e6b80;\n font-size: 0.8rem;\n}\n\n.card .card__arrow {\n position: absolute;\n background: var(--primary-color);\n padding: 0.4rem;\n border-top-left-radius: var(--border-radius);\n border-bottom-right-radius: var(--border-radius);\n bottom: 0;\n right: 0;\n transition: 0.2s;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.card svg {\n transition: 0.2s;\n}\n\n/* hover */\n.card:hover .card__title {\n color: var(--primary-color);\n text-decoration: underline;\n}\n\n.card:hover .card__arrow {\n background: #111;\n}\n\n.card:hover .card__arrow svg {\n transform: translateX(3px);\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"34b7f3","snapshot":null,"tags":null,"title":"card by andrew-demchenk0","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1161,"cssLen":698,"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":".info {\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: #509AF8;\n border-radius: 8px;\n box-shadow: 0px 0px 5px -3px #111;\n}\n\n.info__icon {\n width: 20px;\n height: 20px;\n transform: translateY(-2px);\n margin-right: 8px;\n}\n\n.info__icon path {\n fill: #fff;\n}\n\n.info__title {\n font-weight: 500;\n font-size: 14px;\n color: #fff;\n}\n\n.info__close {\n width: 20px;\n height: 20px;\n cursor: pointer;\n margin-left: auto;\n}\n\n.info__close path {\n fill: #fff;\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"964c1c","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1573,"cssLen":1212,"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 Sales\n

\n 20%\n

\n 39,500 \n

\n \n

\n","css":".card {\n padding: 1rem;\n background-color: #fff;\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n max-width: 320px;\n border-radius: 20px;\n}\n\n.title {\n display: flex;\n align-items: center;\n}\n\n.title span {\n position: relative;\n padding: 0.5rem;\n background-color: #10B981;\n width: 1.5rem;\n height: 1.5rem;\n border-radius: 9999px;\n}\n\n.title span svg {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n color: #ffffff;\n height: 1rem;\n}\n\n.title-text {\n margin-left: 0.5rem;\n color: #374151;\n font-size: 18px;\n}\n\n.percent {\n margin-left: 0.5rem;\n color: #02972f;\n font-weight: 600;\n display: flex;\n}\n\n.data {\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n}\n\n.data p {\n margin-top: 1rem;\n margin-bottom: 1rem;\n color: #1F2937;\n font-size: 2.25rem;\n line-height: 2.5rem;\n font-weight: 700;\n text-align: left;\n}\n\n.data .range {\n position: relative;\n background-color: #E5E7EB;\n width: 100%;\n height: 0.5rem;\n border-radius: 0.25rem;\n}\n\n.data .range .fill {\n position: absolute;\n top: 0;\n left: 0;\n background-color: #10B981;\n width: 76%;\n height: 100%;\n border-radius: 0.25rem;\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"777358","snapshot":null,"tags":null,"title":"card by Yaya12085","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1428,"cssLen":1268,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

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

Etiam ac convallis enim, eget euismod dolor.

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

\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tAenean quis\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tMorbi semper\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\tTristique enim nec\n\t\t\t\t\t\t

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

","css":".card {\n margin-left: -1rem;\n margin-right: -1rem;\n display: flex;\n flex-wrap: wrap;\n align-items: stretch;\n margin-bottom: 2rem;\n width: 320px;\n display: flex;\n flex-direction: column;\n border-radius: 0.25rem;\n background-color: rgba(17, 24, 39, 1);\n padding: 1.5rem;\n}\n\n.header {\n display: flex;\n flex-direction: column;\n}\n\n.title {\n font-size: 1.5rem;\n line-height: 2rem;\n font-weight: 700;\n color: #fff\n}\n\n.price {\n font-size: 3.75rem;\n line-height: 1;\n font-weight: 700;\n color: #fff\n}\n\n.desc {\n margin-top: 0.75rem;\n margin-bottom: 0.75rem;\n line-height: 1.625;\n color: rgba(156, 163, 175, 1);\n}\n\n.lists {\n margin-bottom: 1.5rem;\n flex: 1 1 0%;\n color: rgba(156, 163, 175, 1);\n}\n\n.lists .list {\n margin-bottom: 0.5rem;\n display: flex;\n margin-left: 0.5rem\n}\n\n.lists .list svg {\n height: 1.5rem;\n width: 1.5rem;\n flex-shrink: 0;\n margin-right: 0.5rem;\n color: rgba(167, 139, 250, 1);\n}\n\n.action {\n border: none;\n outline: none;\n display: inline-block;\n border-radius: 0.25rem;\n background-color: rgba(167, 139, 250, 1);\n padding-left: 1.25rem;\n padding-right: 1.25rem;\n padding-top: 0.75rem;\n padding-bottom: 0.75rem;\n text-align: center;\n font-weight: 600;\n letter-spacing: 0.05em;\n color: rgba(17, 24, 39, 1);\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"7aa111","snapshot":null,"tags":null,"title":"card by JaydipPrajapati1910","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":24,"cssLen":609,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

","css":".card {\n width: 200px;\n height: 250px;\n border: none;\n border-radius: 10px;\n background: radial-gradient(ellipse farthest-side at 76% 77%, rgba(245, 228, 212, 0.25) 4%, rgba(255, 255, 255, 0) calc(4% + 1px)), radial-gradient(circle at 76% 40%, #fef6ec 4%, rgba(255, 255, 255, 0) 4.18%), linear-gradient(135deg, #ff0000 0%, #000036 100%), radial-gradient(ellipse at 28% 0%, #ffcfac 0%, rgba(98, 149, 144, 0.5) 100%), linear-gradient(180deg, #cd6e8a 0%, #f5eab0 69%, #d6c8a2 70%, #a2758d 100%);\n background-blend-mode: normal, normal, screen, overlay, normal;\n box-shadow: 0px 0px 10px 1px #000000;\n}\n\n\n\n"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"75a44a","snapshot":null,"tags":null,"title":"card by adamgiebl","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":25,"cssLen":165,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"\n

","css":".card {\n width: 190px;\n height: 254px;\n border-radius: 30px;\n background: #e0e0e0;\n box-shadow: 15px 15px 30px #bebebe,\n -15px -15px 30px #ffffff;\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"deda6c","snapshot":null,"tags":null,"title":"card by Samalander0","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":1321,"cssLen":1168,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

\n 01.\n

Lightning.

Hover Me?

\n \n

","css":".card {\n width: 320px;\n background: #fff480;\n color: black;\n position: relative;\n border-radius: 2.5em;\n padding: 2em;\n transition: transform 0.4s ease;\n}\n\n.card .card-content {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: 5em;\n height: 100%;\n transition: transform 0.4s ease;\n}\n\n.card .card-top, .card .card-bottom {\n display: flex;\n justify-content: space-between;\n}\n\n.card .card-top p, .card .card-top .card-title, .card .card-bottom p, .card .card-bottom .card-title {\n margin: 0;\n}\n\n.card .card-title {\n font-weight: bold;\n}\n\n.card .card-top p, .card .card-bottom p {\n font-weight: 600;\n}\n\n.card .card-bottom {\n align-items: flex-end;\n}\n\n.card .card-image {\n position: absolute;\n width: 100%;\n height: 100%;\n top: 0;\n left: 0;\n display: grid;\n place-items: center;\n pointer-events: none;\n}\n\n.card .card-image svg {\n width: 4em;\n height: 4em;\n transition: transform 0.4s ease;\n}\n\n.card:hover {\n cursor: pointer;\n transform: scale(0.97);\n}\n\n.card:hover .card-content {\n transform: scale(0.96);\n}\n\n.card:hover .card-image svg {\n transform: scale(1.05);\n}\n\n.card:active {\n transform: scale(0.9);\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"82b4bb","snapshot":null,"tags":null,"title":"card by Praashoo7","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":5798,"cssLen":2389,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

MASTERCARD

\n \n \n \n

9759 2484 5269 6576

VALID THRU

1 2 / 2 4

BRUCE WAYNE

***

","css":".flip-card {\n background-color: transparent;\n width: 240px;\n height: 154px;\n perspective: 1000px;\n color: white;\n}\n\n.heading_8264 {\n position: absolute;\n letter-spacing: .2em;\n font-size: 0.5em;\n top: 2em;\n left: 18.6em;\n}\n\n.logo {\n position: absolute;\n top: 6.8em;\n left: 11.7em;\n}\n\n.chip {\n position: absolute;\n top: 2.3em;\n left: 1.5em;\n}\n\n.contactless {\n position: absolute;\n top: 3.5em;\n left: 12.4em;\n}\n\n.number {\n position: absolute;\n font-weight: bold;\n font-size: .6em;\n top: 8.3em;\n left: 1.6em;\n}\n\n.valid_thru {\n position: absolute;\n font-weight: bold;\n top: 635.8em;\n font-size: .01em;\n left: 140.3em;\n}\n\n.date_8264 {\n position: absolute;\n font-weight: bold;\n font-size: 0.5em;\n top: 13.6em;\n left: 3.2em;\n}\n\n.name {\n position: absolute;\n font-weight: bold;\n font-size: 0.5em;\n top: 16.1em;\n left: 2em;\n}\n\n.strip {\n position: absolute;\n background-color: black;\n width: 15em;\n height: 1.5em;\n top: 2.4em;\n background: repeating-linear-gradient(\n 45deg,\n #303030,\n #303030 10px,\n #202020 10px,\n #202020 20px\n );\n}\n\n.mstrip {\n position: absolute;\n background-color: rgb(255, 255, 255);\n width: 8em;\n height: 0.8em;\n top: 5em;\n left: .8em;\n border-radius: 2.5px;\n}\n\n.sstrip {\n position: absolute;\n background-color: rgb(255, 255, 255);\n width: 4.1em;\n height: 0.8em;\n top: 5em;\n left: 10em;\n border-radius: 2.5px;\n}\n\n.code {\n font-weight: bold;\n text-align: center;\n margin: .2em;\n color: black;\n}\n\n.flip-card-inner {\n position: relative;\n width: 100%;\n height: 100%;\n text-align: center;\n transition: transform 0.8s;\n transform-style: preserve-3d;\n}\n\n.flip-card:hover .flip-card-inner {\n transform: rotateY(180deg);\n}\n\n.flip-card-front, .flip-card-back {\n box-shadow: 0 8px 14px 0 rgba(0,0,0,0.2);\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n width: 100%;\n height: 100%;\n -webkit-backface-visibility: hidden;\n backface-visibility: hidden;\n border-radius: 1rem;\n}\n\n.flip-card-front {\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;\n background-color: #171717;\n}\n\n.flip-card-back {\n box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;\n background-color: #171717;\n transform: rotateY(180deg);\n}"},{"created":"2024-01-22T17:10:56.000Z","isPrivate":0,"projectId":"8708e4","snapshot":null,"tags":null,"title":"card by eslam-hany","updated":"2024-01-22T17:10:56.000Z","isTemplate":1,"htmlType":"html","pureCSS":1,"htmlLen":105,"cssLen":1388,"jsLen":0,"nickname":"runjs-editor","avatar":"https://s1.qingting.work/runjs/e93c7c9da5ae4808/0d246acb15da.png","username":"doodle","editors":"1100","html":"

Hello

Hover Me

","css":".book {\n position: relative;\n border-radius: 10px;\n width: 220px;\n height: 300px;\n background-color: whitesmoke;\n -webkit-box-shadow: 1px 1px 12px #000;\n box-shadow: 1px 1px 12px #000;\n -webkit-transform: preserve-3d;\n -ms-transform: preserve-3d;\n transform: preserve-3d;\n -webkit-perspective: 2000px;\n perspective: 2000px;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n color: #000;\n}\n\n.cover {\n top: 0;\n position: absolute;\n background-color: lightgray;\n width: 100%;\n height: 100%;\n border-radius: 10px;\n cursor: pointer;\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n -webkit-transform-origin: 0;\n -ms-transform-origin: 0;\n transform-origin: 0;\n -webkit-box-shadow: 1px 1px 12px #000;\n box-shadow: 1px 1px 12px #000;\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n -webkit-box-align: center;\n -ms-flex-align: center;\n align-items: center;\n -webkit-box-pack: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.book:hover .cover {\n -webkit-transition: all 0.5s;\n transition: all 0.5s;\n -webkit-transform: rotatey(-80deg);\n -ms-transform: rotatey(-80deg);\n transform: rotatey(-80deg);\n}\n\np {\n font-size: 20px;\n font-weight: bolder;\n}"}]}},"actionData":null,"errors":null}