Skip to content

Commit 7d6c70e

Browse files
kfoolablekfoolable
committed
Finished accordion component
1 parent d41ce26 commit 7d6c70e

File tree

1 file changed

+232
-0
lines changed

1 file changed

+232
-0
lines changed

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

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link
7+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
8+
rel="stylesheet"
9+
/>
10+
11+
<title>Accordion Component</title>
12+
13+
<style>
14+
/*
15+
SPACING SYSTEM (px)
16+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
17+
18+
FONT SIZE SYSTEM (px)
19+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
20+
*/
21+
22+
/*
23+
MAIN-COLOR: #087f5b
24+
GREY-COLOR: #343a40
25+
*/
26+
27+
* {
28+
margin: 0;
29+
padding: 0;
30+
box-sizing: border-box;
31+
}
32+
33+
/* ------------------------ */
34+
/* GENERAL STYLES */
35+
/* ------------------------ */
36+
body {
37+
font-family: "Inter", sans-serif;
38+
color: #343a40;
39+
line-height: 1;
40+
}
41+
42+
.accordion {
43+
width: 700px;
44+
margin: 100px auto;
45+
46+
display: flex;
47+
flex-direction: column;
48+
gap: 24px;
49+
}
50+
51+
.item {
52+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
53+
padding: 24px;
54+
55+
display: grid;
56+
grid-template-columns: auto 1fr auto;
57+
column-gap: 24px;
58+
row-gap: 32px;
59+
align-items: center;
60+
}
61+
62+
.number,
63+
.text {
64+
font-size: 24px;
65+
font-weight: 500;
66+
/* color: #087f5b; */
67+
}
68+
69+
.number {
70+
color: #ced4da;
71+
}
72+
73+
.icon {
74+
width: 24px;
75+
height: 24px;
76+
stroke: #087f5b;
77+
}
78+
79+
.hidden-box {
80+
grid-column: 2;
81+
display: none;
82+
}
83+
84+
.hidden-box p {
85+
line-height: 1.6;
86+
margin-bottom: 24px;
87+
}
88+
89+
.hidden-box ul {
90+
color: #868e96;
91+
margin-left: 20px;
92+
display: flex;
93+
flex-direction: column;
94+
gap: 12px;
95+
}
96+
97+
/* OPEN STATE */
98+
.open {
99+
border-top: 4px solid #087f5b;
100+
}
101+
102+
.open .hidden-box {
103+
display: block;
104+
}
105+
106+
.open .number,
107+
.open .text {
108+
color: #087f5b;
109+
}
110+
</style>
111+
</head>
112+
<body>
113+
<div class="accordion">
114+
<div class="item">
115+
<p class="number">01</p>
116+
<p class="text">Where are these chairs assembled?</p>
117+
<svg
118+
xmlns="http://www.w3.org/2000/svg"
119+
fill="none"
120+
viewBox="0 0 24 24"
121+
stroke-width="1.5"
122+
stroke="currentColor"
123+
class="icon"
124+
>
125+
<path
126+
stroke-linecap="round"
127+
stroke-linejoin="round"
128+
d="m19.5 8.25-7.5 7.5-7.5-7.5"
129+
/>
130+
</svg>
131+
132+
<div class="hidden-box">
133+
<p>
134+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel quam
135+
amet eos recusandae tempore accusamus. Facere labore saepe nam
136+
quidem nisi placeat nulla deleniti deserunt aspernatur voluptas.
137+
Iste, quis veniam.
138+
</p>
139+
<ul>
140+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
141+
<li>
142+
Est nam ut molestias sit quisquam similique, enim quasi,
143+
veritatis.
144+
</li>
145+
<li>
146+
Laudantium sunt reiciendis doloribus eaque quam unde ullam aut in.
147+
</li>
148+
<li>Illo dolores asperiores beatae dolorem et ut quisquam.</li>
149+
</ul>
150+
</div>
151+
</div>
152+
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.25-7.5 7.5-7.5-7.5"
168+
/>
169+
</svg>
170+
171+
<div class="hidden-box">
172+
<p>
173+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel quam
174+
amet eos recusandae tempore accusamus. Facere labore saepe nam
175+
quidem nisi placeat nulla deleniti deserunt aspernatur voluptas.
176+
Iste, quis veniam.
177+
</p>
178+
<ul>
179+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
180+
<li>
181+
Est nam ut molestias sit quisquam similique, enim quasi,
182+
veritatis.
183+
</li>
184+
<li>
185+
Laudantium sunt reiciendis doloribus eaque quam unde ullam aut in.
186+
</li>
187+
<li>Illo dolores asperiores beatae dolorem et ut quisquam.</li>
188+
</ul>
189+
</div>
190+
</div>
191+
192+
<div class="item">
193+
<p class="number">03</p>
194+
<p class="text">Do you ship to counties outside the EU?</p>
195+
<svg
196+
xmlns="http://www.w3.org/2000/svg"
197+
fill="none"
198+
viewBox="0 0 24 24"
199+
stroke-width="1.5"
200+
stroke="currentColor"
201+
class="icon"
202+
>
203+
<path
204+
stroke-linecap="round"
205+
stroke-linejoin="round"
206+
d="m19.5 8.25-7.5 7.5-7.5-7.5"
207+
/>
208+
</svg>
209+
210+
<div class="hidden-box">
211+
<p>
212+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Vel quam
213+
amet eos recusandae tempore accusamus. Facere labore saepe nam
214+
quidem nisi placeat nulla deleniti deserunt aspernatur voluptas.
215+
Iste, quis veniam.
216+
</p>
217+
<ul>
218+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
219+
<li>
220+
Est nam ut molestias sit quisquam similique, enim quasi,
221+
veritatis.
222+
</li>
223+
<li>
224+
Laudantium sunt reiciendis doloribus eaque quam unde ullam aut in.
225+
</li>
226+
<li>Illo dolores asperiores beatae dolorem et ut quisquam.</li>
227+
</ul>
228+
</div>
229+
</div>
230+
</div>
231+
</body>
232+
</html>

0 commit comments

Comments
 (0)