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

pricing plan css styled done

This commit is contained in:
Priyatham Sai Chand 2021-03-01 22:53:13 +05:30
parent 102f0f92b1
commit 50469e0ec0
1 changed files with 74 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
src/components/PricingPlan.js
View File

@ -1,8 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import '../pricing-plan.css';
import NavBar from './NavBar'; import NavBar from './NavBar';
import Footer from './Footer'; import Footer from './Footer';
import styles from 'styled-components'; import styled from 'styled-components';
const WhiteContainer = styled.div` const WhiteContainer = styled.div`
background: white; background: white;
@ -16,8 +15,7 @@ const PricingPlanContainer = styled.div`
padding: 10px; padding: 10px;
`; `;
const PricingPlan = styled.section` const Pricing = styled.section`
background: white; background: white;
width:300px; width:300px;
border-radius: 25px; border-radius: 25px;
@ -91,13 +89,12 @@ const Description = styled.div`
padding: 25px; padding: 25px;
`; `;
const List = styled.ul ` const List = styled.ul`
padding: 0; padding: 0;
margin: 0; margin: 0;
text-align: left; text-align: left;
`; `;
const Feature = styled.li` const Feature = styled.li`
list-style: none;
margin: 0; margin: 0;
padding-left: 25px; padding-left: 25px;
position: relative; position: relative;
@ -148,86 +145,88 @@ const Button = styled.a`
`; `;
class PricingPlan extends Component { class PricingPlan extends Component {
render(){ render() {
return( return (
<div className="body"> <div className="body">
<NavBar /> <NavBar />
<br /> <br />
<br /> <br />
<br /> <br />
<h1 style={{'color':'#66bfbf','margin-left':'20px'}}>Pricing Plan</h1> <h1 style={{ 'color': '#66bfbf', 'margin-left': '20px' }}>Pricing Plan</h1>
<WhiteContainer> <PricingPlanContainer>
<PricingPlan> <Pricing>
<Header> <Header>
<Title>Basic Package</Title> <Title>Basic Package</Title>
<Summary>For those getting started</Summary> <Summary>For those getting started</Summary>
</Header> </Header>
<Description> <Description>
<ul class='pricing-plan__list'> <List>
<li class='pricing-plan__feature'>Feature #1</li> <Feature>Feature #1</Feature>
<li class='pricing-plan__feature'>Feature #2</li> <Feature>Feature #2</Feature>
<li class='pricing-plan__feature'>Feature #3</li> <Feature>Feature #3</Feature>
<li class='pricing-plan__feature'>Feature #4</li> <Feature>Feature #4</Feature>
</ul> </List>
</Description> </Description>
< div class='pricing-plan__actions'> <Actions>
<p class='pricing-plan__cost'>$10</p> <Currency>$10</Currency>
<p class='pricing-plan__text'>per month</p> <Text>per month</Text>
<p class='pricing-plan__text'>Minimum spend over 12 months</p> <Text>Minimum sped over 12 months</Text>
</div> </Actions>
</section> </Pricing>
<section class='pricing-plan pricing-plan--highlighted'> <Pricing>
<div class='pricing-plan__special-text'>Recommended</div> <SpecialText>Recommended</SpecialText>
<div class='pricing-plan__header'> <Header>
<h1 class='pricing-plan__title'>Intermediate Package</h1>
<h2 class='pricing-plan__summary'>For those getting started</h2>
</div> <Title>Intermediate Package</Title>
<div class='pricing-plan__desc'> <Summary>For those getting started</Summary>
<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>
<p class='pricing-plan__text'>Minimum spend over 12 months</p>
</div> </Header>
</section> <Description>
<section class='pricing-plan '> <List>
<div class='pricing-plan__header'> <Feature>Feature #1</Feature>
<h1 class='pricing-plan__title'>Luxury Package</h1> <Feature>Feature #2</Feature>
<h2 class='pricing-plan__summary'>For those getting started</h2> <Feature>Feature #3</Feature>
<Feature>Feature #4</Feature>
</List>
</Description>
<Actions>
<Currency>$50</Currency>
<Text>per month</Text>
<Text>Minimum spend over 12 months</Text>
</div> </Actions>
<div class='pricing-plan__desc'> </Pricing>
<ul class='pricing-plan__list'> <Pricing>
<li class='pricing-plan__feature'>Feature #1</li> <Header>
<li class='pricing-plan__feature'>Feature #2</li> <Title>Luxury Package</Title>
<li class='pricing-plan__feature'>Serv</li> <Summary>For those getting started</Summary>
<li class='pricing-plan__feature'>Feng shu consultancy free</li>
</ul>
</div>
< div class='pricing-plan__actions'>
<p class='pricing-plan__cost'>$100</p>
<p class='pricing-plan__text'>per month</p>
<p class='pricing-plan__text'>Minimum spend over 12 months</p>
</div> </Header>
</section> <Description>
<List>
<Feature>Feature #1</Feature>
<Feature>Feature #2</Feature>
<Feature>Feature #3</Feature>
<Feature>Feature #4</Feature>
</List>
</Description>
<Actions>
<Currency>$100</Currency>
<Text>per month</Text>
<Text>Minimum spend over 12 months</Text>
</Actions>
</Pricing>
</div> </PricingPlanContainer>
<a href='./' class='pricing-plan__button'>Purchase</a> <Button>Purchase</Button>
<Footer /> <Footer />