Skip to content

Commit 3a9424d

Browse files
Ansh101112Ansh101112
authored
Navbar New hovering affect added (#543)
* footer updated * new hoverig affect added
1 parent 3f22c9d commit 3a9424d

File tree

1 file changed

+62
-59
lines changed

1 file changed

+62
-59
lines changed

‎index.html

Lines changed: 62 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
window.dataLayer = window.dataLayer || [];
99
function gtag() { dataLayer.push(arguments); }
1010
gtag('js', new Date());
11-
1211
gtag('config', 'G-76QCJCGDB5');
1312
</script>
1413
<link rel="icon" href="./assets/images/favicon.png" type="image/x-icon">
@@ -40,14 +39,20 @@
4039
<!--Google Site Search Verification-->
4140
<meta name="google-site-verification" content="lnzqpbpjoknDdDMpcJhBthXHLR7jUWtfSXoGHbdpI40" />
4241
<style>
43-
/* CSS for Navbar hover effects */
42+
/* CSS for Navbar hover and click effects */
4443
.navbar-nav .nav-link {
4544
transition: color 0.3s, background-color 0.3s;
4645
}
4746

4847
.navbar-nav .nav-link:hover {
4948
color: #ffffff;
50-
background-color: rgba(255, 255, 255, 0.2);
49+
background-color: #007bff; /* Change this to your desired hover background color */
50+
border-radius: 4px;
51+
}
52+
53+
.navbar-nav .nav-link:active {
54+
color: #ffffff;
55+
background-color: #0056b3; /* Change this to your desired active background color */
5156
border-radius: 4px;
5257
}
5358
</style>
@@ -75,7 +80,7 @@
7580
}
7681
</style>
7782
<!-- Responsive navbar-->
78-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
83+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
7984
<div class="container">
8085
<img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
8186
<a class="navbar-brand" href="./index.html">CSEdge Learn</a>
@@ -85,30 +90,26 @@
8590
<span class="toggler-icon top-bar"></span>
8691
<span class="toggler-icon middle-bar"></span>
8792
<span class="toggler-icon bottom-bar"></span>
88-
8993
</button>
90-
9194
<div class="collapse navbar-collapse" id="navbarSupportedContent">
92-
93-
<div class="collapse navbar-collapse" id="navbarSupportedContent">
94-
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 flex justify-content-center">
95-
<li class="nav-item me-2">
96-
<a class="nav-link" href="https://csedge.courses"><i class="fa-solid fa-house"></i> Home</a>
97-
</li>
98-
<li class="nav-item me-2">
99-
<a class="nav-link" href="https://csedge.courses/about"> <i class="fa-solid fa-circle-info"></i>
100-
About</a>
101-
</li>
102-
<li class="nav-item me-2">
103-
<a class="nav-link" href="https://csedge.courses#contact"><i class="fa-solid fa-phone"></i> Contact</a>
104-
</li>
105-
<li class="nav-item me-2">
106-
<a class="nav-link active" aria-current="page" href="#!"><i class="fa-solid fa-blog"></i> Blog</a>
107-
</li>
108-
</ul>
109-
</div>
95+
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 flex justify-content-center">
96+
<li class="nav-item me-2">
97+
<a class="nav-link" href="https://csedge.courses"><i class="fa-solid fa-house"></i> Home</a>
98+
</li>
99+
<li class="nav-item me-2">
100+
<a class="nav-link" href="https://csedge.courses/about"> <i class="fa-solid fa-circle-info"></i> About</a>
101+
</li>
102+
<li class="nav-item me-2">
103+
<a class="nav-link" href="https://csedge.courses#contact"><i class="fa-solid fa-phone"></i> Contact</a>
104+
</li>
105+
<li class="nav-item me-2">
106+
<a class="nav-link active" aria-current="page" href="#!"><i class="fa-solid fa-blog"></i> Blog</a>
107+
</li>
108+
</ul>
110109
</div>
110+
</div>
111111
</nav>
112+
112113
<!-- Page header with logo and tagline-->
113114
<div class="container">
114115
<div class="text-center my-5">
@@ -285,49 +286,37 @@ <h6>About Us</h6>
285286
href="https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7202959273855713280"
286287
target="_blank">Subscribe on LinkedIn</a>
287288
</div>
288-
289+
289290
<div class="col-xs-6 col-md-3">
290291
<h6>Categories</h6>
291292
<ul class="footer-links">
292293
<li><a href="#">Web Design</a></li>
293-
<li>
294-
<a href="#">JavaScript</a>
295-
</li>
296-
<li>
297-
<a href="#">HTML</a>
298-
</li>
299-
<li>
300-
<a href="#">CSS</a>
301-
</li>
302-
<li>
303-
<a href="#">Freebies</a>
304-
</li>
305-
<li>
306-
<a href="#">Tutorials</a>
307-
</li>
294+
<li><a href="#">JavaScript</a></li>
295+
<li><a href="#">HTML</a></li>
296+
<li><a href="#">CSS</a></li>
297+
<li><a href="#">Freebies</a></li>
298+
<li><a href="#">Tutorials</a></li>
308299
</ul>
309300
</div>
310-
301+
311302
<div class="col-xs-6 col-md-3">
312303
<h6>Quick Links</h6>
313304
<ul class="footer-links">
314305
<li><a href="https://csedge.courses/about">About Us</a></li>
315306
<li><a href="https://csedge.courses/#contact">Contact Us</a></li>
316-
<li>
317-
<a href="https://github.com/CSEdgeOfficial/learn.csedge.courses">Contribute</a>
318-
</li>
307+
<li><a href="https://github.com/CSEdgeOfficial/learn.csedge.courses">Contribute</a></li>
319308
<li><a href="./csedge.courses/privacypolicy.html">Privacy Policy</a></li>
320309
</ul>
310+
<ul class="social-icons">
311+
<li><a href="https://youtube.com/@CSEdgeOfficial"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
312+
<li><a href="https://github.com/CSEdgeOfficial"><i class="fab fa-github" aria-hidden="true"></i></a></li>
313+
314+
<li><a href="https://www.linkedin.com/company/csedge/"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
315+
<li><a href="https://www.instagram.com/csedgeofficial"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
316+
</ul>
321317
</div>
322318
</div>
323319
<hr />
324-
</div>
325-
326-
327-
328-
329-
330-
331320
</div>
332321
<style>
333322
.libutton {
@@ -345,7 +334,7 @@ <h6>Quick Links</h6>
345334
background-color: #0A66C2;
346335
font-family: "SF Pro Text", Helvetica, sans-serif;
347336
}
348-
337+
349338
.libutton:hover {
350339
display: flex;
351340
flex-direction: column;
@@ -359,13 +348,31 @@ <h6>Quick Links</h6>
359348
height: 32px;
360349
border-radius: 16px;
361350
background-color: black;
362-
351+
363352
border-color: #0A66C2;
364353
font-family: "SF Pro Text", Helvetica, sans-serif;
365354
}
355+
356+
.social-icons {
357+
list-style: none;
358+
padding: 0;
359+
}
360+
361+
.social-icons li {
362+
display: inline;
363+
margin-right: 10px;
364+
}
365+
366+
.social-icons li a {
367+
color: #333;
368+
font-size: 20px;
369+
}
370+
371+
.social-icons li a:hover {
372+
color: #007bff;
373+
}
366374
</style>
367375
<hr style="border-top: 1px solid black;">
368-
369376
<!-- Copyright Section -->
370377
<div class="container">
371378
<div class="row">
@@ -377,12 +384,8 @@ <h6>Quick Links</h6>
377384
</div>
378385
</div>
379386
</div>
380-
381-
382-
</div>
383-
</div>
384-
385387
</footer>
388+
386389
<!-- Bootstrap core JS-->
387390
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
388391
<script src="./ScrollToTop.js"></script>

0 commit comments

Comments
 (0)