Skip to content

Enhancement/grid layout resource cards #66

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

Open
KRISHNPRIY2820 wants to merge 5 commits into
base: master
Choose a base branch
from
+45 −6
Open

Enhancement/grid layout resource cards #66

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f5a2b23
Implement responsive grid layout for resource cards
KRISHNPRIY2820 Jul 30, 2025
f7fb36d
Improved the postion of the resource cards with respect to the search…
KRISHNPRIY2820 Jul 30, 2025
4d6273b
- Display multiple cards in columns on larger screens
KRISHNPRIY2820 Aug 2, 2025
223b1eb
Resource cards are separated from filters and the search bar
KRISHNPRIY2820 Aug 4, 2025
03d97d5
Merge remote-tracking branch 'origin/master' into enhancement/grid-la…
KRISHNPRIY2820 Aug 4, 2025
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
4 changes: 2 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ <h3>Recommended Resources</h3>
</div>
<input type="text" id="searchInput" placeholder="Search for resources..." />
</div>

<div class="cards-section">
<div class="card" category="coding">
<h4>Coding Practice(mainly for DSA):Leetcode</h4>
<p>LeetCode offers a wide range of problems to practice coding skills for technical interviews.</p>
Expand Down Expand Up @@ -267,7 +267,7 @@ <h4>Interactive Learning: freeCodeCamp</h4>
<p>Offers hands-on coding lessons, certifications, and projects in web development, data science, and more—all for free.</p>
<a href="https://www.freecodecamp.org/" target="_blank">Explore freeCodeCamp</a>
</div>

</div>
<!-- Back to Top Button -->


Expand Down
47 changes: 43 additions & 4 deletions styles/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,24 @@ margin-top: 12px;


.container {
margin: 20px auto;
padding: 20px;
max-width: 900px;
display: flex;
flex-direction: column;
gap: 1.5rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}


/* .container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
} */
.p{
padding: 5px;
}
Expand Down Expand Up @@ -86,10 +100,21 @@ margin-top: 12px;

.search-bar input::placeholder {
color: #5ca5cc;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-right: 8px;
gap: 1rem;
margin-bottom: 2rem;
}

.filter {
padding-right: 8px;
}
/* .filter {

} */

#categoryFilter {
width: 140px;
Expand Down Expand Up @@ -129,6 +154,8 @@ margin-top: 12px;
}

.card {
flex: 1 1 280px;
max-width: 320px;
background-color: rgba(146, 205, 209, 0.85);
backdrop-filter: blur(4px);
margin: 25px 0;
Expand All @@ -137,9 +164,21 @@ margin-top: 12px;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
font-family: 'Roboto', sans-serif;

display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
width: 100%;
}

.cards-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.5rem;
}


.card:hover {
transform: scale(1.02);
background-color: rgba(222, 230, 233, 0.9);
Expand Down