Skip to content

Commit 0adaf4b

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1465 from Ayush9951/card
Add Frequently Asked Questions component
2 parents f815860 + 2341463 commit 0adaf4b

4 files changed

Lines changed: 193 additions & 0 deletions

File tree

‎Projects/SSOC Frequently Asked Questions/README.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
## About
2+
3+
This project is a clone of Frequently asked questions of SSOC'23 website.
4+
5+
## Getting Started
6+
7+
To use this project, simply open the index.html file in your web browser.
8+
9+
## Screenshots
10+
11+
![App Screenshot](https://user-images.githubusercontent.com/60573378/249243991-ae58a357-d9cc-4888-adba-c73d7ef05f14.png)

‎Projects/SSOC Frequently Asked Questions/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<link rel="stylesheet" href="style.css" />
6+
<link rel="preconnect" href="https://fonts.googleapis.com" />
7+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8+
<link
9+
href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<title>Card</title>
13+
</head>
14+
<body>
15+
<h1 class="title">SSOC'23 Frequently Asked Questions</h1>
16+
<div class="container">
17+
<div class="card" onclick="toggleAnswer1()">
18+
<div class="question-title">What is open Source Development ?</div>
19+
<div class="answer" id="answer1">
20+
A software for which the original source code is made freely available
21+
and may be redistributed and modified according to the requirement of
22+
the user.
23+
</div>
24+
</div>
25+
<div class="card" onclick="toggleAnswer2()">
26+
<div class="question-title">Any age limit for participation?</div>
27+
<div class="answer" id="answer2">No, it is open for all.</div>
28+
</div>
29+
<div class="card" onclick="toggleAnswer3()">
30+
<div class="question-title">Is there any registration fees?</div>
31+
<div class="answer" id="answer3">There is no participation fee.</div>
32+
</div>
33+
<div class="card" onclick="toggleAnswer4()">
34+
<div class="question-title">What will be the prices and perks?</div>
35+
<div class="answer" id="answer4">
36+
All the participants with successful participation will get digital
37+
certificates and some cool swags.
38+
</div>
39+
</div>
40+
<div class="card" onclick="toggleAnswer5()">
41+
<div class="question-title">Who all can participate?</div>
42+
<div class="answer" id="answer5">
43+
No matter if you are a beginner or an expert , SSOC is open for
44+
everyone who has a zeal to learn new things and achieve heights.
45+
</div>
46+
</div>
47+
<div class="card" onclick="toggleAnswer6()">
48+
<div class="question-title">
49+
Can I participate in SSOC both as a participant and mentor?
50+
</div>
51+
<div class="answer" id="answer6">
52+
You can participate either as a mentor or as a participant but not as
53+
both.
54+
</div>
55+
</div>
56+
</div>
57+
<script src="index.js"></script>
58+
</body>
59+
</html>

‎Projects/SSOC Frequently Asked Questions/index.js‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
let answer1 = document.getElementById("answer1")
2+
let answer2 = document.getElementById("answer2")
3+
let answer3 = document.getElementById("answer3")
4+
let answer4 = document.getElementById("answer4")
5+
let answer5 = document.getElementById("answer5")
6+
let answer6 = document.getElementById("answer6")
7+
8+
function toggleAnswer1() {
9+
answer1.style.display = answer1.style.display === "none" ? "block" : "none"
10+
answer1.style.transition = "all 0.2s ease"
11+
}
12+
13+
function toggleAnswer2() {
14+
answer2.style.display = answer2.style.display === "none" ? "block" : "none"
15+
answer2.style.transition = "all 0.2s ease"
16+
}
17+
18+
function toggleAnswer3() {
19+
answer3.style.display = answer3.style.display === "none" ? "block" : "none"
20+
answer3.style.transition = "all 0.2s ease"
21+
}
22+
23+
function toggleAnswer4() {
24+
answer4.style.display = answer4.style.display === "none" ? "block" : "none"
25+
answer4.style.transition = "all 0.2s ease"
26+
}
27+
28+
function toggleAnswer5() {
29+
answer5.style.display = answer5.style.display === "none" ? "block" : "none"
30+
answer5.style.transition = "all 0.2s ease"
31+
}
32+
33+
function toggleAnswer6() {
34+
answer6.style.display = answer6.style.display === "none" ? "block" : "none"
35+
answer6.style.transition = "all 0.2s ease"
36+
}

‎Projects/SSOC Frequently Asked Questions/style.css‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
body {
2+
font-family: Inter;
3+
margin: 0;
4+
}
5+
6+
.title {
7+
padding: 25px;
8+
background: #ab40f7;
9+
color: white;
10+
text-align: center;
11+
font-size: 26px;
12+
}
13+
14+
.container {
15+
width: 75%;
16+
margin: 100px auto;
17+
display: flex;
18+
flex-wrap: wrap;
19+
justify-content: center;
20+
gap: 25px;
21+
}
22+
23+
.card {
24+
width: 45%;
25+
}
26+
27+
.question-title {
28+
padding: 25px;
29+
height: 50px;
30+
margin-bottom: 10px;
31+
cursor: pointer;
32+
border: 1px solid lightgrey;
33+
border-left: 3px solid #ab40f7;
34+
font-weight: 500;
35+
font-size: 16px;
36+
display: flex;
37+
align-items: center;
38+
}
39+
40+
.question-title:hover {
41+
color: #ab40f7;
42+
}
43+
44+
.answer {
45+
color: #5d5d5d;
46+
border: 1px solid lightgray;
47+
border-top: none;
48+
border-left: 3px solid lightgrey;
49+
padding: 25px;
50+
display: none;
51+
line-height: 22px;
52+
}
53+
54+
@media screen and (max-width: 576px) {
55+
.title {
56+
font-size: 22px;
57+
background: #ab40f7;
58+
color: white;
59+
padding: 25px;
60+
margin: auto;
61+
text-align: center;
62+
}
63+
64+
.container {
65+
flex-direction: column;
66+
align-items: center;
67+
margin-top: 45px;
68+
}
69+
70+
.card {
71+
width: 300px;
72+
margin: -3px;
73+
}
74+
75+
.question-title {
76+
padding: 10px;
77+
height: 55px;
78+
display: flex;
79+
align-items: center;
80+
justify-content: center;
81+
line-height: 22px;
82+
}
83+
84+
.answer {
85+
margin-bottom: 5px;
86+
}
87+
}

0 commit comments

Comments
 (0)