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 1 commit
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
40 changes: 37 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,40 @@
.moon{
transform-origin: 50% 100%;
}
#about {
display: flex;
flex-wrap: wrap; /* Allow the boxes to wrap to the next line if necessary */
gap: 15px; /* Space between the boxes */
justify-content: center; /* Center align the items */
}

.box {
background-color:transparent; /* Optional for better visual separation */
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column; /* Stack the content vertically */
align-items: center;
max-width: 370px; /* Ensures all boxes have the same maximum width */
flex: 1 1 300px; /* Allow the boxes to grow and shrink */
min-width: 250px; /* Set a minimum width for responsiveness */
}

.box img {
object-fit: cover; /* Ensures the image fills its container without distortion */
}

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

p {
flex-grow: 1; /* Ensures the paragraph grows to fill the available space */
text-align: center;
}

</style>
</head>
<body>
Expand Down Expand Up @@ -356,21 +390,21 @@ <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" style=" height: 330px; width: 300px;border-radius: 10px;" alt="">
<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="" style="border-radius: 10px;height: 330px; width: 300px;">
<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="Images/bon-bon candy.jpg" style="border-radius: 10px;height: 330px;width: 300px;">
<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>
Expand Down