<div class="price_table">
<section>
<h1 class="text-center">Pricing table</h1> <br>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="mypricing_content clearfix">
<div class="mypricing_head_price clearfix">
<div class="mypricing_head_content clearfix">
<div class="head_bg"></div>
<div class="head"> <span>Starter</span> </div>
</div>
<div class="mypricing_price_tag clearfix"> <span class="price"> <span class="sign">₹</span> <span class="currency">999</span> <span class="cent"></span> <span class="month">/Year</span> </span> </div>
</div>
<div class="mypricing_feature_list">
<ul>
<li><span>20GB</span> Bandwidth</li>
<li><span>1.5GB</span> Storage</li>
<li><span>5</span> Accounts</li>
<li><span>1</span> Host Domain</li>
<li><span>24/7</span> Support</li>
</ul>
</div>
<div class="mypricing_price_btn clearfix"> <a class="" href="">Sign up</a> </div>
</div>
</div>
<div class="col-md-4">
<div class="mypricing_content active clearfix">
<div class="mypricing_head_price clearfix">
<div class="mypricing_head_content clearfix">
<div class="head_bg"></div>
<div class="head"> <span>Advance</span> </div>
</div>
<div class="mypricing_price_tag clearfix"> <span class="price"> <span class="sign">₹</span> <span class="currency">1999</span> <span class="cent"></span> <span class="month">/Year</span> </span> </div>
</div>
<div class="mypricing_feature_list">
<ul>
<li><span>100GB</span> Bandwidth</li>
<li><span>50GB</span> Storage</li>
<li><span>10</span> Accounts</li>
<li><span>5</span> Host Domain</li>
<li><span>24/7</span> Support</li>
</ul>
</div>
<div class="mypricing_price_btn clearfix"> <a class="" href="">Sign up</a> </div>
</div>
</div>
<div class="col-md-4">
<div class="mypricing_content clearfix">
<div class="mypricing_head_price clearfix">
<div class="mypricing_head_content clearfix">
<div class="head_bg"></div>
<div class="head"> <span>Professional</span> </div>
</div>
<div class="mypricing_price_tag clearfix"> <span class="price"> <span class="sign">₹</span> <span class="currency">2999</span> <span class="cent"></span> <span class="month">/Year</span> </span> </div>
</div>
<div class="mypricing_feature_list">
<ul>
<li><span>Unlimited</span> Bandwidth</li>
<li><span>Unmetered</span> Storage</li>
<li><span>20</span> Accounts</li>
<li><span>Unlimited</span> Host Domain</li>
<li><span>24/7</span> Support</li>
</ul>
</div>
<div class="mypricing_price_btn clearfix"> <a class="" href="">Sign up</a> </div>
</div>
</div>
</div>
</div>
</section>
</div>
body {
background-color: #000
}
.price_table {
margin-top: 50px;
margin-bottom: 50px
}
.mypricing_content {
background-color: #fff
}
.text-center {
color: #fff
}
.mypricing_content .mypricing_head_price {
background-color: #f6f6f6
}
.mypricing_content .mypricing_head_price .mypricing_head_content .head_bg {
border-color: #e4e4e4 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #e4e4e4
}
.mypricing_content .mypricing_head_price .mypricing_head_content .head span {
color: #525252
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .price .sign {
color: #414141
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .price .currency {
color: #414141
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .price .cent {
color: #414141
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .month {
color: #414141
}
.mypricing_content .mypricing_feature_list ul li {
color: #a7a7a7
}
.mypricing_content .mypricing_feature_list ul li span {
color: #414141
}
.mypricing_content .mypricing_feature_list ul li:hover {
background-color: #E4E4E4;
border-left: 5px solid #f74f57
}
.mypricing_content .mypricing_price_btn a {
border: 1px solid #f74f57;
color: #f74f57
}
.mypricing_content.active .mypricing_head_price .mypricing_head_content .head_bg,
.mypricing_content:hover .mypricing_head_price .mypricing_head_content .head_bg {
border-color: #f74f57 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #f74f57;
color: #fff
}
.mypricing_content:hover .mypricing_head_price .mypricing_head_content .head span,
.mypricing_content.active .mypricing_head_price .mypricing_head_content .head span {
color: #fff
}
.mypricing_content:hover .mypricing_price_btn a,
.mypricing_content.active .mypricing_price_btn a {
background-color: #f74f57;
color: #fff
}
{
margin: 50px 0 50px 0;
font-family: 'Raleway', sans-serif
}
.row .table {
padding: 28px 0
}
.mypricing_content {
overflow: hidden;
position: relative;
text-align: center
}
.mypricing_content .mypricing_head_price {
margin: 0 0 20px 0
}
.mypricing_content .mypricing_head_price .mypricing_head_content {
margin: 0 0 50px 0
}
.mypricing_content .mypricing_head_price .mypricing_head_content .head_bg {
border-style: solid;
border-width: 90px 1329px 3px 399px;
position: absolute
}
.mypricing_content .mypricing_head_price .mypricing_head_content .head {
padding-top: 26px;
position: relative;
z-index: 1
}
.mypricing_content .mypricing_head_price .mypricing_head_content .head span {
font-family: "Raleway", sans-serif;
font-size: 28px;
font-weight: 400;
letter-spacing: 2px;
margin: 0;
padding: 0;
text-transform: uppercase
}
.mypricing_content .mypricing_head_price .mypricing_price_tag {
padding: 0 0 20px
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .price {
display: block
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .price .sign {
display: inline-block;
font-family: "Lato", sans-serif;
font-size: 28px;
font-weight: 400;
vertical-align: middle
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .price .currency {
font-family: "Lato", sans-serif;
font-size: 60px;
font-weight: 300;
letter-spacing: -2px;
line-height: 60px;
padding: 0;
vertical-align: middle
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .price .cent {
display: inline-block;
font-family: "Lato", sans-serif;
font-size: 24px;
font-weight: 400;
vertical-align: bottom
}
.mypricing_content .mypricing_head_price .mypricing_price_tag .month {
font-family: "Lato", sans-serif;
font-size: 18px;
font-weight: 400;
letter-spacing: 3px;
vertical-align: bottom
}
.mypricing_content .mypricing_feature_list ul {
list-style: none;
padding: 0;
margin: 0
}
.mypricing_content .mypricing_feature_list ul li {
font-family: "Lato", sans-serif;
font-size: 18px;
padding: 15px 0;
transition: all 0.3s ease-in-out 0s
}
.mypricing_content .mypricing_feature_list ul li:hover {
transition: all 0.3s ease-in-out 0s
}
.mypricing_content .mypricing_feature_list ul li .fa {
padding: 0 10px
}
.mypricing_content .mypricing_price_btn {
margin: 20px 0 32px
}
.mypricing_content .mypricing_price_btn a {
border-radius: 5px;
display: inline-block;
font-family: "Lato", sans-serif;
font-size: 18px;
outline: medium none;
padding: 12px 30px;
text-decoration: none;
text-transform: uppercase
}
.mypricing_content,
.mypricing_content:hover,
.mypricing_content .mypricing_head_price .mypricing_head_content .head_bg,
.mypricing_content:hover .mypricing_head_price .mypricing_head_content .head_bg,
.mypricing_content .mypricing_head_price .mypricing_head_content .head h2,
.mypricing_content:hover .mypricing_head_price .mypricing_head_content .head h2,
.mypricing_content .price,
.mypricing_content:hover .price,
.mypricing_content .mypricing_price_btn a,
.mypricing_content:hover .mypricing_price_btn a {
transition: all 0.3s ease-in-out 0s
}
@media (max-width: 320px) {}
@media (max-width: 767px) {
.mypricing_content {
margin-bottom: 75px
}
}
@media (min-width: 768px) and (max-width: 991px) {
.col-md-3 {
float: left;
width: 50%
}
.col-md-4 {
float: left;
width: 50%
}
.mypricing_content {
margin-bottom: 75px
}
}
@media (min-width: 992px) and (max-width: 1199px) {}
@media (min-width: 1200px) {}
_home {
font-family: 'Raleway', sans-serif
}
.text-center h1,
.text-center h1 a {
color: #7885CB;
font-size: 30px;
font-weight: 300;
text-decoration: none
}
.demo-pic {
margin: 0 auto
}
.demo-pic:hover {
opacity: 0.7
}
_home ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: table
}
_home li {
float: left
}
_home li+li {
margin-left: 10px;
padding-bottom: 10px
}
_home li a {
display: block;
width: 50px;
height: 50px;
font-size: 0px
}
_home .blue {
background: #3498DB;
transition: all 0.3s ease-in-out 0s
}
_home .emerald {
background: #f74f57;
transition: all 0.3s ease-in-out 0s
}
_home .grey {
background: #7F8C8D;
transition: all 0.3s ease-in-out 0s
}
_home .midnight {
background: #34495E;
transition: all 0.3s ease-in-out 0s
}
_home .orange {
background: #E67E22;
transition: all 0.3s ease-in-out 0s
}
_home .purple {
background: #9B59B6;
transition: all 0.3s ease-in-out 0s
}
_home .red {
background: #E74C3C;
transition: all 0.3s ease-in-out 0s
}
_home .turquoise {
background: #1ABC9C;
transition: all 0.3s ease-in-out 0s
}
_home .blue:hover,
_home .emerald:hover,
_home .grey:hover,
_home .midnight:hover,
_home .orange:hover,
_home .purple:hover,
_home .red:hover,
_home .turquoise:hover {
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
transition: all 0.3s ease-in-out 0s
}
_home .divider {
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
padding: 20px
}
_home .divider span {
width: 100%;
display: table;
height: 2px;
background: #ddd;
margin: 50px auto;
line-height: 2px
}
_home .itemname {
text-align: center;
font-size: 50px;
padding: 50px 0 20px;
border-bottom: 1px solid #ddd;
margin-bottom: 40px;
text-decoration: none;
font-weight: 300
}
_home .itemnametext {
text-align: center;
font-size: 20px;
padding-top: 5px;
text-transform: uppercase;
display: inline-block
}
.table_heading {
text-align: center
}
.table_heading h1 {
color: #666;
margin: 0;
padding: 0 0 50px 0
}
.demo-button {
background-color: #333333;
color: #ffffff;
display: table;
font-size: 20px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 50px;
outline-style: none;
outline-width: medium;
padding: 10px;
text-align: center;
text-transform: uppercase
}
.bottom_btn {
background-color: #333333;
color: #ffffff;
display: table;
font-size: 28px;
margin: 60px auto 20px;
padding: 10px 25px;
text-align: center;
text-transform: uppercase
}
.demo-button:hover {
background-color: #666;
color: #FFF;
text-decoration: none
}
.bottom_btn:hover {
background-color: #666;
color: #FFF;
text-decoration: none
}