<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<h1 class="demo-title">Material responsive pricing tables</h1>
<div class="pricing-table">
<div class="pricing-option">
<i class="material-icons">important_devices</i>
<h1>Ui design</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum voluptatum, sit cum voluptatibus inventore quae qui provident eveniet dicta at, quibusdam ipsam iusto reprehenderit hic saepe nesciunt sed illo.</p>
<hr />
<div class="price">
<div class="front">
<span class="price">199 <b>$</b></span>
</div>
<div class="back">
<a href="#" class="button">Purchase now</a>
</div>
</div>
</div>
<div class="pricing-option">
<i class="material-icons">perm_identity</i>
<h1>Ux design</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum voluptatum, sit cum voluptatibus inventore quae qui provident eveniet dicta at, quibusdam ipsam iusto reprehenderit hic saepe nesciunt sed illo.</p>
<hr />
<div class="price">
<div class="front">
<span class="price">399 <b>$</b></span>
</div>
<div class="back">
<a href="#" class="button">Purchase now</a>
</div>
</div>
</div>
<div class="pricing-option">
<i class="material-icons">art_track</i>
<h1>Print design</h1>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente harum voluptatum, sit cum voluptatibus inventore quae qui provident eveniet dicta at, quibusdam ipsam iusto reprehenderit hic saepe nesciunt sed illo.</p>
<hr />
<div class="price">
<div class="front">
<span class="price">999 <b>$</b></span>
</div>
<div class="back">
<a href="#" class="button">Purchase now</a>
</div>
</div>
</div>
</div>
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans:400,300,300italic,400italic,600,700,600italic,700italic);
body {
font-family: "Josefin Sans", sans-serif;
line-height: 1;
padding: 20px;
height: 100%;
background: #eee;
}
.demo-title {
text-align: center;
font-size: 3rem;
margin-bottom: 50px;
}
.pricing-table {
display: table;
width: 100%;
}
.pricing-table .pricing-option {
width: 28%;
background: white;
float: left;
padding: 2%;
text-align: center;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.pricing-table .pricing-option:nth-child(even) {
margin: 0 2%;
}
.pricing-table .pricing-option:hover {
cursor: pointer;
box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.3);
-webkit-transform: scale(1.04);
transform: scale(1.04);
}
.pricing-table .pricing-option:hover i, .pricing-table .pricing-option:hover h1, .pricing-table .pricing-option:hover span, .pricing-table .pricing-option:hover b {
color: #F85E6A;
}
.pricing-table .pricing-option:hover .front {
opacity: 0;
visibility: hidden;
}
.pricing-table .pricing-option:hover .back {
opacity: 1 !important;
visibility: visible !important;
}
.pricing-table .pricing-option:hover .back a.button {
-webkit-transform: translateY(0px) !important;
transform: translateY(0px) !important;
}
.pricing-table .pricing-option hr {
border: none;
border-bottom: 1px solid #F0F0F0;
}
.pricing-table .pricing-option i {
font-size: 3rem;
color: #D8D8D8;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.pricing-table .pricing-option h1 {
margin: 10px 0;
color: #212121;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.pricing-table .pricing-option p {
color: #999;
padding: 0 10px;
line-height: 1.3;
}
.pricing-table .pricing-option .price {
position: relative;
}
.pricing-table .pricing-option .price .front span.price {
font-size: 2rem;
text-transform: uppercase;
margin-top: 20px;
display: block;
font-weight: 700;
position: relative;
}
.pricing-table .pricing-option .price .front span.price b {
position: absolute;
font-size: 1rem;
margin-left: 2px;
font-weight: 600;
}
.pricing-table .pricing-option .price .back {
opacity: 0;
visibility: hidden;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.pricing-table .pricing-option .price .back a.button {
background: #F85E6A;
padding: 15px 20px;
display: inline-block;
text-decoration: none;
color: white;
position: absolute;
font-size: 13px;
top: -5px;
left: 0;
right: 0;
width: 150px;
margin: auto;
text-transform: uppercase;
-webkit-transform: translateY(20px);
transform: translateY(20px);
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.pricing-table .pricing-option .price .back a.button:hover {
background: #f62d3d;
}
@media screen and (max-width: 600px) {
.pricing-table .pricing-option {
padding: 5%;
width: 90%;
}
.pricing-table .pricing-option:nth-child(even) {
margin: 30px 0 !important;
}
}
