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

pricing plan css to styled copy

This commit is contained in:
Priyatham Sai Chand 2021-03-01 13:14:52 +05:30
parent b19ade697e
commit 102f0f92b1
2 changed files with 60 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
src/components/PricingPlan.js
View File

@ -86,7 +86,7 @@ const SpecialText = styled.div`
} }
`; `;
const Desc = styled.div` const Description = styled.div`
padding: 25px; padding: 25px;
@ -96,7 +96,58 @@ const List = styled.ul `
margin: 0; margin: 0;
text-align: left; text-align: left;
`; `;
const Feature = styled.li`
list-style: none;
margin: 0;
padding-left: 25px;
position: relative;
font-size: 0.9em;
&:not(:last-child) {
margin-bottom: 2em;
}
&::before {
content: "\2714";
color: #009578;
position: absolute;
left: 0;
}
`;
const Actions = styled.div`
padding: 25px;
border-top: 1px solid #eeeeee;
display: flex;
flex-direction: column;
`;
const Button = styled.a`
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;
text-align: center;
&:hover {
background: #009578;
color: #ffffff;
}
`;
class PricingPlan extends Component { class PricingPlan extends Component {
render(){ render(){
@ -107,22 +158,22 @@ class PricingPlan extends Component {
<br /> <br />
<br /> <br />
<h1 style={{'color':'#66bfbf','margin-left':'20px'}}>Pricing Plan</h1> <h1 style={{'color':'#66bfbf','margin-left':'20px'}}>Pricing Plan</h1>
<div class='pricing-plan-container'> <WhiteContainer>
<section class='pricing-plan '> <PricingPlan>
<div class='pricing-plan__header'> <Header>
<h1 class='pricing-plan__title'>Basic Package</h1> <Title>Basic Package</Title>
<h2 class='pricing-plan__summary'>For those getting started</h2> <Summary>For those getting started</Summary>
</div> </Header>
<div class='pricing-plan__desc'> <Description>
<ul class='pricing-plan__list'> <ul class='pricing-plan__list'>
<li class='pricing-plan__feature'>Feature #1</li> <li class='pricing-plan__feature'>Feature #1</li>
<li class='pricing-plan__feature'>Feature #2</li> <li class='pricing-plan__feature'>Feature #2</li>
<li class='pricing-plan__feature'>Feature #3</li> <li class='pricing-plan__feature'>Feature #3</li>
<li class='pricing-plan__feature'>Feature #4</li> <li class='pricing-plan__feature'>Feature #4</li>
</ul> </ul>
</div> </Description>
< div class='pricing-plan__actions'> < div class='pricing-plan__actions'>
<p class='pricing-plan__cost'>$10</p> <p class='pricing-plan__cost'>$10</p>
<p class='pricing-plan__text'>per month</p> <p class='pricing-plan__text'>per month</p>

31
src/pricing-plan.css
View File

@ -1,7 +1,6 @@
.pricing-plan-container .pricing-plan-container
{ {
background: white;
} }
.pricing-plan { .pricing-plan {
@ -40,55 +39,25 @@
.pricing-plan__feature { .pricing-plan__feature {
list-style: none;
margin: 0;
padding-left: 25px;
position: relative;
font-size: 0.9em;
} }
.pricing-plan__feature:not(:last-child) { .pricing-plan__feature:not(:last-child) {
margin-bottom: 2em;
} }
.pricing-plan__feature::before { .pricing-plan__feature::before {
content: "\2714";
color: #009578;
position: absolute;
left: 0;
} }
.pricing-plan__actions { .pricing-plan__actions {
padding: 25px;
border-top: 1px solid #eeeeee;
display: flex;
flex-direction: column;
} }
.pricing-plan__button { .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;
text-align: center;
} }
.pricing-plan__button:hover{ .pricing-plan__button:hover{
background: #009578;
color: #ffffff;
} }
.pricing-plan__cost{ .pricing-plan__cost{