Skip to content

Commit 5d532b2

Browse files
quechauquechau
committed
add intro component and accordion component
1 parent 2f22bec commit 5d532b2

File tree

3 files changed

+343
-125
lines changed

3 files changed

+343
-125
lines changed

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

Lines changed: 0 additions & 125 deletions
This file was deleted.

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

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
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@400;500;700&family=Lato&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+
.icon {
73+
width: 24px;
74+
height: 24px;
75+
stroke: #087f5b;
76+
}
77+
78+
.hidden-box {
79+
grid-column: 2;
80+
display: none;
81+
}
82+
83+
.hidden-box p {
84+
line-height: 1.6;
85+
margin-bottom: 24px;
86+
}
87+
.hidden-box ul {
88+
color: #868e96;
89+
margin-left: 20px;
90+
91+
display: flex;
92+
flex-direction: column;
93+
gap: 12px;
94+
}
95+
96+
.open {
97+
border-top: 4px solid #087f5b;
98+
}
99+
100+
.open .hidden-box {
101+
display: block;
102+
}
103+
104+
.open .number,
105+
.open .text {
106+
color: #087f5b;
107+
}
108+
</style>
109+
</head>
110+
<body>
111+
<div class="accordion">
112+
<div class="item">
113+
<p class="number">0</p>
114+
<p class="text">Where are the chairs assembled?</p>
115+
<svg
116+
xmlns="http://www.w3.org/2000/svg"
117+
fill="none"
118+
viewBox="0 0 24 24"
119+
stroke-width="1.5"
120+
stroke="currentColor"
121+
class="icon"
122+
>
123+
<path
124+
stroke-linecap="round"
125+
stroke-linejoin="round"
126+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
127+
/>
128+
</svg>
129+
<div class="hidden-box">
130+
<p>
131+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
132+
debitis ducimus autem nisi, ipsam, reprehenderit omnis itaque quae
133+
saepe fugit, magnam soluta molestiae cum reiciendis quas eligendi
134+
earum ipsa molestias?
135+
</p>
136+
<ul>
137+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
138+
<li>
139+
Repudiandae natus blanditiis omnis eum, ut labore quam veniam.
140+
</li>
141+
142+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
143+
<li>
144+
Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel.
145+
</li>
146+
</ul>
147+
</div>
148+
</div>
149+
150+
<div class="item open">
151+
<p class="number">02</p>
152+
<p class="text">How long do I have to retrun my chair?</p>
153+
<svg
154+
xmlns="http://www.w3.org/2000/svg"
155+
fill="none"
156+
viewBox="0 0 24 24"
157+
stroke-width="1.5"
158+
stroke="currentColor"
159+
class="icon"
160+
>
161+
<path
162+
stroke-linecap="round"
163+
stroke-linejoin="round"
164+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
165+
/>
166+
</svg>
167+
<div class="hidden-box">
168+
<p>
169+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
170+
debitis ducimus autem nisi, ipsam, reprehenderit omnis itaque quae
171+
saepe fugit, magnam soluta molestiae cum reiciendis quas eligendi
172+
earum ipsa molestias?
173+
</p>
174+
<ul>
175+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
176+
<li>
177+
Repudiandae natus blanditiis omnis eum, ut labore quam veniam.
178+
</li>
179+
180+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
181+
<li>
182+
Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel.
183+
</li>
184+
</ul>
185+
</div>
186+
</div>
187+
188+
<div class="item">
189+
<p class="number">03</p>
190+
<p class="text">Do you ship to countries outsidethe1</p>
191+
<svg
192+
xmlns="http://www.w3.org/2000/svg"
193+
fill="none"
194+
viewBox="0 0 24 24"
195+
stroke-width="1.5"
196+
stroke="currentColor"
197+
class="icon"
198+
>
199+
<path
200+
stroke-linecap="round"
201+
stroke-linejoin="round"
202+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
203+
/>
204+
</svg>
205+
<div class="hidden-box">
206+
<p>
207+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
208+
debitis ducimus autem nisi, ipsam, reprehenderit omnis itaque quae
209+
saepe fugit, magnam soluta molestiae cum reiciendis quas eligendi
210+
earum ipsa molestias?
211+
</p>
212+
<ul>
213+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
214+
<li>
215+
Repudiandae natus blanditiis omnis eum, ut labore quam veniam.
216+
</li>
217+
218+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
219+
<li>
220+
Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel.
221+
</li>
222+
</ul>
223+
</div>
224+
</div>
225+
</div>
226+
</body>
227+
</html>

0 commit comments

Comments
 (0)