Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit b1f8ce3

Browse files
author
visualdennis
committed
pricing toggle
1 parent 4d024fe commit b1f8ce3

File tree

19 files changed

+657
-1
lines changed

19 files changed

+657
-1
lines changed

‎src/App.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import NewsHome from './components/junior/newsHome/NewsHome';
2020
import GithubUser from './components/junior/githubUser/GithubUser';
2121
import Error from './Error';
2222
import ExpChart from './components/junior/ExpChart/ExpChart';
23+
import Pricing from './components/junior/priceColumns/Pricing';
2324

2425
const App = () => {
2526

@@ -47,12 +48,13 @@ AOS.init({
4748
<Route path='/components/news-homepage' element={<NewsHome></NewsHome>}/>
4849
<Route path='/components/github-user' element={<GithubUser></GithubUser>}/>
4950
<Route path='/components/expense-chart' element={<ExpChart></ExpChart>}/>
51+
<Route path='/components/pricing-toggle' element={<Pricing></Pricing>}/>
5052

5153
{/* Pages */}
5254
<Route path='/pages' element={<Pages></Pages>}/>
5355

5456
{/* Working on currently */}
55-
<Route path='/build' element={<ExpChart></ExpChart>}/>
57+
{/* <Route path='/build' element={<Pricing></Pricing>}/> */}
5658
<Route path='*' element={<Error></Error>}></Route>
5759
</Routes>
5860
</Router>

‎src/components/data.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,15 @@ export const componentCardData = [
3535
type: "component",
3636
link:"/components/expense-chart",
3737
},
38+
{
39+
id:"12",
40+
title: "Pricing component with toggle",
41+
desc: "Animated toggle to choose pricing plans",
42+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/Challenges/pzkdrqu0lizrk8qgmiti.jpg",
43+
category:"junior",
44+
type: "component",
45+
link:"/components/pricing-toggle",
46+
},
3847
{
3948
id:"3",
4049
title: "Product preview card",
Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
2+
3+
.pricing {
4+
min-height: 100vh;
5+
font-family: 'Montserrat', sans-serif;
6+
font-size: 15px;
7+
background: url('./assets/pricing-component-with-toggle-master/images/bg-top.svg')
8+
no-repeat top right -12em,
9+
url('./assets/pricing-component-with-toggle-master/images/bg-bottom.svg')
10+
no-repeat bottom left;
11+
background-color: hsl(240, 78%, 98%);
12+
font-weight: 700;
13+
--pricing-transition: all 0.4s ease-in-out;
14+
padding: 25px;
15+
}
16+
17+
.pricing ul {
18+
list-style-type: none;
19+
}
20+
21+
.pricing-container {
22+
/* border: 2px solid green; */
23+
width: 100%;
24+
max-width: 1000px;
25+
/* display: flex;
26+
flex-direction: column;
27+
align-items: center; */
28+
}
29+
30+
/* HEADER */
31+
32+
.pricing-header {
33+
width: 100%;
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
margin-bottom: 40px;
38+
}
39+
40+
.pricing-title {
41+
margin-bottom: 30px;
42+
color: hsl(233, 13%, 49%);
43+
font-size: 1.7em;
44+
}
45+
46+
.pricing-options {
47+
display: flex;
48+
align-items: center;
49+
color: hsl(234, 14%, 74%);
50+
font-size: 0.8em;
51+
}
52+
53+
.pricing-toggle {
54+
width: 56px;
55+
background: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
56+
height: 30px;
57+
border-radius: 15px;
58+
margin: 0px 20px;
59+
position: relative;
60+
cursor: pointer;
61+
transition: all 0.4s ease-in-out;
62+
}
63+
64+
.pricing-toggle:hover {
65+
background: linear-gradient(to right, hsl(236, 72%, 79%), hsl(236, 72%, 79%));
66+
}
67+
68+
.pricing-toggle-circle {
69+
content: '';
70+
position: absolute;
71+
top: 3px;
72+
right: 3px;
73+
width: 24px;
74+
height: 24px;
75+
border-radius: 50%;
76+
background-color: hsl(240, 78%, 98%);
77+
transition: all 0.2s ease-in-out;
78+
}
79+
80+
.pricing-toggle:active .pricing-toggle-circle {
81+
width: 27px;
82+
border-radius: 20px;
83+
}
84+
85+
.pricing-toggle-circle-annual {
86+
transform: translateX(-26px);
87+
}
88+
89+
.pricing-toggle:active .pricing-toggle-circle-annual {
90+
width: 27px;
91+
transform: translateX(-23px);
92+
}
93+
94+
/* CARDS */
95+
96+
.pricing-cards {
97+
/* border: 1px solid; */
98+
display: flex;
99+
align-items: center;
100+
}
101+
102+
.pricing-card {
103+
flex: 1;
104+
padding: 30px;
105+
border-radius: 5px;
106+
display: flex;
107+
flex-direction: column;
108+
align-items: center;
109+
background: white;
110+
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
111+
}
112+
113+
.pricing-plan-name {
114+
margin-bottom: 15px;
115+
color: hsl(233, 13%, 49%);
116+
}
117+
.pricing-price {
118+
color: hsl(232, 13%, 33%);
119+
font-size: 4em;
120+
font-weight: 700;
121+
margin-bottom: 30px;
122+
animation: fade-price 0.4s ease-in;
123+
}
124+
125+
@keyframes fade-price {
126+
from {
127+
transform: translateY(5px);
128+
opacity: 0;
129+
}
130+
to {
131+
transform: translateY(0px);
132+
opacity: 1;
133+
}
134+
}
135+
136+
.pricing-price-animate {
137+
animation: fade-in-price 0.4s ease-in;
138+
}
139+
140+
@keyframes fade-in-price {
141+
from {
142+
transform: translateY(5px);
143+
opacity: 0;
144+
}
145+
to {
146+
transform: translateY(0px);
147+
opacity: 1;
148+
}
149+
}
150+
151+
.pricing-specs {
152+
text-align: center;
153+
border-bottom: 0.7px solid hsl(234, 14%, 74%);
154+
margin-bottom: 30px;
155+
width: 100%;
156+
}
157+
.pricing-spec {
158+
border-top: 0.7px solid hsl(234, 14%, 74%);
159+
padding: 15px;
160+
color: hsl(233, 13%, 49%);
161+
}
162+
.pricing-cta {
163+
width: 100%;
164+
padding: 15px 0px;
165+
border: none;
166+
border-radius: 5px;
167+
font-weight: 700;
168+
text-transform: uppercase;
169+
font-size: 0.9em;
170+
color: white;
171+
background: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
172+
cursor: pointer;
173+
transition: all 0.4s ease;
174+
}
175+
176+
.pricing-cta:hover {
177+
color: hsl(237, 63%, 64%);
178+
background: white;
179+
outline: 1px solid hsl(237, 63%, 64%);
180+
}
181+
182+
/* MIDDLE CARD */
183+
184+
.pricing-card:nth-of-type(2) {
185+
padding: 50px 30px;
186+
background: linear-gradient(to right, hsl(236, 72%, 79%), hsl(237, 63%, 64%));
187+
}
188+
189+
.pricing-card:nth-of-type(2) .pricing-plan-name {
190+
color: white;
191+
}
192+
.pricing-card:nth-of-type(2) .pricing-price {
193+
color: white;
194+
}
195+
.pricing-card:nth-of-type(2) .pricing-specs {
196+
border-bottom: 0.7px solid white;
197+
}
198+
.pricing-card:nth-of-type(2) .pricing-spec {
199+
border-top: 0.7px solid white;
200+
color: white;
201+
}
202+
.pricing-card:nth-of-type(2) .pricing-cta {
203+
color: hsl(237, 63%, 64%);
204+
background: white;
205+
}
206+
207+
.pricing-card:nth-of-type(2) .pricing-cta:hover {
208+
color: white;
209+
background: transparent;
210+
outline: 1px solid white;
211+
}
212+
213+
/* ### Primary
214+
215+
- Linear Gradient: hsl(236, 72%, 79%) to hsl(237, 63%, 64%)
216+
217+
### Neutral
218+
219+
- Very Light Grayish Blue: hsl(240, 78%, 98%)
220+
- Light Grayish Blue: hsl(234, 14%, 74%)
221+
- Grayish Blue: hsl(233, 13%, 49%)
222+
- Dark Grayish Blue: hsl(232, 13%, 33%) */
223+
224+
@media only screen and (max-width: 900px) {
225+
.pricing {
226+
padding: 60px 20px;
227+
}
228+
229+
.pricing-cards {
230+
flex-direction: column;
231+
align-items: center;
232+
padding: 0px 80px;
233+
}
234+
235+
.pricing-card {
236+
width: 100%;
237+
margin-bottom: 40px;
238+
}
239+
240+
.pricing-card:nth-of-type(2) {
241+
padding: 30px;
242+
}
243+
}
244+
245+
@media only screen and (max-width: 650px) {
246+
.pricing-cards {
247+
padding: 0px;
248+
}
249+
}
Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React, {useState} from 'react'
2+
import './Pricing.css'
3+
import {planData} from './data'
4+
5+
const Pricing = () => {
6+
7+
8+
const [isMonthly, setIsMonthly] = useState(true)
9+
10+
const handleClick = () => {
11+
setIsMonthly(!isMonthly)
12+
document.querySelector('.pricing-toggle-circle').classList.toggle('pricing-toggle-circle-annual')
13+
14+
document.querySelectorAll('.pricing-price')
15+
.forEach((price)=>
16+
price.classList.toggle('pricing-price-animate'))
17+
18+
19+
}
20+
21+
return (
22+
<div className="pricing df">
23+
<div className="pricing-container"
24+
data-aos="fade-in"
25+
data-aos-delay="50"
26+
data-aos-duration="1000"
27+
>
28+
<header className="pricing-header">
29+
<h2 className="pricing-title">
30+
Our Pricing
31+
</h2>
32+
<div className="pricing-options">
33+
<p>Annually</p>
34+
<div className="pricing-toggle" onClick={handleClick}>
35+
<div className="pricing-toggle-circle"></div>
36+
</div>
37+
<p>Monthly</p>
38+
</div>
39+
</header>
40+
<ul className="pricing-cards">
41+
{planData.map((plan)=>(
42+
<li className="pricing-card">
43+
<h4 className="pricing-plan-name">
44+
{plan.plan}
45+
</h4>
46+
<div className="pricing-price">
47+
${isMonthly ? plan.monthlyPrice : plan.annualPrice}
48+
</div>
49+
<ul className="pricing-specs">
50+
{plan.specs.map((spec)=>(
51+
52+
<li className="pricing-spec">
53+
{spec}
54+
</li>
55+
)
56+
)}
57+
</ul>
58+
<button className="pricing-cta">
59+
Learn More
60+
</button>
61+
</li>
62+
))}
63+
</ul>
64+
65+
</div>
66+
</div>
67+
)
68+
}
69+
70+
export default Pricing
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Avoid accidental Sketch file upload
2+
###############################################
3+
## Please do not remove line 5 - thanks! 🙂 ##
4+
###############################################
5+
*.sketch
6+
7+
# Avoid accidental XD or Figma upload if you convert the design file
8+
#######################################################
9+
## Please do not remove lines 11 and 12 - thanks! 🙂 ##
10+
#######################################################
11+
*.xd
12+
*.fig
13+
14+
# Avoid your project being littered with annoying .DS_Store files!
15+
.DS_Store

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /