Skip to content

Commit 0dcfb2b

Browse files
onokumusonokumus
committed
create pricing table
1 parent 2f6790e commit 0dcfb2b

26 files changed

+907
-3
lines changed

‎dist/alterne.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,7 @@ <h5 class="media-heading">Archie</h5>
187187
<li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a></li>
188188
<li class=""><a href="button.html"><i class="icon-angle-right"></i> Button</a></li>
189189
<li class=""><a href="progress.html"><i class="icon-angle-right"></i> Progress</a></li>
190+
<li class=""><a href="pricing.html"><i class="icon-credit-card"></i> Pricing Table</a></li>
190191
</ul>
191192
</li>
192193
<li class="panel ">

‎dist/assets/css/main.css‎

Lines changed: 159 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2492,4 +2492,162 @@ fieldset[disabled] .btn-grad.btn-metis-6.active {
24922492
color: #5bc0de;
24932493
}
24942494

2495-
/* END animated checkbox styles */
2495+
/* END animated checkbox styles */
2496+
/* BEGIN Pricing Table */
2497+
2498+
.pricing-table {
2499+
padding: 0;
2500+
margin: 30px 0;
2501+
line-height: 150%;
2502+
text-align: center;
2503+
}
2504+
2505+
.pricing-table li {
2506+
list-style: none;
2507+
}
2508+
2509+
.pricing-table > li {
2510+
color: #444;
2511+
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ebeef5), to(#ffffff));
2512+
background-image: -webkit-linear-gradient(top, #ebeef5, 0%, #ffffff, 100%);
2513+
background-image: -moz-linear-gradient(top, #ebeef5 0%, #ffffff 100%);
2514+
background-image: linear-gradient(to bottom, #ebeef5 0%, #ffffff 100%);
2515+
background-repeat: repeat-x;
2516+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebeef5', endColorstr='#ffffffff', GradientType=0);
2517+
-webkit-transition: all 0.2s;
2518+
transition: all 0.2s;
2519+
}
2520+
2521+
.pricing-table.dark > li {
2522+
color: #fff;
2523+
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#666666), to(#444444));
2524+
background-image: -webkit-linear-gradient(top, #666666, 0%, #444444, 100%);
2525+
background-image: -moz-linear-gradient(top, #666666 0%, #444444 100%);
2526+
background-image: linear-gradient(to bottom, #666666 0%, #444444 100%);
2527+
background-repeat: repeat-x;
2528+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff666666', endColorstr='#ff444444', GradientType=0);
2529+
}
2530+
2531+
.pricing-table > li.active {
2532+
z-index: 1;
2533+
color: #fff;
2534+
-webkit-box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
2535+
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.5);
2536+
}
2537+
2538+
@media (min-width: 768px) {
2539+
.pricing-table > li.active {
2540+
-webkit-transform: scale(1.03);
2541+
-ms-transform: scale(1.03);
2542+
transform: scale(1.03);
2543+
}
2544+
}
2545+
2546+
.pricing-table > li.active.primary {
2547+
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#357ebd), to(#428bca));
2548+
background-image: -webkit-linear-gradient(top, #357ebd, 0%, #428bca, 100%);
2549+
background-image: -moz-linear-gradient(top, #357ebd 0%, #428bca 100%);
2550+
background-image: linear-gradient(to bottom, #357ebd 0%, #428bca 100%);
2551+
background-repeat: repeat-x;
2552+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff357ebd', endColorstr='#ff428bca', GradientType=0);
2553+
}
2554+
2555+
.pricing-table > li.active.success {
2556+
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#4cae4c), to(#5cb85c));
2557+
background-image: -webkit-linear-gradient(top, #4cae4c, 0%, #5cb85c, 100%);
2558+
background-image: -moz-linear-gradient(top, #4cae4c 0%, #5cb85c 100%);
2559+
background-image: linear-gradient(to bottom, #4cae4c 0%, #5cb85c 100%);
2560+
background-repeat: repeat-x;
2561+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff4cae4c', endColorstr='#ff5cb85c', GradientType=0);
2562+
}
2563+
2564+
.pricing-table > li.active.warning {
2565+
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#eea236), to(#f0ad4e));
2566+
background-image: -webkit-linear-gradient(top, #eea236, 0%, #f0ad4e, 100%);
2567+
background-image: -moz-linear-gradient(top, #eea236 0%, #f0ad4e 100%);
2568+
background-image: linear-gradient(to bottom, #eea236 0%, #f0ad4e 100%);
2569+
background-repeat: repeat-x;
2570+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeea236', endColorstr='#fff0ad4e', GradientType=0);
2571+
}
2572+
2573+
.pricing-table > li.active.danger {
2574+
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#d43f3a), to(#d9534f));
2575+
background-image: -webkit-linear-gradient(top, #d43f3a, 0%, #d9534f, 100%);
2576+
background-image: -moz-linear-gradient(top, #d43f3a 0%, #d9534f 100%);
2577+
background-image: linear-gradient(to bottom, #d43f3a 0%, #d9534f 100%);
2578+
background-repeat: repeat-x;
2579+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd43f3a', endColorstr='#ffd9534f', GradientType=0);
2580+
}
2581+
2582+
.pricing-table > li.active.info {
2583+
background-image: -webkit-gradient(linear, left 0%, left 100%, from(#46b8da), to(#5bc0de));
2584+
background-image: -webkit-linear-gradient(top, #46b8da, 0%, #5bc0de, 100%);
2585+
background-image: -moz-linear-gradient(top, #46b8da 0%, #5bc0de 100%);
2586+
background-image: linear-gradient(to bottom, #46b8da 0%, #5bc0de 100%);
2587+
background-repeat: repeat-x;
2588+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff46b8da', endColorstr='#ff5bc0de', GradientType=0);
2589+
}
2590+
2591+
.pricing-table .footer {
2592+
padding: 15px;
2593+
margin: 15px -15px 0;
2594+
background: #eee;
2595+
}
2596+
2597+
.pricing-table.dark .footer {
2598+
background: #333;
2599+
}
2600+
2601+
.pricing-table h3 {
2602+
padding: 15px 0;
2603+
text-transform: uppercase;
2604+
}
2605+
2606+
.pricing-table .price-body {
2607+
display: table;
2608+
width: 125px;
2609+
height: 125px;
2610+
margin: 0 auto 15px auto;
2611+
border: 2px solid #444;
2612+
border-radius: 100%;
2613+
}
2614+
2615+
.pricing-table.dark .price-body {
2616+
border-color: #fff;
2617+
}
2618+
2619+
.pricing-table > li.active.primary .price-body,
2620+
.pricing-table > li.active.success .price-body,
2621+
.pricing-table > li.active.warning .price-body,
2622+
.pricing-table > li.active.danger .price-body,
2623+
.pricing-table > li.active.info .price-body {
2624+
border-color: #fff;
2625+
}
2626+
2627+
.pricing-table .price {
2628+
display: table-cell;
2629+
font-size: 30px;
2630+
font-weight: bold;
2631+
text-transform: uppercase;
2632+
vertical-align: middle;
2633+
}
2634+
2635+
.pricing-table .price .price-figure {
2636+
display: block;
2637+
}
2638+
2639+
.pricing-table .price .price-term {
2640+
font-size: 11px;
2641+
font-weight: normal;
2642+
}
2643+
2644+
.pricing-table .features ul {
2645+
padding: 0;
2646+
margin: 0;
2647+
}
2648+
2649+
.pricing-table .features ul li {
2650+
padding: 5px 0;
2651+
}
2652+
2653+
/* END Pricing Table */

‎dist/assets/css/main.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/blank.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,7 @@ <h5 class="media-heading">Archie</h5>
183183
<li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a></li>
184184
<li class=""><a href="button.html"><i class="icon-angle-right"></i> Button</a></li>
185185
<li class=""><a href="progress.html"><i class="icon-angle-right"></i> Progress</a></li>
186+
<li class=""><a href="pricing.html"><i class="icon-credit-card"></i> Pricing Table</a></li>
186187
</ul>
187188
</li>
188189
<li class="panel ">

‎dist/button.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ <h5 class="media-heading">Archie</h5>
185185
<li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a></li>
186186
<li class="active"><a href="button.html"><i class="icon-angle-right"></i> Button</a></li>
187187
<li class=""><a href="progress.html"><i class="icon-angle-right"></i> Progress</a></li>
188+
<li class=""><a href="pricing.html"><i class="icon-credit-card"></i> Pricing Table</a></li>
188189
</ul>
189190
</li>
190191
<li class="panel ">

‎dist/calendar.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,7 @@ <h5 class="media-heading">Archie</h5>
186186
<li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a></li>
187187
<li class=""><a href="button.html"><i class="icon-angle-right"></i> Button</a></li>
188188
<li class=""><a href="progress.html"><i class="icon-angle-right"></i> Progress</a></li>
189+
<li class=""><a href="pricing.html"><i class="icon-credit-card"></i> Pricing Table</a></li>
189190
</ul>
190191
</li>
191192
<li class="panel ">

‎dist/chart.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ <h5 class="media-heading">Archie</h5>
185185
<li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a></li>
186186
<li class=""><a href="button.html"><i class="icon-angle-right"></i> Button</a></li>
187187
<li class=""><a href="progress.html"><i class="icon-angle-right"></i> Progress</a></li>
188+
<li class=""><a href="pricing.html"><i class="icon-credit-card"></i> Pricing Table</a></li>
188189
</ul>
189190
</li>
190191
<li class="panel ">

‎dist/dashboard.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,7 @@ <h5 class="media-heading">Archie</h5>
185185
<li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a></li>
186186
<li class=""><a href="button.html"><i class="icon-angle-right"></i> Button</a></li>
187187
<li class=""><a href="progress.html"><i class="icon-angle-right"></i> Progress</a></li>
188+
<li class=""><a href="pricing.html"><i class="icon-credit-card"></i> Pricing Table</a></li>
188189
</ul>
189190
</li>
190191
<li class="panel ">

‎dist/file.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,7 @@ <h5 class="media-heading">Archie</h5>
189189
<li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a></li>
190190
<li class=""><a href="button.html"><i class="icon-angle-right"></i> Button</a></li>
191191
<li class=""><a href="progress.html"><i class="icon-angle-right"></i> Progress</a></li>
192+
<li class=""><a href="pricing.html"><i class="icon-credit-card"></i> Pricing Table</a></li>
192193
</ul>
193194
</li>
194195
<li class="panel ">

‎dist/form-general.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -195,6 +195,7 @@ <h5 class="media-heading">Archie</h5>
195195
<li class=""><a href="icon.html"><i class="icon-angle-right"></i> Icon </a></li>
196196
<li class=""><a href="button.html"><i class="icon-angle-right"></i> Button</a></li>
197197
<li class=""><a href="progress.html"><i class="icon-angle-right"></i> Progress</a></li>
198+
<li class=""><a href="pricing.html"><i class="icon-credit-card"></i> Pricing Table</a></li>
198199
</ul>
199200
</li>
200201
<li class="panel active">

0 commit comments

Comments
 (0)