https://github.com/agataliberska/four-card-feature

Responsive four card feature section using CSS grid - Frontend Mentor challenge
https://github.com/agataliberska/four-card-feature

css-grid-layout responsive-web-design sass-framework vanilla-javascript

Last synced: 26 days ago
JSON representation

Responsive four card feature section using CSS grid - Frontend Mentor challenge

• Host: GitHub
• URL: https://github.com/agataliberska/four-card-feature
• Owner: AgataLiberska
• Created: 2021-02-08T22:29:46.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2021-02-10T09:36:26.000Z (almost 4 years ago)
• Last Synced: 2023-03-11T23:03:05.079Z (almost 2 years ago)
• Topics: css-grid-layout, responsive-web-design, sass-framework, vanilla-javascript
• Language: SCSS
• Homepage: https://four-card-feature-taupe.vercel.app/
• Size: 53.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Frontend Mentor - Four card feature section

![Design preview for the Four card feature section coding challenge](./design/desktop-preview.jpg)

## Link to finished project

![You can view the finished project here](https://four-card-feature-taupe.vercel.app/)

## Goals

The goal is to recreate the above design as closely as possible using any tools.

## Technologies used

For this project, I used:

 * semantic HTML

 * Sass

 * BEM naming methodology

 * CSS grid

 * Mobile first

 * RWD

 

 For additional effects, I added box-shadow to each card and hover effect on card headings.

## Challenges 

As an additional challenge, I wanted to make each card a clickable link while ensuring that they remain fully accessible. 

Placing a `
` inside the anchor tag is not a good solution, as it causes accessibility issues for screenreader users. It would also make it impossible to select a portion of text in that `
`.


Instead, I solve this issue by adding an event listener on each of `