Coder Wrap provides free to use snippets

Preview Source Code

(2)

HTML




CSS
/**Typeo CSS Start**/
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,700;0,800;1,300;1,400;1,500;1,600;1,700&display=swap');

* {
	box-sizing: border-box;
}

body {
	margin: 0px;
	background-color: #fff;
}

img {
	max-width: 100%;
}

/**Typeo CSS End**/
.overlay-bg {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 43, 116, 0.6);
	position: absolute;
	left: 0px;
	top: 0px;
}

.faq-page, .faq-page * {
	--page-width: 1330px;
	--base-fm: 'Rubik', sans-serif;
	--title-size: 40px;
	--base-size: 18px;
	--base-clr: #444444;
	--white-clr: #ffffff;
	--theme-clr: #ff9400;
	--bg-clr: #F9F6F2;
}

.page-width {
	max-width: var(--page-width);
	padding: 0 15px;
	margin: auto;
	width: 100%;
}

.faq-page {
	background-color: var(--bg-clr);
	font-family: var(--base-fm);
	font-size: var(--base-size);
	color: var(--base-clr);
}

.bnr-inr-scn {
	width: 100%;
	padding: 20px 0px;
	min-height: 350px;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	position: relative;
	background-size: cover;
	background-position: center center;
	background-color: var(--bg-clr);
	color: var(--white-clr);
}

.bnr-cont-inner {
	max-width: 800px;
	width: 100%;
	margin: 0;
	position: relative;
	z-index: 1;
}

.bnr-inr-scn h1 {
	font-size: var(--title-size);
	margin: 0px;
	line-height: normal;
}

/*Breadcrumb Start*/
.breadcrumb {
	list-style: none;
	padding: 0px;
	display: flex;
	flex-flow: row wrap;
	margin: 20px 0px 5px 0px;
}

.text-center .breadcrumb {
	justify-content: center;
}

.breadcrumb li {
	padding: 0px;
	margin: 0px 10px;
	list-style: none;
	color: var(--white-clr);
}

.breadcrumb li a {
	text-decoration: none;
	color: var(--theme-clr);
}

.breadcrumb li a:after {
	content: '/';
	color: var(--white-clr);
	margin-left: 10px;
	margin-right: -10px;
}

/*Breadcrumb End*/
.faq-mid-scn {
	width: 100%;
	padding: 60px 0px;
	line-height: 1.5;
}

.faq-group {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

.faq-group .faq-m-left {
	width: 40%;
}

.hd-tag {
	position: relative;
	margin: 8px 0px;
	display: inline-block;
	width: 100%;
}

.hd-tag:before {
	content: '';
	width: 60px;
	height: 2px;
	background-color: var(--theme-clr);
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
}

.faq-mid-scn h2 {
	font-size: calc(var(--title-size) + 14px);
	margin: 0px;
	line-height: normal;
}

.faq-mid-scn .cmn-btn {
	padding: 16px 28px;
	background-color: var(--theme-clr);
	text-decoration: none;
	color: var(--white-clr);
	display: inline-block;
	border-radius: 4px;
	margin-top: 20px;
	transition: 0.5s all;
}

.faq-mid-scn .cmn-btn:hover {
	box-shadow: #999 1px 2px 8px;
}

.faq-group .faq-m-right {
	width: 60%;
	padding: 0px 20px;
}

.cw-accordion {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1rem;
}

.cw-accordion__item {
	padding: 15px 20px;
	background: #fff;
	position: relative;
	width: 100%;
	cursor: pointer;
	box-shadow: 0 4px 10px #ede9fe;
	border: #cdcdcd 1px solid;
}

.cw-accordion__item .cw-label {
	padding-left: 45px;
	padding-top: 2px;
	position: relative;
	width: 100%;
	display: inline-block;
	font-size: var(--base-size);
	font-weight: 500;
}

.cw-accordion__item .cw-label:after {
	position: absolute;
	left: 0;
	content: "+";
	top: 0;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	line-height: 1.1;
	text-align: center;
	background-color: var(--theme-clr);
	color: var(--white-clr);
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
}

.cw-accordion__item .cw-label.cw-open:after {
	transform: rotate(45deg);
}

.cw-accordion__item .cw-acordion-cont {
	height: 0px;
	overflow: hidden;
	transition: 0.4s;
	-webkit-transition: 0.4s;
	font-size: var(--base-size);
	padding-left: 45px;
	padding-right: 15px;
}

.cw-accordion__item .cw-acordion-cont p:last-child {
	margin: 0px;
}

.cw-accordion__item .cw-open + .cw-acordion-cont {
	height: auto;
	padding-top: 15px;
	padding-bottom: 15px;
}

.faq-contact {
	text-align: center;
	padding: 10px 0;
}

.faq-contact h3 {
	margin: 0px 0px 15px 0px;
}

.faq-contact .contact-btn {
	padding: 8px 20px;
	background-color: #000;
	color: #fff;
	text-decoration: none;
	display: inline-block;
	border: #000 1px solid;
	transition: 0.5s all;
	font-weight: 700;
}

.faq-contact .contact-btn:hover {
	background-color: transparent;
	color: #000;
}

@media(max-width:1200px) {
	.bnr-inr-scn {
		min-height: 200px;
	}

	.bnr-inr-scn h1 {
		font-size: calc(var(--title-size) - 14px);
	}

	.bnr-inr-scn {
		font-size: calc(var(--base-size) - 5px);
	}

}

@media (max-width:767px) {
	.bnr-inr-scn {
		min-height: 150px;
	}

}





JS
let items = document.querySelectorAll(".cw-accordion .cw-accordion__item .cw-label");
	items.forEach(function (t) {
	t.addEventListener("click", function (e) {
	items.forEach(function (e) {
	e !== t || e.classList.contains("cw-open")
		? e.classList.remove("cw-open")
		: e.classList.add("cw-open");
	});
	});
	});

FAQ'S

Frequently Asked Question

Have Any
Questions?

Distinctively exploit revolutionary catalysts for chang the Seamlessly optimal rather than just in web & apps development optimal alignments for intuitive.

More Questions?

Who should i to contact if i have question?

In general, it's a good idea to start by doing some research on your own to see if you can find the answer to your question online or through other resources. If you're still unsure, reaching out to an expert or professional in the relevant field is often a good next step.

How can i cancel or change my order?

If you want to cancel or change an order, you should contact the company or organization from which you made the purchase as soon as possible. This can usually be done through their customer service department. Be prepared to provide them with your order number and any other relevant information they may need to identify your order.

How can i return a product?

The process for returning a product can vary depending on the company or organization from which you made the purchase. However, here are some general steps that you can follow:

Note: It's important to keep in mind that some items may not be eligible for returns, such as personalized or customized items, or items that have been used or damaged. Make sure to review the company's return policy carefully before initiating a return.

How long will it take to get my package?

The length of time it takes to receive a package can vary depending on several factors such as the shipping method, the origin and destination of the package, and any customs or clearance processes that may be required. If you have already placed an order, the estimated delivery time should be provided to you during the checkout process or in a confirmation email.

What shipping methods are available?

The shipping methods available can vary depending on the company or organization from which you are making a purchase. However, here are some common shipping methods that you may encounter:

It's important to review the shipping options and costs carefully before making a purchase, as they can vary significantly and impact when you will receive your package and how much you will pay for shipping.

Do you provide any warranty?

Warranties can vary depending on the product or service and the company's policies. They may cover defects in materials or workmanship, provide repair or replacement services, or offer refunds or exchanges if the product does not meet the customer's expectations. It's important to review the warranty or guarantee information provided by the company before making a purchase. This can help you understand what is covered by the warranty, how long it lasts, and what steps you need to take if you need to make a claim.