Skip to content

Commit 6d56b09

Browse files
haivn-vibhaivn-vib
committed
accordion
1 parent 5e6f83a commit 6d56b09

File tree

1 file changed

+207
-0
lines changed

1 file changed

+207
-0
lines changed

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

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
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+
<base href="." />
8+
<title>Accordion</title>
9+
<style>
10+
/*
11+
SPACING SYSTEM (px)
12+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
13+
14+
FONT SIZE SYSTEM (px)
15+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
16+
*/
17+
18+
/*
19+
Main Color: #087f5b
20+
Grey Color: #212529
21+
*/
22+
* {
23+
margin: 0;
24+
padding: 0;
25+
box-sizing: border-box;
26+
}
27+
28+
body {
29+
font-family: 'Inter', sans-serif;
30+
color: #212529;
31+
width: 720px;
32+
margin: 24px auto;
33+
line-height: 1;
34+
}
35+
36+
.accordion {
37+
display: flex;
38+
flex-direction: column;
39+
gap: 32px;
40+
}
41+
42+
.item {
43+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
44+
padding: 32px;
45+
display: grid;
46+
grid-template-columns: auto 1fr auto;
47+
column-gap: 24px;
48+
row-gap: 32px;
49+
align-items: center;
50+
}
51+
52+
.icon {
53+
width: 24px;
54+
height: 24px;
55+
}
56+
57+
.number,
58+
.text {
59+
font-size: 24px;
60+
font-weight: 500;
61+
}
62+
63+
.number {
64+
color: #adb5bd;
65+
}
66+
67+
.hidden-box {
68+
grid-column: 2/3;
69+
display: none;
70+
}
71+
72+
.hidden-box p {
73+
line-height: 1.6;
74+
margin-bottom: 24px;
75+
}
76+
77+
.hidden-box ul {
78+
color: #868e96;
79+
margin-left: 20px;
80+
display: flex;
81+
flex-direction: column;
82+
gap: 12px;
83+
}
84+
85+
.item--header {
86+
display: flex;
87+
}
88+
89+
.open .hidden-box {
90+
display: block;
91+
}
92+
93+
.open .number,
94+
.open .text,
95+
.open .icon {
96+
color: #087f5b;
97+
}
98+
99+
.item.open {
100+
border-top: 8px solid #087f5b;
101+
}
102+
</style>
103+
</head>
104+
<body>
105+
<div class="accordion">
106+
<div class="item">
107+
<p class="number">02</p>
108+
<p class="text">Where are these chair assembled?</p>
109+
<svg
110+
xmlns="http://www.w3.org/2000/svg"
111+
fill="none"
112+
viewBox="0 0 24 24"
113+
stroke-width="1.5"
114+
stroke="currentColor"
115+
class="icon"
116+
>
117+
<path
118+
stroke-linecap="round"
119+
stroke-linejoin="round"
120+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
121+
/>
122+
</svg>
123+
<div class="hidden-box">
124+
<p>
125+
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
126+
Necessitatibus tempore expedita odit nam mollitia! Commodi,
127+
consectetur eligendi, nam dolorem, fuga ex blanditiis unde optio
128+
tempore quasi eius eveniet alias et.
129+
</p>
130+
<ul>
131+
<li>Necessitatibus tempore expedita odit nam mollitia</li>
132+
<li>Commodi, consectetur eligendi, nam dolorem</li>
133+
<li>
134+
Fuga ex blanditiis unde optio tempore quasi eius eveniet alias et
135+
</li>
136+
</ul>
137+
</div>
138+
</div>
139+
<div class="item open">
140+
<p class="number">02</p>
141+
<p class="text">How long do I have to return my chair?</p>
142+
<svg
143+
xmlns="http://www.w3.org/2000/svg"
144+
fill="none"
145+
viewBox="0 0 24 24"
146+
stroke-width="1.5"
147+
stroke="currentColor"
148+
class="icon"
149+
>
150+
<path
151+
stroke-linecap="round"
152+
stroke-linejoin="round"
153+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
154+
/>
155+
</svg>
156+
<div class="hidden-box">
157+
<p>
158+
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
159+
Necessitatibus tempore expedita odit nam mollitia! Commodi,
160+
consectetur eligendi, nam dolorem, fuga ex blanditiis unde optio
161+
tempore quasi eius eveniet alias et.
162+
</p>
163+
<ul>
164+
<li>Necessitatibus tempore expedita odit nam mollitia</li>
165+
<li>Commodi, consectetur eligendi, nam dolorem</li>
166+
<li>
167+
Fuga ex blanditiis unde optio tempore quasi eius eveniet alias et
168+
</li>
169+
</ul>
170+
</div>
171+
</div>
172+
<div class="item">
173+
<p class="number">02</p>
174+
<p class="text">Do you ship to countries outside the EU?</p>
175+
<svg
176+
xmlns="http://www.w3.org/2000/svg"
177+
fill="none"
178+
viewBox="0 0 24 24"
179+
stroke-width="1.5"
180+
stroke="currentColor"
181+
class="icon"
182+
>
183+
<path
184+
stroke-linecap="round"
185+
stroke-linejoin="round"
186+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
187+
/>
188+
</svg>
189+
<div class="hidden-box">
190+
<p>
191+
Lorem ipsum dolor sit amet consectetur, adipisicing elit.
192+
Necessitatibus tempore expedita odit nam mollitia! Commodi,
193+
consectetur eligendi, nam dolorem, fuga ex blanditiis unde optio
194+
tempore quasi eius eveniet alias et.
195+
</p>
196+
<ul>
197+
<li>Necessitatibus tempore expedita odit nam mollitia</li>
198+
<li>Commodi, consectetur eligendi, nam dolorem</li>
199+
<li>
200+
Fuga ex blanditiis unde optio tempore quasi eius eveniet alias et
201+
</li>
202+
</ul>
203+
</div>
204+
</div>
205+
</div>
206+
</body>
207+
</html>

0 commit comments

Comments
 (0)