{"html":"

\n\t

\n\t\t

$249

\n\t\tSolo Version\n\t\tA single license for solo designers, developers and freelancers.\n\t\t\n\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tFree updates\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tYou will gain access to every future update.\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tUse on unlimited projects\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tCreate as many projects as you want.\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tAsset Hosting\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tKeep your files for easy access and management. 5GB space included. Scale when necessary.\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tCommunity support\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tGet help and learn new things in our community Slack with over 5,000 contributors.\n\t\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\tVersion control\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tInstant rollbacks to any version\n\t\t\t\t

\n\t\t\t

\n\t\t

\n\t

","css":".price-section {\n color: #fff;\n}\n/* End basic CSS override */\n.price-table {\n background-color: #152148;\n border-radius: 16px;\n max-width: 355px;\n padding: 25px;\n display: flex;\n flex-direction: column;\n box-shadow: 0 15px 45px 0 rgba(0, 0, 0, 0.15);\n position: relative;\n background-image: linear-gradient(135deg, rgba(74, 222, 128, 0.15), rgba(29, 123, 219, 0.1) 20%, #152148 40%, #152148 100%);\n}\n\n.price-table:after {\n content: \"\";\n display: block;\n top: -3px;\n left: -3px;\n bottom: -3px;\n right: -3px;\n z-index: -1;\n position: absolute;\n border-radius: 16px;\n background-image: linear-gradient(135deg, #4ade80, #1d7bdb 40%, #293359 60%, #152148 100%);\n}\n\n.price-table .price {\n font-size: 3rem;\n line-height: 1;\n font-weight: 700;\n display: inline-flex;\n align-self: center;\n align-items: center;\n gap: 4px;\n position: relative;\n color: #fff;\n}\n\n.price-table .price small {\n font-size: 1.25rem;\n font-weight: 400;\n position: absolute;\n left: -1.5ch;\n}\n\n.price-table .title {\n font-size: 1.25rem;\n font-weight: 600;\n line-height: 1.25;\n text-align: center;\n margin-top: 10px;\n color: #fff;\n}\n\n.price-table .description {\n font-size: 1rem;\n text-align: center;\n margin-top: 2px;\n}\n\n.features {\n margin-top: 22px;\n}\n\n.feature {\n position: relative;\n}\n\n.feature + .feature {\n margin-top: 16px;\n}\n\n.feature summary {\n display: inline-flex;\n align-items: center;\n list-style: none;\n}\n\n.feature summary::-webkit-details-marker {\n display: none;\n}\n\n.feature[open] summary:after {\n content: \"\";\n display: block;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n position: fixed;\n z-index: 50;\n}\n\n.feature[open] div {\n -webkit-animation: scale 0.15s ease;\n animation: scale 0.15s ease;\n}\n\n.feature .checkmark {\n width: 24px;\n height: 24px;\n border-radius: 50%;\n background-color: #4ade80;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-right: 12px;\n}\n\n.feature .checkmark svg {\n width: 18px;\n height: 18px;\n color: #fff;\n}\n\n.feature .question-icon {\n display: flex;\n align-items: center;\n margin-left: 6px;\n cursor: pointer;\n}\n\n.feature .answer {\n padding: 12px;\n background-color: #111b40;\n border-radius: 6px;\n position: absolute;\n top: -12px;\n z-index: 100;\n transform: translatey(-100%) translatex(-50%);\n transform-origin: bottom center;\n width: 80%;\n left: 50%;\n border: 1px solid #293359;\n box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.1);\n}\n\n@-webkit-keyframes scale {\n 0% {\n transform: translatey(-100%) translatex(-50%) scale(0);\n }\n\n 100% {\n transform: translatey(-100%) translatex(-50%) scale(1);\n }\n}\n\n@keyframes scale {\n 0% {\n transform: translatey(-100%) translatex(-50%) scale(0);\n }\n\n 100% {\n transform: translatey(-100%) translatex(-50%) scale(1);\n }\n}"}

brown-bird-6

👁 实时预览

📝 源代码