<div class="pricing3 py-5">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-3 align-self-center">
<div class="nav flex-column nav-pills" role="tablist">
<a class="nav-link " data-toggle="pill" href="#p3-1" role="tab" aria-expanded="true">
<h2>$0</h2>
<h6 class="subtitle">Free</h6>
</a>
<a class="nav-link active" data-toggle="pill" href="#p3-2" role="tab" aria-expanded="true">
<h2>$5<small>/m</small></h2>
<h6 class="subtitle">Regular</h6>
</a>
<a class="nav-link" data-toggle="pill" href="#p3-3" role="tab" aria-expanded="true">
<h2>$10<small>/m</small></h2>
<h6 class="subtitle">Premium</h6>
</a>
</div>
</div>
<div class="col-lg-10 col-md-9">
<div class="tab-content">
<div class="tab-pane fade" id="p3-1" role="tabpanel">
<div class="row">
<!-- Column -->
<div class="col-lg-7">
<div class="pricing-box">
<h2 class="text-uppercase title mb-0">Free</h2>
<h6 class="subtitle">The base montly plan</h6>
<ul class="list-inline">
<li><i class="text-center overflow-hidden d-inline-block icon-picture"></i> <span>1 Premium images <br/>Per day</span></li>
<li><i class="text-center overflow-hidden d-inline-block icon-camrecorder"></i> <span>1 Premium Videos <br/>Per day</span></li>
<li><i class="text-center overflow-hidden d-inline-block icon-people"></i> <span>Not operate the <br/>Account</span></li>
</ul>
<div class="d-flex align-items-center">
<span class="display-5 text-dark mr-3 vm font-weight-medium">$0</span>
<a class="btn btn-danger-gradiant btn-md border-0 text-white rounded-pill" href="#f1"><span>BUY NOW <i class="ti-arrow-right"></i></span></a>
</div>
</div>
</div>
<!-- Column -->
<div class="col-lg-5 bg-image text-center align-items-end position-relative d-flex" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/pricing/bg.jpg)">
<div class="quote-box">
<h3 class="text-white font-weight-light mb-4">I am using this plan for last two years and i am very much impressed with the quality ...</h3>
<h6 class="text-white">Hanna Gover</h6>
</div>
</div>
<!-- Column -->
</div>
</div>
<div class="tab-pane fade active show" id="p3-2" role="tabpanel">
<div class="row">
<!-- Column -->
<div class="col-lg-7">
<div class="pricing-box">
<h2 class="text-uppercase title mb-0">Regular</h2>
<h6 class="subtitle">The base montly plan</h6>
<ul class="list-inline">
<li><i class="text-center overflow-hidden d-inline-block icon-picture"></i> <span>10 Premium images <br/>Per day</span></li>
<li><i class="text-center overflow-hidden d-inline-block icon-camrecorder"></i> <span>10 Premium Videos <br/>Per day</span></li>
<li><i class="text-center overflow-hidden d-inline-block icon-people"></i> <span>Users can operate the <br/>Account</span></li>
</ul>
<div class="d-flex align-items-center">
<span class="display-5 text-dark mr-3 vm font-weight-medium">$5</span>
<a class="btn btn-danger-gradiant btn-md border-0 text-white rounded-pill" href="#f1"><span>BUY NOW</span></a>
</div>
</div>
</div>
<!-- Column -->
<div class="col-lg-5 bg-image text-center align-items-end position-relative d-flex" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/pricing/bg.jpg)">
<div class="quote-box">
<h3 class="text-white font-weight-light mb-4">I am using this plan for last two years and i am very much impressed with the quality ...</h3>
<h6 class="text-white">Hanna Gover</h6>
</div>
</div>
<!-- Column -->
</div>
</div>
<div class="tab-pane fade" id="p3-3" role="tabpanel">
<div class="row">
<!-- Column -->
<div class="col-lg-7">
<div class="pricing-box">
<h2 class="text-uppercase title m-b-0">Premium</h2>
<h6 class="subtitle">The base montly plan</h6>
<ul class="list-inline">
<li><i class="text-center overflow-hidden d-inline-block icon-picture"></i> <span>50 Premium images <br/>Per day</span></li>
<li><i class="text-center overflow-hidden d-inline-block icon-camrecorder"></i> <span>50 Premium Videos <br/>Per day</span></li>
<li><i class="text-center overflow-hidden d-inline-block icon-people"></i> <span>Users can operate the <br/>Account</span></li>
</ul>
<div class="d-flex align-items-center">
<span class="display-5 text-dark mr-3 font-weight-medium">$10</span>
<a class="btn btn-danger-gradiant btn-md border-0 text-white rounded-pill" href="#f1"><span>BUY NOW</span></a>
</div>
</div>
</div>
<!-- Column -->
<div class="col-lg-5 bg-image text-center align-items-end position-relative d-flex" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/pricing/bg.jpg)">
<div class="quote-box">
<h3 class="text-white font-weight-light mb-4">I am using this plan for last two years and i am very much impressed with the quality ...</h3>
<h6 class="text-white">Hanna Gover</h6>
</div>
</div>
<!-- Column -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800);
.pricing3 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
}
.pricing3 h1, .pricing3 h2, .pricing3 h3, .pricing3 h4, .pricing3 h5, .pricing3 h6 {
color: #3e4555;
}
.pricing3 .font-weight-medium {
font-weight: 500;
}
.pricing3 .bg-light {
background-color: #f4f8fa !important;
}
.pricing3 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.pricing3 .col-lg-2 {
padding-right: 0px;
position: relative;
z-index: 1;
}
.pricing3 .col-lg-10 {
padding-left: 0px;
}
.pricing3 .nav-pills {
border: 1px solid rgba(120, 130, 140, 0.13);
border-radius: 4px;
border-right: 0px;
}
.pricing3 .nav-pills .nav-link {
padding: 30px 25px;
}
.pricing3 .nav-pills .nav-link h2 {
color: #8d97ad;
}
.pricing3 .nav-pills .nav-link.active {
background: #ffffff;
border-left: 3px solid #ff4d7e;
border-radius: 0px;
margin-left: -3px;
-webkit-box-shadow: -20px 0 40px rgba(0, 0, 0, 0.1);
box-shadow: -20px 0 40px rgba(0, 0, 0, 0.1);
}
.pricing3 .nav-pills .nav-link.active h2 {
color: #263238;
}
.pricing3 .tab-content {
background: #ffffff;
overflow: hidden;
-webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 60px rgba(0, 0, 0, 0.1);
}
.pricing3 .tab-content .pricing-box {
padding: 50px 80px;
}
.pricing3 .tab-content .list-inline {
margin-top: 20px;
}
.pricing3 .tab-content .list-inline li {
padding: 30px 0;
font-weight: 400;
}
.pricing3 .tab-content .list-inline li span {
display: inline-block;
vertical-align: middle;
}
.pricing3 .tab-content .list-inline li i {
font-size: 40px;
vertical-align: middle;
width: 80px;
opacity: 0.5;
}
.pricing3 .tab-content .bg-image {
background-size: cover;
}
.pricing3 .tab-content .bg-image .quote-box {
padding: 40px;
}
.pricing3 .btn-danger-gradiant {
background: #ff4d7e;
background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
}
.pricing3 .btn-danger-gradiant:hover {
background: #ff6a5b;
background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}
.pricing3 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
.pricing3 .display-5 {
font-size: 3rem;
}
@media (max-width: 767px) {
.pricing3 .col-lg-2 {
padding-right: 15px;
}
.pricing3 .col-lg-10 {
padding-left: 15px;
}
.pricing3 .nav-pills {
-webkit-box-orient: horizontal !important;
-webkit-box-direction: normal !important;
-webkit-flex-direction: row !important;
-ms-flex-direction: row !important;
flex-direction: row !important;
border-bottom: 0px;
border-right: 1px solid rgba(120, 130, 140, 0.13);
}
.pricing3 .nav-pills .nav-link {
padding: 25px 18px;
}
.pricing3 .nav-pills .nav-link.active {
border-left: 0px;
border-top: 3px solid #ff4d7e;
margin-top: -4px;
margin-left: 0px;
margin-bottom: -1px;
-webkit-box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.1);
box-shadow: 0 -20px 40px rgba(0, 0, 0, 0.1);
}
.pricing3 .tab-content .pricing-box {
padding: 20px;
}
}