@KobinamdSubmitted about 3 years ago
What is the best way to use icons? How do one get the middle sections to stay the same height?
jenny
@jenniekibiriAll comments
- @jenniekibiriPosted about 3 years ago
Hey @Kobinamd
Good work on mobile design almost a perfect match, however on desktop I think you should try to make the hero section responsive on larger screens
You should also work on the folder organization of the stylesheet specifically ..have the UI library files separated from the custom stylesheets.
Hope it helps!!
Marked as helpful1 - @jenniekibiriSubmitted about 3 years ago
feedback will be appreciated.
- @epalpamSubmitted about 3 years ago
Hi,
Flexbox used for both layouts. Flexbox is power!!
Waiting for your comments..
@jenniekibiriPosted about 3 years agoHello, nice implementation!! I think for your design to fully translate into the specified one you need to wrap the amount description in a div that is grayish. eg amount-div{ background-color: hsl(225, 100%, 98%); border-radius: 10px; } The blue button also needs to be responsive on mobile devices. scss would go a great way in solving the media queries repetitions
Marked as helpful1 - @Pixie-Code-CreatorSubmitted about 3 years ago
I struggled with putting the colour over the image, so looked at how others have done it. Any other ways of doing it would be useful.
@jenniekibiriPosted about 3 years agoNormally adding color over an image you use a color overlay, with a CSS property of position absolute.
.image { background-image: url("../images/image-header-desktop.jpg"); background-repeat: no-repeat; background-size: cover; height: 400px; min-width: 50%; position: relative;
} #color-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsl(277, 64%, 61%); opacity: 0.6;
}
0
