{"html":"

\n \n \n

$49.9

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

ADIDAS

Classic oversized hoodie

\n Color\n

Collegiate Gold
Team Navy
Pulse Blue
Pink Fusion

\n Size\n

\n \n \n XS\n \n
\n \n \n S\n \n
\n \n \n M\n \n
\n \n \n L\n \n
\n \n \n XL\n \n

\n \n (29,062)\n

\n\n

\n \n \n

","css":".card {\n --accent-color: #ffd426;\n position: relative;\n width: 240px;\n background: white;\n border-radius: 1rem;\n padding: 0.3rem;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 50px 30px -20px;\n transition: all 0.5s ease-in-out;\n}\n\n.card .image-container {\n position: relative;\n width: 100%;\n height: 130px;\n border-radius: 0.7rem;\n border-top-right-radius: 4rem;\n margin-bottom: 1rem;\n}\n\n.card .image-container img {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n border-radius: inherit;\n}\n\n.card .image-container .svg {\n height: 100%;\n width: 100%;\n border-radius: inherit;\n}\n\n.card .image-container .price {\n position: absolute;\n right: 0.7rem;\n bottom: -1rem;\n background: white;\n color: var(--accent-color);\n font-weight: 900;\n font-size: 0.9rem;\n padding: 0.5rem;\n border-radius: 1rem 1rem 2rem 2rem;\n box-shadow: rgba(100, 100, 111, 0.2) 0px 0px 15px 0px;\n}\n\n.card .favorite {\n position: absolute;\n width: 19px;\n height: 19px;\n top: 5px;\n right: 5px;\n cursor: pointer;\n}\n\n.card .favorite input {\n position: absolute;\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.card .favorite input:checked ~ svg {\n animation: bouncing 0.5s;\n fill: rgb(255, 95, 95);\n filter: drop-shadow(0px 3px 1px rgba(53, 53, 53, 0.14));\n}\n\n.card .favorite svg {\n fill: #a8a8a8;\n}\n\n.card .content {\n padding: 0px 0.8rem;\n margin-bottom: 1rem;\n}\n\n.card .content .brand {\n font-weight: 900;\n color: #a6a6a6;\n}\n\n.card .content .product-name {\n font-weight: 700;\n color: #666666;\n font-size: 0.7rem;\n margin-bottom: 1rem;\n}\n\n.card .content .color-size-container {\n display: flex;\n justify-content: space-between;\n text-transform: uppercase;\n font-size: 0.7rem;\n font-weight: 700;\n color: #a8a8a8;\n gap: 2rem;\n margin-bottom: 1.5rem;\n}\n\n.card .content .color-size-container > * {\n flex: 1;\n}\n\n.card .content .color-size-container .colors .colors-container {\n list-style-type: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: 0.3rem;\n font-size: 0.5rem;\n margin-top: 0.2rem;\n}\n\n.card .content .color-size-container .colors .colors-container .color {\n height: 14px;\n position: relative;\n}\n\n.card .content .color-size-container .colors .colors-container .color:hover .color-name {\n display: block;\n}\n\n.card .content .color-size-container .colors .colors-container .color a {\n display: inline-block;\n height: 100%;\n aspect-ratio: 1;\n border: 3px solid black;\n border-radius: 50%;\n}\n\n.card .content .color-size-container .colors .colors-container .color .color-name {\n display: none;\n position: absolute;\n bottom: 125%;\n left: 50%;\n transform: translateX(-50%);\n z-index: 99;\n background: black;\n padding: 0.2rem 1rem;\n border-radius: 1rem;\n text-align: center;\n}\n\n.card .content .color-size-container .colors .colors-container .color:first-child a {\n border-color: #ffd426;\n}\n\n.card .content .color-size-container .colors .colors-container .color:nth-child(2) a {\n background: #144076;\n}\n\n.card .content .color-size-container .colors .colors-container .color:nth-child(3) a {\n border-color: #00b9ff;\n}\n\n.card .content .color-size-container .colors .colors-container .color:nth-child(4) a {\n border-color: #ff6ba1;\n}\n\n.card .content .color-size-container .colors .colors-container .active {\n border-color: black;\n}\n\n.card .content .color-size-container .sizes .size-container {\n list-style-type: none;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n margin-top: 0.2rem;\n}\n\n.card .content .color-size-container .sizes .size-container .size {\n height: 14px;\n}\n\n.card .content .color-size-container .sizes .size-container .size .size-radio {\n cursor: pointer;\n}\n\n.card .content .color-size-container .sizes .size-container .size .size-radio input {\n display: none;\n}\n\n.card .content .color-size-container .sizes .size-container .size .size-radio input:checked ~ .name {\n background: var(--accent-color);\n border-radius: 2rem 2rem 1.5rem 1.5rem;\n color: white;\n}\n\n.card .content .color-size-container .sizes .size-container .size .size-radio .name {\n display: grid;\n place-content: center;\n height: 100%;\n aspect-ratio: 1.2/1;\n text-decoration: none;\n color: #484848;\n font-size: 0.5rem;\n text-align: center;\n}\n\n.card .content .rating {\n color: #a8a8a8;\n font-size: 0.6rem;\n font-weight: 700;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.card .content .rating svg {\n height: 12px;\n}\n\n.card .button-container {\n display: flex;\n gap: 0.3rem;\n}\n\n.card .button-container .button {\n border-radius: 1.4rem 1.4rem 0.7rem 0.7rem;\n border: none;\n padding: 0.5rem 0;\n background: var(--accent-color);\n color: white;\n font-weight: 900;\n cursor: pointer;\n}\n\n.card .button-container .button:hover {\n background: orangered;\n}\n\n.card .button-container .buy-button {\n flex: auto;\n}\n\n.card .button-container .cart-button {\n display: grid;\n place-content: center;\n width: 50px;\n}\n\n.card .button-container .cart-button svg {\n width: 15px;\n fill: white;\n}\n\n.card:hover {\n transform: scale(1.03);\n}\n\n@keyframes bouncing {\n from, to {\n transform: scale(1, 1);\n }\n\n 25% {\n transform: scale(1.5, 2.1);\n }\n\n 50% {\n transform: scale(2.1, 1.5);\n }\n\n 75% {\n transform: scale(1.5, 2.05);\n }\n}"}

funny-sloth-75

👁 实时预览

📝 源代码