Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit a5fee03

Browse files
Add files via upload
0 parents commit a5fee03

File tree

5 files changed

+239
-0
lines changed

5 files changed

+239
-0
lines changed

‎faq-script.js‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
document.addEventListener("DOMContentLoaded", function() {
2+
const questions = document.querySelectorAll('.faqs-whole-container-question');
3+
4+
questions.forEach(question => {
5+
question.addEventListener('click', () => {
6+
const answer = question.nextElementSibling;
7+
const icon = question.querySelector('.faqs-whole-container-toggle-icon');
8+
9+
// Hide all answers except the one clicked
10+
document.querySelectorAll('.faqs-whole-container-answer').forEach(ans => {
11+
if (ans !== answer) {
12+
ans.style.display = 'none';
13+
}
14+
});
15+
16+
// Toggle display of the clicked answer
17+
answer.style.display = answer.style.display === 'block' ? 'none' : 'block';
18+
19+
// Reset all icons to plus sign
20+
document.querySelectorAll('.faqs-whole-container-toggle-icon').forEach(toggleIcon => {
21+
toggleIcon.textContent = '+';
22+
});
23+
24+
// Toggle icon of the clicked question
25+
icon.textContent = answer.style.display === 'block' ? '-' : '+';
26+
});
27+
});
28+
});

‎img/6384636.jpg‎

200 KB
Loading[フレーム]

‎img/faq-icon.ico‎

264 KB
Binary file not shown.

‎index-styles.css‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
/* Google font*/
2+
@import url('https://fonts.googleapis.com/css2?family=Recursive:wght@300..1000&display=swap');
3+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Recursive:wght@300..1000&display=swap');
4+
5+
6+
7+
8+
9+
10+
body {
11+
font-family: "Poppins", sans-serif;
12+
font-weight: 600;
13+
font-style: normal;
14+
margin: 0;
15+
padding: 0;
16+
background-color: #222222;
17+
}
18+
19+
.faqs-whole-container {
20+
max-width: 1400px;
21+
margin: 50px auto;
22+
background-color: black;
23+
color: white;
24+
border-radius: 10px;
25+
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
26+
display: flex; /* Add display flex to align items horizontally */
27+
overflow: hidden; /* Hide overflowing content */
28+
flex-direction: row;
29+
justify-content: center;
30+
align-items: center;
31+
}
32+
33+
34+
.faqs-whole-container-faq-heading {
35+
position: absolute;
36+
left: 30%;
37+
margin-bottom: 20px; /* Add margin bottom for spacing */
38+
color: white;
39+
margin-top: 10px;
40+
font-family: "Recursive", sans-serif;
41+
font-optical-sizing: auto;
42+
font-weight: 700;
43+
font-style: normal;
44+
45+
46+
47+
}
48+
49+
50+
.faqs-whole-container-content {
51+
margin-top: 30px;
52+
flex: 1; /* Take up remaining space */
53+
padding: 20px; /* Add padding to content */
54+
}
55+
56+
.faqs-whole-container-toggle-icon {
57+
margin-left: 5px; /* Adjust spacing between question text and icon */
58+
float: right;
59+
}
60+
61+
.faqs-whole-container-image {
62+
padding: 20px;
63+
}
64+
65+
.faqs-whole-container-faq-item {
66+
margin-bottom: 20px;
67+
border-bottom: 3px solid;
68+
border-image: linear-gradient(to right, red, skyblue, purple, pink); /* Apply linear gradient */
69+
border-image-slice: 1; /* Ensure the gradient stretches across the entire border */
70+
padding-bottom: 20px; /* Added padding to separate questions */
71+
}
72+
73+
74+
.faqs-whole-container-faq-item:last-child {
75+
border-bottom: none;
76+
}
77+
78+
.faqs-whole-container-question {
79+
cursor: pointer;
80+
font-size: 18px;
81+
/*color: #333;*/
82+
}
83+
84+
.faqs-whole-container-answer {
85+
display: none;
86+
padding: 10px 0;
87+
font-size: 16px;
88+
/*color: #666;*/
89+
}
90+
91+
.faqs-whole-container-image img {
92+
width: 500px;
93+
height: 450px;
94+
display: block;
95+
border-radius: 10px;
96+
margin-top: 50px;
97+
}
98+
99+
100+
101+
/* Additional CSS for mobile */
102+
@media screen and (max-width: 450px) {
103+
.faqs-whole-container {
104+
max-width: 100%;
105+
margin: 5px;
106+
display: flex;
107+
flex-direction: column;
108+
}
109+
110+
.faqs-whole-container-faq-heading {
111+
left: 22px;
112+
margin-top: 20px;
113+
font-size: 20px;
114+
font-weight: 700;
115+
}
116+
117+
.faqs-whole-container-faq-item {
118+
padding: 15px;
119+
}
120+
121+
.faqs-whole-container-image {
122+
order: 1;
123+
}
124+
125+
.faqs-whole-container-content {
126+
order: 2;
127+
128+
}
129+
.faqs-whole-container-question{
130+
font-size: 15px;
131+
}
132+
133+
.faqs-whole-container-image img {
134+
width: 100%;
135+
height: auto;
136+
margin-top: 20px;
137+
border-radius: 5px;
138+
}
139+
}

‎index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>FAQs Responsive Template</title>
7+
8+
<!--link the main css file here -->
9+
<link rel="stylesheet" type="text/css" href="index-styles.css">
10+
11+
<!--link the main js file here -->
12+
<script src="faq-script.js"></script>
13+
14+
<!-- Add the following line to link your ICO icon -->
15+
<link rel="shortcut icon" href="img/faq-icon.ico" type="image/x-icon">
16+
17+
</head>
18+
<body>
19+
20+
<!-- faq container with image -->
21+
<h1 class="faqs-whole-container-faq-heading">Frequently Asked Questions</h1>
22+
23+
<div class="faqs-whole-container">
24+
<br>
25+
26+
<div class="faqs-whole-container-content">
27+
<div class="faqs-whole-container-faq-item">
28+
<div class="faqs-whole-container-question">
29+
What is Lorem Ipsum ? <span class="faqs-whole-container-toggle-icon">+</span>
30+
</div>
31+
<div class="faqs-whole-container-answer">Lorem Ipsum is placeholder text commonly used in the design and publishing industries. It resembles Latin but is actually gibberish, intended to fill space temporarily until the final text is available.</div>
32+
</div>
33+
<div class="faqs-whole-container-faq-item">
34+
<div class="faqs-whole-container-question">
35+
Why is Lorem Ipsum Used ? <span class="faqs-whole-container-toggle-icon">+</span>
36+
</div>
37+
<div class="faqs-whole-container-answer">Lorem Ipsum is used as a placeholder for text when the actual content is not yet available. It helps designers and developers visualize the layout and structure of a document or webpage without being distracted by meaningful text.</div>
38+
</div>
39+
<div class="faqs-whole-container-faq-item">
40+
<div class="faqs-whole-container-question">
41+
Who Invented Lorem Ipsum ? <span class="faqs-whole-container-toggle-icon">+</span>
42+
</div>
43+
<div class="faqs-whole-container-answer">Lorem Ipsum has roots in classical Latin literature but gained popularity as a placeholder text in the 20th century. Its exact origins are unclear, but it's commonly attributed to variations of passages from works of Cicero and other classical authors.</div>
44+
</div>
45+
<div class="faqs-whole-container-faq-item">
46+
<div class="faqs-whole-container-question">
47+
How Is Lorem Ipsum Different from Regular Text ? <span class="faqs-whole-container-toggle-icon">+</span>
48+
</div>
49+
<div class="faqs-whole-container-answer">Lorem Ipsum is intentionally nonsensical and lacks any coherent meaning, whereas regular text communicates meaningful information. It consists of repeated phrases and words that do not form coherent sentences, making it ideal for placeholder content.</div>
50+
</div>
51+
<div class="faqs-whole-container-faq-item">
52+
<div class="faqs-whole-container-question">
53+
Is Lorem Ipsum Still Used Today ? <span class="faqs-whole-container-toggle-icon">+</span>
54+
</div>
55+
<div class="faqs-whole-container-answer">Yes, Lorem Ipsum remains widely used in various industries, especially in graphic design, web development, and typesetting. Despite advancements in technology, it continues to serve its purpose as a temporary placeholder for text.</div>
56+
</div>
57+
<div class="faqs-whole-container-faq-item">
58+
<div class="faqs-whole-container-question">
59+
Can Lorem Ipsum Be Translated ? <span class="faqs-whole-container-toggle-icon">+</span>
60+
</div>
61+
<div class="faqs-whole-container-answer">Lorem Ipsum is not meant to be translated into any meaningful language because it is essentially random and nonsensical text. However, some variations or adaptations may exist in different languages, but they still serve the same purpose of placeholder text.</div>
62+
</div>
63+
</div>
64+
<!-- right side image for the faq -->
65+
<div class="faqs-whole-container-image">
66+
<img src="img/6384636.jpg" alt="faq image">
67+
</div>
68+
</div>
69+
70+
71+
</body>
72+
</html>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /