Material design pricing table widget for website

Material design pricing table widget for website

Material design pricing table widget for website

Hello to everyone, on this occasion I will share how to make a material design widget pricing table for the price of a service or product.

Pricing table widgets like this can usually be found on sites that provide services / sell products such as landing pages that display the product name, price, description and buy now / buy now buttons.

by using this widget enough to influence customer decisions in buying products or services offered. Of course this method will benefit you as a business owner because it can increase the conversion opportunities of visitors who come to your site.

You can place this widget anywhere you want it on the homepage or on the article page or static page, ok for those of you who want to make it, let's see how below.

DEMO

Pricing Table Widget

please go to blogger select it themeand edit htmlcopy the css below and place it above the code ]]></b:skin>

  .BS-pricing{position:relative;padding:50px 0;text-align:center}
  .BS-pricing .container-pricing{display:grid;grid-template-columns:32% 32% 32%;grid-gap:30px;margin:30px auto 0}
  .BSsec-pricing{padding:30px;margin:0 0 20px;position:relative;box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-radius:5px;background:#fff;transition:all .2s ease-in-out;border-top:4px solid #fff}
  .BSsec-pricing:hover{transform:translateY(-10px);box-shadow:0 3px 20px 0 rgba(0,0,0,0.25);border-color: #ffa200}
  .BSsec-pricing .Blogger-store{font-size:50px;margin:15px 0;background:linear-gradient(to right, #ffa200,#f0b651);color:#fff;width:100px;height:100px;line-height:2;border-radius:100%}
  .BSsec-pricing{box-shadow:none;border:1px solid #ddd}
  .BSsec-pricing h3{color:#111;font-size:20px;font-weight:700}
  .BSsec-pricing p{font-size:15px;color:#555}
  .BSsec-pricing .Blogger-store{font-size:25px;font-weight:700;line-height:4;display:inline-block}
  .BS-pricing a.BSbutton{box-shadow:none;background:linear-gradient(to right, #ffa200,#f0b651)}
  .BSbutton{display:inline-flex;align-items:center;margin:15px 15px 15px 0;padding:10px 20px;outline:0;border:0;color:#fefefe;background-color:#f09800;border-radius:3px;font-size:18px;line-height:22px;text-decoration:none}
  a.BSbutton:hover{transform:scale(1.1)}
  .BSsec-pricing.aktif,.BSsec-pricing:hover{box-shadow:0 3px 20px 0 rgba(0,0,0,0.15);border-color:#ddd;border-top:4px solid  #ffa200}
  @media screen and (max-width:680px){.BS-pricing .container-pricing{grid-template-columns:100%;display:block;margin:20px auto}}

note:
if you want to change the color please change the color code that I have marked above

then add the html below to display the pricing table widget, you can put it where you want, for example in the layout or above the footer or on the article page and static.

  <div class='BS-pricing'>
  <div class='container-pricing'>
  <div class='BSsec-pricing'>
  <h3>Consultation</h3>
  <span class='Blogger-store'>20K</span>
  <p>Graphic Design</p
  ><p>Web Design</p>
  <p>Support</p>
  <p>-</p>
  <p>-</p>
  <a class='BSbutton' href'=#' title='Buy Now'>Buy Now</a>
  </div>
    
  <div class='BSsec-pricing aktif'>
  <h3>Small Business</h3>
  <span class='Blogger-store'>120K</span>
  <p>Graphic Design</p
  ><p>Web Design</p>
  <p>Full Support</p>
  <p>Themes</p>
  <p>-</p>
  <a class='BSbutton' href='#' title='Buy Now'>Buy Now</a>
  </div>
    
  <div class='BSsec-pricing'>
  <h3>Corporate</h3>
  <span class='Blogger-store'>20K</span>
  <p>Graphic Design</p
  ><p>Web Design</p>
  <p>Support</p>
  <p>Unlimited Domain</p>
  <p>-</p>
  <a class='BSbutton' href='#' title='Buy Now'>Buy Now</a>
  </div>
  </div>
  </div>

note:
the part I marked can be changed as needed, and the # sign can be replaced with the target url so when the buy button is clicked where will it lead

ok so that's how to make a pricing table widget material design for the price of services or products, hopefully it will be useful.