Submitted almost 3 years ago

Four Card Feature Section

@YoussefTadarti

A solution to the Four card feature section challenge

Solution retrospective

Hello, Frontend Mentor coding community. This is my first try to code in Frontend Mentor🎉. I had a lots of fun doing the challenge. Any suggestions on how I can improve are welcome!

Code

Please log in to post a comment

Community feedback

Abdullah•340
@ASH2001prince
Posted almost 3 years ago
Hello @YoussefTadarti congrats for your first attempt I got some tips for you

--HTML
1. instead of adding the <div> as a container you should have put the <main> element.
2. And the <div> card as a <article> and at the same time the <article> as a section,
--CSS
1. Its kinda tricky positioning the card by using the margin i think its better using this code:
```
display: flex;
justify-content: center;
align-items: center;
```
1. I did this project a couple days ago and this is how i designed the card => my main container:
```
.cards{
    display: grid;
    grid-template-columns: repeat(4, auto);
    justify-content: center;
    align-items: center;
}
```
hope you find my feedback helpful.
Marked as helpful

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