{"html":"

\n \n \n \n

\n Basic\n Standard\n Team\n

\n 150\n

For beginner use

\n \n \n \n Unlimited nvme-SSD Storage (5GB) \n
\n \n FREE 50+ Installation Scripts WordPress Supported\n
\n \n One FREE Domain Registration .com and .np extensions only\n
\n \n Unlimited Email Accounts & Databases\n

\n 499\n

For professional use

\n \n Unlimited GB Premium Bandwidth\n
\n \n FREE 200+ Installation Scripts WordPress Supported\n
\n \n Five FREE Domain Registration .com and .np extensions only\n
\n \n Unlimited Email Accounts & Databases\n

\n 1999\n

For team collaboration

\n \n 200 GB Premium Bandwidth\n
\n \n FREE 100+ Installation Scripts WordPress Supported\n
\n \n Two FREE Domain Registration .com and .np extensions only\n
\n \n Unlimited Email Accounts & Databases\n

\n \n

\n","css":".wrapper {\n width: 400px;\n background: #fff;\n border-radius: 16px;\n padding: 30px;\n box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.05);\n}\n.wrapper header {\n height: 55px;\n display: flex;\n align-items: center;\n border: 1px solid #ccc;\n border-radius: 30px;\n position: relative;\n}\nheader label {\n height: 100%;\n z-index: 2;\n width: 30%;\n display: flex;\n cursor: pointer;\n font-size: 18px;\n position: relative;\n align-items: center;\n justify-content: center;\n transition: color 0.3s ease;\n}\n#tab-1:checked ~ header .tab-1,\n#tab-2:checked ~ header .tab-2,\n#tab-3:checked ~ header .tab-3 {\n color: #fff;\n}\nheader label:nth-child(2) {\n width: 40%;\n}\nheader .slider {\n position: absolute;\n height: 85%;\n border-radius: inherit;\n background: linear-gradient(145deg, #d5a3ff 0%, #77a5f8 100%);\n transition: all 0.3s ease;\n}\n#tab-1:checked ~ header .slider {\n left: 0%;\n width: 90px;\n transform: translateX(5%);\n}\n#tab-2:checked ~ header .slider {\n left: 50%;\n width: 120px;\n transform: translateX(-50%);\n}\n#tab-3:checked ~ header .slider {\n left: 100%;\n width: 95px;\n transform: translateX(-105%);\n}\n.wrapper input[type=\"radio\"] {\n display: none;\n}\n.card-area {\n overflow: hidden;\n}\n.card-area .cards {\n display: flex;\n width: 300%;\n}\n.cards .row {\n width: 33.4%;\n}\n.cards .row-1 {\n transition: all 0.3s ease;\n}\n#tab-1:checked ~ .card-area .cards .row-1 {\n margin-left: 0%;\n}\n#tab-2:checked ~ .card-area .cards .row-1 {\n margin-left: -33.4%;\n}\n#tab-3:checked ~ .card-area .cards .row-1 {\n margin-left: -66.8%;\n}\n.row .price-details {\n margin: 20px 0;\n text-align: center;\n padding-bottom: 25px;\n border-bottom: 1px solid #e6e6e6;\n}\n.price-details .price {\n font-size: 65px;\n font-weight: 600;\n position: relative;\n font-family: \"Noto Sans\", sans-serif;\n}\n.price-details .price::before,\n.price-details .price::after {\n position: absolute;\n font-weight: 400;\n font-family: \"Poppins\", sans-serif;\n}\n.price-details .price::before {\n content: \"रू\";\n left: -27px;\n top: 17px;\n font-size: 28px;\n}\n.price-details .price::after {\n content: \"/mon\";\n right: -33px;\n bottom: 17px;\n font-size: 13px;\n}\n.price-details p {\n font-size: 18px;\n margin-top: 5px;\n}\n.row .features li {\n display: flex;\n font-size: 15px;\n list-style: none;\n margin-bottom: 10px;\n align-items: center;\n}\n.features li i {\n background: linear-gradient(#d5a3ff 0%, #77a5f8 100%);\n background-clip: text;\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n}\n.features li span {\n margin-left: 10px;\n}\n.wrapper button {\n width: 100%;\n border-radius: 25px;\n border: none;\n outline: none;\n height: 50px;\n font-size: 18px;\n color: #fff;\n cursor: pointer;\n margin-top: 20px;\n background: linear-gradient(145deg, #d5a3ff 0%, #77a5f8 100%);\n transition: transform 0.3s ease;\n}\n.wrapper button:hover {\n transform: scale(0.98);\n}\n"}

witty-bullfrog-37

👁 实时预览

📝 源代码