@krushnasinnarkar
Posted
Hi @varunKumar993,
Congratulations on successfully completing the challenge!
Your solution looks nice, though there are a couple of things you can improve which I hope will be helpful:
-
Background Colors:
- The background colors of the
body
and.container
elements do not match the design. Make sure to use the exact colors specified in the design.
- The background colors of the
-
Responsiveness:
- Your website is not responsive below 500px. This issue arises due to the fixed width of 500px given to the
.container
andtable
elements. To solve this, you can usemax-width
instead. This will set a maximum width of 500px for your elements and will automatically reduce the size if the screen size is smaller than 500px.
Example:
.container, table { max-width: 500px; width: 100%; }
- Your website is not responsive below 500px. This issue arises due to the fixed width of 500px given to the
-
Background Color for
.preparation
:- The
.preparation
section is missing its background color as per the design. Make sure to add it to match the design specifications.
- The
-
Font and Font Sizes:
- Ensure you use the fonts and font sizes given in the style guide to make your solution more accurate to the design.
-
List Styles:
- The
ul
bullets andol
numbers should have specific colors. You can achieve this by using the::marker
pseudo-element.
Example:
ul::marker, ol::marker { color: #specifiedColor; }
- The
-
Layout Using Flexbox:
- Instead of using margins to separate each section, consider using Flexbox for better alignment and spacing. Flexbox provides a more flexible and efficient way to layout, align, and distribute space among items in a container.
For more information on Flexbox, you can check out these resources:
I hope you find this helpful. Feel free to reach out if you have more questions or need further assistance.
Happy coding!
@varunKumar993
Posted
@krushnasinnarkar sure I will make a note of it, also I will apply your suggestion and I will work accordingly