Frontend Mentor - Single price grid component solution

This is a solution to the Single price grid component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

The challenge

• Build out the project to the designs provided

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/single-pricing-card-component-html-and-css-with-flexbox-and-grid-0YFT-MSj6
• Live Site URL: https://nicoleanalisecox.github.io/price-grid-component/

My process

Built with

• HTML
• CSS / Flexbox / Grid

What I learned

**Day 1: ** Set up stylesheet & basic HTML structure. Added background colours to body and divs. Created classes for the main sections. Played around with CSS grid for layout for the first time. These resources were useful: Getting Started with CSS Grid CSS Grid Cheat Sheet Illustrated

**Day 2: ** Started to style the inner content (text & button) to align with the design. You can get rid of the bullet points by using 'list-style-type: none;' Found from this resource: [How to - List without bullets] (https://www.w3schools.com/howto/howto_css_list_without_bullets.asp)

Also, box-shadow generators have been useful. [Box-shadow Generator] (https://html-css-js.com/css/generator/box-shadow/)

**Day 3: ** Looked into making it responsive for mobile. Had some spacing issues.

**Day 4: ** Resolved spacing issues on mobile size. Added a simple hover effect to the button using the :hover selector. Resource here: [Hover selector] (https://www.w3schools.com/cssref/sel_hover.asp) Found this article for a fancy hover which might be nice for future projects. [Silky smooth box shadow] (https://tobiasahlin.com/blog/how-to-animate-box-shadow/)

And finally tidied up the stylesheet and HTML.

Issues I had:

Problem: Tried to style the < span > within a < p > element to have a different opacity to the p, but it was inheriting the

opacity. Solution: You can't overwrite an element's parent's property in CSS, so changed the content in the parent and vice versa.

Problem: Media query styles weren't applying and were still inheriting the 'main' styles. Solution: Forgot about cascading / inheritance in a stylesheet! Changed the order of my stylesheet to have the media queries after the main styles.

Author

• Website - Nicole Analise Cox
• Frontend Mentor - @nicoleanalisecox
• Instagram - @nicolencode
• Twitter - @_nicoleanalise