Skip to content

Commit

Permalink
Merge pull request #1 from vidhigoyal619/vidhigoyal619-patch-1
Browse files Browse the repository at this point in the history 
Update index.html: Make a separate sidebar for mobile view aialok#23
  • Loading branch information
@vidhigoyal619
vidhigoyal619 authored Oct 6, 2024
2 parents 6de6c27 + 3ed52da commit 49079a4
Showing 1 changed file with 94 additions and 74 deletions.
168 changes: 94 additions & 74 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,48 +7,91 @@
<link rel="stylesheet" href="./src/pages/nav/nav.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Home</title>
<style>
/* Custom style for overlay and sidebar */
#mobileMenu {
transform: translateX(-100%);
transition: transform 0.3s ease;
}

#mobileMenu.active {
transform: translateX(0);
}

#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 10;
display: none;
}

#overlay.active {
display: block;
}
</style>
</head>

<body>
<navbar class="flex justify-around items-center overflow-auto max-sm:flex-col">
<brand-name class="text-xl font-bold max-sm:text-lg">Open Source IIIT Ranchi</brand-name>
<ul id="mobile_ui" class="flex text-lg max-sm:text-base font-medium">
<li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
<a href="/index.html">Home</a>
</li>
<li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
<a href="src/pages/freshers.html">Fresher</a>
</li>
<li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
<a href="src/pages/sophomore.html">Sophomore</a>
</li>
<li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
<a href="src/pages/third-year.html">Third Year</a>
</li>
<li class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
<a href="src/pages/senior.html">Senior</a>
</li>
</ul>
<ul class="flex text-lg max-sm:text-base font-medium">
<li id="dropdown" class="hover:bg-orange-500 p-4 max-sm:p-1 cursor-pointer">
<div class="dropdown">
<button class="dropbtn">Dropdown
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="/index.html">Home</a>
<a href="src/pages/freshers.html">Fresher</a>
<a href="src/pages/sophomore.html">Sophomore</a>
<a href="src/pages/third-year.html">Third Year</a>
<a href="src/pages/senior.html">Senior</a>
</div>
</div>
</li>
</ul>
<!-- Navbar -->
<navbar class="flex justify-between items-center px-6 py-4 bg-gray-900 text-white">
<!-- Brand Name -->
<brand-name class="text-xl font-bold">Open Source IIIT Ranchi</brand-name>

<!-- Hamburger Icon for Mobile -->
<div class="block sm:hidden">
<button id="menuButton" class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>

<!-- Desktop Menu -->
<ul class="hidden sm:flex space-x-4 text-lg">
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="/index.html">Home</a></li>
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="src/pages/freshers.html">Fresher</a></li>
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="src/pages/sophomore.html">Sophomore</a></li>
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="src/pages/third-year.html">Third Year</a></li>
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="src/pages/senior.html">Senior</a></li>
</ul>
</navbar>

</navbar>
<!-- Mobile Menu (Sidebar) -->
<div id="overlay"></div>
<div id="mobileMenu" class="fixed left-0 top-0 w-64 h-full bg-gray-900 text-white z-20">
<div class="p-6">
<ul class="space-y-4 text-lg">
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="/index.html">Home</a></li>
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="src/pages/freshers.html">Fresher</a></li>
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="src/pages/sophomore.html">Sophomore</a></li>
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="src/pages/third-year.html">Third Year</a></li>
<li class="hover:bg-orange-500 p-4 cursor-pointer"><a href="src/pages/senior.html">Senior</a></li>
</ul>
</div>
</div>

<!-- Overlay and Sidebar Script -->
<script>
const menuButton = document.getElementById("menuButton");
const mobileMenu = document.getElementById("mobileMenu");
const overlay = document.getElementById("overlay");

menuButton.addEventListener("click", function () {
mobileMenu.classList.toggle("active");
overlay.classList.toggle("active");
});

overlay.addEventListener("click", function () {
mobileMenu.classList.remove("active");
overlay.classList.remove("active");
});
</script>

<!-- Page Content -->
<div class="w-full bg-orange-500 h-4"></div>

<div class="container py-16 max-sm:py-5">
Expand All @@ -63,25 +106,21 @@ <h1 class="text-6xl ml-20 max-sm:ml-5 max-sm:text-3xl">
Ranchi Hacktoberfest 2023 website is your gateway to an exciting
opportunity to contribute, collaborate, and grow as a developer.
</p>
<button class="text-lg ml-20 max-sm:ml-6 bg-orange-500 rounded-md p-2 font-medium hover:ring-2 hover:ring-black"><a
href="https://github.com/aialok/open-source-IIIT-Ranchi" target="_blank">Contribute on Github</a></button>

<button class="text-lg ml-20 max-sm:ml-6 bg-orange-500 rounded-md p-2 font-medium hover:ring-2 hover:ring-black">
<a href="https://github.com/aialok/open-source-IIIT-Ranchi" target="_blank">Contribute on Github</a>
</button>
</div>

<div class="container py-8 max-sm:py-5">
<h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-3xl">
What is
<a href="https://hacktoberfest.com/" target="_blank" class="text-orange-500 font-semibold hover:cursor-pointer hover:underline">Hacktoberfest</a>
?
</h1>




What is
<a href="https://hacktoberfest.com/" target="_blank" class="text-orange-500 font-semibold hover:cursor-pointer hover:underline">Hacktoberfest</a>
?
</h1>
<h2 class="text-xl ml-20 my-2 max-sm:ml-5 max-sm:w-[90%]">
Hacktoberfest is an annual celebration of open source during the month
of October. It's a fantastic opportunity for you to:
</h2>

<ul class="text-xl ml-20 my-6 max-sm:ml-8 w-1/2 list-disc max-sm:w-[90%] max-sm:text-lg">
<li>🌐 Contribute to open source projects.</li>
<li>🤝 Collaborate with developers from around the world.</li>
Expand All @@ -102,8 +141,7 @@ <h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
</li>
<li>
<span class="font-semibold">Contribute :</span> Add your portfolio to
the this website repository. It's as simple as a pull
request!
this website repository. It's as simple as a pull request!
</li>
<li>
<span class="font-semibold">Connect :</span> Join our community of
Expand All @@ -116,6 +154,7 @@ <h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
</li>
</ul>
</div>

<div class="container py-8 max-sm:py-4">
<h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
Featured <span class="text-orange-500 font-medium">Portfolio</span>
Expand All @@ -125,38 +164,19 @@ <h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
</p>
<ul class="text-xl ml-20 my-6 max-sm:ml-10 w-1/2 list-disc max-sm:w-[90%]">
<li class="p-4 max-sm:p-1">
<a href="src/pages/freshers.html">Fresher</a>
<a href="src/pages/freshers.html" class="hover:bg-orange-500 p-4 cursor-pointer">Fresher</a>
</li>
<li class=" p-4 max-sm:p-1">
<a href="src/pages/sophomore.html">Sophomore</a>
<a href="src/pages/sophomore.html" class="hover:bg-orange-500 p-4 cursor-pointer">Sophomore</a>
</li>
<li class=" p-4 max-sm:p-1">
<a href="src/pages/third-year.html">Third Year</a>
<a href="src/pages/third-year.html" class="hover:bg-orange-500 p-4 cursor-pointer">Third Year</a>
</li>
<li class=" p-4 max-sm:p-1">
<a href="src/pages/senior.html">Senior</a>
<a href="src/pages/senior.html" class="hover:bg-orange-500 p-4 cursor-pointer">Senior</a>
</li>
</ul>
</div>

<div class="container py-4 max-sm:py-4">
<h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
Join the <span class="text-orange-500 font-medium">Celebration</span>
</h1>
<p class="text-xl ml-20 my-2 max-sm:ml-5 w-1/2 max-sm:w-[90%] max-sm:text-lg">
Let's celebrate your achievements and the spirit of Hacktoberfest 2023! Create your portfolio and contribute it to
the main unofficial website. Start showcasing your work to the world.
</p>

</div>
<footer class="bg-gray-800 text-white py-6">
<div class="container mx-auto text-center">
<p>&copy; 2023 IIIT Ranchi Hacktoberfest. All rights reserved.</p>
<p>Empowering Students to Innovate and Contribute to Open Source</p>
<p>Made in IIIT Ranchi with ❤️ by Alok Gupta</p>
</div>
</footer>

</body>

</html>
</html>

0 comments on commit 49079a4

Please sign in to comment.