Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/gracilianoog/fementor-single-price-grid

Single Price Grid Component developed with HTML, CSS and Sass as part of the Frontend Mentor challenge.
https://github.com/gracilianoog/fementor-single-price-grid

bem css frontendmentor html sass

Last synced: 16 days ago
JSON representation

Single Price Grid Component developed with HTML, CSS and Sass as part of the Frontend Mentor challenge.

Host: GitHub
URL: https://github.com/gracilianoog/fementor-single-price-grid
Owner: GracilianoOG
Created: 2024-09-04T15:48:51.000Z (2 months ago)
Default Branch: main
Last Pushed: 2024-09-08T20:27:31.000Z (2 months ago)
Last Synced: 2024-10-16T15:35:15.573Z (about 1 month ago)
Topics: bem, css, frontendmentor, html, sass
Language: SCSS
Homepage: https://gracilianoog.github.io/fementor-single-price-grid/
Size: 159 KB
Stars: 0
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # 💻 Single Price Grid Component

![Design preview](./design/desktop-preview.jpg)

## 📖 Description

*Single Price Grid Component* developed using HTML, CSS, and Sass as part of the Frontend Mentor challenge. This project was created with the BEM naming convention and follows a mobile-first approach. It was a valuable and enjoyable exercise for practicing CSS Grid.

## 🎯 The challenge

Your users should be able to:

- View the optimal layout for the interface depending on their device's screen size

- See hover and focus states for all interactive elements on the page

## 🧱 Built with

- Semantic HTML5 markup

- CSS Grid and Flexbox

- Mobile-first workflow

- Sass Preprocessor for CSS

## 🛠️ Useful resources

- [Challenge](https://www.frontendmentor.io/challenges/single-price-grid-component-5ce41129d0ff452fec5abbbc)

- [Frontend Mentor](https://www.frontendmentor.io/)

- [Karla font](https://fonts.google.com/specimen/Karla?query=karla)

- [Webfonts helper](https://gwfh.mranftl.com/fonts)

- [Box Shadow Generator](https://cssgenerator.org/box-shadow-css-generator.html)

## 🧑🏻‍💻 Author

- [GitHub](https://github.com/GracilianoOG)

- [LinkedIn](https://www.linkedin.com/in/gabrielgmbarros)

- [Frontend Mentor](https://www.frontendmentor.io/profile/GracilianoOG)