Skip to content

Commit cf1dfaa

Browse files
张欧文张欧文
张欧文
authored and
张欧文
committed
building accordion
1 parent caf0259 commit cf1dfaa

File tree

1 file changed

+286
-0
lines changed

1 file changed

+286
-0
lines changed

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

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
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+
<title>Accordion Component</title>
8+
<link rel="preconnect" href="https://fonts.googleapis.com" />
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10+
<link
11+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
12+
rel="stylesheet"
13+
/>
14+
15+
<style>
16+
/*
17+
SPACING SYSTEM (px)
18+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
19+
20+
FONT SIZE SYSTEM (px)
21+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
22+
*/
23+
24+
/*
25+
Main color: #087f5b
26+
Gray: #343a40
27+
28+
29+
*/
30+
* {
31+
margin: 0;
32+
padding: 0;
33+
box-sizing: border-box;
34+
}
35+
36+
/* ------------------------ */
37+
/* GENERAL STYLES */
38+
/* ------------------------ */
39+
body {
40+
font-family: "Inter", sans-serif;
41+
color: #343a40;
42+
line-height: 1;
43+
}
44+
45+
.accordion {
46+
width: 700px;
47+
margin: 100px auto;
48+
/* background-color: #343a40; */
49+
display: flex;
50+
flex-direction: column;
51+
gap: 24px
52+
}
53+
54+
.item{
55+
/* border-top: 8px solid #087f5b; */
56+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
57+
padding: 24px;
58+
59+
display: grid;
60+
grid-template-columns: auto 1fr auto;
61+
column-gap: 24px;
62+
row-gap: 32px;
63+
align-items: center;
64+
}
65+
.number, .text {
66+
font-size: 24px;
67+
font-weight: 500;
68+
/* color: #087f5b; */
69+
}
70+
71+
.number {
72+
color: #ced4da
73+
}
74+
75+
.icon {
76+
width: 24px;
77+
height: 24px;
78+
stroke: #087f5b;
79+
}
80+
81+
.hidden-box {
82+
grid-column: 2;
83+
display: none;
84+
}
85+
.hidden-box p{
86+
line-height: 1.6;
87+
margin-bottom: 24px;
88+
89+
}
90+
91+
.hidden-box ul{
92+
color:#868e96;
93+
margin-left: 18px;
94+
display: flex;
95+
flex-direction: column;
96+
gap: 12px;
97+
}
98+
99+
.open {
100+
border-top: 4px solid #087f5b;
101+
102+
103+
}
104+
105+
.open .hidden-box {
106+
display: block;
107+
}
108+
109+
.open .number {
110+
color:#087f5b
111+
}
112+
113+
.open .text {
114+
color:#087f5b
115+
}
116+
/* .hidden-box li{
117+
margin-bit: 18px;
118+
} */
119+
</style>
120+
</head>
121+
<body>
122+
<div class="accordion">
123+
<div class="item">
124+
<p class="number">01</p>
125+
<p class="text">Where are these chairs assembled?</p>
126+
<svg
127+
xmlns="http://www.w3.org/2000/svg"
128+
fill="none"
129+
viewBox="0 0 24 24"
130+
stroke-width="1.5"
131+
stroke="currentColor"
132+
class="icon"
133+
>
134+
<path
135+
stroke-linecap="round"
136+
stroke-linejoin="round"
137+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
138+
/>
139+
</svg>
140+
141+
<div class="hidden-box">
142+
<p>
143+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At
144+
doloribus, quo impedit ipsum voluptatem, velit fugit nesciunt veniam
145+
molestias sint culpa rem. Delectus impedit quas aut voluptas
146+
repudiandae autem debitis?
147+
</p>
148+
<ul>
149+
<li>Ab provident exercitationem eius sint dolore.</li>
150+
<li>Corrupti id, dolores libero cum veniam magnam.</li>
151+
<li>Enecessitaas consectetur, sit illo.</li>
152+
<li>tibus doloribus assumenda eius qu</li>
153+
</ul>
154+
</div>
155+
</div>
156+
<div class="item open">
157+
<p class="number">02</p>
158+
<p class="text">How long do I have to return my chari?</p>
159+
<svg
160+
xmlns="http://www.w3.org/2000/svg"
161+
fill="none"
162+
viewBox="0 0 24 24"
163+
stroke-width="1.5"
164+
stroke="currentColor"
165+
class="icon"
166+
>
167+
<path
168+
stroke-linecap="round"
169+
stroke-linejoin="round"
170+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
171+
/>
172+
</svg>
173+
174+
<div class="hidden-box">
175+
<p>
176+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At
177+
doloribus, quo impedit ipsum voluptatem, velit fugit nesciunt veniam
178+
molestias sint culpa rem. Delectus impedit quas aut voluptas
179+
repudiandae autem debitis?
180+
</p>
181+
<ul>
182+
<li>Ab provident exercitationem eius sint dolore.</li>
183+
<li>Corrupti id, dolores libero cum veniam magnam.</li>
184+
<li>Enecessitaas consectetur, sit illo.</li>
185+
<li>tibus doloribus assumenda eius qu</li>
186+
</ul>
187+
</div>
188+
</div>
189+
<div class="item">
190+
<p class="number">03</p>
191+
<p class="text">Do you ship to countries outside the EU?</p>
192+
<svg
193+
xmlns="http://www.w3.org/2000/svg"
194+
fill="none"
195+
viewBox="0 0 24 24"
196+
stroke-width="1.5"
197+
stroke="currentColor"
198+
class="icon"
199+
>
200+
<path
201+
stroke-linecap="round"
202+
stroke-linejoin="round"
203+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
204+
/>
205+
</svg>
206+
207+
<div class="hidden-box">
208+
<p>
209+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At
210+
doloribus, quo impedit ipsum voluptatem, velit fugit nesciunt veniam
211+
molestias sint culpa rem. Delectus impedit quas aut voluptas
212+
repudiandae autem debitis?
213+
</p>
214+
<ul>
215+
<li>Ab provident exercitationem eius sint dolore.</li>
216+
<li>Corrupti id, dolores libero cum veniam magnam.</li>
217+
<li>Enecessitaas consectetur, sit illo.</li>
218+
<li>tibus doloribus assumenda eius qu</li>
219+
</ul>
220+
</div>
221+
</div>
222+
<!-- <div class="item">
223+
<p class="number">02</p>
224+
<p class="text">How long do I have to return my chari?</p>
225+
<svg
226+
xmlns="http://www.w3.org/2000/svg"
227+
fill="none"
228+
viewBox="0 0 24 24"
229+
stroke-width="1.5"
230+
stroke="currentColor"
231+
class="icon"
232+
>
233+
<path
234+
stroke-linecap="round"
235+
stroke-linejoin="round"
236+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
237+
/>
238+
</svg>
239+
240+
<div class="hidden-box">
241+
<p>
242+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At
243+
doloribus, quo impedit ipsum voluptatem, velit fugit nesciunt veniam
244+
molestias sint culpa rem. Delectus impedit quas aut voluptas
245+
repudiandae autem debitis?
246+
</p>
247+
<ul>
248+
<li>Ab provident exercitationem eius sint dolore.</li>
249+
<li>Corrupti id, dolores libero cum veniam magnam.</li>
250+
<li>Enecessitaas consectetur, sit illo.</li>
251+
<li>tibus doloribus assumenda eius qu</li>
252+
</ul></div>
253+
<div class="item">
254+
<p class="number">03</p>
255+
<p class="text">How long do I have to return my chari?</p>
256+
<svg
257+
xmlns="http://www.w3.org/2000/svg"
258+
fill="none"
259+
viewBox="0 0 24 24"
260+
stroke-width="1.5"
261+
stroke="currentColor"
262+
class="icon"
263+
>
264+
<path
265+
stroke-linecap="round"
266+
stroke-linejoin="round"
267+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
268+
/>
269+
</svg>
270+
271+
<div class="hidden-box">
272+
<p>
273+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. At
274+
doloribus, quo impedit ipsum voluptatem, velit fugit nesciunt veniam
275+
molestias sint culpa rem. Delectus impedit quas aut voluptas
276+
repudiandae autem debitis?
277+
</p>
278+
<ul>
279+
<li>Ab provident exercitationem eius sint dolore.</li>
280+
<li>Corrupti id, dolores libero cum veniam magnam.</li>
281+
<li>Enecessitaas consectetur, sit illo.</li>
282+
<li>tibus doloribus assumenda eius qu</li>
283+
</ul></div>
284+
</div> -->
285+
</body>
286+
</html>

0 commit comments

Comments
 (0)