{"html":"

\n \n

Favourites

Check all your favourites in one place.

","css":".card {\n width: 100%;\n max-width: 300px;\n min-width: 200px;\n height: 250px;\n background-color: #292929;\n margin: 10px;\n border-radius: 10px;\n box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);\n border: 2px solid rgba(7, 7, 7, 0.12);\n font-size: 16px;\n transition: all 0.3s ease;\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-direction: column;\n cursor: pointer;\n font-family: 'Poppins', sans-serif;\n}\n\n.icon {\n margin: 0 auto;\n width: 100%;\n height: 80px;\n max-width: 80px;\n background: linear-gradient(90deg, #7eaaff 0%, #ff48fb 40%, rgba(0, 0, 0, 0.28) 60%);\n border-radius: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: all 0.8s ease;\n background-position: 0px;\n background-size: 200px;\n}\n\n.icon svg {\n fill: white;\n}\n\n.card .title {\n width: 100%;\n margin: 0;\n text-align: center;\n margin-top: 30px;\n color: white;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 4px;\n}\n\n.card .text {\n width: 80%;\n margin: 0 auto;\n font-size: 13px;\n text-align: center;\n margin-top: 20px;\n color: white;\n font-weight: 200;\n letter-spacing: 2px;\n opacity: 0;\n max-height: 0;\n transition: all 0.3s ease;\n}\n\n.card:hover {\n height: 270px;\n}\n\n.card:hover .text {\n transition: all 0.3s ease;\n opacity: 1;\n max-height: 40px;\n}\n\n.card:hover .icon {\n background-position: -120px;\n transition: all 0.3s ease;\n}\n\n.card:hover .icon svg path {\n fill: url('#gradientColor');\n transition: all 0.3s ease;\n}"}

nasty-chicken-72

👁 实时预览

📝 源代码