{"html":"

UltraFlex

Beste Design till date.
Flex it up as you wish,
but you can't break it.

$299

\n \n \n

\n\n\n

","css":".card {\n position: relative;\n top: 2em;\n width: 12.5em;\n height: 7.5em;\n background: white;\n transition: .4s ease-in-out;\n border-radius: 15px;\n box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;\n overflow: hidden;\n}\n\n.heading {\n position: relative;\n color: black;\n font-weight: bold;\n font-size: 1.1em;\n padding-top: 1em;\n padding-left: 1em;\n transition: .4s ease-in-out;\n}\n\n.details {\n position: relative;\n color: black;\n font-size: 0.6em;\n padding-top: 1.5em;\n padding-left: 2em;\n transition: .4s ease-in-out;\n}\n\n.price {\n position: relative;\n color: black;\n font-weight: bold;\n font-size: 0.8em;\n padding-top: 1.5em;\n padding-left: 1.5em;\n top: 9.6em;\n left: 5em;\n transition: .4s ease-in-out;\n}\n\n.btn1 {\n position: relative;\n border: none;\n outline: none;\n background-color: black;\n color: white;\n font-size: 0.6em;\n padding-left: 6.9em;\n padding-right: 6.9em;\n padding-top: 0.8em;\n padding-bottom: 0.85em;\n border-radius: 10px;\n left: 2.6em;\n top: 14.8em;\n transition: .4s ease-in-out;\n font-weight: bold;\n}\n\n.btn1:hover {\n background-color: limegreen;\n cursor: pointer;\n}\n\n.btn2 {\n position: relative;\n border: none;\n outline: none;\n background-color: black;\n color: white;\n font-size: 0.6em;\n padding-left: 5.1em;\n padding-right: 5.1em;\n padding-top: 0.8em;\n padding-bottom: 0.85em;\n border-radius: 10px;\n left: 2.6em;\n top: 15.5em;\n transition: .4s ease-in-out;\n font-weight: bold;\n}\n\n.btn2:hover {\n background-color: limegreen;\n cursor: pointer;\n}\n\n.glasses {\n position: relative;\n top: -4em;\n left: 9.5em;\n width: 70px;\n height: 70px;\n transition: .4s ease-in-out;\n}\n\n.card:hover {\n width: 12.5em;\n height: 23em;\n transform: translateY(1.25em);\n}\n\n.card:hover + .glasses {\n transform: rotateX(360deg);\n height: 100px;\n width: 100px;\n left: 3em;\n top: -18em;\n}\n\n.card:hover .heading {\n transform: translateY(7em) translateX(2.3em);\n}\n\n.card:hover .details {\n transform: translateY(13em) translateX(3.5em);\n}"}

silent-sheep-14

👁 实时预览

📝 源代码