Krushna Sinnarkar• 1,080
@krushnasinnarkar
Posted
Hi @Arah1289,
Your solution is great and well-structured! However, here are some key points and suggestions:
Add Background Color to Body
- Apply the following background color to the body:
body { background-color: hsl(204, 43%, 93%); }
Create a Flexible Section
- Add a section immediately after the
<body>tag. - Make the section a flexible container that aligns items inside it both vertically and horizontally at the center using the following CSS:
.flex-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; } - Place your container inside this section.
Add Box Shadow to Container
- Apply a box shadow to the
.containerelement with the following CSS:.container { box-shadow: 0px 0px 14px 1px #00000024; }
Here is the complete HTML and CSS with the changes applied:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Your content goes here -->
</head>
<body>
<section class="flex-container">
<div class="container">
<!-- Your content goes here -->
</div>
</section>
</body>
</html>
CSS:
/* Set background color for the body */
body {
background-color: hsl(204, 43%, 93%);
}
/* Create a flexible container section */
.flex-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Style the container with box shadow */
.container {
box-shadow: 0px 0px 14px 1px #00000024;
}
These steps and examples should help you implement the desired changes effectively.
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!
0
