@krushnasinnarkar
Posted
Hi @matheusmirandaalmeida,
Great Work!
Here is some suggestions for you:
Centering and Alignment Adjustments
Changes:
-
Removing:
height: 1300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-
Adding:
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 100px;
padding: 40px;
body {
background-color: hsl(30, 54%, 90%);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.page {
width: 600px;
margin-top: 100px;
padding: 40px;
background-color: hsl(0, 0%, 100%);
}
Adjusting Image and Content Layout
Changes:
-
Removing:
background-position: center 30px;
height: 260px;
-
Adding:
height: 240px;
- Adjusted padding for
.title
,.paragraphe
,.Ingredients
,.Instructions
,.Nutrition
topadding: 10px 0;
.image {
height: 240px;
background-image: url("../assets/images/image-omelette.jpeg");
background-size: 520px;
background-repeat: no-repeat;
padding: 10px;
}
.title, .paragraphe, .Ingredients, .Instructions, .Nutrition {
padding: 10px 0;
}
Certainly! Here's the detailed breakdown of the changes for the .Preparation
class:
Adjusting .Preparation
Class
Changes:
-
Removing:
position: relative;
left: 40px;
width: 500px;
-
Adding:
margin: 10px 0;
.Preparation {
margin: 10px 0;
padding: 10px; /* You may want to adjust padding as needed */
background-color: hsl(330, 100%, 98%);
color: hsl(30, 10%, 34%);
}
Enhancing Table Width and Styling
Changes:
-
Removing:
width: 560px;
-
Adding:
width: 100%;
CSS:
table {
display: table;
width: 100%;
border-collapse: collapse;
}
Feel free to reach out if you have more questions or need further assistance. I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was!