https://github.com/richardcyrus/fm-testimonials-grid-section
This is a solution to the Testimonials grid section challenge on Frontend Mentor
https://github.com/richardcyrus/fm-testimonials-grid-section
css-custom-properties css-grid frontend-mentor html5 mobile-first semantic-html
Last synced: 4 months ago
JSON representation
This is a solution to the Testimonials grid section challenge on Frontend Mentor
- Host: GitHub
- URL: https://github.com/richardcyrus/fm-testimonials-grid-section
- Owner: richardcyrus
- Created: 2021-06-12T14:44:08.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-08-23T13:55:26.000Z (almost 5 years ago)
- Last Synced: 2025-01-22T09:49:42.463Z (over 1 year ago)
- Topics: css-custom-properties, css-grid, frontend-mentor, html5, mobile-first, semantic-html
- Language: HTML
- Homepage: https://richardcyrus.github.io/fm-testimonials-grid-section
- Size: 835 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Frontend Mentor - Testimonials grid section solution
This is a solution to the [Testimonials grid section challenge on Frontend Mentor](https://www.frontendmentor.io/challenges/testimonials-grid-section-Nnw6J7Un7). Frontend Mentor challenges help you improve your coding skills by building realistic projects.
## Table of contents
- [Overview](#overview)
- [The challenge](#the-challenge)
- [Screenshot](#screenshot)
- [Reference Images](#reference-images)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Useful resources](#useful-resources)
- [Author](#author)
## Overview
### The challenge
Build out a testimonials grid section and get it looking as close to the reference design as possible.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
### Screenshot
- [Mobile](./design/screenshots/mobile-screenshot.jpg)
- [Tablet](./design/screenshots/tablet-screenshot.jpg)
- [Desktop](./design/screenshots/desktop-screenshot.jpg)
#### Reference Images
- [Mobile](./design/reference/mobile-design.jpg)
- [Desktop](./design/reference/desktop-design.jpg)
### Links
- [Solution URL](https://www.frontendmentor.io/solutions/testimonials-grid-section-html-css-cssgrid-e7M1wUIwu)
- [Repository URL](https://github.com/richardcyrus/fm-testimonials-grid-section)
- [Live Site URL](https://richardcyrus.github.io/fm-testimonials-grid-section)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- CSS Grid
- Mobile-first workflow
### Useful resources
- [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
## Author
- Website - [www.richardcyrus.com](https://www.richardcyrus.com)
- Frontend Mentor - [@richardcyrus](https://www.frontendmentor.io/profile/richardcyrus)