Skip to content

Enhanced card layout: responsive design, curvy borders, mobile height… #46

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
SahajDang wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Enhanced card layout: responsive design, curvy borders, mobile height… #46

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
110 changes: 101 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,98 @@
<link href="./assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

<style>
/* Wrapper section */
#Why-Gurukul {
background-color: #b9aaaa;
padding-top: 3rem;
padding-bottom: 3rem;
overflow-x: hidden;
}

/* Card container layout */
#Why-Gurukul .card-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
padding: 0 1rem;
}

/* Individual cards */
.why-gurukul-cards .card {
width: 300px;
height: 250px;
padding: 15px;
background-color: #70706d; /* light warm yellow */
border-radius: 16px;
box-shadow: 0 0 15px rgba(128, 126, 110, 0.4);
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

/* Hover effect */
.why-gurukul-cards .card:hover {
transform: translateY(-10px);
box-shadow: 0 0 25px rgba(215, 214, 204, 0.7);
}

/* Card image */
.why-gurukul-cards .card img {
width: 60px;
height: auto;
margin-bottom: 1rem;
}

/* Card text */
.why-gurukul-cards .card-text {
color: #fff;
text-align: center;
font-size: 1.25rem;
}

/* Heading */
#Why-Gurukul .libre-baskerville-regular {
font-family: 'Libre Baskerville', serif;
font-size: 2.5rem;
font-weight: 700;
color: #fff;
}

.small-card-text {
font-size: 1rem; /* or try 0.95rem, 14px, etc. */
}

/* Responsive adjustments */
@media (max-width: 768px) {
.why-gurukul-cards .card {
height: 330px;
}

#Why-Gurukul .libre-baskerville-regular {
font-size: 2rem;
}

.why-gurukul-cards .card-text {
font-size: 1rem;
}
}

.card-body {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
text-align: center;
padding: 0 10px;
}


</style>
</head>

<body class="overflow-x-hidden">
Expand Down Expand Up @@ -193,15 +285,15 @@ <h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>

<div class="Key-contributions bg-dark text-center w-100 Key overflow-x-hidden" id="Why-Gurukul">
<div class="text-white h1 pb-1 pt-5 overflow-x-hidden libre-baskerville-regular">Why Gurukul?</div>
<div class="flex-row flex-wrap flex-md-row w-100 d-flex overflow-x-hidden align-items-center px-2 gap-5 justify-content-center pb-5">
<div class="card-container">
<div class="small mt-md-2 mt-lg-5 mt-sm-2 mt-0 why-gurukul-cards">
<div style="width: 300px !important; height: 250px;" class="card why-gurukul-cards-responsive w-100 shadow-yellow" style="padding: 5px !important;">
<div class="mt-lg-5 mt-sm-0">
<img src="./assets/images/why-gurukul-logoes/workshop.png" alt="why gurukul logoes" class="w-25">
<!-- <i class="fa-solid fa-book" style="font-size: 100px"></i> -->
</div>
<div class="card-body">
<div class="card-text text-heading-small fw-bold fs-3">Workshops & Fun Events
<div class="card-text text-heading-small fw-bold small-card-text">Workshops & Fun Events
</div>
</div>
</div>
Expand All @@ -213,7 +305,7 @@ <h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<!-- <i class="fa-solid fa-tv" style="font-size: 100px"></i> -->
</div>
<div class="card-body">
<div class="card-text text-heading-small fw-bold fs-3">Internships & Job Opportunities</div>
<div class="card-text text-heading-small fw-bold small-card-text">Internships & Job Opportunities</div>
</div>
</div>
</div>
Expand All @@ -224,7 +316,7 @@ <h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<!-- <i class="fa-solid fa-arrow-up-right-dots" style="font-size: 100px"></i> -->
</div>
<div class="card-body">
<div class="card-text text-heading-small fw-bold fs-3">Career & Education Counseling</div>
<div class="card-text text-heading-small fw-bold small-card-text">Career & Education Counseling</div>
</div>
</div>
</div>
Expand All @@ -235,7 +327,7 @@ <h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<!-- <i class="fa-solid fa-book" style="font-size: 100px"></i> -->
</div>
<div class="card-body">
<div class="card-text text-heading-small fw-bold fs-3">Placement & Training Support
<div class="card-text text-heading-small fw-bold small-card-text">Placement & Training Support
</div>
</div>
</div>
Expand All @@ -247,7 +339,7 @@ <h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<!-- <i class="fa-solid fa-tv" style="font-size: 100px"></i> -->
</div>
<div class="card-body">
<div class="card-text text-heading-small fw-bold fs-3">Industrial Visits
<div class="card-text text-heading-small fw-bold small-card-text">Industrial Visits
</div>
</div>
</div>
Expand All @@ -259,7 +351,7 @@ <h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<!-- <i class="fa-solid fa-arrow-up-right-dots" style="font-size: 100px"></i> -->
</div>
<div class="card-body">
<div class="card-text text-heading-small fw-bold fs-3">Mental Health Support
<div class="card-text text-heading-small fw-bold small-card-text">Mental Health Support
</div>
</div>
</div>
Expand All @@ -271,7 +363,7 @@ <h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<!-- <i class="fa-solid fa-book" style="font-size: 100px"></i> -->
</div>
<div class="card-body">
<div class="card-text text-heading-small fw-bold fs-3">Networking Opportunities</div>
<div class="card-text text-heading-small fw-bold small-card-text">Networking Opportunities</div>
</div>
</div>
</div>
Expand All @@ -282,7 +374,7 @@ <h1 class="mt-0 mt-md-0 display-4 libre-baskerville-regular">About Gurukul</h1>
<!-- <i class="fa-solid fa-tv" style="font-size: 100px"></i> -->
</div>
<div class="card-body">
<div class="card-text text-heading-small fw-bold fs-3">Adventure Trips</div>
<div class="card-text text-heading-small fw-bold small-card-text">Adventure Trips</div>
</div>
</div>
</div>
Expand Down