Skip to content

Commit 414d7b2

Browse files
Ayush9951Ayush9951
committed
Add responsiveness for smaller devices
1 parent 2ce219c commit 414d7b2

2 files changed

Lines changed: 115 additions & 57 deletions

File tree

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

Lines changed: 49 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,59 @@
11
<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 href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
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+
/>
912
<title>Card</title>
10-
</head>
11-
<body>
12-
<h1 class="title">Frequently Asked Questions</h1>
13+
</head>
14+
<body>
15+
<h1 class="title">SSOC'23 Frequently Asked Questions</h1>
1316
<div class="container">
14-
<div class="card" onclick="toggleAnswer1()">
15-
<div class="question-title">What is open Source Development ?</div>
16-
<div class="answer" id="answer1">A software for which the original source code is made freely available and may be redistributed and modified according to the requirement of the user.</div>
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.
1723
</div>
18-
<div class="card" onclick="toggleAnswer2()">
19-
<div class="question-title">Any age limit for participation?</div>
20-
<div class="answer" id="answer2">No, it is open for all.</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.
2138
</div>
22-
<div class="card" onclick="toggleAnswer3()">
23-
<div class="question-title">Is there any registration fees?</div>
24-
<div class="answer" id="answer3">There is no participation fee.</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.
2545
</div>
26-
<div class="card" onclick="toggleAnswer4()">
27-
<div class="question-title">What will be the prices and perks?</div>
28-
<div class="answer" id="answer4">All the participants with successful participation will get digital certificates and some cool swags.</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?
2950
</div>
30-
<div class="card" onclick="toggleAnswer5()">
31-
<div class="question-title">Who all can participate?</div>
32-
<div class="answer" id="answer5">No matter if you are a beginner or an expert , SSOC is open for everyone who has a zeal to learn new things and achieve heights.</div>
33-
</div>
34-
<div class="card" onclick="toggleAnswer6()">
35-
<div class="question-title">Can I participate in SSOC both as a participant and mentor?</div>
36-
<div class="answer" id="answer6">You can participate either as a mentor or as a participant but not as both.</div>
51+
<div class="answer" id="answer6">
52+
You can participate either as a mentor or as a participant but not as
53+
both.
3754
</div>
55+
</div>
3856
</div>
3957
<script src="index.js"></script>
40-
</body>
41-
</html>
58+
</body>
59+
</html>

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

Lines changed: 66 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,87 @@
11
body {
2-
font-family: Inter;
2+
font-family: Inter;
3+
margin: 0;
34
}
45

56
.title {
6-
text-align: left;
7-
margin-top: 125px;
8-
margin-left: 165px;
9-
margin-bottom: 45px;
7+
padding: 25px;
8+
background: #ffab01;
9+
color: white;
10+
text-align: center;
11+
font-size: 28px;
1012
}
1113

1214
.container {
13-
width: 85%;
14-
margin: 25px auto;
15-
display: flex;
16-
flex-wrap: wrap;
17-
justify-content: center;
18-
gap: 25px;
15+
width: 75%;
16+
margin: 100px auto;
17+
display: flex;
18+
flex-wrap: wrap;
19+
justify-content: center;
20+
gap: 25px;
1921
}
2022

2123
.card {
22-
width: 45%;
24+
width: 45%;
2325
}
2426

2527
.question-title {
26-
border: 1px solid;
27-
padding: 25px;
28-
margin-bottom: 10px;
29-
cursor: pointer;
30-
border: 1px solid lightgrey;
31-
border-left: 3px solid #ffab01;
32-
font-weight: 500;
28+
padding: 25px;
29+
height: 50px;
30+
margin-bottom: 10px;
31+
cursor: pointer;
32+
border: 1px solid lightgrey;
33+
border-left: 3px solid #ffab01;
34+
font-weight: 500;
35+
font-size: 16px;
36+
display: flex;
37+
align-items: center;
3338
}
3439

3540
.question-title:hover {
36-
color: #ffab01;
41+
color: #ffab01;
3742
}
3843

3944
.answer {
40-
color: #5d5d5d;
41-
border: 1px solid lightgray;
42-
border-top: none;
43-
border-left: 3px solid lightgrey;
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: #ffab01;
58+
color: white;
4459
padding: 25px;
45-
display: none;
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;
4681
line-height: 22px;
47-
}
82+
}
83+
84+
.answer {
85+
margin-bottom: 5px;
86+
}
87+
}

0 commit comments

Comments
 (0)