3 column preview card component

Hi.

Well done for completing the challenge. You might want to read up on the use of heading tags. You're using multiple <h1>'s here which should really be <h2>'s. MDN docs points out that though it is allowed in HTML standards to use multiple <h1>'s on a page, these mustn't be nested. Overall it's considered good practice to only use one, for the main page heading.

Have a look at the MDN page for section headings

This page also gives a good account from an SEO perspective - SEO Sherpa

All the best

Before I answer your question, I want to point out that the hover states that was in the implementation are not quite correct. According to what's displayed in /design/active-states.jpg, the button should have a white border and text against a background with its card theme color.

There's not really much I can suggest to reduce code duplication.

You could try to use JS to extract the card creation semantics & styling into a function, then call that function 3 times, each time passing in different background colors and text content. However, that tends be more difficult to organize in vanilla JS since it takes an imperative approach (how to make these elements, style them, and assemble them together?) as opposed to the declarative approach HTML5 provides (what elements should I use under this existing element, and what CSS styling should I give it?). You could instead use a JS frontend framework/library like React, Angular or Vue, that harness the power of JS while keeping the declarative approach to building UIs. Though that may be overkill for a project of this small magnitude.

One thing you can do is to use CSS variables in your stylesheet. For example, you can declare the variables to store color values in the root and give it names:

:root {
  --bright-orange: hsl(31, 77%, 52%);
  --dark-cyan: hsl(184, 100%, 22%);
  --very-dark-cyan: hsl(179, 100%, 13%);
  --transparent-white: hsla(0, 0%, 100%, 0.75);
  --very-light-gray: hsl(0, 0%, 95%);
}
...

And then you can use them throughout your stylesheet:

...
body{
  ...
  background-color: var(--transparent-white);
}
...
main h1{
    ...
    color: var(--very-light-gray);
    ...
}
...
main p{
    ...
    color: var(--transparent-white);
    ...
}
...
.sedan{
  background-color: var(--bright-orange);
}
.sedan button{
  color: var(--bright-orange);
}
.suv{
  background-color: var(--dark-cyan);
}
.suv button{
  color: var(--dark-cyan);
}
.luxury{
    background-color: var(--very-dark-cyan);
}
.luxury button{
    color: var(--very-dark-cyan);
}
...

The benefit is that if any color value needs to be changed with the intention of changing all instances it's used at to correspond with the style guide, all the color values will be kept in one place, making it easier to find and to correct all its instances. This isn't just exclusive to CSS color values. CSS variables can also store CSS size measurements.