Skip to content

Commit a5a1d1b

Browse files
rameskumrameskum
committed
accordion
1 parent e64c759 commit a5a1d1b

File tree

1 file changed

+166
-0
lines changed

1 file changed

+166
-0
lines changed

‎practice/06 - Components/01_accordion.html

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
6+
name="viewport">
7+
<meta content="ie=edge" http-equiv="X-UA-Compatible">
8+
<title>Accordion Component</title>
9+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet">
10+
<style>
11+
*,
12+
*::before,
13+
*::after {
14+
margin: 0;
15+
padding: 0;
16+
box-sizing: border-box;
17+
}
18+
19+
body {
20+
font-family: 'Inter', sans-serif;
21+
color: #343a40;
22+
line-height: 1;
23+
}
24+
25+
.accordion {
26+
width: 700px;
27+
margin: 100px auto;
28+
29+
display: flex;
30+
flex-direction: column;
31+
gap: 24px;
32+
}
33+
34+
.item {
35+
box-shadow: 0 0 32px rgba(0, 0, 0, 0.1);
36+
padding: 24px;
37+
38+
display: grid;
39+
grid-template-columns: auto 1fr auto;
40+
column-gap: 24px;
41+
row-gap: 32px;
42+
align-items: center;
43+
}
44+
45+
.number,
46+
.text {
47+
font-size: 24px;
48+
font-weight: 500;
49+
/*color: #087f5b;*/
50+
}
51+
52+
.number {
53+
color: #ced4da;
54+
}
55+
56+
.icon {
57+
width: 24px;
58+
height: 24px;
59+
stroke: #087f5b;
60+
}
61+
62+
.hidden-box {
63+
grid-column: 2;
64+
display: none;
65+
}
66+
67+
.hidden-box p {
68+
line-height: 1.6;
69+
margin-bottom: 24px;
70+
}
71+
72+
.hidden-box ul {
73+
color: #868e96;
74+
margin-left: 20px;
75+
76+
display: flex;
77+
flex-direction: column;
78+
gap: 12px;
79+
align-items: flex-start;
80+
}
81+
82+
.open {
83+
border-top: 4px solid #087f5b;
84+
}
85+
86+
.open .hidden-box {
87+
display: block;
88+
}
89+
90+
.open .number,
91+
.open .text {
92+
color: #087f5b;
93+
}
94+
</style>
95+
</head>
96+
<body>
97+
<div class="accordion">
98+
<div class="item">
99+
<p class="number">01</p>
100+
<p class="text">Where was this chair assembled?</p>
101+
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
102+
<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
103+
</svg>
104+
<div class="hidden-box">
105+
<p>
106+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis delectus dolore eaque eius impedit
107+
ipsum
108+
iste libero molestiae molestias necessitatibus nemo non nostrum, quaerat quibusdam quo vel velit, vitae?
109+
</p>
110+
<ul>
111+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
112+
</li>
113+
<li>Aperiam, consequatur delectus dicta dolores enim facere magnam.</li>
114+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
115+
<li>Impedit libero nihil omnis quasi vel.
116+
</li>
117+
</ul>
118+
</div>
119+
</div>
120+
<div class="item open">
121+
<p class="number">02</p>
122+
<p class="text">How long do I Have to return my chair?</p>
123+
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
124+
<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
125+
</svg>
126+
<div class="hidden-box">
127+
<p>
128+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis delectus dolore eaque eius impedit
129+
ipsum
130+
iste libero molestiae molestias necessitatibus nemo non nostrum, quaerat quibusdam quo vel velit, vitae?
131+
</p>
132+
<ul>
133+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
134+
</li>
135+
<li>Aperiam, consequatur delectus dicta dolores enim facere magnam.</li>
136+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
137+
<li>Impedit libero nihil omnis quasi vel.
138+
</li>
139+
</ul>
140+
</div>
141+
</div>
142+
<div class="item">
143+
<p class="number">03</p>
144+
<p class="text">Do you ship to countries outside the IN?</p>
145+
<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
146+
<path d="M19 9l-7 7-7-7" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
147+
</svg>
148+
<div class="hidden-box">
149+
<p>
150+
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, blanditiis delectus dolore eaque eius impedit
151+
ipsum
152+
iste libero molestiae molestias necessitatibus nemo non nostrum, quaerat quibusdam quo vel velit, vitae?
153+
</p>
154+
<ul>
155+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
156+
</li>
157+
<li>Aperiam, consequatur delectus dicta dolores enim facere magnam.</li>
158+
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
159+
<li>Impedit libero nihil omnis quasi vel.
160+
</li>
161+
</ul>
162+
</div>
163+
</div>
164+
</div>
165+
</body>
166+
</html>

0 commit comments

Comments
 (0)