Skip to content

Navbar New hovering affect added #543

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jul 7, 2024
Merged

Navbar New hovering affect added #543

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a819d6
footer updated
Ansh101112 Jul 7, 2024
9f98e2b
new hoverig affect added
Ansh101112 Jul 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 62 additions & 59 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());

gtag('config', 'G-76QCJCGDB5');
</script>
<link rel="icon" href="./assets/images/favicon.png" type="image/x-icon">
Expand Down Expand Up @@ -40,14 +39,20 @@
<!--Google Site Search Verification-->
<meta name="google-site-verification" content="lnzqpbpjoknDdDMpcJhBthXHLR7jUWtfSXoGHbdpI40" />
<style>
/* CSS for Navbar hover effects */
/* CSS for Navbar hover and click effects */
.navbar-nav .nav-link {
transition: color 0.3s, background-color 0.3s;
}

.navbar-nav .nav-link:hover {
color: #ffffff;
background-color: rgba(255, 255, 255, 0.2);
background-color: #007bff; /* Change this to your desired hover background color */
border-radius: 4px;
}

.navbar-nav .nav-link:active {
color: #ffffff;
background-color: #0056b3; /* Change this to your desired active background color */
border-radius: 4px;
}
</style>
Expand Down Expand Up @@ -75,7 +80,7 @@
}
</style>
<!-- Responsive navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<img height="32px" width="32px" src="https://csedge.courses/Images/CSEDGE-LOGO32X32.png" alt="logo" />
<a class="navbar-brand" href="./index.html">CSEdge Learn</a>
Expand All @@ -85,30 +90,26 @@
<span class="toggler-icon top-bar"></span>
<span class="toggler-icon middle-bar"></span>
<span class="toggler-icon bottom-bar"></span>

</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 flex justify-content-center">
<li class="nav-item me-2">
<a class="nav-link" href="https://csedge.courses"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li class="nav-item me-2">
<a class="nav-link" href="https://csedge.courses/about"> <i class="fa-solid fa-circle-info"></i>
About</a>
</li>
<li class="nav-item me-2">
<a class="nav-link" href="https://csedge.courses#contact"><i class="fa-solid fa-phone"></i> Contact</a>
</li>
<li class="nav-item me-2">
<a class="nav-link active" aria-current="page" href="#!"><i class="fa-solid fa-blog"></i> Blog</a>
</li>
</ul>
</div>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 flex justify-content-center">
<li class="nav-item me-2">
<a class="nav-link" href="https://csedge.courses"><i class="fa-solid fa-house"></i> Home</a>
</li>
<li class="nav-item me-2">
<a class="nav-link" href="https://csedge.courses/about"> <i class="fa-solid fa-circle-info"></i> About</a>
</li>
<li class="nav-item me-2">
<a class="nav-link" href="https://csedge.courses#contact"><i class="fa-solid fa-phone"></i> Contact</a>
</li>
<li class="nav-item me-2">
<a class="nav-link active" aria-current="page" href="#!"><i class="fa-solid fa-blog"></i> Blog</a>
</li>
</ul>
</div>
</div>
</nav>

<!-- Page header with logo and tagline-->
<div class="container">
<div class="text-center my-5">
Expand Down Expand Up @@ -285,49 +286,37 @@ <h6>About Us</h6>
href="https://www.linkedin.com/build-relation/newsletter-follow?entityUrn=7202959273855713280"
target="_blank">Subscribe on LinkedIn</a>
</div>

<div class="col-xs-6 col-md-3">
<h6>Categories</h6>
<ul class="footer-links">
<li><a href="#">Web Design</a></li>
<li>
<a href="#">JavaScript</a>
</li>
<li>
<a href="#">HTML</a>
</li>
<li>
<a href="#">CSS</a>
</li>
<li>
<a href="#">Freebies</a>
</li>
<li>
<a href="#">Tutorials</a>
</li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Freebies</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</div>

<div class="col-xs-6 col-md-3">
<h6>Quick Links</h6>
<ul class="footer-links">
<li><a href="https://csedge.courses/about">About Us</a></li>
<li><a href="https://csedge.courses/#contact">Contact Us</a></li>
<li>
<a href="https://github.com/CSEdgeOfficial/learn.csedge.courses">Contribute</a>
</li>
<li><a href="https://github.com/CSEdgeOfficial/learn.csedge.courses">Contribute</a></li>
<li><a href="./csedge.courses/privacypolicy.html">Privacy Policy</a></li>
</ul>
<ul class="social-icons">
<li><a href="https://youtube.com/@CSEdgeOfficial"><i class="fab fa-youtube" aria-hidden="true"></i></a></li>
<li><a href="https://github.com/CSEdgeOfficial"><i class="fab fa-github" aria-hidden="true"></i></a></li>

<li><a href="https://www.linkedin.com/company/csedge/"><i class="fab fa-linkedin" aria-hidden="true"></i></a></li>
<li><a href="https://www.instagram.com/csedgeofficial"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<hr />
</div>






</div>
<style>
.libutton {
Expand All @@ -345,7 +334,7 @@ <h6>Quick Links</h6>
background-color: #0A66C2;
font-family: "SF Pro Text", Helvetica, sans-serif;
}

.libutton:hover {
display: flex;
flex-direction: column;
Expand All @@ -359,13 +348,31 @@ <h6>Quick Links</h6>
height: 32px;
border-radius: 16px;
background-color: black;

border-color: #0A66C2;
font-family: "SF Pro Text", Helvetica, sans-serif;
}

.social-icons {
list-style: none;
padding: 0;
}

.social-icons li {
display: inline;
margin-right: 10px;
}

.social-icons li a {
color: #333;
font-size: 20px;
}

.social-icons li a:hover {
color: #007bff;
}
</style>
<hr style="border-top: 1px solid black;">

<!-- Copyright Section -->
<div class="container">
<div class="row">
Expand All @@ -377,12 +384,8 @@ <h6>Quick Links</h6>
</div>
</div>
</div>


</div>
</div>

</footer>

<!-- Bootstrap core JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="./ScrollToTop.js"></script>
Expand Down
Loading