{"html":"

\n \n \n

\n BBC\n Stunning photos as Perseid meteors light up skies\n

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

","css":".card {\n width: 300px;\n height: 325px;\n background: #e8e8e8;\n border-radius: 15px;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n justify-content: center;\n position: relative;\n color: #212121;\n border: 2px solid #ab4b38;\n transition: all .5s ease;\n}\n\n.icons {\n display: flex;\n flex-direction: row;\n gap: 5px;\n position: absolute;\n right: 15px;\n top: 15px;\n transition: opacity 0.5s ease;\n opacity: 0;\n}\n\n.image {\n width: 300px;\n height: 148px;\n background: rgb(223,235,56);\n background: rgb(56,235,226);\n background: linear-gradient(163deg, rgba(56,235,226,1) 0%, rgba(134,221,245,1) 50%);\n}\n\n.save {\n background: #eb4b38;\n color: white;\n border: none;\n border-radius: 5px;\n}\n\n.see-more {\n background: #ab4b38;\n border: none;\n border-radius: 5px;\n color: white;\n}\n\n.save, .see-more {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 5px;\n padding: 5px;\n}\n\n.save__icon, .see-more__icon {\n width: 15px;\n fill: white;\n}\n\n.card__info {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n justify-content: center;\n padding: 15px;\n gap: 3px;\n}\n\n.page {\n font-size: 13px;\n font-weight: 100;\n}\n\n.title {\n text-decoration: none;\n font-weight: 600;\n font-size: 17px;\n color: black;\n}\n\n.content {\n font-size: 14px;\n}\n\n.card:hover {\n box-shadow: 5px 5px 10px 0px #ab4b3866;\n}\n\n.card:hover .icons {\n z-index: 1;\n opacity: 1;\n}\n\n.card:hover .image {\n filter: brightness(.8);\n}\n\n.card:hover .title {\n color: #ab4b38;\n}"}

pretty-wasp-36

👁 实时预览

📝 源代码