@DalaScript
Posted
Hey, Well Done,
As I read you had a problem with the header background. -In this project we had a total of 3 image-heroes, one image-hero for mobile and tablet sizes and the other two for desktop screens. I personally did it like this: -HTML : <picture> <source media="(min-width: 768px)" srcset="/image-hero.png" width="820" height="303"> <img class="bg-hero-img" src="" width="414" height="153" alt="image hero"> </picture> <img class="bg-hero left" src="/image-hero-left.png" alt="image hero left"> <img class="bg-hero right" src="/image-hero-right.png" alt="image hero right">
-CSS : .bg-hero { display: none; } @media only screen and (min-width: 1440px) { .bg-hero-img { display: none; } .bg-hero { display: block; position: absolute; } }
-Let's try this. Don't forget to give .bg-hero.left and .bg-hero.right top and left properties.
• Your HTML is semantically justified, but you can refactor the code, for example, add a main element for sections and insert it. • Sizes of images and texts, spaces between containers and texts, button hovers. After fixing all this, your website will be perfect. • Layout looks good, good responsiveness.
Good Luck
Marked as helpful
Thank you very much for your feedback @NikaDalalishvili. I finish a current project and get on with it.
Your solution allows cleaner code, it’s great!!!
@DalaScript
Posted
@HelixX34 Thank you, that gives me even more motivation. Yes gladly! I wish you good luck then!
