Skip to content

Commit bc45ef1

Browse files
FrankGeckoFrankGecko
committed
ch. 87: Building an Accordion Component - Part 1
1 parent 35c9de9 commit bc45ef1

File tree

1 file changed

+112
-0
lines changed

1 file changed

+112
-0
lines changed

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

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
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 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet" />
11+
<style>
12+
/*
13+
SPACING SYSTEM (px)
14+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
15+
16+
FONT SIZE SYSTEM (px)
17+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
18+
*/
19+
20+
/*
21+
MAIN COLOR: #087f5b
22+
GREY COLOR: #343a40
23+
*/
24+
25+
* {
26+
margin: 0;
27+
padding: 0;
28+
box-sizing: border-box;
29+
}
30+
31+
/* ------------------------ */
32+
/* GENERAL STYLES */
33+
/* ------------------------ */
34+
body {
35+
font-family: "Inter", sans-serif;
36+
color: #343a40;
37+
line-height: 1;
38+
}
39+
40+
.accordion {
41+
width: 700px;
42+
margin: 100px auto;
43+
}
44+
45+
.item {}
46+
47+
.number,
48+
.text {
49+
font-size: 24px;
50+
font-weight: 500;
51+
color: #087f5b;
52+
}
53+
54+
.icon {
55+
width: 24px;
56+
height: 24px;
57+
stroke: #087f5b;
58+
}
59+
60+
.text {}
61+
62+
.hidden-box {}
63+
64+
.hidden-box p {
65+
line-height: 1.6;
66+
margin-bottom: 24px;
67+
}
68+
69+
.hidden-box ul {
70+
color: #868e96;
71+
margin-left: 18px;
72+
73+
display: flex;
74+
flex-direction: column;
75+
gap: 12px;
76+
}
77+
</style>
78+
</head>
79+
80+
<body>
81+
<div class="accordion">
82+
<div class="item">
83+
<p class="number">02</p>
84+
<p class="text">How long do I hace to return my chair</p>
85+
<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
86+
stroke="currentColor" class="w-6 h-6">
87+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
88+
</svg>
89+
90+
<div class="hidden-box">
91+
<p>
92+
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Alias
93+
magni sed cumque, corporis earum facilis rem aspernatur dignissimos
94+
et reiciendis deleniti nesciunt omnis voluptates at commodi eveniet
95+
maiores aut id.
96+
</p>
97+
<ul>
98+
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
99+
<li>
100+
Fugiat libero aperiam minus necessitatibus assumenda pariatur.
101+
</li>
102+
<li>
103+
Soluta distinctio cumque provident eos autem, temporibus ipsum.
104+
</li>
105+
<li>Rerum eveniet molestias laborum officia tenetur beatae.</li>
106+
</ul>
107+
</div>
108+
</div>
109+
</div>
110+
</body>
111+
112+
</html>

0 commit comments

Comments
 (0)