@LovelyFaisal
Posted
Hi! You've done great 💪
Here are some suggestions to improve your code:
your design works fine on your screen but larger screens is not taking full width because you added
width: 1440px;
height: 800px;
in .container
To solve it follow these steps:
add
width: 100%;
height: 100vh;
in .container
add margin: 0; padding: 0; in body element to reset default margin and padding
body {
margin: 0;
padding: 0;
}
- You need to add the alt attribute to your image like this
<img class="img-escritorio" src="images/image-product-desktop.jpg" alt="product picture" height="450px">
The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
You can learn more Here
Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.
Click here for more information
Good job, and happy coding!
