Only HTML and CSS

Hi @Denismapll great design, just a few suggestions:

• The car icons should have aria-hidden="true", because they are for decoration. Decorative image must be hidden at all times by using aria-hidden="true" attribute on the img tag.
• Learn more should be an a tag, since it will likely to be a link rather than button in an actual website.
• I recommend adding transition: all 0.2s; to the button and the links, this will make :hover smoother.

Hope the notes from the above help, great work

Hi @Denismapll, nice solution!

One idea for your css. I would do one container class for the stuff the three container share and then three different classes only for the background-color for example bg-bright-orange, bg-dark-cyan and bg-very-dark-cyan.

In the html you could then do for example <div class="container bg-bright-orange">.

This has the advantage, that if you have to change the css of the container, you don't have to change it three times. Instead of making three button classes button1, button2, button3, you could use the same principle and add the different colors via descendant combinator:

.bg-bright-orange .button {
   color: var(--cc-bright-orange);
}

Hi, you did a good job. There are few details I would like to point out.

• The headings font looks different from the origial design.
• You should use border-radius for the cards wrapper.
• It would look better if you add transition for button hover effect and change the cursor: cursor: pointer;
• When the screen size is smaller than 900px the cards takes full width. You should give a little space around the cards (left/right)
• You should center the cards for smaller device (tab/mobile)