Skip to content

Commit 7f89261

Browse files
avogadroBavogadroB
committed
Added a navigation bar to the contact us page
1 parent 3a4a012 commit 7f89261

File tree

3 files changed

+352
-5
lines changed

3 files changed

+352
-5
lines changed

‎Website/contact.html

Lines changed: 105 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,114 @@
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<meta name="title" content="Machine Learning Repositories">
8+
<meta name="description"
9+
content="A curated collection of diverse machine learning repositories available on GitHub, presented by the RecodeHive community">
10+
<meta name="keywords"
11+
content="machine learning, machine learning repositories, machine learning repos, machine learning recode hive, recode hive, recode hive ml repos, recode give ml, ml, ml repositories, github repositories ml, machine learning github repositories">
12+
<meta name="robots" content="index, follow">
13+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
14+
<meta name="author" content="Recode Hive">
615
<title>Contact Us</title>
716
<link rel="stylesheet" href="css/contact.css" />
17+
<link rel="icon" href="/assets/recode-hive.png" type="image/png"> <!-- Added favicon -->
18+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
19+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
20+
<style>
21+
#progress-container {
22+
position: fixed ;
23+
top: 0px;
24+
left: 0;
25+
width: 100%;
26+
height: 15px;
27+
z-index: 99990;
28+
/* background: #f3f3f3; */
29+
}
30+
31+
#progress-bar {
32+
height: 53%;
33+
width: 0;
34+
background: linear-gradient(90deg, rgb(0, 72, 255) 0%, rgb(58, 114, 227) 50%, rgb(22, 121, 250) 100%);
35+
box-shadow: 0 0 4px rgba(0, 166, 255, 0.7), 0 0 10px rgba(255, 255, 255, 0.7);
36+
transition: width 0.09s ease-in-out;
37+
border-radius: 10px;
38+
}
39+
.dark-mode .content{
40+
background-color: white;
41+
}
42+
.dark-mode .title{
43+
color: #333;
44+
}
45+
.dark-mode .paragraph{
46+
color: #555;
47+
}
48+
</style>
849
</head>
9-
<body>
50+
<body class="da">
51+
<div id="progress-container">
52+
<div id="progress-bar"></div>
53+
</div>
1054

55+
<script>
56+
57+
window.addEventListener('scroll', function() {
58+
const winScroll = document.body.scrollTop || document.documentElement.scrollTop;
59+
const height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
60+
const scrolled = (winScroll / height) * 100;
61+
document.getElementById('progress-bar').style.width = scrolled + '%';
62+
});
63+
</script>
64+
<div class="loading-container" id="loading-animation">
65+
<div class="loader"></div>
66+
</div>
67+
<header>
68+
<nav class="navbar">
69+
<a class="logo-container" href="/">
70+
<img src="assets/recode-hive.png" alt="Recode Hive Icon" class="logo-icon">
71+
<span class="logo-text">Recode Hive</span>
72+
</a>
73+
<ul class="nav-links">
74+
<li><a href="/">Home</a></li>
75+
<li><a href="/about">About</a></li>
76+
77+
<li><a href="https://recodehive.github.io/awesome-github-profiles/pages/blog.html">Learn</a></li>
78+
<li><a href="organization">Organization</a></li>
79+
<li><a href="./faq.html">FAQ</a></li>
80+
<li><a href="./faq.html">Feedback</a></li>
81+
<li><a href="contact">Contact</a></li>
82+
<!-- Dropdown on navbar -->
83+
<li class="dropdown">
84+
<button id="dropdownButton" class="dropbtn">Know More</button>
85+
<div id="dropdownMenu" class="dropdown-content">
86+
<a href="/how-we-work">How we work?</a>
87+
<a href="/projects">Projects</a>
88+
<a href="/team">Team</a>
89+
<a href="conduct">Code of Conduct</a>
90+
</div>
91+
</li>
92+
<div class="nav-icons">
93+
<li>
94+
<a href="https://github.com/recodehive/machine-learning-repos" target="_blank">
95+
<img src="assets/images.png" alt="GitHub"> <!-- GitHub Icon -->
96+
</a>
97+
</li>
98+
<li>
99+
<button id="toggle-dark-mode" title="Use Ctrl+Q to toggle themes easily">
100+
<i class="fas fa-moon"></i>
101+
</button>
102+
</li>
103+
</div>
104+
</ul>
105+
<div class="line" id="line">
106+
<div class="bar1"></div>
107+
<div class="bar2"></div>
108+
<div class="bar3"></div>
109+
</div>
110+
</nav>
111+
</header>
112+
113+
<main>
11114
<div class="contact-container">
12115
<h2>Contact Us</h2>
13116
<p>We would love to hear from you! Please fill out this form and we'll get in touch with you shortly.</p>
@@ -31,6 +134,6 @@ <h2>Contact Us</h2>
31134
<!-- Back to Home Button -->
32135
<button onclick="window.location.href='index.html'" class="back-button">Back to Home</button>
33136
</div>
34-
137+
</main>
35138
</body>
36139
</html>

‎Website/css/contact.css

Lines changed: 246 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,259 @@
11
/* General Styles */
22
body {
33
font-family: Arial, sans-serif;
4-
background-color: #160457; /* Blue background */
4+
background-color: #0a0a2e;
5+
font-family: 'Arial', sans-serif;
56
color: #99d6dd;
67
margin: 0;
78
padding: 0;
8-
display: flex;
99
justify-content: center;
1010
align-items: center;
1111
height: 100vh;
1212
}
13+
header {
14+
background-color: #121245;
15+
padding: 10px 20px;
16+
animation: fadeIn 1s ease-in-out;
17+
}
18+
19+
.navbar {
20+
display: flex;
21+
justify-content: space-between;
22+
align-items: center;
23+
}
24+
25+
.logo-container {
26+
display: flex;
27+
cursor: pointer;
28+
align-items: center;
29+
}
30+
31+
.logo-container img {
32+
filter: brightness(1) invert(1);
33+
}
34+
35+
a.logo-container {
36+
text-decoration: none;
37+
}
38+
39+
.logo-icon {
40+
width: 30px;
41+
height: 30px;
42+
margin-right: 10px;
43+
}
44+
45+
.logo-text {
46+
font-size: 18px;
47+
font-weight: bold;
48+
color: #f1f1f1;
49+
}
50+
51+
.brand-name {
52+
font-size: 1.5em;
53+
color: #f1f1f1;
54+
margin-left: 10px;
55+
}
56+
57+
.nav-links {
58+
list-style: none;
59+
display: flex;
60+
flex-grow: 1;
61+
justify-content: flex-end;
62+
gap: 50px;
63+
margin-left: 20px;
64+
right: 10px;
65+
}
66+
67+
.line {
68+
display: none;
69+
flex-direction: column;
70+
cursor: pointer;
71+
}
72+
73+
.line div {
74+
width: 25px;
75+
height: 3px;
76+
background-color: #fff;
77+
margin: 4px 0;
78+
transition: 0.4s;
79+
}
80+
81+
/* Hamburger Active State */
82+
.change .bar1 {
83+
transform: rotate(-45deg) translate(-10px, 8px);
84+
}
85+
86+
.change .bar2 {
87+
opacity: 0;
88+
}
89+
90+
.change .bar3 {
91+
transform: rotate(45deg) translate(-5px, -6px);
92+
}
93+
94+
.nav-icons {
95+
display: flex;
96+
gap: 20px;
97+
}
98+
/* Responsive */
99+
@media (max-width: 1024px) {
100+
.nav-links {
101+
flex-direction: column;
102+
align-items: center;
103+
position: absolute;
104+
padding: 10px;
105+
top: 40px;
106+
right: 0;
107+
gap: 10px;
108+
width: 100%;
109+
background-color: #13034f;
110+
opacity: 0;
111+
visibility: hidden;
112+
transform: translateY(-20px);
113+
transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
114+
}
115+
116+
.nav-links.active {
117+
opacity: 1;
118+
visibility: visible;
119+
transform: translateY(0);
120+
}
121+
122+
.nav-links li {
123+
margin: 10px 0;
124+
}
125+
126+
.line {
127+
display: flex;
128+
}
129+
}
130+
131+
/* Hover Effect for Navigation Links */
132+
.nav-links a {
133+
text-decoration: none;
134+
color: #f1f1f1;
135+
font-weight: bold;
136+
position: relative;
137+
white-space: nowrap;
138+
transition: transform 0.3s ease-in-out, text-shadow 0.3s ease-in-out;
139+
}
140+
141+
.nav-links a:hover {
142+
color: yellow; /* Yellow color on hover */
143+
transform: scale(1.1);
144+
text-shadow: 0 0 10px yellow, 0 0 20px yellow;
145+
}
146+
147+
.nav-links a img {
148+
width: 30px;
149+
height: 30px;
150+
border-radius: 50%;
151+
filter: brightness(0) invert(1);
152+
margin-top: -5px;
153+
}
154+
155+
/* Dropdown */
156+
.dropdown {
157+
float: left;
158+
overflow: hidden;
159+
}
160+
161+
.dropbtn {
162+
font-size: 16px;
163+
border: none;
164+
outline: none;
165+
color: white;
166+
font-weight: bold;
167+
background-color: inherit;
168+
font-family: inherit;
169+
margin: 0;
170+
cursor: pointer;
171+
}
172+
173+
.dropdown-content {
174+
display: none;
175+
position: absolute;
176+
background-color: #f0f4f8;
177+
min-width: 160px;
178+
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
179+
z-index: 1;
180+
}
181+
182+
.dark-mode .dropdown-content {
183+
background-color: #170179;
184+
}
185+
186+
.dropdown-content a {
187+
color: black;
188+
padding: 12px 16px;
189+
text-decoration: none;
190+
display: block;
191+
text-align: left;
192+
}
193+
194+
/* Hover Effect for Dropdown Items */
195+
.dropdown-content a:hover {
196+
color: #0066cc;
197+
}
198+
199+
.dropdown:hover .dropdown-content {
200+
display: block;
201+
}
202+
203+
.show {
204+
display: block;
205+
}
206+
207+
208+
main {
209+
max-width: fit-content;
210+
margin-left: auto;
211+
margin-right: auto;
212+
display: flex;
213+
flex-direction: column;
214+
padding: 20px;
215+
flex: 1;
216+
animation: fadeIn 1s ease-in-out;
217+
/* Makes main content take up the remaining space */
218+
}
219+
220+
221+
.welcome-section {
222+
text-align: center;
223+
margin-bottom: 30px;
224+
color:white;
225+
}
226+
227+
228+
h2 {
229+
font-size: 2em;
230+
margin-bottom: 20px;
231+
animation: slideInRight 1s ease-in-out;
232+
color:white;
233+
}
234+
235+
p {
236+
font-size: 1.2em;
237+
line-height: 1.6;
238+
color:white;
239+
}
240+
.dark-mode p {
241+
color:black;
242+
}
243+
244+
button#toggle-stats {
245+
display: block;
246+
margin: 0 auto 20px auto;
247+
padding: 10px 20px;
248+
font-size: 1.1em;
249+
background-color: #1a1a5e;
250+
/* Dark blue button */
251+
color: #f1f1f1;
252+
border: none;
253+
cursor: pointer;
254+
transition: background-color 0.3s ease;
255+
animation: slideInRight 1s ease-in-out;
256+
}
13257

14258
/* Contact Form Container */
15259
.contact-container {
@@ -90,7 +334,6 @@ textarea {
90334
button {
91335
background-color: #416f77;
92336
color: white;
93-
padding: 12px;
94337
border: none;
95338
border-radius: 5px;
96339
cursor: pointer;

0 commit comments

Comments
 (0)