Skip to content

Commit

Permalink
Merge pull request #59 from Shrutibansal22/master
Browse files Browse the repository at this point in the history 
Front page layout
  • Loading branch information
@aialok
aialok authored Oct 12, 2024
2 parents fb555e1 + 8163bcc commit cb40214
Showing 1 changed file with 101 additions and 115 deletions.
216 changes: 101 additions & 115 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,154 +6,140 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/pages/nav/nav.css">
<script src="https://cdn.tailwindcss.com"></script>
<title>Home</title>
<link rel="stylesheet" href="style1.css">
<title>Hacktoberfest 2023</title>
<style>
:root {
--accent-color: #f97316;
}

.heading {
text-align: center;
padding: 1rem 0;
font-size: 2.5rem;
color: #000000;
}

.heading span {
background-color: var(--accent-color);
color: #ffffff;
display: inline-block;
padding: 0.1rem 2rem;
clip-path: polygon(100% 0, 93% 50%, 100% 99%, 0% 100%, 7% 50%, 0% 0%);
}

.content-text {
font-size: 1.25rem;
}

.list-item {
font-size: 1.25rem;
}
</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>
<body class="bg-gray-100">
<navbar class="flex justify-between items-center p-6 bg-white shadow-lg">
<brand-name class="text-2xl font-bold text-gray-800">Open Source Celebration</brand-name>
<ul id="mobile_ui" class="hidden md:flex space-x-6 text-lg font-medium text-gray-600">
<li class="hover:bg-orange-500 p-2 rounded transition"><a href="/index.html">Home</a></li>
<li class="hover:bg-orange-500 p-2 rounded transition"><a href="src/pages/freshers.html">Fresher</a></li>
<li class="hover:bg-orange-500 p-2 rounded transition"><a href="src/pages/sophomore.html">Sophomore</a></li>
<li class="hover:bg-orange-500 p-2 rounded transition"><a href="src/pages/third-year.html">Third Year</a></li>
<li class="hover:bg-orange-500 p-2 rounded transition"><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>
<ul class="md:hidden flex items-center space-x-4">
<li id="dropdown" class="relative">
<button class="bg-orange-500 text-white p-2 rounded-md">Menu <i class="fa fa-caret-down"></i></button>
<div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg hidden group-hover:block">
<ul class="py-1">
<li class="hover:bg-orange-500 p-2"><a href="/index.html">Home</a></li>
<li class="hover:bg-orange-500 p-2"><a href="src/pages/freshers.html">Fresher</a></li>
<li class="hover:bg-orange-500 p-2"><a href="src/pages/sophomore.html">Sophomore</a></li>
<li class="hover:bg-orange-500 p-2"><a href="src/pages/third-year.html">Third Year</a></li>
<li class="hover:bg-orange-500 p-2"><a href="src/pages/senior.html">Senior</a></li>
</ul>
</div>
</li>
</ul>

</navbar>

</navbar>
<div class="w-full bg-orange-500 h-4"></div>
<div class="w-full bg-orange-500 h-1"></div>

<div class="container py-16 max-sm:py-5">
<h1 class="text-6xl ml-20 max-sm:ml-5 max-sm:text-3xl">
Welcome to
<span class="text-orange-500 font-semibold">IIIT Ranchi</span> <br />
Hacktoberfest 2023
<div class="container mx-auto py-16 bg-white rounded-lg shadow-lg">
<h1 class="heading">
Welcome to <span>Hacktoberfest 2023</span>
</h1>

<p class="text-xl ml-20 my-6 max-sm:ml-5 w-1/2 max-sm:w-[90%]">
Are you ready to dive into the world of open source? The unofficial IIIT
Ranchi Hacktoberfest 2023 website is your gateway to an exciting
opportunity to contribute, collaborate, and grow as a developer.
<p class="content-text text-center my-6 text-gray-600">
Ready to dive into the world of open source? Join us for 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>

<div class="text-center">
<button class="bg-orange-500 text-white rounded-md p-3 font-medium hover:ring-2 hover:ring-black transition shadow hover:shadow-lg">
<a href="https://github.com/aialok/open-source-IIIT-Ranchi" target="_blank">Contribute on Github</a>
</button>
</div>
</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>




<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:
<div class="container mx-auto py-8 bg-gray-50 rounded-lg shadow">
<h2 class="heading">
What is <a href="https://hacktoberfest.com/" target="_blank" class="text-orange-500"><span>Hacktoberfest</span></a>?
</h2>
<h3 class="content-text text-center my-4 text-gray-600">An annual celebration of open source during October. Here’s what you can do:</h3>

<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>
<li>🚀 Enhance your coding skills.</li>
<ul class="content-text mx-auto my-6 list-disc text-gray-600 w-3/4">
<li class="list-item">🌐 Contribute to open source projects.</li>
<li class="list-item">🤝 Collaborate with developers from around the world.</li>
<li class="list-item">🚀 Enhance your coding skills.</li>
</ul>
</div>

<div class="container py-8 max-sm:py-5">
<h1 class="text-5xl ml-20 max-sm:ml-5 max-sm:text-4xl">
How to get <span class="text-orange-500 font-medium">started</span> ?
</h1>
<div class="container mx-auto py-8 bg-white rounded-lg shadow">
<h2 class="heading">
How to get <span>started</span>?
</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>
<span class="font-semibold">Create Your Portfolio :</span> Build a
personal portfolio website that highlights your projects, skills, and
experiences.
</li>
<li>
<span class="font-semibold">Contribute :</span> Add your portfolio to
the this website repository. It's as simple as a pull
request!
</li>
<li>
<span class="font-semibold">Connect :</span> Join our community of
IIIT Ranchi students who are sharing their portfolios. Explore their
work and get inspired.
</li>
<li>
<span class="font-semibold">Celebrate :</span> Be recognized for your
hard work and creativity.
</li>
<ul class="content-text mx-auto my-6 list-disc text-gray-600 w-3/4">
<li class="list-item"><span class="font-semibold">Create Your Portfolio:</span> Build a personal portfolio website to showcase your skills.</li>
<li class="list-item"><span class="font-semibold">Contribute:</span> Add your portfolio to our repository with a simple pull request!</li>
<li class="list-item"><span class="font-semibold">Connect:</span> Join our community of students sharing portfolios.</li>
<li class="list-item"><span class="font-semibold">Celebrate:</span> Be recognized for your hard work and creativity.</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>
</h1>
<p class="text-xl ml-20 my-2 max-sm:ml-5 max-sm:text-lg">
Here are some impressive portfolios created by your peers:
</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>

<div class="container mx-auto py-8 bg-gray-50 rounded-lg shadow">
<h2 class="heading">
Featured <span>Portfolios</span>
</h2>
<p class="content-text text-center my-2 text-gray-600">Check out impressive portfolios created by your peers:</p>
<ul class="content-text mx-auto my-6 list-disc text-gray-600 w-3/4 space-y-4">
<li class="bg-white p-4 rounded-lg shadow hover:shadow-md transition">
<a href="src/pages/freshers.html" class="hover:text-orange-500">Fresher</a>
</li>
<li class=" p-4 max-sm:p-1">
<a href="src/pages/sophomore.html">Sophomore</a>
<li class="bg-white p-4 rounded-lg shadow hover:shadow-md transition">
<a href="src/pages/sophomore.html" class="hover:text-orange-500">Sophomore</a>
</li>
<li class=" p-4 max-sm:p-1">
<a href="src/pages/third-year.html">Third Year</a>
<li class="bg-white p-4 rounded-lg shadow hover:shadow-md transition">
<a href="src/pages/third-year.html" class="hover:text-orange-500">Third Year</a>
</li>
<li class=" p-4 max-sm:p-1">
<a href="src/pages/senior.html">Senior</a>
<li class="bg-white p-4 rounded-lg shadow hover:shadow-md transition">
<a href="src/pages/senior.html" class="hover:text-orange-500">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 class="container mx-auto py-8 bg-white rounded-lg shadow">
<h2 class="heading">
Join the <span>Celebration</span>
</h2>
<p class="content-text text-center my-2 text-gray-600">Celebrate your achievements and the spirit of Hacktoberfest 2023! Create your portfolio and showcase 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>&copy; 2023 Hacktoberfest Celebration. 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>
<p>Made with ❤️ by the Community</p>
</div>
</footer>

Expand Down

0 comments on commit cb40214

Please sign in to comment.