This is a solution to the Four card component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the page depending on their device's screen size
- See hover states for all interactive elements on the page
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Mobile-first workflow
Improved my understanding of flexbox
.social-list {
display: flex;
gap: 1.5em;
justify-content: center;
align-items: center;
}
.social-list-item {
border: 1px solid var(--clr-white);
border-radius: 50%;
padding: 0.5em;
}
- Scrimba - This platform provided me with an opportunity to learn react for free
- Github - @soji
I am very grateful to Smug & Openwell for always making time out of their busy schedules to see to my coding challenges and providing me with extra motivation.