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

Ensure Consistent Card Height for Better Presentation. #105

Merged
merged 2 commits into from
Oct 3, 2024
Merged

Ensure Consistent Card Height for Better Presentation. #105

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ddae397
height change for cards
grasyPatel Oct 2, 2024
4da6b95
made it responisve
grasyPatel Oct 2, 2024
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
63 changes: 60 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,6 +249,62 @@
.moon{
transform-origin: 50% 100%;
}

#about {
display: flex;
flex-wrap: wrap; /* Allow boxes to wrap */
gap: 20px; /* Space between boxes */
justify-content: center; /* Center align items */
}

.box {
background-color:transparent; /* Optional for visual separation */
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column; /* Stack content vertically */
align-items: center;
max-width: 350px; /* Maximum width of each card */
flex: 1 1 280px; /* Allow boxes to grow and shrink */
min-width: 300px; /* Minimum width for responsiveness */
min-height: 480px; /* Minimum height for the card */
}

.card-image {
width: auto; /* Set width to auto to allow centering */
height: auto; /* Maintain aspect ratio */
max-width: 100%; /* Ensure image does not exceed card width */
max-height: 200px; /* Limit the max height to prevent overflow */
object-fit: cover; /* Ensure the image covers the card area without distorting */
border-radius: 10px; /* Match border radius of the box */
margin: 0 auto; /* Center the image horizontally */
}

.box h2 {
margin-top: 10px;
text-align: center;
}

p {
text-align: center;
margin: 10px 0; /* Add some margin for spacing */
}

/* Additional responsive adjustments */
@media (max-width: 600px) {
.box {
max-width: 100%; /* Allow full width on small screens */
min-height: auto; /* Allow height to adjust for smaller screens */
}

.card-image {
max-height: 150px; /* Adjust max height for smaller screens */
}
}



</style>
</head>
<body>
Expand Down Expand Up @@ -356,25 +412,26 @@ <h1 class="h-primary center" style="font-family: var(--ff-philosopher);font-size
<!-- changes -->
<div id="about">
<div class="box">
<img src="Images/biryani.jpg" style="height: 300px;border-radius: 10px;" alt="">
<img src="Images/biryani.jpg" alt="Biryani" class="card-image">
<h2 class="h-secondary center" style="font-family:var(--ff-philosopher);">60s-style florals</h2>
<p class="center" style="font-family: var(--ff-poppins);">From aromatic curries to flavorful biryanis, our menu showcases the diversity and
deliciousness of Indian cuisine.
</p>
</div>
<div class="box">
<img src="Images/plate_mismatch.jpg" alt="" style="border-radius: 10px;height: 350px;width: 350px;">
<img src="Images/plate_mismatch.jpg" alt="Plate" class="card-image">
<h2 class="h-secondary center" style="font-family: var(--ff-philosopher)">60's Dinning Items</h2>
<p class="center" style="font-family: var(--ff-poppins);">
Elegant porcelain plates with delicate floral patterns. Each plate tells a story of family gatherings and special occasions.
</p>
</div>
<div class="box">
<img src="Images/candy.jpg" alt="Images/bon-bon candy.jpg" style="border-radius: 10px;height: 200px;">
<img src="Images/candy.jpg" alt="Candy" class="card-image">
<h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whimsical Nostalgia: The Stardust Bonbon</h2>
<p class="center" style="font-family: var(--ff-poppins);">The Stardust Bonbon, a sweet relic from an era when the universe was our playground.</p>
</div>
</div>

</section>

<section class="service_container" style="background-color: hsl(20, 43%, 93%);">
Expand Down