"1c0n b4ck6r0und-2"
Bootstrap 3.3.0 Snippet by okebro

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Inspiration for Pricing Tables | Codrops</title> <meta name="description" content="Various styles and inspiration for responsive, flexbox-based HTML pricing tables" /> <meta name="keywords" content="pricing table, inspiration, ui, modern, responsive, flexbox, html, component" /> <meta name="author" content="Codrops" /> <link rel="shortcut icon" href="favicon.ico"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </head> <body> <div class="container"> <section class="pricing-section bg-5"> <div class="pricing pricing--yama"> <div class="pricing__item"> <h3 class="pricing__title">Malu Berbicara, Email Kita di <br><span class="pricing__amp"><i class="fa fa-envelope-o fa-3x"></i></span></h3><br><br> <pf class="pricing__sentence">garistuang@gmail.com</pf> </div> <div class="pricing__item"> <h3 class="pricing__title">Ingin Tahu Kantor Kita, Silahkan ke <br><span class="pricing__amp"><i class="fa fa-bicycle fa-3x"></i></span></h3><br><br> <pf class="pricing__sentence">Jl. Wedoro Belahan gg-III. No. 58, Waru - Sidoarjo, Jawa Timur - Indonesia</pf> <pf class="pricing__sentence">( Work Hours : Senin - Jumat: 09.00-05.00 WIB)</pf> </div> <div class="pricing__item"> <h3 class="pricing__title">Hubungi Kita di <br><span class="pricing__amp"><i class="fa fa-volume-control-phone fa-3x"></i></span></h3><br><br> <pf class="pricing__sentence">(031) 853-8700</pf> </div> </div> </section> </div> <!-- /container --> </body> </html>
/* Common styles */ .pricing { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: center; justify-content: center; width: 100%; margin: 10px auto; } .pricing__item { position: relative; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: stretch; align-items: stretch; text-align: center; -webkit-align-content: center; align-content: center; -webkit-flex: 0 1 330px; flex: 0 1 330px; } .pricing__feature-list { text-align: left; } .pricing__action { color: inherit; border: none; background: none; } .pricing__action:focus { outline: none; } /* Individual styles */ /* Yama */ .pricing--yama .pricing__item { margin: 1em; padding: 0 0 2em; color: #262b38; background: transparent; } .pricing--yama .pricing__title { font-family: 'Roboto', sans-serif; font-size: 100%; font-weight: 900; line-height: 1; width: 290px; margin: 0 auto; padding: 1em 1em 0em; } .pricing__amp ::before { font-size: 100%; top: 33px; left: 145px; position: absolute; font-family: FontAwesome; color: #e03e3e; opacity:0.5; } .pricing--yama .pricing__sentence { margin-bottom: 10%; } pf { font-family: 'Roboto', sans-serif; margin-bottom: 2em; color: #262b38; font-size: 100%; }

Related: See More

Material Kit

Questions / Comments: