"Price Plan"
Bootstrap 3.0.3 Snippet by koshikojha

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<div data-scroll='3' class="full_width">
<section class="price-plan-area section">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="section-heading-three">
<h2><span>01</span> Our Pricing Plans</h2>
<p>Proin gravida nibh vel velit auctor aliquet Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem.</p>
</div>
<div class="plan-nav">
<ul role="tablist">
<li role="presentation" class="active wow animated fadeIn" data-wow-duration="1s"><a href="#Mods" role="tab" data-toggle="tab">Proin gravida</a></li>
<li role="presentation" class="wow animated fadeIn" data-wow-duration="1.5s"><a href="#Design" role="tab" data-toggle="tab">Nibh vel</a></li>
<li role="presentation" class="wow animated fadeIn" data-wow-duration="1.5s"><a href="#Merch" role="tab" data-toggle="tab">Velit auctor</a></li>
<li role="presentation" class="wow animated fadeIn" data-wow-duration="1.5s"><a href="#modifications" role="tab" data-toggle="tab">Aliquet Aenean</a></li>
<li role="presentation" class="wow animated fadeIn" data-wow-duration="1.5s"><a href="#Permanent" role="tab" data-toggle="tab">Sollicitudin</a></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
<div class="plan-content">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="Mods">
<div class="form-head">Proin gravida</div>
<div class="price-list">
<div class="con">
<h3>Proin gravida .....................</h3>
<p>Proin gravida nibh vel velit auctor aliquet.</p>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
html, body {font-size: 16px;color: #797979;font-family: "Lato", sans-serif;vertical-align: baseline;line-height: 26px;font-weight: 400;}
h1,h2,h3,h4,h5,h6 {margin: 0 0 26px;font-weight: 600; }a{transition: all 0.3s;text-decoration: none}a:hover {text-decoration: none!important;color: #ababab;}
a:active {outline: 0 none;text-decoration: none;}a:focus {outline: 0px solid;text-decoration: none!important;}p {margin: 0 0 26px;}ul {list-style: outside none none;margin: 0;padding: 0;}
.section-heading-three{display:block;position:relative;margin: 0 0 60px;}
.section-heading-three:after{content:'';position: absolute;width:40px;top:-140px;height:140px;background:#f2f2f2;left: 0;}
.section-heading-three:before {content: '';position: absolute;width: 40px;top: 8px;height: 6px;background: #cf6161;left: 0;}
.section-heading-three h2{font-family:"Abel", sans-serif;font-size:48px;text-transform:uppercase;color:#212121;font-weight:500;margin: 0 0 15px;display:block;padding-top:38px;}
.section-heading-three h2 span {color: #cf6161;}.section-heading-three p{margin: 0;}
.price-plan-area .plan-nav ul li {padding: 10px 0;position: relative;overflow: hidden;vertical-align: middle;padding-right: 60px;}
.price-plan-area .plan-nav ul li:after {content: '';position: absolute;left: 0;height: 30px;width: 4px;background: #cf6161;top: 32px;transition: all 0.3s;}
.price-plan-area .plan-nav ul li a {font-family: "Abel", sans-serif;text-transform: uppercase;font-size: 26px;color: #212121;display: inline-block;background: #f2f2f2;
width: 420px;line-height: 74px;padding-left: 25px;position: relative;}
.price-plan-area .plan-nav ul li a:before{content:'';position:absolute;right:-26px;width:52px;height:52px;transform:rotate(45deg);background:#f2f2f2;top:11px;z-index:99;
transition: all 0.3s;}.price-plan-area .plan-nav ul li a:after {content: '';position: absolute;right: -42px;width:52px;height:52px;transform:rotate(45deg);background: #fff;
border-right: 5px solid #f2f2f2;border-top: 5px solid #f2f2f2;top: 11px;z-index: 9;transition: all 0.3s;}.price-plan-area .plan-nav ul li.active:after {background: #fff;}
.price-plan-area .plan-nav ul li.active a {color: #fff;background: #cf6161;}.price-plan-area .plan-nav ul li.active a:before {background: #cf6161;}
.price-plan-area .plan-nav ul li.active a:after {border-right: 5px solid #cf6161;border-top: 5px solid #cf6161;}
.price-plan-area .plan-content .tab-content .tab-pane {margin-top: 75px;width: 100%;border: 10px solid #f2f2f2;padding: 80px 50px 50px;position: relative;float:left;}
.price-plan-area .plan-content .tab-content .tab-pane .form-head {position: absolute;display: inline-block;top: -35px;background:#fff;width: 210px;margin: 0 auto;left:0;right:0;
height: 60px;line-height: 60px;box-shadow: 0 0px 20px rgba(0, 0, 0, 0.3);font-family: "Abel", sans-serif;font-weight: 300;color: #212121;font-size: 26px;text-align: center;
text-transform: uppercase;}.price-plan-area .plan-content .tab-content .tab-pane .price-list {display: block;margin: 0 0 30px;}
.price-plan-area .plan-content .tab-content .tab-pane .price-list:last-child {margin: 0;}
.price-plan-area .plan-content .tab-content .tab-pane .price-list .con {display: inline-block;float: left;padding: 25px 0;margin-right: 50px;}
.price-plan-area .plan-content .tab-content .tab-pane .price-list .con h3 {font-family: "Abel", sans-serif;font-weight:300;font-size:26px;text-transform:uppercase;color:#212121;
margin: 0;transition: all 0.3s;}.price-plan-area .plan-content .tab-content .tab-pane .price-list .con p {margin: 0;}
.price-plan-area .plan-content .tab-content .tab-pane .price-list .price {display: table;float: right;padding-top: 10px;}
.price-plan-area .plan-content .tab-content .tab-pane .price-list .price span{height:80px;width:80px;line-height:80px;border-radius:100%;font-family:"Abel", sans-serif;
color:#fff;background: #212121;font-size: 30px;display: block;text-align: center;transition: all 0.3s;}
.price-plan-area .plan-content .tab-content .tab-pane .price-list:hover .con h3 {color: #cf6161;}
.price-plan-area .plan-content .tab-content .tab-pane .price-list:hover .price span {background: #cf6161;}
.section {padding: 100px 0 100px;display: block;position: relative;overflow: hidden;vertical-align: middle;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro Angular
Lesson plan example

Questions / Comments: