Skip to content

Commit a9f1cb8

Browse files
GulsahDuzgunGulsahDuzgun
committed
Create 01-accordion.html
1 parent 467644c commit a9f1cb8

File tree

1 file changed

+232
-0
lines changed

1 file changed

+232
-0
lines changed

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

Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
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=Clicker+Script&family=Inter:wght@400;500;600;700&family=Montserrat&family=Oleo+Script:wght@700&family=Open+Sans:wght@300;400&family=Poppins:wght@300;400;500;600&family=Titillium+Web:ital,wght@1,300&display=swap"
8+
rel="stylesheet"
9+
/>
10+
<title>Accordion Component</title>
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+
margin: 0;
22+
padding: 0;
23+
box-sizing: border-box;
24+
}
25+
26+
body {
27+
font-family: "Inter", sans-serif;
28+
color: #343a40;
29+
line-height: 1;
30+
}
31+
32+
.accordion {
33+
width: 700px;
34+
margin: 100px auto;
35+
display: flex;
36+
flex-direction: column;
37+
gap: 24px;
38+
}
39+
40+
.item {
41+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
42+
padding: 24px;
43+
display: grid;
44+
grid-template-columns: auto 1fr auto;
45+
align-items: center;
46+
column-gap: 24px;
47+
row-gap: 32px;
48+
}
49+
50+
.number,
51+
.text {
52+
font-size: 24px;
53+
font-weight: 500;
54+
/* color: #087f5b; */
55+
}
56+
57+
.text {
58+
color: #343a40;
59+
}
60+
61+
.number {
62+
color: #868e96;
63+
}
64+
65+
.icon {
66+
width: 24px;
67+
height: 24px;
68+
stroke: #adb5bd;
69+
}
70+
71+
.hidden-box {
72+
grid-column: 2;
73+
display: none;
74+
}
75+
76+
.hidden-box p {
77+
line-height: 1.6;
78+
margin-bottom: 24px;
79+
font-weight: 500;
80+
}
81+
82+
.hidden-box ul {
83+
color: #868e96;
84+
margin-left: 20px;
85+
86+
display: flex;
87+
flex-direction: column;
88+
gap: 10px;
89+
}
90+
91+
.open .hidden-box {
92+
display: block;
93+
}
94+
95+
.open .text,
96+
.open .number {
97+
color: #087f5b;
98+
}
99+
100+
.open .icon {
101+
stroke: #087f5b;
102+
}
103+
</style>
104+
</head>
105+
<body>
106+
<div class="accordion">
107+
<div class="item">
108+
<p class="number">01</p>
109+
<p class="text">Where are these chairs assembled?</p>
110+
<svg
111+
xmlns="http://www.w3.org/2000/svg"
112+
fill="none"
113+
viewBox="0 0 24 24"
114+
stroke-width="1.5"
115+
stroke="currentColor"
116+
class="icon"
117+
>
118+
<path
119+
stroke-linecap="round"
120+
stroke-linejoin="round"
121+
d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
122+
/>
123+
</svg>
124+
125+
<div class="hidden-box">
126+
<p>
127+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet,
128+
veniam. Atque omnis quae odio animi maiores corporis commodi
129+
placeat, nisi voluptatibus perspiciatis blanditiis cupiditate,
130+
beatae sit optio recusandae quod. Ducimus.
131+
</p>
132+
<ul>
133+
<li>
134+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
135+
Asperiores similique facilis ut.
136+
</li>
137+
<li>
138+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
139+
Asperiores similique facilis ut.
140+
</li>
141+
<li>
142+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
143+
Asperiores similique facilis ut.
144+
</li>
145+
</ul>
146+
</div>
147+
</div>
148+
<div class="item open">
149+
<p class="number">02</p>
150+
<p class="text">How long do I return my chair?</p>
151+
<svg
152+
xmlns="http://www.w3.org/2000/svg"
153+
fill="none"
154+
viewBox="0 0 24 24"
155+
stroke-width="1.5"
156+
stroke="currentColor"
157+
class="icon"
158+
>
159+
<path
160+
stroke-linecap="round"
161+
stroke-linejoin="round"
162+
d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
163+
/>
164+
</svg>
165+
166+
<div class="hidden-box">
167+
<p>
168+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet,
169+
veniam. Atque omnis quae odio animi maiores corporis commodi
170+
placeat, nisi voluptatibus perspiciatis blanditiis cupiditate,
171+
beatae sit optio recusandae quod. Ducimus.
172+
</p>
173+
<ul>
174+
<li>
175+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
176+
Asperiores similique facilis ut.
177+
</li>
178+
<li>
179+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
180+
Asperiores similique facilis ut.
181+
</li>
182+
<li>
183+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
184+
Asperiores similique facilis ut.
185+
</li>
186+
</ul>
187+
</div>
188+
</div>
189+
<div class="item">
190+
<p class="number">03</p>
191+
<p class="text">Do you ship to countries outside the EU?</p>
192+
<svg
193+
xmlns="http://www.w3.org/2000/svg"
194+
fill="none"
195+
viewBox="0 0 24 24"
196+
stroke-width="1.5"
197+
stroke="currentColor"
198+
class="icon"
199+
>
200+
<path
201+
stroke-linecap="round"
202+
stroke-linejoin="round"
203+
d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3"
204+
/>
205+
</svg>
206+
207+
<div class="hidden-box">
208+
<p>
209+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet,
210+
veniam. Atque omnis quae odio animi maiores corporis commodi
211+
placeat, nisi voluptatibus perspiciatis blanditiis cupiditate,
212+
beatae sit optio recusandae quod. Ducimus.
213+
</p>
214+
<ul>
215+
<li>
216+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
217+
Asperiores similique facilis ut.
218+
</li>
219+
<li>
220+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
221+
Asperiores similique facilis ut.
222+
</li>
223+
<li>
224+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
225+
Asperiores similique facilis ut.
226+
</li>
227+
</ul>
228+
</div>
229+
</div>
230+
</div>
231+
</body>
232+
</html>

0 commit comments

Comments
 (0)