Used position and a little flexbox

Nice job Alexei, the card looks very similar to the original.

Some feedback:

• To help get a more clean/consistent naming pattern to your CSS components. This card challenge I think is perfect for. Look into BEM link here

• I highly recommend using background-image for multiple images on the body. Example take from here for more info. It will be tricky but once you get the background-image setup. Focus on getting background-size and finally background-position

#example1 {
  background-image: url(img_flwr.gif), url(paper.gif);
  background-position: right bottom, left top;
  background-repeat: no-repeat, no-repeat;
}

• Another method instead of using <hr> for a border is to wrap the upper section of your card to a div and add a bottom border to it.

• For your <section> container. They normally require a heading tag. Starting between h2 to h6.

Good work and keep on coding!! 👍

Hey, Alexei! 👋

Great work on this challenge! Your solution looks good! 👏

In addition to artimys' great feedback, I suggest using flexbox on the body to center the card component in the middle of the screen (rather than a container div and margin) so that the card always remains nicely centered when the viewport is resized. It'll be a little easier, too, I think. 😉

Keep coding (and happy coding, too)! 😁