Skip to content

Commit 639dd8c

Browse files
codewithdhruba01sanjay-kv
codewithdhruba01
and
sanjay-kv
authored
UI bug: Unwanted space above navbar and code format fix (#1403)
* add: footer social icon Co-Authored-By: Sanjay Viswanathan <[email protected]> * feat: Redesign contact form with modern layout and social icons - Updated form layout with Name, Email, and Message fields - Added send icon to the "Send Message" button - Included centered social media icons (GitHub, LinkedIn, X, Facebook) - Applied gradient background and rounded corners for modern UI - Improved responsiveness for mobile devices - Updated placeholder texts and heading to "Contact Us" Co-Authored-By: Sanjay Viswanathan <[email protected]> * UI bug: Unwanted space above navbar fix Co-Authored-By: Sanjay Viswanathan <[email protected]> --------- Co-authored-by: Sanjay Viswanathan <[email protected]>
1 parent 2f7d234 commit 639dd8c

File tree

2 files changed

+267
-201
lines changed

2 files changed

+267
-201
lines changed

‎pages/help.html‎

Lines changed: 46 additions & 197 deletions
Original file line numberDiff line numberDiff line change
@@ -17,137 +17,58 @@
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(33, 78, 134, 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:#a29eae;
76-
77-
}
78-
p{
79-
text-align: center;
80-
font-size:14px;
81-
}
82-
label{
83-
font-weight: bold;
84-
color:#a29eae;
85-
font-size:small;
86-
}
87-
88-
89-
.form0{
90-
display:flex;
91-
gap:32px;
92-
}
93-
.form2{
94-
width:50%;
95-
text-align: left;
96-
}
97-
.form1{
98-
text-align: left;
99-
width:50%;
100-
}
101-
</style>
10220
</head>
10321
<body>
10422

10523
<nav class="navbar">
106-
<a class="navbar-left" href="../index.html" style="text-decoration: none; color: #333;">
107-
<img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
108-
<span class="navbar-text">Recode Hive</span>
109-
</a>
110-
<div class="navbar-right">
111-
<a href="githubbadge.html" class="navbar-link">Github-Badge</a>
112-
<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
113-
class="navbar-link">Add Profile</a>
114-
<a href="events.html" class="navbar-link">Events</a>
115-
<a href="blog.html" class="navbar-link">Blog</a>
116-
<a href="compare.html" class="navbar-link">Compare</a>
117-
118-
119-
<div class="toggle-switch">
120-
<input type="checkbox" id="theme-toggle">
121-
<label for="theme-toggle">
122-
<div class="switch-button">
123-
<span class="material-icons sun-icon">wb_sunny</span>
124-
<span class="material-icons moon-icon">brightness_2</span>
125-
</div>
126-
</label>
24+
<a class="navbar-left" style="color: #333 !important;text-decoration: none;" href="../index.html">
25+
<img src="../assets/recode-hive.png" alt="Recode Hive Icon" class="navbar-icon">
26+
<span class="navbar-text">Recode Hive</span>
27+
</a>
28+
<div class="navbar-right">
29+
<a href="githubbadge.html" class="navbar-link">Github-Badge</a>
30+
<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+"
31+
class="navbar-link">Add Profile</a>
32+
<a href="events.html" class="navbar-link">Events</a>
33+
<a href="blog.html" class="navbar-link">Blog</a>
34+
<a href="compare.html" class="navbar-link">Compare</a>
35+
<a href="../login.html" class="navbar-link">Login</a>
36+
37+
38+
<div class="toggle-switch">
39+
<input type="checkbox" id="theme-toggle">
40+
<label for="theme-toggle">
41+
<div class="switch-button">
42+
<span class="material-icons sun-icon">wb_sunny</span>
43+
<span class="material-icons moon-icon">brightness_2</span>
44+
</div>
45+
</label>
46+
</div>
47+
</div>
48+
<div class="hamburger" id="hamburger">
49+
<div></div>
50+
<div></div>
51+
<div></div>
52+
</div>
53+
</nav>
54+
<div class="mobile-menu" id="mobile-menu">
55+
<a href="githubbadge.html" class="navbar-links">Github-Badge</a>
56+
<a href="events.html" class="navbar-links">Events</a>
57+
<a href="blog.html" class="navbar-links">Blog</a>
58+
<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="navbar-links">Add Profile</a>
59+
<a href="../login.html">Login</a>
60+
61+
<div class="toggle-switch">
62+
<input type="checkbox" id="theme-toggle-mobile">
63+
<label for="theme-toggle-mobile">
64+
<div class="switch-button">
65+
<span class="material-icons sun-icon">wb_sunny</span>
66+
<span class="material-icons moon-icon">brightness_2</span>
12767
</div>
128-
</div>
129-
<div class="hamburger" id="hamburger">
130-
<div></div>
131-
<div></div>
132-
<div></div>
133-
</div>
134-
</nav>
135-
<div class="mobile-menu" id="mobile-menu">
136-
<a href="#" class="navbar-links">Github-Badge</a>
137-
<a href="events.html" class="navbar-links">Events</a>
138-
<a href="blog.html" class="navbar-links">Blog</a>
139-
<a href="https://github.com/recodehive/awesome-github-profiles/issues/new?assignees=&labels=%E2%9E%95+profile&projects=&template=add_profile.md&title=Add+Profile%3A+" class="navbar-links">Add Profile</a>
140-
<div class="toggle-switch">
141-
<input type="checkbox" id="theme-toggle-mobile">
142-
<label for="theme-toggle-mobile">
143-
<div class="switch-button">
144-
<span class="material-icons sun-icon">wb_sunny</span>
145-
<span class="material-icons moon-icon">brightness_2</span>
146-
</div>
147-
</label>
148-
</div>
68+
</label>
14969
</div>
150-
70+
</div>
71+
<div id="toast-container"></div>
15172
<div class="main-container">
15273
<div class="container-help">
15374
<div class="content-block">
@@ -244,17 +165,6 @@ <h2>Contact Us</h2>
244165
</form>
245166
</div>
246167

247-
<style>
248-
249-
250-
251-
.contact-box {
252-
background: linear-gradient(135deg, #164563, #303233);
253-
padding: 50px;
254-
border-radius: 10px;
255-
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
256-
}
257-
258168
.contact-box h2 {
259169
margin-bottom: 20px;
260170
}
@@ -384,67 +294,6 @@ <h5>
384294
</script>
385295
</footer>
386296

387-
<style>
388-
.footer-logo {
389-
width: auto;
390-
height: 93px;
391-
cursor: pointer;
392-
padding-left: 20px;
393-
padding-top: 40px;
394-
}
395-
.social-media-icons {
396-
display: flex;
397-
justify-content: center;
398-
margin-top: 10px;
399-
}
400-
401-
.social-media-icons a {
402-
margin: 0 15px;
403-
text-decoration: none;
404-
color: #000;
405-
position: relative;
406-
transition: transform 0.3s, background-color 0.3s;
407-
}
408-
409-
.social-media-icons a i {
410-
font-size: 24px;
411-
}
412-
413-
.social-media-icons a .filled {
414-
position: absolute;
415-
top: 0;
416-
left: 0;
417-
right: 0;
418-
bottom: 0;
419-
background-color: transparent;
420-
transition: background-color 0.3s;
421-
border-radius: 50%;
422-
}
423-
424-
.social-media-icons a:hover {
425-
transform: rotate(20deg);
426-
}
427-
428-
.social-media-icons a:hover .filled {
429-
background-color: rgba(0, 0, 0, 0.1);
430-
}
431-
432-
.footer-info {
433-
display: flex;
434-
flex-direction: column;
435-
align-items: center; /* Center the logo and social icons */
436-
}
437-
438-
439-
.footer-links {
440-
text-align: left; /* Align the links to the left */
441-
margin-top: 20px; /* Add spacing from above elements */
442-
}
443-
444-
.footer-section {
445-
margin-bottom: 15px; /* Space between sections */
446-
}
447-
</style>
448297

449298
<!-- Scroll to top -->
450299
<button id="scrollToTop" aria-label="Scroll to top">

0 commit comments

Comments
 (0)