All solutions

I had some problems with footer and setting a background image, any help on best practices for this would be much appreciated

Styling the button was a bit hard especially for a smaller screen, and the radius. And calculations for the age also gave me a hard time. Otherwise best practices are very much welcome

Am not going to lie, using pure JS without react things got messy real fast and very quick, took time but eventually got it to work but still need help on any better practices to avoid such messes in future.

The image in the design seems to have a colour masking it (I don't know if that the right word) but then how do I apply that?

Any suggestions on best practices are welcomed especially the CSS

I'm utilizing Bootstrap for the columns and card layout in this project. However, I encountered a challenge regarding how to handle the product image. There are two approaches I considered:

1. Using Background Image:

.perfume-image {
    background-image: url("./images/image-product-desktop.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
2. **Using Image Path:**
When I tried to add the image directly in the HTML and apply a border-radius to the card, it didn't affect the column or the image itself.
So, my question is, how best can I approach this? Which approach is more practical and suitable for this project?

Things I found difficult

• Mostly was the instructions on how to style the list in a way that a new line begins at the same spot as the first line.

Questions

• How do I write a list in which the characters start at the beginning of the same line in a way that the second line of the same paragraph doesn't go inward?

The only thing I found challenging was picking between using buttons or <a> tags for the links. I could easily change the width and height for the buttons but then again the background colour seems off. While creating borders for the <a> had to be separately for each. Eventually I went with the <a> tags. Uhm, I don't think I have any code that am unsure of. Yes, My question is there a simpler way of making sure the border for <a> tags have the same width despite having a difference in character amount?