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 f5353d0

Browse files
author
visualdennis
committed
qr order components faq anim
1 parent 960ec2b commit f5353d0

33 files changed

+889
-66
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css">
1414

1515
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16-
<title>React App</title>
16+
<title>MasterFrontend</title>
1717
</head>
1818
<body>
1919
<noscript>You need to enable JavaScript to run this app.</noscript>

‎src/App.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import Pages from './pages/Pages';
1313
import ParfumCard from './components/newbie/parfumCard/ParfumCard';
1414
import Faq from './components/newbie/Faq/Faq';
1515
import FourCards from './components/newbie/FourCards/FourCards';
16+
import Qr from './components/newbie/QR/Qr';
17+
import OrderSummary from './components/newbie/OrderSummary/OrderSummary';
1618

1719
const App = () => {
1820

@@ -34,6 +36,8 @@ AOS.init({
3436
<Route path='/components/perfume-card' element={<ParfumCard></ParfumCard>}/>
3537
<Route path='/components/faq' element={<Faq></Faq>}/>
3638
<Route path='/components/four-cards' element={<FourCards></FourCards>}/>
39+
<Route path='/components/qr' element={<Qr></Qr>}/>
40+
<Route path='/components/order-summary' element={<OrderSummary></OrderSummary>}/>
3741

3842
{/* Pages */}
3943
<Route path='/pages' element={<Pages></Pages>}/>

‎src/components/data.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,4 +44,22 @@ export const componentCardData = [
4444
type: "component",
4545
link:"/components/four-cards",
4646
},
47+
{
48+
id:"6",
49+
title: "QR code component",
50+
desc: "Minimal yet clean QR card with CSS Flexbox",
51+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/qh97gysgjrzqyqlig2al.jpg",
52+
category:"newbie",
53+
type: "component",
54+
link:"/components/qr",
55+
},
56+
{
57+
id:"7",
58+
title: "Order summary component",
59+
desc: "Playful order card feature preview built with CSS Flexbox",
60+
img: "https://res.cloudinary.com/dz209s6jk/image/upload/f_auto,q_auto,w_700/Challenges/ouobx6tvyduidzio7wr7.jpg",
61+
category:"newbie",
62+
type: "component",
63+
link:"/components/order-summary",
64+
},
4765
]

‎src/components/newbie/Faq/Faq.css‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
hsl(273, 75%, 66%),
2929
hsl(240, 73%, 65%)
3030
);
31-
padding-top: 40px;
31+
padding-top: 80px;
3232
background-color: rgba(0, 0, 0, 0);
3333
}
3434

@@ -91,13 +91,18 @@
9191

9292
.faq-accordion-question-button:after {
9393
content: url('../Faq/assets/faq-accordion-card-main/images/icon-arrow-down.svg');
94+
transition: all 0.2s ease-in-out;
9495
}
9596

9697
.faq-accordion-question-button-active {
9798
font-weight: 700;
9899
color: hsl(238, 29%, 16%);
99100
}
100101

102+
.faq-accordion-question-button-active:after {
103+
transform: rotate(180deg);
104+
}
105+
101106
.faq-accordion-question-button-active:hover {
102107
color: hsl(238, 29%, 16%);
103108
}
@@ -130,12 +135,24 @@
130135

131136
.faq-accordion-container:before {
132137
content: url(' ../Faq/assets/faq-accordion-card-main/images/illustration-box-desktop.svg');
133-
top: 66%;
138+
top: 60%;
134139
left: 3.5%;
135140
transform: translate(-50%, -55%);
136141
width: 140px;
137142
height: 190px;
143+
animation: dropbox 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
138144
}
145+
146+
@keyframes dropbox {
147+
from {
148+
top: 15%;
149+
opacity: 0;
150+
}
151+
to {
152+
top: 60%;
153+
}
154+
}
155+
139156
.faq-accordion-content {
140157
padding-top: 40px;
141158
width: 50%;

‎src/components/newbie/Faq/Faq.jsx‎

Lines changed: 53 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,75 @@
11
import React from 'react'
22
import './Faq.css'
3-
import woman from '../Faq/assets/faq-accordion-card-main/images/illustration-woman-online-desktop.svg'
4-
import arrow from '../Faq/assets/faq-accordion-card-main/images/icon-arrow-down.svg'
5-
import box from '../Faq/assets/faq-accordion-card-main/images/illustration-box-desktop.svg'
63

74
const Faq = () => {
85

9-
106
const handleToggle = (e) => {
117

12-
// // reset
138
const question = e.target
149
const answer = e.target.nextSibling
1510

16-
const openQuestions = document.querySelectorAll('.faq-accordion-answer-active')
17-
if(openQuestions) {
18-
openQuestions.forEach(item =>
19-
{ console.log(item)
20-
console.log(question);;
21-
item.classList.remove('faq-accordion-answer-active')
22-
console.log('1');
23-
})
24-
}
25-
26-
const openBtn = document.querySelectorAll('.faq-accordion-question-button-active')
27-
if(openBtn) {
28-
openBtn.forEach(btn =>
29-
{
30-
btn.classList.remove('faq-accordion-question-button-active')
31-
})
32-
}
33-
console.log('2');
3411
if(question.classList.contains('faq-accordion-question-button-active')) {
35-
console.log('yez');
36-
}
37-
question.classList.add('faq-accordion-question-button-active')
38-
console.log('3');
39-
// question.classList.toggle('faq-accordion-question-button-active')
40-
41-
answer.classList.toggle('faq-accordion-answer-active')
12+
question.classList.remove('faq-accordion-question-button-active')
13+
answer.classList.remove('faq-accordion-answer-active')
14+
} else {
15+
// // reset
16+
const openQuestions = document.querySelectorAll('.faq-accordion-answer-active')
17+
const openBtn = document.querySelectorAll('.faq-accordion-question-button-active')
18+
openQuestions?.forEach(item => item.classList.remove('faq-accordion-answer-active'))
19+
openBtn?.forEach(btn => btn.classList.remove('faq-accordion-question-button-active'))
4220

21+
question.classList.add('faq-accordion-question-button-active')
22+
answer.classList.toggle('faq-accordion-answer-active')
23+
}
4324
}
4425

26+
const data = [
27+
{
28+
id: 1,
29+
question: "How many team members can I invite?",
30+
answer: "You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.",
31+
},
32+
{
33+
id: 2,
34+
question: "What is the maximum file upload size?",
35+
answer: "No more than 2GB. All files in your account must fit your allotted storage space.",
36+
},
37+
{
38+
id: 3,
39+
question: " How do I reset my password?",
40+
answer: "Click "Forgot password" from the login page or "Change password" from your profile page. A reset link will be emailed to you.",
41+
},
42+
{
43+
id: 4,
44+
question: "Can I cancel my subscription?",
45+
answer: "Yes! Send us a message and we’ll process your request no questions asked.",
46+
},
47+
{
48+
id: 5,
49+
question: "Do you provide additional support?",
50+
answer: " Chat and email support is available 24/7. Phone lines are open during normal business hours.",
51+
},
52+
]
53+
4554
return (
4655
<div className='faq-accordion df'>
47-
<div className="faq-accordion-container">
56+
<div className="faq-accordion-container"
57+
data-aos="fade-in" data-aos-delay="250" data-aos-duration="500"
58+
>
4859
<div className="faq-accordion-content">
4960
<h1 className="faq-accordion-title">FAQ</h1>
50-
<div className="faq-accordion-question">
51-
<button className="faq-accordion-question-button" onClick={handleToggle}> How many team members can I invite?</button>
52-
<div className="faq-accordion-answer">
53-
<p> You can invite up to 2 additional users on the Free plan. There is no limit on
54-
team members for the Premium plan.</p>
55-
</div>
56-
</div>
57-
<div className="faq-accordion-question">
58-
<button className="faq-accordion-question-button" onClick={handleToggle}> What is the maximum file upload size?</button>
59-
<div className="faq-accordion-answer">
60-
<p>No more than 2GB. All files in your account must fit your allotted storage space.</p>
61-
</div>
62-
</div>
63-
<div className="faq-accordion-question">
64-
<button className="faq-accordion-question-button" onClick={handleToggle}> How do I reset my password?</button>
65-
<div className="faq-accordion-answer">
66-
<p> Click "Forgot password" from the login page or "Change password" from your profile page.
67-
A reset link will be emailed to you.</p>
68-
</div>
69-
</div>
70-
<div className="faq-accordion-question">
71-
<button className="faq-accordion-question-button" onClick={handleToggle}> Can I cancel my subscription?</button>
72-
<div className="faq-accordion-answer">
73-
<p> Yes! Send us a message and we’ll process your request no questions asked.</p>
74-
</div>
75-
</div>
76-
<div className="faq-accordion-question">
77-
<button className="faq-accordion-question-button" onClick={handleToggle}>Do you provide additional support?</button>
78-
<div className="faq-accordion-answer">
79-
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
80-
</div>
81-
</div>
8261

62+
{data.map((item)=>(
63+
<div className="faq-accordion-question" key={item.id}>
64+
<button className="faq-accordion-question-button"
65+
onClick={handleToggle}> {item.question}
66+
</button>
67+
<div className="faq-accordion-answer">
68+
<p> {item.answer}</p>
69+
</div>
70+
</div>
71+
))}
72+
8373
</div>
8474
</div>
8575
</div>
Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:wght@500;700;900&display=swap');
2+
3+
.orderSummary {
4+
min-height: 100vh;
5+
background: url('../OrderSummary/assets/order-summary-component-main/images/pattern-background-desktop.svg')
6+
no-repeat;
7+
background-color: hsl(225, 100%, 94%);
8+
background-size: contain;
9+
font-size: 16px;
10+
font-family: 'Red Hat Display', sans-serif;
11+
padding: 25px;
12+
}
13+
14+
.orderSummary-container {
15+
display: flex;
16+
flex-direction: column;
17+
width: 325px;
18+
background: white;
19+
border-radius: 20px;
20+
overflow: hidden;
21+
}
22+
23+
.orderSummary-text-content {
24+
padding: 30px 25px 15px 25px;
25+
display: flex;
26+
flex-direction: column;
27+
align-items: center;
28+
text-align: center;
29+
}
30+
31+
.orderSummary-title {
32+
font-weight: 900;
33+
font-size: 1.5em;
34+
color: hsl(223, 47%, 23%);
35+
margin-bottom: 20px;
36+
}
37+
38+
.orderSummary-desc {
39+
font-size: 1em;
40+
color: hsl(224, 23%, 55%);
41+
line-height: 1.6;
42+
width: 95%;
43+
text-align: center;
44+
margin-bottom: 25px;
45+
}
46+
.orderSummary-plan {
47+
display: flex;
48+
justify-content: space-between;
49+
align-items: center;
50+
background: hsl(225, 100%, 98%);
51+
padding: 15px;
52+
width: 100%;
53+
border-radius: 10px;
54+
margin-bottom: 25px;
55+
text-align: left;
56+
}
57+
58+
.orderSummary-plan-icon {
59+
}
60+
.orderSummary-plan-info {
61+
/* font-size: 0.9em; */
62+
margin-left: -40px;
63+
}
64+
65+
.orderSummary-plan-info > p:first-of-type {
66+
color: hsl(223, 47%, 23%);
67+
font-weight: 900;
68+
margin-bottom: 3px;
69+
font-size: 0.85em;
70+
}
71+
.orderSummary-plan-info > p:last-of-type {
72+
font-weight: 500;
73+
color: hsl(224, 23%, 55%);
74+
font-size: 0.85em;
75+
}
76+
77+
.orderSummary-plan-link {
78+
font-size: 0.8em;
79+
color: hsl(245, 75%, 52%);
80+
transition: color 0.4s ease;
81+
}
82+
83+
.orderSummary-plan-link:hover {
84+
color: hsl(242, 84%, 67%);
85+
}
86+
.orderSummary-cta {
87+
padding: 15px 0px;
88+
width: 100%;
89+
font-weight: 700;
90+
border: none;
91+
border-radius: 10px;
92+
font-size: 0.9em;
93+
cursor: pointer;
94+
transition: all 0.4s ease;
95+
}
96+
.orderSummary-cta:first-of-type {
97+
width: 100%;
98+
color: white;
99+
background: hsl(245, 75%, 52%);
100+
margin-bottom: 10px;
101+
box-shadow: 5px 20px 20px hsla(245, 75%, 52%, 0.208);
102+
}
103+
104+
.orderSummary-cta:first-of-type:hover {
105+
background: hsl(242, 84%, 67%);
106+
}
107+
.orderSummary-cta:last-of-type {
108+
width: 100%;
109+
color: hsl(224, 23%, 55%);
110+
background: transparent;
111+
/* border: 1px solid red; */
112+
}
113+
114+
.orderSummary-cta:last-of-type:hover {
115+
color: hsl(223, 47%, 23%);
116+
}
117+
118+
@media only screen and (max-width: 700px) {
119+
.orderSummary {
120+
min-height: 100vh;
121+
background: url('../OrderSummary/assets/order-summary-component-main/images/pattern-background-mobile.svg')
122+
no-repeat;
123+
background-color: hsl(225, 100%, 94%);
124+
background-size: 200%;
125+
font-size: 16px;
126+
font-family: 'Red Hat Display', sans-serif;
127+
}
128+
}

0 commit comments

Comments
(0)

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