Writing pad & Diaries

\r\n

Affordable notebooks for planning, journaling, and note-taking

\r\n

\r\n\r\n

\r\n

\r\n \r\n \r\n \r\n\r\n \r\n \r\n \r\n

\r\n

From @ Ritika Agrawal

\r\n

","css":":root {\r\n --bg: rgba(148, 176, 111, 0.457);\r\n}\r\n\r\nbody {\r\n display: grid;\r\n place-content: center;\r\n min-height: 90vh;\r\n background-color: var(--bg);\r\n}\r\n\r\n.card {\r\n width: 18em;\r\n border-radius: 0.5em;\r\n cursor: pointer;\r\n\r\n}\r\n\r\nfigure {\r\n height: 18em;\r\n width: 100%;\r\n overflow: hidden;\r\n border-radius: 0.5em 0.5em 0 0;\r\n margin: 0;\r\n}\r\n\r\nimg {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n border-radius: 0.5em 0.5em 0 0;\r\n transition: transform .3s ease-in-out;\r\n}\r\n\r\n.card__content {\r\n position: relative;\r\n background-color: #b1d795;\r\n border-radius: 0 0 0.5em 0.5em;\r\n text-align: center;\r\n height: 11em;\r\n padding: 1.5em 0;\r\n z-index: 0;\r\n transition: padding .3s ease-in, color .3s ease-in;\r\n\r\n\r\n}\r\n\r\n.card__content h2 {\r\n font-size: 2rem;\r\n font-family: \"serif\";\r\n line-height: 1.24;\r\n}\r\n\r\n.card__content p {\r\n font-family: sans-serif;\r\n margin-top: 1em;\r\n}\r\n\r\n.card:hover img {\r\n transform: scale(1.1);\r\n}\r\n\r\n.card__content::before {\r\n content: \"\";\r\n position: absolute;\r\n left: 0;\r\n bottom: 0;\r\n width: 100%;\r\n height: 0;\r\n border-radius: 50% 50% .5rem .5rem;\r\n background-color: #fff;\r\n transition: height .3s ease-in-out, border-radius .3s ease-in-out;\r\n z-index: -1;\r\n}\r\n\r\n.card:hover .card__content {\r\n color: #0000ff;\r\n padding-top: 1rem;\r\n}\r\n\r\n.card:hover .card__content::before {\r\n height: 100%;\r\n border-radius: 0 0 0.5rem 0.5rem;\r\n}\r\n\r\n#credits {\r\n position: absolute;\r\n top: 10px;\r\n font-family: sans-serif;\r\n font-size: 10px;\r\n}\r\n\r\n.container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.icon {\r\n width: 2.5em;\r\n height: 2.5em;\r\n font-size: 2em;\r\n display: flex;\r\n text-decoration: none;\r\n color: #000;\r\n outline: 2px solid #000;\r\n outline-offset: -8px;\r\n border-radius: 50%;\r\n}\r\n\r\n.icon i {\r\n margin: auto;\r\n}\r\n\r\n.icon:hover {\r\n outline-width: 6px;\r\n outline-color: var(--bg);\r\n color: #fff;\r\n\r\n}\r\n\r\n.icon:hover:has(.fa-x-twitter) {\r\n background-color: #000;\r\n}\r\n\r\n.icon:hover:has(.fa-instagram) {\r\n background-image: radial-gradient(circle at 30% 107%,\r\n #fdf497 0%,\r\n #fdf497 5%,\r\n #fd5949 45%,\r\n #d6249f 69%,\r\n #285aeb);\r\n}\r\n\r\n#credits {\r\n text-align: center;\r\n}","js":"// ","user_id":"4529d7ae-0865-47e6-850e-f9cbf1ed7d3c","project_key":"2nPMG1","description":"Card Hover Animation","plugins":[{"css":{"tailwind":false,"bootstrap":false,"fontawesome":true,"materialicons":false,"googlefonts":false,"bulma":false},"js":{"animejs":false,"gsap":false,"motionone":false,"threejs":false,"velocity":false,"popmotion":false,"scrollreveal":false}}],"public":true,"config":{"tags": [], "cssProcessor": false},"tags":["card","animation","hover effect","hover","hover animation","cards"],"hide_js":false,"hide_css":false,"messages":[],"view":[{"views":482}],"profiles":{"username":"abdulmumin"}}]