B /TSTRAP, beautiful and simple CSS3 price list (attachment code download)

This is a beautiful and simple CSS3 price list. This price list is based on the Bootstrap grid system. It is beautiful to beautify the price list through simple CSS3 code. It is very stylish, and can be displayed under different screens. good effect.

基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

HTML

First introduced Bootstrap in the page .min.css file, here I use the official CDN resource, you can also download it locally.

 The HTML structure of the CSS3 price list is as follows:    
STANDARD

PER MONTH
  $ 
10
50GB Disk Space

50 Email Accounts
50GB Monthly Bandwidth 10 Subdomains [ 15 Domains SIGN UP
  • PER MONTH
  • $
  • 20
  • 99
  • 60GB Disk Space
60 Email Accounts 60GB MONthly Bandwidth
15 Subdomains
20 Domains

CSS3 adds to this price list The following CSS style is rendered and beautified.
    .pricingTable {text-align: center; background: #fff; padding: 30px 0;}. PricingTable .title {font-size: 22px; font-weight: 600; color: # 2e282a; text-transform: Uppercase; margin: 0 0 30px 0;} .priCINGTABLE: 30PX 0; Background: # ba5289; margin-bottom: 30px; position: relative;}. pricingTable .price-value: before {content: ""; border-top: 15px solid #fff; Border-left: 15px solid transparent; border-right: 15px solid transparent; Position: absolute; top: 0; Left: 46%;}. PricingTable .month {Display: block; height: 50px; font-size: 15px; font -Weight: 900; Color: #fff; Text-Transform: Uppercase;}. PricingTable .Amount {Display: Inline-block; font-size: 50px; color: #fff; position: relative;}. pricingtable .currency {position : Absolute; top: -1px; Left: -35px;}. pricingTable .Value {font-size: 20px; position: absolute; top: -11px; right: -27px;}. pricingTable .pricing-content {Padding: 0 Margin: 0 0 30px 0; list-style: none;}. PricingTable .pricing-content Li {font-size: 16px; color: # 868686; line-height: 35px;}. PricingTable .pricingTable-Signup {Display: inline-block; padding : 8px 40px; Background: # fca4a7; font-size: 15px; font-weight: 600; color: #fff; Text-Transform: Capitalize; Border: 2px Solid # Fca4a7; Border-Radius: 30px; Transition: all 0.5s Ease 0S;}. pricingTable .pricingTable-sign: Hover {background: #fff; color: # fca4a7;} @ media only screen and (max-width: 990px) {.pricingTable {margin-bottom: 30px;}}
  • Now you can open the browser to see the effect, the effect on your phone is also good.
  • The above is the BootStrap-based high-tech CSS3 price list (attachment code download) introduced to you, I hope that if you have any questions, please leave a message. Reply to everyone in time. Thank you very much for your support of Tumi Cloud Website!
© Copyright Notice
THE END
Just support it if you like
like0
share
comment Grab the couch

Please log in to comment