Skip to content
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

Added Burger menu #254

Closed
wants to merge 15 commits into from
Closed

Added Burger menu #254

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
21086ce
added scroll to top button
dhruv8433 Jun 6, 2024
46cee73
Merge branch 'main' into scroll-to-top
dhruv8433 Jun 6, 2024
c991475
update style
dhruv8433 Jun 6, 2024
cb3f892
added burger menu in all pages
dhruv8433 Jun 6, 2024
3755d1d
Merge branch 'main' into burger-menu
dhruv8433 Jun 6, 2024
64802c1
Merge branch 'main' into burger-menu
dhruv8433 Jun 6, 2024
9665a3b
Merge branch 'main' into burger-menu
dhruv8433 Jun 6, 2024
a0b097f
Merge branch 'main' of https://github.com/mdazfar2/HelpOps-Hub into b…
dhruv8433 Jun 6, 2024
ec5dc3c
update and resolve all conflicts
dhruv8433 Jun 6, 2024
6aab4c3
Merge branch 'burger-menu' of https://github.com/dhruv8433/HelpOps-Hu…
dhruv8433 Jun 6, 2024
933e0ad
resolve all conflicts
dhruv8433 Jun 6, 2024
c7fc29b
Merge branch 'main' of https://github.com/mdazfar2/HelpOps-Hub into b…
dhruv8433 Jun 7, 2024
e5f42dc
update faqs and resolve conflicts
dhruv8433 Jun 7, 2024
e77d761
Merge branch 'main' into burger-menu
dhruv8433 Jun 7, 2024
c061ec5
Merge branch 'main' into burger-menu
dhruv8433 Jun 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
44 changes: 20 additions & 24 deletions Official_Website/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,18 +21,18 @@

<body>
<header class="header">

<div class="logo">
<a href="./index.html"
><img src="logo.png" alt="HelpOps-Hub Logo"
/></a>
<a href="./index.html"><img src="logo.png" alt="HelpOps-Hub Logo"></a>
</div>
<div>
<h1>About Us</h1>
<h1>About us</h1>
</div>
<div class="burger-menu" id="burgerMenu">
<i class="fas fa-bars"></i>
</div>
</header>
<nav class="nav " id="navbar">
<div class="overlay" id="overlay"></div>
<nav class="nav" id="navbar">
<ul class="nav__list" id="navlinkitems">
<li class="nav__item">
<a href="contributor-index.html" class="fa-solid fa-people-group"></a>
Expand All @@ -46,33 +46,18 @@ <h1>About Us</h1>
<li class="nav__item">
<a href="https://discord.com/invite/UWTrRhqywt" target="_blank" class="fab fa-discord"></a>
</li>

<li class="nav__item">
<a href="javascript:void(0);" class="fas fa-adjust" onclick="toggleTheme()"></a>
</li>
<li>
<button class="about-button">

<a href="./index.html">
BACK
</a>
</button>

<a href="javascript:void(0);" class="fas fa-adjust" onclick="toggleTheme()"></a>
</li>
<li><button class="about-button">

<a href="./faq.html">
FAQ's
</a>
<a href="./index.html">BACK</a>
</button></li>
<li>
<button class="sponsor-button" onclick="window.location.href='https://github.com/sponsors/mdazfar2'">
<span class="heart">&#10084;</span> Sponsor
</button>
</li>

</ul>

</nav>
<div>
<div class="start">
Expand Down Expand Up @@ -130,6 +115,17 @@ <h1 class="abeezee-regular">Benefits of HelpOps-Hub
<div id="scrollToTopBtn" class="scrollToTopBtn" onclick="scrollToTop()">
<img src="scrollToTop.png" class="im" alt="Scroll to top">
</div>

<footer>
<div class="footer-icons">
<a href="https://github.com/mdazfar2/HelpOps-Hub" target="_blank" class="fab fa-github"></a>
<a href="https://www.linkedin.com/company/helpops-hub/" target="_blank" class="fab fa-linkedin"></a>
<a href="https://discord.com/invite/UWTrRhqywt" target="_blank" class="fab fa-discord"></a>
</div>
<button class="about-button1" style="margin-right: 40px;">
<a href="./faq.html"> Faq's </a>
</button>
</footer>
<script src="app.js"></script>


Expand Down
18 changes: 18 additions & 0 deletions Official_Website/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,24 @@ document.addEventListener("DOMContentLoaded", async function () {
}
});
});


const burgerMenu = document.getElementById("burgerMenu");
const navLinks = document.getElementById("navlinkitems");
const overlay = document.getElementById("overlay");

burgerMenu.addEventListener("click", function() {
navLinks.classList.toggle("hidden");
navLinks.classList.toggle("visible");
overlay.classList.toggle("active");
});

overlay.addEventListener("click", function() {
navLinks.classList.add("hidden");
navLinks.classList.remove("visible");
overlay.classList.remove("active");
});

});

//Scroll to top js
Expand Down
20 changes: 16 additions & 4 deletions Official_Website/faq.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,9 @@
<h1>FAQ's</h1>
</div>


<div class="burger-menu" id="burgerMenu">
<i class="fas fa-bars"></i>
</div>
</header>
<nav class="nav " id="navbar">

Expand Down Expand Up @@ -154,9 +156,19 @@ <h5 class="mb-0 collapse-heading">
</div>
</div>
</div>
<button class="about-button1">
<a href="./about.html"> About Us </a>
</button>


<footer>
<div class="footer-icons">
<a href="https://github.com/mdazfar2/HelpOps-Hub" target="_blank" class="fab fa-github"></a>
<a href="https://www.linkedin.com/company/helpops-hub/" target="_blank" class="fab fa-linkedin"></a>
<a href="https://discord.com/invite/UWTrRhqywt" target="_blank" class="fab fa-discord"></a>
</div>
<button class="about-button1" style="margin-right: 40px;">
<a href="./faq.html"> Faq's </a>
</button>
</footer>

<div id="scrollToTopBtn" onclick="scrollToTop()">
<img src="scrollToTop.png" alt="Scroll to Top">
</div>
Expand Down
7 changes: 5 additions & 2 deletions Official_Website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@
<h1>HelpOps-Hub</h1>
<p>Ensuring You Never Get Stuck In DevOps Again!</p>
</div>
<div class="burger-menu" id="burgerMenu">
<i class="fas fa-bars"></i>
</div>
</header>
<nav class="nav " id="navbar">

Expand Down Expand Up @@ -93,7 +96,7 @@ <h1>HelpOps-Hub</h1>

<div class="feedback">
<div id="feedback-image">
<img src="feedback.png" alt="feedback-image" />
<img src="feedback.png" height="600px" width="600px" alt="feedback-image" />
</div>
<div id="feedback-section">
<h2>Feedback</h2>
Expand Down Expand Up @@ -229,4 +232,4 @@ <h2>Feedback</h2>
});
</script>
</body>
</html>
</html>
Loading
Loading