Skip to content

Commit 0d84efd

Browse files
AmolShelke2AmolShelke2
committed
Added FAQ
1 parent ded7939 commit 0d84efd

File tree

5 files changed

+188
-0
lines changed

5 files changed

+188
-0
lines changed

‎FAQ/README.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# FAQ app
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://img.icons8.com/color/48/000000/html-5--v1.png"/> <a href="https://www.w3schools.com/css/" target="_blank"><img src="https://img.icons8.com/color/48/000000/css3.png"/></a>
5+
<img src="https://img.icons8.com/color/48/000000/javascript--v1.png"/></p>
6+
<hr>
7+
8+
# Preview
9+
10+
<img src="/FAQ/preview.png" alt="preview.">

‎FAQ/index.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>FAQ App</title>
8+
<link rel="stylesheet" href="style.css" />
9+
<link
10+
rel="stylesheet"
11+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
12+
integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
13+
crossorigin="anonymous"
14+
/>
15+
</head>
16+
<body>
17+
<h1>Frequently Asked Questions.</h1>
18+
<div class="faq-container">
19+
<div class="faq active">
20+
<h3 class="faq-title">How to become a front end developer</h3>
21+
22+
<p class="faq-text">By learning the technologies..</p>
23+
24+
<button class="faq-toggle">
25+
<i class="fas fa-chevron-down"></i>
26+
<i class="fas fa-times"></i>
27+
</button>
28+
</div>
29+
30+
<div class="faq">
31+
<h3 class="faq-title">
32+
Which skills requires to become a front-end dev?
33+
</h3>
34+
<p class="faq-text">HTML5, CSS3, JavaScript.</p>
35+
36+
<button class="faq-toggle">
37+
<i class="fas fa-chevron-down"></i>
38+
<i class="fas fa-times"></i>
39+
</button>
40+
</div>
41+
42+
<div class="faq">
43+
<h3 class="faq-title">tips to become the best coder in 24hrs</h3>
44+
<p class="faq-text">Nobody knows.</p>
45+
<button class="faq-toggle">
46+
<i class="fas fa-chevron-down"></i>
47+
<i class="fas fa-times"></i>
48+
</button>
49+
</div>
50+
51+
<div class="faq">
52+
<h3 class="faq-title">Frontend vs backend which on is the best?</h3>
53+
<p class="faq-text">Both are best.</p>
54+
<button class="faq-toggle">
55+
<i class="fas fa-chevron-down"></i>
56+
<i class="fas fa-times"></i>
57+
</button>
58+
</div>
59+
</div>
60+
61+
<!-- script src -->
62+
<script src="script.js"></script>
63+
</body>
64+
</html>

‎FAQ/preview.png

208 KB
Loading

‎FAQ/script.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const toggles = document.querySelectorAll(".faq-toggle");
2+
3+
toggles.forEach((toggle) => {
4+
toggle.addEventListener("click", () => {
5+
toggle.parentNode.classList.toggle("active");
6+
});
7+
});

‎FAQ/style.css

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
@import url("https://fonts.googleapis.com/css?family=Muli&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #f0f0f0;
9+
font-family: "Muli", sans-serif;
10+
}
11+
12+
h1 {
13+
margin: 50px 0 30px;
14+
text-align: center;
15+
}
16+
17+
.faq-container {
18+
max-width: 600px;
19+
margin: 0 auto;
20+
}
21+
22+
.faq {
23+
background-color: transparent;
24+
border: 1px solid #9fa4a8;
25+
border-radius: 10px;
26+
margin: 20px 0;
27+
padding: 30px;
28+
position: relative;
29+
overflow: hidden;
30+
transition: 0.3s ease;
31+
}
32+
33+
.faq.active {
34+
background-color: #fff;
35+
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1) 0 3px 6px rgba(0, 0, 0, 0.1);
36+
}
37+
38+
.faq.active::before,
39+
.faq.active::after {
40+
content: "\f075";
41+
font-family: "Font Awesome 5 Free";
42+
color: #2ecc71;
43+
font-size: 7rem;
44+
position: absolute;
45+
top: 20px;
46+
opacity: 0.2;
47+
left: 20px;
48+
z-index: 0;
49+
}
50+
51+
.faq.active::before {
52+
color: #3498db;
53+
top: -10px;
54+
left: -30px;
55+
transform: rotateY(180deg);
56+
}
57+
58+
.faq-title {
59+
margin: 0 35px 0 0;
60+
}
61+
62+
.faq-text {
63+
display: none;
64+
margin: 30px 0 0;
65+
}
66+
67+
.faq.active .faq-text {
68+
display: block;
69+
}
70+
71+
.faq-toggle {
72+
background-color: transparent;
73+
border: 0;
74+
cursor: pointer;
75+
border-radius: 50%;
76+
display: flex;
77+
align-items: center;
78+
justify-content: center;
79+
font-size: 16px;
80+
padding: 0;
81+
position: absolute;
82+
top: 30px;
83+
right: 30px;
84+
height: 30px;
85+
width: 30px;
86+
}
87+
88+
.faq-toggle:focus {
89+
outline: 0;
90+
}
91+
92+
.faq-toggle .fa-times {
93+
display: none;
94+
}
95+
96+
.faq.active .faq-toggle .fa-times {
97+
color: #fff;
98+
display: block;
99+
}
100+
101+
.faq.active .faq-toggle .fa-chevron-down {
102+
display: none;
103+
}
104+
105+
.faq.active .faq-toggle {
106+
background-color: #9fa4a8;
107+
}

0 commit comments

Comments
 (0)