Skip to content

Commit a88b8be

Browse files
SwarajKaranSwarajKaran
committed
Components
1 parent 365c690 commit a88b8be

File tree

6 files changed

+946
-0
lines changed

6 files changed

+946
-0
lines changed

‎starter/06-Components/01-accordian.html

Lines changed: 217 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,217 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
9+
rel="stylesheet"
10+
/>
11+
<title>Accordian Component</title>
12+
<style>
13+
/*
14+
SPACING SYSTEM (px)
15+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
16+
17+
FONT SIZE SYSTEM (px)
18+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
19+
*/
20+
21+
/*
22+
MAIN COLOR: #087f5b
23+
GREY COLOR: #343a40
24+
25+
*/
26+
* {
27+
margin: 0;
28+
padding: 0;
29+
box-sizing: border-box;
30+
}
31+
32+
/* ------------------------ */
33+
/* GENERAL STYLES */
34+
/* ------------------------ */
35+
body {
36+
font-family: "Inter", sans-serif;
37+
color: #343a40;
38+
line-height: 1;
39+
}
40+
.accordian {
41+
width: 700px;
42+
margin: 100px auto;
43+
44+
display: flex;
45+
flex-direction: column;
46+
gap: 24px;
47+
}
48+
.item {
49+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
50+
padding: 24px;
51+
52+
display: grid;
53+
grid-template-columns: auto 1fr auto;
54+
column-gap: 24px;
55+
row-gap: 32px;
56+
align-items: center;
57+
}
58+
.number,
59+
.text {
60+
font-size: 24px;
61+
font-weight: 500;
62+
/* color: #087f5b; */
63+
}
64+
.number {
65+
color: #ced4da;
66+
}
67+
.icon {
68+
width: 24px;
69+
height: 24px;
70+
stroke: #087f5b;
71+
}
72+
.hidden-box {
73+
grid-column: 2;
74+
display: none;
75+
}
76+
.hidden-box p {
77+
line-height: 1.6;
78+
margin-bottom: 24px;
79+
}
80+
.hidden-box ul {
81+
color: #adb5bd;
82+
margin-left: 20px;
83+
}
84+
.hidden-box ul {
85+
display: flex;
86+
/* Switch main to cross axis */
87+
flex-direction: column;
88+
gap: 12px;
89+
}
90+
/* OPEN STATE */
91+
.open {
92+
border-top: 4px solid #087f5b;
93+
}
94+
.open .hidden-box {
95+
display: block;
96+
}
97+
.open .number,
98+
.open .text {
99+
color: #087f5b;
100+
}
101+
/* .hidden-box li {
102+
margin-bottom: 12px;
103+
}
104+
.hidden-box li:last-child {
105+
margin-bottom: 0;
106+
} */
107+
</style>
108+
<script>
109+
// let accordianElements = document.querySelectorAll(".item");
110+
// accordianElements.forEach(function (el) {
111+
// el.addEventListener("click", function () {
112+
// console.log("HI");
113+
// });
114+
// });
115+
// accordian.addEventListener("click", function () {
116+
// console.log("Hey");
117+
// });
118+
</script>
119+
</head>
120+
<body>
121+
<div class="accordian">
122+
<div class="item">
123+
<p class="number">01</p>
124+
<p class="text">Where are these chair assembled?</p>
125+
<svg
126+
xmlns="http://www.w3.org/2000/svg"
127+
fill="none"
128+
viewBox="0 0 24 24"
129+
stroke-width="1.5"
130+
stroke="currentColor"
131+
class="icon"
132+
>
133+
<path
134+
stroke-linecap="round"
135+
stroke-linejoin="round"
136+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
137+
/>
138+
</svg>
139+
<div class="hidden-box">
140+
<p>
141+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti
142+
reiciendis ullam nesciunt dolor reprehenderit tenetur quo quisquam
143+
alias debitis error nulla quasi veritatis quas animi eaque
144+
</p>
145+
<ul>
146+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
147+
<li>Iure placeat commodi eius atque deleniti blanditiis?</li>
148+
<li>Asperiores nisi a inventore molestias.</li>
149+
<li>Quae accusantium autem doloremque porro officiis necess</li>
150+
</ul>
151+
</div>
152+
</div>
153+
<div class="item open">
154+
<p class="number">02</p>
155+
<p class="text">How long do I have to return my chair?</p>
156+
<svg
157+
xmlns="http://www.w3.org/2000/svg"
158+
fill="none"
159+
viewBox="0 0 24 24"
160+
stroke-width="1.5"
161+
stroke="currentColor"
162+
class="icon"
163+
>
164+
<path
165+
stroke-linecap="round"
166+
stroke-linejoin="round"
167+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
168+
/>
169+
</svg>
170+
<div class="hidden-box">
171+
<p>
172+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti
173+
reiciendis ullam nesciunt dolor reprehenderit tenetur quo quisquam
174+
alias debitis error nulla quasi veritatis quas animi eaque
175+
</p>
176+
<ul>
177+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
178+
<li>Iure placeat commodi eius atque deleniti blanditiis?</li>
179+
<li>Asperiores nisi a inventore molestias.</li>
180+
<li>Quae accusantium autem doloremque porro officiis necess</li>
181+
</ul>
182+
</div>
183+
</div>
184+
<div class="item">
185+
<p class="number">03</p>
186+
<p class="text">Do you ship to countries outside EU?</p>
187+
<svg
188+
xmlns="http://www.w3.org/2000/svg"
189+
fill="none"
190+
viewBox="0 0 24 24"
191+
stroke-width="1.5"
192+
stroke="currentColor"
193+
class="icon"
194+
>
195+
<path
196+
stroke-linecap="round"
197+
stroke-linejoin="round"
198+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
199+
/>
200+
</svg>
201+
<div class="hidden-box">
202+
<p>
203+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Deleniti
204+
reiciendis ullam nesciunt dolor reprehenderit tenetur quo quisquam
205+
alias debitis error nulla quasi veritatis quas animi eaque
206+
</p>
207+
<ul>
208+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
209+
<li>Iure placeat commodi eius atque deleniti blanditiis?</li>
210+
<li>Asperiores nisi a inventore molestias.</li>
211+
<li>Quae accusantium autem doloremque porro officiis necess</li>
212+
</ul>
213+
</div>
214+
</div>
215+
</div>
216+
</body>
217+
</html>

0 commit comments

Comments
 (0)