Thanks for checking out this Frontend Mentor coding. This is my solution to the Testimonials grid section. I have to build this application using only the preview images and the especifications.
Contents
This is responsive testimonials grid sections. I it a good challenge which helped me how to apply grid and focus effect on the card hovered with only CSS and I've also created my own design changes and personal improvements to the challenge elements. I'd recommend it to anyone still learning this concept.
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
:root {
--Moderate-violet: hsl(263, 55%, 52%);
--dark-grayish-blue: hsl(217, 19%, 35%);
--dark-blackish-blue: hsl(219, 29%, 14%);
--Light-gray: hsl(0, 0%, 81%);
--Light-grayish-blue: hsl(210, 46%, 95%);
}- Font size: 1.3rem;
- font-family: 'Barlow Semi Condensed', sans-serif;
<br> - font-weight: 500 e 600
<br>(you can find the font in Google Font)
- 🎨 Focus effect on hover.
- 👨🔬 Focus effect on card hovered.
- 📱 New media query breakpoint for tablet screens
- 😎 Custom Design.
David Willian