<!--You can use .accordion-collapse with .show class then show accordions.-->
<div class="accordion dark-accordion" id="simpleaccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">What do web designers do?<i class="svg-color" data-feather="chevron-down"></i></button>
</h2>
<div class="accordion-collapse collapse show" id="collapseOne" aria-labelledby="headingOne" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p>
Web design<em class="txt-danger"> identifies the goals</em> of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">What is the use of web design?<i class="svg-color" data-feather="chevron-down"></i></button>
</h2>
<div class="accordion-collapse collapse" id="collapseTwo" aria-labelledby="headingTwo" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p class="mb-3"><strong> Search engine optimization: </strong> Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.</p>
<p class="mb-3"><strong> Mobile responsiveness:</strong> Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.</p>
<p><strong> Improved sales:</strong>Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">What are the elements of web design?<i class="svg-color" data-feather="chevron-down"></i></button>
</h2>
<div class="accordion-collapse collapse" id="collapseThree" aria-labelledby="headingThree" data-bs-parent="#simpleaccordion">
<div class="accordion-body">
<p>
The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:
<ul class="d-flex flex-column gap-2 accordions-content">
<li>--> Layout</li>
<li>--> Images</li>
<li>--> Visual hierarchy</li>
<li>--> Color scheme</li>
<li>--> Typography</li>
<li>--> Navigation</li>
<li>--> Readability</li>
<li>--> Content</li>
</ul>
</p>
</div>
</div>
</div>
</div>

<!--You can use .accordion-collapse with .show class then show accordions.-->
<div class="accordion accordion-flush dark-accordion" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed txt-success accordion-light-success active" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">What is bootstrap?</button>
</h2>
<div class="accordion-collapse collapse show" id="flush-collapseOne" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-1 accordions-content">
<li>--> Bootstrap is the most popular HTML, CSS and JavaScript framework for developing a responsive and mobile friendly website.</li>
<li>--> It is absolutely free to download and use.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed txt-success accordion-light-success" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">Why Should You Use Bootstrap?</button>
</h2>
<div class="accordion-collapse collapse" id="flush-collapseTwo" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>First and foremost, Bootstrap is easy to learn. Due to its popularity, plenty of tutorials and online forums are available to help you get started.</li>
<li>One of the reasons why Bootstrap is so popular among web developers and web designers is that it has a simple file structure. Its files are compiled for easy access, and it only requires basic knowledge of HTML, CSS, and JS to modify them.</li>
<li>You can also use themes for popular content management systems as learning tools. For example, most WordPress themes were developed using Bootstrap, which any beginner web developer can access. </li>
<li>To increase the site's page load time, Bootstrap minifies the CSS and JavaScript files. Additionally, Bootstrap maintains consistency across the syntax between websites and developers, which is ideal for team-based projects.</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed txt-success accordion-light-success" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">Bootstrap Image System</button>
</h2>
<div class="accordion-collapse collapse" id="flush-collapseThree" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul class="d-flex flex-column gap-2 accordions-content">
<li>Bootstrap handles the image display and responsiveness with its predefined HTML and CSS rules.</li>
<li>Adding the .img-responsive class will automatically resize images based on the users' screen size. This will benefit your website’s performance, as reducing image sizes is part of the site optimization process.</li>
<li>Bootstrap also provides additional classes like .img-circle and .img-rounded, which help to modify the images' shape.</li>
</ul>
</div>
</div>
</div>
</div>