Skip to content

Commit 8a29140

Browse files
zangeronimozangeronimo
committed
feat: building an accordion component
1 parent d546ac3 commit 8a29140

File tree

2 files changed

+231
-0
lines changed

2 files changed

+231
-0
lines changed

‎starter/06-Components/Accordion/index.html

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<link rel="preconnect" href="https://fonts.googleapis.com" />
5+
<meta charset="UTF-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>Accordion Component</title>
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
14+
<link rel="stylesheet" href="style.css" />
15+
</head>
16+
<body>
17+
<div class="accordion">
18+
<div class="item">
19+
<p class="number">01</p>
20+
<p class="text">Where are these chairs assembled?</p>
21+
<svg
22+
xmlns="http://www.w3.org/2000/svg"
23+
fill="none"
24+
viewBox="0 0 24 24"
25+
stroke-width="1.5"
26+
stroke="currentColor"
27+
class="icon"
28+
>
29+
<path
30+
stroke-linecap="round"
31+
stroke-linejoin="round"
32+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
33+
/>
34+
</svg>
35+
<div class="hidden-box">
36+
<p>
37+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore
38+
culpa saepe rerum voluptates officia tempora deleniti repellat
39+
laborum, cupiditate hic cumque amet impedit eius. Sint nobis
40+
molestiae quisquam consequuntur!
41+
</p>
42+
<ul>
43+
<li>
44+
Sit quaerat quis odio quasi tempore quae harum ratione sint eos
45+
</li>
46+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
47+
<li>
48+
quis odio quasi tempore quae harum ratione sint eos atque vero
49+
</li>
50+
<li>
51+
quidem doloremque reprehenderit rem cum corrupti ab, aut hic
52+
</li>
53+
</ul>
54+
</div>
55+
</div>
56+
57+
<div class="item open">
58+
<p class="number">02</p>
59+
<p class="text">How long do I have to return my chair?</p>
60+
<svg
61+
xmlns="http://www.w3.org/2000/svg"
62+
fill="none"
63+
viewBox="0 0 24 24"
64+
stroke-width="1.5"
65+
stroke="currentColor"
66+
class="icon"
67+
>
68+
<path
69+
stroke-linecap="round"
70+
stroke-linejoin="round"
71+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
72+
/>
73+
</svg>
74+
<div class="hidden-box">
75+
<p>
76+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore
77+
culpa saepe rerum voluptates officia tempora deleniti repellat
78+
laborum, cupiditate hic cumque amet impedit eius. Sint nobis
79+
molestiae quisquam consequuntur!
80+
</p>
81+
<ul>
82+
<li>
83+
Sit quaerat quis odio quasi tempore quae harum ratione sint eos
84+
</li>
85+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
86+
<li>
87+
quis odio quasi tempore quae harum ratione sint eos atque vero
88+
</li>
89+
<li>
90+
quidem doloremque reprehenderit rem cum corrupti ab, aut hic
91+
</li>
92+
</ul>
93+
</div>
94+
</div>
95+
96+
<div class="item">
97+
<p class="number">03</p>
98+
<p class="text">Do you ship to countries outside the EU?</p>
99+
<svg
100+
xmlns="http://www.w3.org/2000/svg"
101+
fill="none"
102+
viewBox="0 0 24 24"
103+
stroke-width="1.5"
104+
stroke="currentColor"
105+
class="icon"
106+
>
107+
<path
108+
stroke-linecap="round"
109+
stroke-linejoin="round"
110+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
111+
/>
112+
</svg>
113+
<div class="hidden-box">
114+
<p>
115+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia dolore
116+
culpa saepe rerum voluptates officia tempora deleniti repellat
117+
laborum, cupiditate hic cumque amet impedit eius. Sint nobis
118+
molestiae quisquam consequuntur!
119+
</p>
120+
<ul>
121+
<li>
122+
Sit quaerat quis odio quasi tempore quae harum ratione sint eos
123+
</li>
124+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit</li>
125+
<li>
126+
quis odio quasi tempore quae harum ratione sint eos atque vero
127+
</li>
128+
<li>
129+
quidem doloremque reprehenderit rem cum corrupti ab, aut hic
130+
</li>
131+
</ul>
132+
</div>
133+
</div>
134+
</div>
135+
</body>
136+
</html>

‎starter/06-Components/Accordion/style.css

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/*
2+
SPACING SYSTEM (px)
3+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
4+
5+
FONT SIZE SYSTEM (px)
6+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
7+
*/
8+
9+
/*
10+
MAIN COLOR: #087f5b
11+
GREY COLOR: #343a40
12+
*/
13+
14+
* {
15+
margin: 0;
16+
padding: 0;
17+
box-sizing: border-box;
18+
}
19+
20+
/* ------------------------ */
21+
/* GENERAL STYLES */
22+
/* ------------------------ */
23+
body {
24+
font-family: "Inter", sans-serif;
25+
color: #343a40;
26+
line-height: 1;
27+
}
28+
29+
.accordion {
30+
width: 700px;
31+
margin: 0 auto;
32+
33+
display: flex;
34+
flex-direction: column;
35+
gap: 24px;
36+
}
37+
38+
.item {
39+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
40+
padding: 24px;
41+
42+
display: grid;
43+
grid-template-columns: auto 1fr auto;
44+
column-gap: 24px;
45+
row-gap: 32px;
46+
align-items: center;
47+
}
48+
49+
.number,
50+
.text {
51+
font-size: 24px;
52+
font-weight: 500;
53+
}
54+
55+
.number {
56+
color: #ced4da;
57+
}
58+
59+
.icon {
60+
width: 24px;
61+
height: 24px;
62+
stroke: #087f5b;
63+
}
64+
65+
.hidden-box {
66+
grid-column: 2;
67+
display: none;
68+
}
69+
70+
.hidden-box p {
71+
line-height: 1.6;
72+
margin-bottom: 24px;
73+
}
74+
75+
.hidden-box ul {
76+
color: #868e96;
77+
margin-left: 20px;
78+
79+
display: flex;
80+
flex-direction: column;
81+
gap: 12px;
82+
}
83+
84+
.open {
85+
border-top: 4px solid #087f5b;
86+
}
87+
88+
.open .number,
89+
.open .text {
90+
color: #087f5b;
91+
}
92+
93+
.open .hidden-box {
94+
display: block;
95+
}

0 commit comments

Comments
 (0)