Submitted about 1 year ago

3-column preview card component

Zainabnofiu• 80

@Zainabnofiu

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Any suggestions on how I can improve are welcome! How do I go about adding image of car or the car icons to the project? I'm also not sure of the correct padding and font size of the texts.

Community feedback

Copper2• 410

@long-1810

Posted about 1 year ago

Nice work!

The images are located in the images folder when you download the assets for this project. To use the images, use the <img> tag (Find more about the img tag here)

<img src="..." alt="..." />

Your borders should be rounded in the first card and the last card. This can be done by using pseudo-selectors :first-child and :last-child. Specifically, your code should be like this

.inner-card:first-child {
    border-radius: 15px 0 0 15px;
}
.inner-card:last-child {
    border-radius: 0 15px 15px 0;
}

Zainabnofiu• 80

@Zainabnofiu

Posted about 1 year ago

@long-1810 thank you so much for your assistance. I sincerely appreciate your help with this.

hitmorecode• 6,230

@hitmorecode

Posted about 1 year ago

Nice well done. Just a few tips

When applying flexbox, by default flexbox is always set to row. So you don't have to add flex-directon: row
Only the cards on the outside have border radius, you can remove the border radius on the card in the middle
When setting up you html structure try to do it like this

<body>
  <main>
    /* everything goes in here */
  </main>
</body>

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord