CSS से रिस्पॉन्सिव प्राइसिंग टेबल बनाने के लिए, कोड निम्नानुसार है -
उदाहरण
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <style> * { box-sizing: border-box; } body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .compareFields { float: left; width: 50%; padding: 8px; } li { font-size: 18px; font-weight: 500; } .pricing { list-style-type: none; border: 1px solid #eee; margin: 0; padding: 0; -webkit-transition: 0.3s; transition: 0.3s; } .pricing:hover { box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2); } .pricing .header { background-color: rgb(52, 31, 129); color: white; font-size: 25px; } .pricing li { border-bottom: 1px solid #eee; padding: 20px; text-align: center; } .button { border: none; color: white; padding: 10px 25px; text-align: center; text-decoration: none; font-size: 18px; } @media only screen and (max-width: 600px) { .compareFields { width: 100%; } } </style> </head> <body> <h1 style="text-align:center">Responsive Pricing Tables Example</h1> <div class="compareFields"> <ul class="pricing"> <li class="header">Free Membership</li> <li>20 messages</li> <li>No customer Support</li> <li>98% uptime</li> <li>1GB per day</li> <li>50GB storage</li> <li> <a href="#" class="button" style="background-color: rgb(52, 31, 129);">Register</a> </li> </ul> </div> <div class="compareFields"> <ul class="pricing"> <li class="header" style="background-color:rgb(250, 136, 59)"> Advanced Membership </li> <li>100 messages</li> <li>24 * 7 customer support</li> <li>99.9% uptime</li> <li>8GB per day</li> <li>150GB storage</li> <li> <a href="#" class="button" style="background-color:rgb(250, 136, 59)">Register</a> </li> </ul> <div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
स्क्रीन रिसाइज़ करने पर -
