Hello Praistyles, First of all, let me congratulate you on finishing the challenge. This was not an easy challenge and you have done a good job. Your webpage looks quite good but there are a couple of things that you can do to improve the layout.
Instead of using the same layout for mobile, tablet and desktop you can improve the solution to use the different images that are designed for the respective layout. Check the starter files and you will se different folders for the correct layout.
Ex. For the desktop version the hero images are composed of two different images that should be placed to the left and right, with the text and button content in the middle. Since you are using one hero image it becomes really large when is gets displayed on a large desktop screen.
The buttons also grow to a very large size when the user is on a desktop. Try using a max with to limit the size.
The four images in the middle looks really good.
The footer should be composed of three columns of equal size for the header, text and button. One way of doing this is to use CSS Grid with the “grid-template-columns” properties.
I hope this feedback helps.
Kind Regards Daniel
Marked as helpful
@praistyles
Posted
@dantvi Thanks this really helpful. About the hero images used the mobile to desktop approach so ended up using the tablet hero img for the mobile then it became difficult to change to the desktop setup whereas l had to use two images and with the picture-srcset approach could work. So plis if you can would you enlighten how did you tackle the hero images from mobile-desktop??
I also used the mobile to desktop approach but put the two desktop images in separate containers, one left and one right. Then in the mobile version I used display: none to make the images disappear from the webpage. Later in the desktop media query I changed the display to inline, to make them visible again.
