Travolgi 🍕• 31,420
@denielden
Posted
Hi Ahmed, I took some time to look at your solution and you did a good job!
Also I have some tips for improving your code:
- add
main
tag and wrap the card for Accessibility - add descriptive text in the
alt
attribute of the image a
must not appear as a descendant of thebutton
tag- remove all unnecessary code, the less you write the better as well as being clearer: for example the
div
container of image - to make it look as close to the design as possible remove
border-radius and padding
properties fromimg
- remove
padding
fromcontainer
class and addborder-radius: 1rem and overflow: hidden
- remove all
margin
fromcontainer
class - try to use flexbox to the body for center the card. Read here -> best flex guide
- after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - try to add a little
transition
on the element with hover effect - instead of using
px
try to use relative units of measurement -> read here
For add the top image in the background just put more specific background properties to the body:
background: url("../img/pattern-background-desktop.svg") no-repeat top center;
background-size: contain;
background-color: #e0e8ff;
Overall you did well 😉
Hope this help and happy coding!
0
AhmedAlasyotY• 110
@Ahmed666313
Posted
@denielden thanl you very much my broo
1