{"html":"

\n \n

\"I've been using this product for a few days now and I'm really impressed! The interface is intuitive and easy to use.\"

\n Yassine Zanina\n Creative Designer & Developer\n

","css":".container {\n height: fit-content;\n display: flex;\n box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);\n border-radius: 9px;\n}\n\n.login-form {\n width: 350px;\n height: auto;\n display: flex;\n flex-direction: column;\n gap: 15px;\n padding: 20px;\n border-radius: 9px 0 0 9px;\n background-color: #fff;\n}\n\n.header {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 15px 0;\n}\n\n.title {\n font-weight: 700;\n font-size: 15px;\n line-height: 21px;\n text-align: center;\n color: #2B2B2F;\n margin-bottom: 10px;\n}\n\n.description {\n max-width: 80%;\n margin: auto;\n font-weight: 600;\n font-size: 10px;\n line-height: 14px;\n text-align: center;\n color: #5F5D6B;\n}\n\n.input_container {\n width: 100%;\n height: fit-content;\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 5px;\n}\n\n.icon {\n width: 20px;\n position: absolute;\n z-index: 99;\n left: 12px;\n bottom: 9px;\n}\n\n.input_field {\n width: auto;\n height: 40px;\n padding: 0 0 0 40px;\n border-radius: 7px;\n outline: none;\n border: 1px solid #e5e5e5;\n filter: drop-shadow(0px 1px 0px #efefef)\n drop-shadow(0px 1px 0.5px rgba(239, 239, 239, 0.5));\n transition: all 0.3s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.input_field:focus {\n border: 1px solid transparent;\n box-shadow: 0px 0px 0px 2px #115DFC;\n background-color: transparent;\n}\n\n.sign-in_btn {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n gap: 10px;\n width: 100%;\n height: 36px;\n background: linear-gradient(180deg, #4480FF 0%, #115DFC 50%, #0550ED 100%);\n box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);\n border-radius: 5px;\n border: 0;\n font-style: normal;\n font-weight: 600;\n font-size: 12px;\n line-height: 15px;\n color: #ffffff;\n transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);\n}\n\n.sign-in_btn:hover {\n transform: scale(1.01) translateY(-2px);\n box-shadow: 0 10px 20px 0#054eed6b;\n}\n\n.testimonial {\n width: 250px;\n height: auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 20px;\n padding: 20px;\n background: linear-gradient(358.31deg,#fff -24.13%,hsla(0,0%,100%,0) 338.58%),linear-gradient(89.84deg,rgba(230,36,174,.15) .34%,rgba(94,58,255,.15) 16.96%,rgba(10,136,255,.15) 34.66%,rgba(75,191,80,.15) 50.12%,rgba(137,206,0,.15) 66.22%,rgba(239,183,0,.15) 82%,rgba(246,73,0,.15) 99.9%);\n border-radius: 0 9px 9px 0;\n}\n\n.testimonial p {\n color: #4d4c6d;\n font-size: 11px;\n text-align: center;\n font-weight: 600;\n}\n\n.user-profile-picture {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: #00000011;\n}\n\n.user {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 3px;\n}\n\n.username {\n color: #4d4c6d;\n font-size: 11px;\n text-align: center;\n font-weight: 600;\n}\n\n.occupation {\n color: rgb(141, 140, 161);\n font-size: 10px;\n text-align: center;\n font-weight: 600;\n}"}

fast-bobcat-88

👁 实时预览

📝 源代码