Issue #505 solved : changed the styling of order online and collect o…

…rder cards. (#511)

<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
<!--Please include a brief description of the changes-->
I have adjusted the height of both the cards i.e. order online card and
collect order card.
added hover effect.
also enhanced shadow so that card looks poped out.


## Related Issues

<!--Cite any related issue(s) this pull request addresses. If none,
simply state “None”-->
- Closes #505 

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [X] (bug)

## Screenshots / videos (if applicable)
<!--Attach any relevant screenshots or videos demonstrating the
changes-->
Before
![Screenshot 2024-10-13
200817](https://github.com/user-attachments/assets/b53f24cd-be40-4eae-9d10-041981a40a46)
After
![Screenshot 2024-10-13
215414](https://github.com/user-attachments/assets/92981bb9-b3ac-4435-bf91-5f1501f508b6)



## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [X] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [X] I have updated my branch and synced it with project `main` branch
before making this PR
- [X] I have performed a self-review of my code
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
<!--Include any additional information or context that might be helpful
for reviewers.-->

index.html

@@ -345,14 +345,18 @@
     background-color:transparent; /* Optional for visual separation */
     border-radius: 10px;
     padding: 20px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.226);
     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 */
+    min-height: 200px; /* Minimum height for the card */
+}
+
+.box:hover{
+    border: 1px solid black;
 }
 
 .card-image {

style.css

@@ -250,6 +250,8 @@ body {
     .order_btn:hover {
         background-color: hsl(357, 82%, 45%);
     }
+
+