-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdark-themed-bootstrap5-accordion-with-custom-icons.html
More file actions
193 lines (174 loc) · 8.35 KB
/
Copy pathdark-themed-bootstrap5-accordion-with-custom-icons.html
File metadata and controls
193 lines (174 loc) · 8.35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Themed Bootstrap 5 Accordion with Custom Icons</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" />
<style>
#accordion_1 {
padding: 70px 0;
background-color: #000;
}
#accordion_1 .heading h2 {
color: #fff;
margin-bottom: 50px;
}
#accordion_1 .accordion {
max-width: 70%;
margin: 0 auto;
}
#accordion_1 .accordion .accordion-button::after {
content: "\f64d";
font-family: bootstrap-icons !important;
background: none;
position: absolute;
right: 0px;
top: 0;
background: #405df6;
height: 100%;
width: 50px;
text-align: center;
line-height: 50px;
color: #fff;
font-size: 20px;
font-weight: 600;
transform: none;
}
#accordion_1 .accordion .accordion-button:not(.collapsed)::after {
content: "\f63b";
}
#accordion_1 .accordion .accordion-button,
#accordion_1 .accordion .accordion-body {
padding-right: 45px;
background-color: #000;
box-shadow: none;
}
#accordion_1 .accordion .accordion-button {
background: rgba(255, 255, 255, 0.1) !important;
border-radius: 0;
color: #fff;
}
#accordion_1 .accordion .accordion-item {
border-radius: 0;
margin-bottom: 20px;
border: 1px solid #000;
background-color: #000;
}
#accordion_1 .heading {
text-align: center;
margin-bottom: 30px;
}
#accordion_1 .accordion .accordion-body p {
color: #fff;
opacity: .8;
}
@media (max-width: 768px) {
#accordion_1 .accordion {
max-width: 100%;
}
}
</style>
</head>
<body>
<section id="accordion_1">
<div class="container">
<div class="heading">
<h2>Bootstrap 5 Accordion</h2>
</div>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
What's the difference between compiling and interpreting code?
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>
Compiled code is translated entirely into machine code before execution, leading to faster runtime.
Interpreted code is translated line by line as it's executed, offering more flexibility but often slower
performance.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Why is version control (like Git) so important for programmers?
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>
Version control tracks changes to your code over time, allowing you to revert to previous states,
collaborate effectively with others, and manage different versions of your project without losing work.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
What does "API" stand for, and why is it useful?
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>
API stands for Application Programming Interface. It's a set of rules and protocols that allows
different software applications to communicate and exchange data with each other, enabling integration
and extending functionality.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
What is a common beginner mistake in programming?
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>
A frequent error is off-by-one errors in loops or array/list indexing, where the loop runs one iteration
too many or too few, or an incorrect index is accessed, leading to unexpected behavior or crashes.
</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingFive">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
How do you approach debugging a piece of code that isn't working as expected?
</button>
</h2>
<div id="collapseFive" class="accordion-collapse collapse" aria-labelledby="headingFive"
data-bs-parent="#accordionExample">
<div class="accordion-body">
<p>
Debugging often involves systematically examining the code, using print statements or debugging tools to
trace the program's execution, checking variable values, and isolating the section of code causing the
issue through a process of elimination.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>