Skip to content

Commit 8261d73

Browse files
shaina123786sanjay-kv
shaina123786
and
sanjay-kv
committed
Add dark and light mode in contact us
Co-Authored-By: Sanjay Viswanathan <[email protected]>
1 parent dee6dcf commit 8261d73

File tree

4 files changed

+147
-38
lines changed

4 files changed

+147
-38
lines changed

‎Website/contact.html

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,18 @@
3636
transition: width 0.09s ease-in-out;
3737
border-radius: 10px;
3838
}
39-
.dark-mode .content{
39+
/* .dark-mode .content{
4040
background-color: white;
4141
}
4242
.dark-mode .title{
4343
color: #333;
4444
}
4545
.dark-mode .paragraph{
4646
color: #555;
47-
}
47+
} */
4848
</style>
4949
</head>
50-
<body class="da">
50+
<body class="da">
5151
<div id="progress-container">
5252
<div id="progress-bar"></div>
5353
</div>
@@ -80,26 +80,42 @@
8080
<li><a href="Feedback.html">Feedback</a></li>
8181
<li><a href="contact.html">Contact</a></li>
8282
<!-- Dropdown on navbar -->
83-
<li class="dropdown">
83+
<!-- Inside your <ul class="nav-links"> -->
84+
<li class="dropdown">
85+
<a href="#" class="dropbtn">Know More</a>
86+
<div class="dropdown-content">
87+
<a href="https://github.com/recodehive">How we work?</a>
88+
<a href="https://github.com/recodehive">Projects</a>
89+
<a href="https://github.com/recodehive">Team</a>
90+
<a href="conduct.html">Code of Conduct</a>
91+
</div>
92+
</li>
93+
94+
<!-- <li class="dropdown">
8495
<button id="dropdownButton" class="dropbtn">Know More</button>
8596
<div id="dropdownMenu" class="dropdown-content">
8697
<a href="https://github.com/recodehive">How we work?</a>
8798
<a href="https://github.com/recodehive">Projects</a>
8899
<a href="https://github.com/recodehive">Team</a>
89100
<a href="conduct.html">Code of Conduct</a>
90101
</div>
91-
</li>
102+
</li> -->
92103
<div class="nav-icons">
93104
<li>
94105
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
95106
<img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
96107
</a>
97108
</li>
98-
<li>
109+
<li>
110+
<div>
111+
<img src="/Website/sun-solid (1).svg" id="icon">
112+
</div>
113+
</li>
114+
<!-- <li>
99115
<button id="toggle-dark-mode" title="Use Ctrl+Q to toggle themes easily">
100116
<i class="fas fa-moon"></i>
101117
</button>
102-
</li>
118+
</li> -->
103119
</div>
104120
</ul>
105121
<div class="line" id="line">
@@ -135,5 +151,17 @@ <h2>Contact Us</h2>
135151
<button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
136152
</div>
137153
</main>
154+
<script>
155+
var icon=document.getElementById("icon");
156+
icon.onclick=function(){
157+
document.body.classList.toggle("dark-theme");
158+
if(document.body.classList.contains("dark-theme")){
159+
icon.src="/Website/moon-solid.svg" ;
160+
}
161+
else{
162+
icon.src="/Website/sun-solid (1).svg";
163+
}
164+
}
165+
</script>
138166
</body>
139-
</html>
167+
</html>

‎Website/css/contact.css

Lines changed: 109 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* General Styles */
2-
body {
2+
/* body {
33
font-family: Arial, sans-serif;
44
background-color: #0a0a2e;
55
font-family: 'Arial', sans-serif;
@@ -9,9 +9,30 @@ body {
99
justify-content: center;
1010
align-items: center;
1111
height: 100vh;
12+
} */
13+
14+
15+
body {
16+
background-color: var(--primary-color, #fff);
17+
color: var(--secondary-color, #111);
18+
transition: background-color 0.3s, color 0.3s;
19+
}
20+
21+
.dark-theme {
22+
--primary-color: #111112;
23+
--secondary-color: #fff;
24+
}
25+
26+
27+
#icon {
28+
width: 19px;
29+
cursor: pointer;
30+
border-color: #06fdfd;
31+
1232
}
33+
1334
header {
14-
background-color: #121245;
35+
background-color: rgb(99, 99, 241);
1536
padding: 10px 20px;
1637
animation: fadeIn 1s ease-in-out;
1738
}
@@ -106,7 +127,8 @@ header {
106127
right: 0;
107128
gap: 10px;
108129
width: 100%;
109-
background-color: #13034f;
130+
background-color: rgb(99, 99, 241);
131+
/* background-color: #13034f; */
110132
opacity: 0;
111133
visibility: hidden;
112134
transform: translateY(-20px);
@@ -151,24 +173,74 @@ header {
151173
filter: brightness(0) invert(1);
152174
margin-top: -5px;
153175
}
176+
/* Dropdown Container */
177+
.dropdown {
178+
position: relative;
179+
display: inline-block;
180+
}
181+
182+
/* Dropdown Button Style */
183+
.dropbtn {
184+
font-size: 16px;
185+
color: white;
186+
font-weight: bold;
187+
background-color: inherit;
188+
font-family: inherit;
189+
border: none;
190+
cursor: pointer;
191+
padding: 10px 15px;
192+
text-decoration: none;
193+
}
194+
195+
/* Dropdown Content (Hidden by Default) */
196+
.dropdown-content {
197+
display: none;
198+
position: absolute;
199+
background-color: #f0f4f8;
200+
min-width: 160px;
201+
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
202+
z-index: 1;
203+
border-radius: 5px;
204+
}
205+
206+
/* Dropdown Content Links */
207+
.dropdown-content a {
208+
color: black;
209+
padding: 12px 16px;
210+
text-decoration: none;
211+
display: block;
212+
text-align: left;
213+
}
214+
215+
.dropdown-content a:hover {
216+
background-color: #0066cc; /* Hover effect */
217+
color: white;
218+
}
219+
220+
/* Show Dropdown on Hover */
221+
.dropdown:hover .dropdown-content {
222+
display: block;
223+
}
224+
154225

155226
/* Dropdown */
156-
.dropdown {
227+
/* .dropdown {
157228
float: left;
158229
overflow: hidden;
159-
}
230+
margin-right: 30px;
231+
}
160232
161-
.dropbtn {
233+
.dropbtn {
162234
font-size: 16px;
163235
border: none;
164236
outline: none;
165237
color: white;
166238
font-weight: bold;
167-
background-color: inherit;
239+
168240
font-family: inherit;
169-
margin: 0;
241+
background-color: inherit;
170242
cursor: pointer;
171-
}
243+
}
172244
173245
.dropdown-content {
174246
display: none;
@@ -177,29 +249,29 @@ header {
177249
min-width: 160px;
178250
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
179251
z-index: 1;
180-
}
181-
182-
.dark-mode .dropdown-content {
252+
}
253+
*/
254+
/* .dark-mode .dropdown-content {
183255
background-color: #170179;
184-
}
256+
} */
185257

186-
.dropdown-content a {
258+
/* .dropdown-content a {
187259
color: black;
188260
padding: 12px 16px;
189261
text-decoration: none;
190262
display: block;
191263
text-align: left;
192-
}
193-
264+
} */
265+
194266
/* Hover Effect for Dropdown Items */
195-
.dropdown-content a:hover {
267+
/* .dropdown-content a:hover {
196268
color: #0066cc;
197-
}
198-
199-
.dropdown:hover .dropdown-content {
200-
display: block;
201-
}
269+
} */
202270

271+
/* .dropdown:hover .dropdown-content {
272+
display: inline-block;
273+
} */
274+
203275
.show {
204276
display: block;
205277
}
@@ -257,13 +329,15 @@ header {
257329

258330
/* Contact Form Container */
259331
.contact-container {
260-
background-color: #0b065f; /* Darker blue for form background */
332+
background-color: rgb(99, 99, 241);
333+
/* background-color: #0b065f; Darker blue for form background */
261334
padding: 40px;
262335
border-radius: 10px;
263336
box-shadow: 0 0 10px rgba(243, 246, 246, 0.2);
264337
max-width: 500px;
265338
width: 100%;
266339
text-align: center;
340+
267341
transition: transform 0.3s ease, box-shadow 0.3s ease;
268342
}
269343

@@ -274,8 +348,9 @@ header {
274348

275349
.contact-container h2 {
276350
margin-bottom: 20px;
277-
font-size: 24px;
278-
color: #ffffff; /* White title for contrast */
351+
color: #0e08d3;
352+
font-size: 29px;
353+
279354
}
280355

281356
.contact-container p {
@@ -305,23 +380,25 @@ textarea {
305380
font-size: 16px;
306381
width: 100%;
307382
box-sizing: border-box;
308-
background-color: #110769; /* Darker blue text field background */
383+
background-color: rgb(99, 99, 241);
384+
385+
/* background-color: #110769; Darker blue text field background */
309386
color: #ffffff; /* White text in the fields */
310387
transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
311388
}
312389

313390
input[type="text"]:hover,
314391
input[type="email"]:hover,
315392
textarea:hover {
316-
background-color: #0d0891; /* Slightly lighter blue on hover */
393+
background-color: #0e08d3; /* Slightly lighter blue on hover */
317394
border-color: #0bc1f9; /* Lighter blue border on hover */
318395
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* White shadow on hover */
319396
}
320397

321398
input[type="text"]:focus,
322399
input[type="email"]:focus,
323400
textarea:focus {
324-
background-color: #0d0891; /* Lighter blue background when focused */
401+
325402
border-color: #05d1fa; /* Light blue border on focus */
326403
outline: none;
327404
box-shadow: 0 0 10px rgba(255, 255, 255, 0.7); /* Stronger white shadow when focused */
@@ -332,7 +409,9 @@ textarea {
332409
}
333410

334411
button {
335-
background-color: #416f77;
412+
background-color: #c25be1;
413+
background-color: #180de4;
414+
height: 40px;
336415
color: white;
337416
border: none;
338417
border-radius: 5px;
@@ -351,7 +430,7 @@ button:hover {
351430
/* Back to Home Button Styles */
352431
.back-button {
353432
margin-top: 20px;
354-
background-color: #5048eb;
433+
background-color: #180de4;
355434
color: white;
356435
padding: 10px 20px;
357436
border: none;

‎Website/moon-solid.svg

Lines changed: 1 addition & 0 deletions
Loading

‎Website/sun-solid (1).svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)