Submitted almost 2 years ago

3-column preview card component

@Zainabnofiu

A solution to the 3-column preview card component challenge

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.

Code

Please log in to post a comment

Community feedback

Copper2•410
@long-1810
Posted almost 2 years 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;
}
```
hitmorecode•7,540
@hitmorecode
Posted almost 2 years 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>
```

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