Skip to content

Commit 2f22bec

Browse files
quechauquechau
committed
Add a new accordion component.
1 parent 94d78a7 commit 2f22bec

File tree

2 files changed

+128
-0
lines changed

2 files changed

+128
-0
lines changed

‎.vscode/settings.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"liveServer.settings.port": 5502
3+
}

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
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+
.item {
47+
}
48+
.number,
49+
.text {
50+
font-size: 24px;
51+
font-weight: 500;
52+
color: #087f5b;
53+
}
54+
55+
.icon {
56+
width: 24px;
57+
height: 24px;
58+
stroke: #087f5b;
59+
}
60+
.hidden-box {
61+
}
62+
.hidden-box p {
63+
line-height: 1.6;
64+
margin-bottom: 24px;
65+
}
66+
.hidden-box ul {
67+
color: #868e96;
68+
margin-left: 20px;
69+
70+
display: flex;
71+
flex-direction: column;
72+
gap: 12px;
73+
}
74+
75+
/* .hidden-box li {
76+
margin-bottom: 12px;
77+
} */
78+
</style>
79+
</head>
80+
<body>
81+
<div class="accordion">
82+
<div class="item">
83+
<p class="number">02</p>
84+
<p class="text">How long do I have to retrun my chair?</p>
85+
<svg
86+
xmlns="http://www.w3.org/2000/svg"
87+
fill="none"
88+
viewBox="0 0 24 24"
89+
stroke-width="1.5"
90+
stroke="currentColor"
91+
class="icon"
92+
>
93+
<path
94+
stroke-linecap="round"
95+
stroke-linejoin="round"
96+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
97+
/>
98+
</svg>
99+
<div class="hidden-box">
100+
<p>
101+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore
102+
debitis ducimus autem nisi, ipsam, reprehenderit omnis itaque quae
103+
saepe fugit, magnam soluta molestiae cum reiciendis quas eligendi
104+
earum ipsa molestias?
105+
</p>
106+
<ul>
107+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
108+
<li>
109+
Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel
110+
nesciunt, quibusdam temporibus error qui sequi assumenda nemo,
111+
laborum ipsum possimus quo.
112+
</li>
113+
114+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
115+
<li>
116+
Repudiandae natus blanditiis omnis eum, ut labore quam veniam vel
117+
nesciunt, quibusdam temporibus error qui sequi assumenda nemo,
118+
laborum ipsum possimus quo.
119+
</li>
120+
</ul>
121+
</div>
122+
</div>
123+
</div>
124+
</body>
125+
</html>

0 commit comments

Comments
 (0)