From ddae39797db64391b1982a1a6893e3fdaaee2fdb Mon Sep 17 00:00:00 2001 From: grasypatel Date: Wed, 2 Oct 2024 23:51:58 +0530 Subject: [PATCH 1/2] height change for cards --- index.html | 40 +++++++++++++++++++++++++++++++++++++--- 1 file changed, 37 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index ead4a3b1..e80d9795 100644 --- a/index.html +++ b/index.html @@ -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; +} + @@ -356,21 +390,21 @@

- +

60s-style florals

From aromatic curries to flavorful biryanis, our menu showcases the diversity and deliciousness of Indian cuisine.

- +

60's Dinning Items

Elegant porcelain plates with delicate floral patterns. Each plate tells a story of family gatherings and special occasions.

- Images/bon-bon candy.jpg + Images/bon-bon candy.jpg

Whimsical Nostalgia: The Stardust Bonbon

The Stardust Bonbon, a sweet relic from an era when the universe was our playground.

From 4da6b9525e667a451bae39bd494dd8ee58f6612b Mon Sep 17 00:00:00 2001 From: grasypatel Date: Thu, 3 Oct 2024 02:40:13 +0530 Subject: [PATCH 2/2] made it responisve --- index.html | 51 +++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/index.html b/index.html index e80d9795..ca4caaca 100644 --- a/index.html +++ b/index.html @@ -249,28 +249,36 @@ .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 */ + flex-wrap: wrap; /* Allow boxes to wrap */ + gap: 20px; /* Space between boxes */ + justify-content: center; /* Center align items */ } .box { - background-color:transparent; /* Optional for better visual separation */ + 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 the content vertically */ + flex-direction: column; /* Stack 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 */ + 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 */ } -.box img { - object-fit: cover; /* Ensures the image fills its container without distortion */ +.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 { @@ -279,10 +287,24 @@ } p { - flex-grow: 1; /* Ensures the paragraph grows to fill the available space */ 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 */ + } } + + @@ -390,25 +412,26 @@

- + Biryani

60s-style florals

From aromatic curries to flavorful biryanis, our menu showcases the diversity and deliciousness of Indian cuisine.

- + Plate

60's Dinning Items

Elegant porcelain plates with delicate floral patterns. Each plate tells a story of family gatherings and special occasions.

- Images/bon-bon candy.jpg + Candy

Whimsical Nostalgia: The Stardust Bonbon

The Stardust Bonbon, a sweet relic from an era when the universe was our playground.

+