Skip to content

Commit 94adc8e

Browse files
codewithdhruba01sanjay-kv
codewithdhruba01
and
sanjay-kv
authored
Code formatter event page and faq page (#1409)
Co-authored-by: Sanjay Viswanathan <[email protected]>
1 parent 639dd8c commit 94adc8e

File tree

4 files changed

+225
-233
lines changed

4 files changed

+225
-233
lines changed

‎pages/events.html‎

Lines changed: 2 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
43
<head>
54
<meta charset="UTF-8">
65
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -11,6 +10,8 @@
1110
<link rel="stylesheet" href="../styles/hamburger.css">
1211
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
1312
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
13+
<!-- Link to Font Awesome for icons -->
14+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
1415
</head>
1516

1617
<body>
@@ -200,65 +201,6 @@ <h5>
200201
</script>
201202
</footer>
202203

203-
<!-- Link to Font Awesome for icons -->
204-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
205-
206-
<!-- Custom CSS for social icons -->
207-
<style>
208-
.social-media-icons {
209-
display: flex;
210-
justify-content: center;
211-
margin-top: 10px;
212-
}
213-
214-
.social-media-icons a {
215-
margin: 0 15px;
216-
text-decoration: none;
217-
color: #000;
218-
position: relative;
219-
transition: transform 0.3s, background-color 0.3s;
220-
}
221-
222-
.social-media-icons a i {
223-
font-size: 24px;
224-
}
225-
226-
.social-media-icons a .filled {
227-
position: absolute;
228-
top: 0;
229-
left: 0;
230-
right: 0;
231-
bottom: 0;
232-
background-color: transparent;
233-
transition: background-color 0.3s;
234-
border-radius: 50%;
235-
}
236-
237-
.social-media-icons a:hover {
238-
transform: rotate(20deg);
239-
}
240-
241-
.social-media-icons a:hover .filled {
242-
background-color: rgba(0, 0, 0, 0.1);
243-
}
244-
245-
.footer-info {
246-
display: flex;
247-
flex-direction: column;
248-
align-items: center; /* Center the logo and social icons */
249-
}
250-
251-
252-
.footer-links {
253-
text-align: left; /* Align the links to the left */
254-
margin-top: 20px; /* Add spacing from above elements */
255-
}
256-
257-
.footer-section {
258-
margin-bottom: 15px; /* Space between sections */
259-
}
260-
</style>
261-
262204
<button id="scrollToTop" aria-label="Scroll to top">
263205
<svg viewBox="0 0 384 512" xmlns="http://www.w3.org/2000/svg" class="arrow-icon">
264206
<path d="M374.6 246.6C368.4 252.9 360.2 256 352 256s-16.38-3.125-22.62-9.375L224 141.3V448c0 17.69-14.33 31.1-31.1 31.1S160 465.7 160 448V141.3L54.63 246.6c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160C387.1 213.9 387.1 234.1 374.6 246.6z"/>

‎pages/faq.html‎

Lines changed: 1 addition & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -17,89 +17,7 @@
1717
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
1818
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
1919
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>
20-
<style>
21-
body{margin:0;padding:0;font-family: Poppins,sans-serif;}
22-
* {box-sizing: border-box;}
23-
24-
input, select, textarea {
25-
width: 100%;
26-
padding: 8px;
27-
border: 1px solid #ccc;
28-
border-radius: 4px;
29-
box-sizing: border-box;
30-
margin-top: 6px;
31-
margin-bottom: 16px;
32-
resize: vertical;
33-
outline:none;
34-
35-
}
36-
37-
input[type=submit] {
38-
background-color: #0D92F4;
39-
color: white;
40-
padding: 10px 20px;
41-
border: 2px solid #0D92F4;;
42-
border-radius: 10px;
43-
cursor: pointer;
44-
font-weight: bold;
45-
}
46-
47-
input[type=submit]:hover {
48-
border:2px solid #075d9c;
49-
background-color:#F4F4F4;;
50-
color:#075d9c;
51-
}
52-
53-
.container {
54-
55-
display: flex;
56-
justify-content: center;
57-
align-items: center;
58-
height: 100vh;
59-
}
60-
form{
61-
width:70%;
62-
padding-block: 10px;
63-
padding-inline: 20px;
64-
background-image: radial-gradient( circle 311px at 8.6% 27.9%, rgba(62,147,252,0.57) 12.9%, rgba(242, 232, 234, 0) 91.2% );
65-
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
66-
border-radius: 10px;;
67-
display: flex;
68-
flex-direction: column;
69-
gap:20px;
70-
}
71-
h3{
72-
text-align: center;
73-
font-size: 32px;
74-
margin-bottom:0;
75-
color:#091057;
76-
77-
}
78-
p{
79-
text-align: center;
80-
font-size:14px;
81-
}
82-
label{
83-
font-weight: bold;
84-
color:#091057;
85-
font-size:small;
86-
87-
}
88-
89-
90-
.form0{
91-
display:flex;
92-
gap:32px;
93-
}
94-
.form2{
95-
width:50%;
96-
text-align: left;
97-
}
98-
.form1{
99-
text-align: left;
100-
width:50%;
101-
}
102-
</style>
20+
10321
</head>
10422
<body>
10523

@@ -232,96 +150,6 @@ <h2>Frequently Asked Questions</h2>
232150
});
233151

234152
</script>
235-
<style>
236-
/* FAQ Section Styling */
237-
.faq-section {
238-
margin: 20px;
239-
}
240-
241-
.faq-header h2 {
242-
font-family: "San Francisco", sans-serif;
243-
font-size: 28px;
244-
text-align: center;
245-
margin-bottom: 20px;
246-
color: #000; /* Black for light mode */
247-
transition: color 0.3s ease;
248-
}
249-
250-
body.dark-mode .faq-header h2 {
251-
color: #fff; /* White for dark mode */
252-
}
253-
254-
/* FAQ Question Styling */
255-
.faq-question {
256-
background-color: #f1f1f1; /* Lighter for questions */
257-
padding: 15px 20px;
258-
border: none;
259-
border-radius: 10px;
260-
font-family: "San Francisco", sans-serif;
261-
font-size: 18px;
262-
color: #333;
263-
display: flex;
264-
justify-content: space-between;
265-
align-items: center;
266-
cursor: pointer;
267-
margin-bottom: 10px;
268-
transition: background-color 0.3s ease, transform 0.3s ease;
269-
text-align: center;
270-
width: 60%;
271-
margin-left: auto;
272-
margin-right: auto;
273-
}
274-
275-
.faq-question:hover {
276-
transform: translateY(-3px);
277-
background-color: #e8e8e8;
278-
}
279-
280-
/* FAQ Answer Styling - Different background from questions */
281-
.faq-answer {
282-
max-height: 0;
283-
overflow: hidden;
284-
padding: 0 20px;
285-
background-color: #ffffff; /* Different from question background */
286-
border-radius: 10px;
287-
margin: 10px auto; /* Centers the answer */
288-
width: 60%; /* Matches question width */
289-
transition: max-height 0.6s ease-in-out, padding 0.3s ease, background-color 0.3s ease;
290-
font-family: "San Francisco", sans-serif;
291-
font-size: 16px;
292-
color: #555;
293-
opacity: 0;
294-
}
295-
296-
.faq-question.active + .faq-answer {
297-
max-height: 500px;
298-
padding: 15px 20px;
299-
opacity: 1;
300-
}
301-
302-
/* Dark Mode Styling */
303-
body.dark-mode {
304-
background-color: #121212;
305-
color: white;
306-
}
307-
308-
body.dark-mode .faq-question {
309-
background-color: #333; /* Darker for questions */
310-
color: #f1f1f1;
311-
}
312-
313-
body.dark-mode .faq-answer {
314-
background-color: #222; /* Slightly lighter than question background */
315-
color: #f1f1f1;
316-
}
317-
318-
/* Additional transition for smoother effects */
319-
.faq-question, .faq-answer {
320-
transition: all 0.3s ease;
321-
}
322-
323-
324-
</style>
325153

326154
<footer id="Contact" class="footer-2">
327155
<div class="footer-container">

‎styles/events.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,60 @@
144144
transform: scale(1.05);
145145
}
146146

147+
/* Custom CSS for social icons */
148+
.social-media-icons {
149+
display: flex;
150+
justify-content: center;
151+
margin-top: 10px;
152+
}
153+
154+
.social-media-icons a {
155+
margin: 0 15px;
156+
text-decoration: none;
157+
color: #000;
158+
position: relative;
159+
transition: transform 0.3s, background-color 0.3s;
160+
}
161+
162+
.social-media-icons a i {
163+
font-size: 24px;
164+
}
165+
166+
.social-media-icons a .filled {
167+
position: absolute;
168+
top: 0;
169+
left: 0;
170+
right: 0;
171+
bottom: 0;
172+
background-color: transparent;
173+
transition: background-color 0.3s;
174+
border-radius: 50%;
175+
}
176+
177+
.social-media-icons a:hover {
178+
transform: rotate(20deg);
179+
}
180+
181+
.social-media-icons a:hover .filled {
182+
background-color: rgba(0, 0, 0, 0.1);
183+
}
184+
185+
.footer-info {
186+
display: flex;
187+
flex-direction: column;
188+
align-items: center; /* Center the logo and social icons */
189+
}
190+
191+
192+
.footer-links {
193+
text-align: left; /* Align the links to the left */
194+
margin-top: 20px; /* Add spacing from above elements */
195+
}
196+
197+
.footer-section {
198+
margin-bottom: 15px; /* Space between sections */
199+
}
200+
147201
/* Dark mode styles */
148202
body.dark-mode .timeline::after {
149203
background-color: #f0f0f0;

0 commit comments

Comments
 (0)