Make an Awesome Pricing Tables With Only Html And Css Posted by Yahya Benlachheb on September 22, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> <title>Pricing Tables</title> </head> <body> <div class="pt"> <div class="box"> <h2 class="header" style=" background: #2196F3; "> Simple</h2> <ul> <li class="cash"><span>$29.99</span> per month</li> <li>Free Account</li> <li>15 Email Account</li> <li>100 Gb Space</li> <li>1 Domain Name</li> <li><a href="#">add to cart</a></li> </ul> </div> <div class="box"> <h2 class="header" style=" background: #FFC107; "> Standard</h2> <ul> <li class="cash"><span>$59.99</span> per month</li> <li>Free Account</li> <li>15 Email Account</li> <li>100 Gb Space</li> <li>1 Domain Name</li> <li><a href="#">add to cart</a></li> </ul> </div> <div class="box"> <h2 class="header" style=" background: #F44336; "> Ultimate</h2> <ul> <li class="cash"><span>$79.99</span> per month</li> <li>Free Account</li> <li>15 Email Account</li> <li>100 Gb Space</li> <li>1 Domain Name</li> <li><a href="#">add to cart</a></li> </ul> </div> </div> </body> </html> CSS CODE body{ margin: 0; padding: 0; background: #f1f1f1; } ul{ margin: 0; padding: 0; } .pt{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 960px; } .box{ width: 300px; font-family: sans-serif; overflow: hidden; background: #212527; color: white; float: left; margin: 10px; } .header{ margin: 0; text-align: center; padding: 10px; text-transform: uppercase; } .cash{ border-bottom: 1px solid #3e4e56; padding: 30px 0; text-align: center; font-size: 24px; } .cash span{ font-size: 65px; display: block; } li{ border-bottom: 1px solid #3e4e56; padding: 10px; text-align: center; } li a{ text-decoration: none; color: white; font-size: 18px; text-transform: uppercase; padding: 10px; display: block; transition: 0.3s all; } li a:hover{ color: #676565; } Comments
Comments
Post a Comment