@kefiiiiR
Marie Pascale Brunelle
@mpbrunelleAll comments
- @mpbrunelle
Hi kefiiiiR,
To answer your question about the alignment of the buttons:
If you add a
display: flexon each card, you could then add aflex-grow: 1on each.card-descriptionelement. By default, flex-grow is set to 0, which means that each element never takes more space than the minimum. If you set this property to 1 on .card-description and not on the other elements, .card-description take all the space available and push the other elements to the top and bottom.Hope this helps.
Marked as helpful - @mouad-P7@mpbrunelle
Hello Moad,
To change the color of the image, you could explore <blend-mode> (used with the properties
mix-blend-modeandbackground-blend-mode).Here is what worked for me :
.img { mix-blend-mode: multiply; opacity: 0.75; }Marked as helpful - @JRS-Developer@mpbrunelle
Nice work, @JRS-Developer
Instead of adding an overlay on the image with a pseudo-element, you could use a blend mode on the image, like this:
.img { mix-blend-mode: multiply; opacity: 0.75; }Marked as helpful - @PomPoko-lab@mpbrunelle
@PomPoko-lab By the way, the tutorials mentioned above are free.
- @PomPoko-lab@mpbrunelle
@PomPoko-lab
You did a great job reproducing the two layouts. However, to make your layout adapt to the viewport width, you might want to look into max-width, widths set in percentages, functions like min(), max(), calc(), clamp().
Here are some tutorials that might help you: https://courses.kevinpowell.co/view/courses/conquering-responsive-layouts
Marked as helpful - @carlin-mitchell@mpbrunelle
Hello,
CSS-tricks has published two articles on sticky footer that might help you solve your problem:
Good luck!
Marked as helpful - @mdajmalshadab@mpbrunelle
Hello,
Nice work. To solve the background problem, you could set the background-size property to cover on the body in the desktop media query:
background-size: cover;
