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

Enhance the items under table of content with Dynamic Hover Effect #1479

Closed
wants to merge 1 commit into from
Closed

Enhance the items under table of content with Dynamic Hover Effect #1479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
152 changes: 54 additions & 98 deletions website/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -482,104 +482,60 @@ <h4 class="ml-4 text-xl font-bold text-white text-center">Steps to Contribute:</
</section>

<section id="contents" class="section-spacing">
<h1
class="mb-4 text-4xl hover-effect neon-text mt-36 mb-86 font-bold leading-none tracking-tight text-center text-white md:text-5xl lg:text-6xl ">
Table of Contents 📜</h1>



<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 mt-10 py-12">
<div class=" flex items-center justify-center">
<p class="mb-20 font-semibold text-xl max-w-4xl text-center"> Find the project you are looking
for by exploring our extensive collection of
categorized
projects.</p>

</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div
class="w-full transition-transform duration-300 transform hover:scale-105 bg-gray-800 rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
<div>
<img class="object-center object-cover h-auto w-full"
src="https://img.freepik.com/premium-photo/3d-rendering-robot-artificial-intelligence-black-background-futuristic-technology-robot_844516-420.jpg"
alt="photo">
</div>
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Artificial Intelligence</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Artificial%20Intelligence"
class="text-base text-gray-300 font-normal hover:text-blue-300 hover:underline">Github</a>
</div>
</div>
<div
class="w-full bg-gray-800 rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
<div>
<img class="object-center object-cover h-auto w-full"
src="https://images.hdqwalls.com/wallpapers/computer-laptop-desk-light-lamp-dark-room-fa.jpg"
alt="photo">
</div>
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Desktop Application</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Desktop%20Application"
class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
<div
class="w-full bg-gray-800 rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
<div>
<img class="object-center object-cover h-auto w-full"
src="https://tse2.mm.bing.net/th?id=OIP.aTC4vb6h9m1dILQS468xCQHaEs&pid=Api&P=0&h=220"
alt="photo">
</div>
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">IOT (Internet of Things)</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/IOT(Internet%20of%20Things)"
class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
<div
class="w-full bg-gray-800 rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
<div>
<img class="object-center object-cover h-auto w-full"
src="https://wallpaperbat.com/img/239221-data-science-overview-ants-site.jpg"
alt="photo">
</div>
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Machine Learning and Data
Science</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Machine%20Learning%20and%20Data%20Science"
class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
<div
class="w-full bg-gray-800 rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
<div>
<img class="object-center object-cover h-auto w-full"
src="https://www.udacity.com/blog/wp-content/uploads/2020/12/Mobile-App-Development_Blog-scaled.jpeg"
alt="photo">
</div>
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Mobile Application</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Mobile%20Applications"
class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
<div
class="w-full bg-gray-800 rounded-lg sahdow-lg overflow-hidden flex flex-col justify-center items-center">
<div>
<img class="object-center object-cover h-auto w-full"
src="https://artbluck.com/wp-content/uploads/2019/04/119761-OPOVDW-164-03.jpg"
alt="photo">
</div>
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Web Development</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development"
class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
</div>
</section>

</section>
<h1 class="mb-4 text-4xl hover-effect neon-text mt-36 mb-86 font-bold leading-none tracking-tight text-center text-white md:text-5xl lg:text-6xl">
Table of Contents 📜
</h1>

<section class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-4 mt-10 py-12">
<div class="flex items-center justify-center">
<p class="mb-20 font-semibold text-xl max-w-4xl text-center">Find the project you are looking for by exploring our extensive collection of categorized projects.</p>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="project-card">
<img class="object-center object-cover h-auto w-full" src="https://img.freepik.com/premium-photo/3d-rendering-robot-artificial-intelligence-black-background-futuristic-technology-robot_844516-420.jpg" alt="Artificial Intelligence">
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Artificial Intelligence</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Artificial%20Intelligence" class="text-base text-gray-300 font-normal hover:text-blue-300 hover:underline">Github</a>
</div>
</div>
<div class="project-card">
<img class="object-center object-cover h-auto w-full" src="https://images.hdqwalls.com/wallpapers/computer-laptop-desk-light-lamp-dark-room-fa.jpg" alt="Desktop Application">
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Desktop Application</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Desktop%20Application" class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
<div class="project-card">
<img class="object-center object-cover h-auto w-full" src="https://tse2.mm.bing.net/th?id=OIP.aTC4vb6h9m1dILQS468xCQHaEs&pid=Api&P=0&h=220" alt="IOT">
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">IOT (Internet of Things)</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/IOT(Internet%20of%20Things)" class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
<div class="project-card">
<img class="object-center object-cover h-auto w-full" src="https://wallpaperbat.com/img/239221-data-science-overview-ants-site.jpg" alt="Machine Learning">
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Machine Learning and Data Science</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Machine%20Learning%20and%20Data%20Science" class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
<div class="project-card">
<img class="object-center object-cover h-auto w-full" src="https://www.udacity.com/blog/wp-content/uploads/2020/12/Mobile-App-Development_Blog-scaled.jpeg" alt="Mobile Application">
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Mobile Application</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Mobile%20Applications" class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
<div class="project-card">
<img class="object-center object-cover h-auto w-full" src="https://artbluck.com/wp-content/uploads/2019/04/119761-OPOVDW-164-03.jpg" alt="Web Development">
<div class="text-center py-8 sm:py-6">
<p class="text-xl text-slate-200 font-semibold mb-2 card-text">Web Development</p>
<a href="https://github.com/Kushal997-das/Project-Guidance/tree/main/Web%20Development" class="text-base text-gray-300 hover:text-blue-300 hover:underline font-normal">Github</a>
</div>
</div>
</div>
</section>
</section>

<section id="contributors" class="section-spacing mb-56">
<h1
Expand Down
12 changes: 12 additions & 0 deletions website/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1711,3 +1711,15 @@ body::-webkit-scrollbar-thumb {
background-positon-x: 0px;
}
}
.project-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
background-color: #1f2937;
border-radius: 0.5rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
/* The hover effect on the cards under the "Table of Content" */

.project-card:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
Loading