Here are some problems I encountered while I was working on my project, and the solutions to them I got from my instructor and found through searching.
< How To Adjust Image Size >
When we want to align images in a row with the same height (and width), we use "object-fit: cover". But sometimes it won't work only by using it.
Here is the solution:
Set the width and the height of the images to 100%.
I found several ways to darken the background images.
Here are some:
(1) Using ":before"
background: url("..(image url)..") no-repeat center center;
background: rgba(0, 0, 0, 0.2);
(2) Using "Linear-gradient"
background-image: linear-gradient(to bottom,
rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5))
When I wanted to align data vertically, I could only think of using "table" or " ". We can use "grid" not only for images, but texts.
grid-template-columns: 2fr 1fr;
These problems might seem too trivial, but actually they are not to beginners like me and it takes so long to find the solutions.
So, I hope this would help someone who's also struggling with the same problems.