priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pricing plan ui done

This commit is contained in:
Priyatham-sai-chand 2020-11-17 19:51:06 +05:30
parent 60f99355f9
commit 59384d3176
3 changed files with 167 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
src/components/PricingPlan.js
View File

@ -6,15 +6,80 @@ class PricingPlan extends Component {
render(){ render(){
return( return(
<div className="body"> <div className="body">
<section class='pricing-plan'> <div class='pricing-plan-container'>
<section class='pricing-plan '>
<div class='pricing-plan__header'> <div class='pricing-plan__header'>
<h1 class='pricing-plan__title'>Basic Package</h1> <h1 class='pricing-plan__title'>Basic Package</h1>
<h2 class='pricing-plan__summary'>For those getting started</h2> <h2 class='pricing-plan__summary'>For those getting started</h2>
</div> </div>
<div class='pricing-plan__desc'> <div class='pricing-plan__desc'>
<ul class='pricing-plan__list'>
<li class='pricing-plan__feature'>Feature #1</li>
<li class='pricing-plan__feature'>Feature #2</li>
<li class='pricing-plan__feature'>Feature #3</li>
<li class='pricing-plan__feature'>Feature #4</li>
</ul>
</div>
< div class='pricing-plan__actions'>
<p class='pricing-plan__cost'>$10</p>
<p class='pricing-plan__text'>per month</p>
<a href='./' class='pricing-plan__button'>Purchase</a>
<p class='pricing-plan__text'>Minimum spend over 12 months</p>
</div> </div>
</section> </section>
<section class='pricing-plan pricing-plan--highlighted'>
<div class='pricing-plan__special-text'>Recommended</div>
<div class='pricing-plan__header'>
<h1 class='pricing-plan__title'>Intermediate Package</h1>
<h2 class='pricing-plan__summary'>For those getting started</h2>
</div>
<div class='pricing-plan__desc'>
<ul class='pricing-plan__list'>
<li class='pricing-plan__feature'>Feature #1</li>
<li class='pricing-plan__feature'>Feature #2</li>
<li class='pricing-plan__feature'>Feature #3</li>
<li class='pricing-plan__feature'>Feature #4</li>
</ul>
</div>
< div class='pricing-plan__actions'>
<p class='pricing-plan__cost'>$50</p>
<p class='pricing-plan__text'>per month</p>
<a href='./' class='pricing-plan__button'>Purchase</a>
<p class='pricing-plan__text'>Minimum spend over 12 months</p>
</div>
</section>
<section class='pricing-plan '>
<div class='pricing-plan__header'>
<h1 class='pricing-plan__title'>Luxury Package</h1>
<h2 class='pricing-plan__summary'>For those getting started</h2>
</div>
<div class='pricing-plan__desc'>
<ul class='pricing-plan__list'>
<li class='pricing-plan__feature'>Feature #1</li>
<li class='pricing-plan__feature'>Feature #2</li>
<li class='pricing-plan__feature'>Feature #3</li>
<li class='pricing-plan__feature'>Feature #4</li>
</ul>
</div>
< div class='pricing-plan__actions'>
<p class='pricing-plan__cost'>$100</p>
<p class='pricing-plan__text'>per month</p>
<a href='./' class='pricing-plan__button'>Purchase</a>
<p class='pricing-plan__text'>Minimum spend over 12 months</p>
</div>
</section>
</div>
</div> </div>

103
src/components/pricing-plan.css
View File

@ -12,6 +12,12 @@
} }
.pricing-plan--highlighted {
box-shadow: 0 0 15px rgba(0,0,0,0.4);
transform: scale(1.05);
}
.pricing-plan__header{ .pricing-plan__header{
padding:25px; padding:25px;
@ -19,12 +25,21 @@
color: #ffffff; color: #ffffff;
} }
.pricing-plan__special-text {
.pricing-plan__title, padding: 10px;
.pricing-plan__summary{ text-align: center;
font-weight: bold;
color: #ffffff;
background: #007c64;
box-shadow: 0 0 10px rgba(0,0,0,0.2) inset;
}
.pricing-plan__title,.pricing-plan__summary{
margin: 0; margin: 0;
text-align: center; text-align: center;
font-family: sans-serif;
} }
.pricing-plan__title{ .pricing-plan__title{
@ -39,3 +54,87 @@
font-size: 1em; font-size: 1em;
font-weight:300; font-weight:300;
} }
.pricing-plan__desc {
padding:25px;
}
.pricing-plan__list {
padding: 0;
margin: 0;
text-align: left;
}
.pricing-plan__feature {
list-style: none;
margin: 0;
padding-left: 25px;
position: relative;
font-size: 0.9em;
}
.pricing-plan__feature:not(:last-child) {
margin-bottom: 0.5em;
}
.pricing-plan__feature::before {
content: "\2714";
color: #009578;
position: absolute;
left: 0;
}
.pricing-plan__actions {
padding: 25px;
border-top: 1px solid #eeeeee;
display: flex;
flex-direction: column;
}
.pricing-plan__button {
display: inline-block;
margin: 15px auto;
padding: 8px 20px;
color: #009578;
background: #ffffff;
border-radius: 5px;
border: 1px solid #009578;
text-transform: uppercase;
letter-spacing: 0.02em;
text-decoration: none !important;
font-weight: bold;
}
.pricing-plan__button:hover{
background: #009578;
color: #ffffff;
}
.pricing-plan__cost{
margin: 0;
text-align: center;
font-size: 2em;
color:#000000;
}
.pricing-plan__text {
font-size: 0.9em;
text-align: center;
margin: 0 0 10px 0;
}
.pricing-plan-container{
display:flex;
align-items: center;
justify-content: center;
padding: 10px;
}

1
src/index.js
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.css';
import App from './App'; import App from './App';
ReactDOM.render(<App />,document.getElementById('root')); ReactDOM.render(<App />,document.getElementById('root'));