Skip to content

Commit b79412a

Browse files
cndoit18cndoit18
committed
finish components
1 parent 43ef4ca commit b79412a

File tree

6 files changed

+795
-0
lines changed

6 files changed

+795
-0
lines changed

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

Lines changed: 213 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,213 @@
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+
<link rel="preconnect" href="https://fonts.googleapis.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"
11+
rel="stylesheet"
12+
/>
13+
14+
<style>
15+
/*
16+
SPACING SYSTEM (px)
17+
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
18+
19+
FONT SIZE SYSTEM (px)
20+
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
21+
22+
MAIN COLOR: #087f5b
23+
GREY COLOR: #343a40
24+
*/
25+
26+
* {
27+
margin: 0;
28+
padding: 0;
29+
box-sizing: border-box;
30+
}
31+
32+
/* ------------------------ */
33+
/* GENERAL STYLES */
34+
/* ------------------------ */
35+
body {
36+
font-family: "Inter", sans-serif;
37+
color: #343a40;
38+
line-height: 1;
39+
}
40+
41+
.accordion {
42+
width: 700px;
43+
margin: 100px auto;
44+
45+
display: flex;
46+
flex-direction: column;
47+
gap: 24px;
48+
}
49+
50+
.item {
51+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
52+
padding: 24px;
53+
54+
display: grid;
55+
grid-template-columns: auto 1fr auto;
56+
column-gap: 24px;
57+
row-gap: 32px;
58+
}
59+
60+
.number,
61+
.text {
62+
font-size: 24px;
63+
font-weight: 500;
64+
/* color: #087f5b; */
65+
}
66+
67+
.number {
68+
color: #ced4da;
69+
}
70+
71+
.icon {
72+
width: 24px;
73+
height: 24px;
74+
stroke: #087f5b;
75+
}
76+
.hidden-box {
77+
grid-column: 2;
78+
display: none;
79+
}
80+
81+
.hidden-box p {
82+
line-height: 1.6;
83+
margin-bottom: 24px;
84+
}
85+
86+
.hidden-box ul {
87+
color: #868e96;
88+
margin-left: 20px;
89+
90+
display: flex;
91+
flex-direction: column;
92+
gap: 12px;
93+
}
94+
95+
.open {
96+
border-top: 4px solid #087f5b;
97+
}
98+
99+
.open .hidden-box {
100+
display: block;
101+
}
102+
103+
.open .number, .open .text {
104+
color: #087f5b;
105+
}
106+
107+
</style>
108+
<title>Accordion Component</title>
109+
</head>
110+
<body>
111+
<div class="accordion">
112+
<div class="item">
113+
<p class="number">01</p>
114+
<p class="text">Where are these 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.
132+
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
133+
repellendus cupiditate aperiam! Incidunt amet quo neque.
134+
</p>
135+
<ul>
136+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
137+
<li>
138+
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
139+
</li>
140+
<li>Tempora, et atque officia at consequatur laborum!</li>
141+
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
142+
</ul>
143+
</div>
144+
</div>
145+
<div class="item open">
146+
<p class="number">02</p>
147+
<p class="text">How long do I have to return my chair?</p>
148+
<svg
149+
xmlns="http://www.w3.org/2000/svg"
150+
fill="none"
151+
viewBox="0 0 24 24"
152+
stroke-width="1.5"
153+
stroke="currentColor"
154+
class="icon"
155+
>
156+
<path
157+
stroke-linecap="round"
158+
stroke-linejoin="round"
159+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
160+
/>
161+
</svg>
162+
<div class="hidden-box">
163+
<p>
164+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
165+
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
166+
repellendus cupiditate aperiam! Incidunt amet quo neque.
167+
</p>
168+
<ul>
169+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
170+
<li>
171+
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
172+
</li>
173+
<li>Tempora, et atque officia at consequatur laborum!</li>
174+
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
175+
</ul>
176+
</div>
177+
</div>
178+
<div class="item">
179+
<p class="number">03</p>
180+
<p class="text">Do you ship to countries outside the EU?</p>
181+
<svg
182+
xmlns="http://www.w3.org/2000/svg"
183+
fill="none"
184+
viewBox="0 0 24 24"
185+
stroke-width="1.5"
186+
stroke="currentColor"
187+
class="icon"
188+
>
189+
<path
190+
stroke-linecap="round"
191+
stroke-linejoin="round"
192+
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
193+
/>
194+
</svg>
195+
<div class="hidden-box">
196+
<p>
197+
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
198+
Accusantium dolor at sequi obcaecati cupiditate. Voluptates
199+
repellendus cupiditate aperiam! Incidunt amet quo neque.
200+
</p>
201+
<ul>
202+
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</li>
203+
<li>
204+
Quasi accusamus corporis totam tempora suscipit ab obcaecati.
205+
</li>
206+
<li>Tempora, et atque officia at consequatur laborum!</li>
207+
<li>Repudiandae praesentium illo voluptate in, atque enim.</li>
208+
</ul>
209+
</div>
210+
</div>
211+
</div>
212+
</body>
213+
</html>

0 commit comments

Comments
 (0)