Frontend Mentor - Single price grid component solution

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author

Overview

-- 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.jects.

The challenge

• Build it to look as close as possible to the design provided.

Users should be able to:

• View the optimal layout for the component depending on their device's screen size
• See a hover state on desktop for the Sign Up call-to-action

Screenshot

Links

• Solution URL: [https://www.frontendmentor.io/solutions/single-price-grid-component-cGmcEIHAH]
• Live Site URL: [https://zeerobit.github.io/Single-price-grid/]

My process

• -Started with mobile design first than use media queries for desktop layout.created variables for colors and font-weights.

Built with

• Semantic HTML5 markup
• CSS custom properties
• CSS Grid
• Mobile-first workflow

What I learned

This is my first grid project, i learned how to extend a column using the span property

  .community {
    grid-column: span 2;
  }

Continued development

• Learning grid area so i can implement it in my next project.

Useful resources

• Example resource

Author

• Frontend Mentor - @Dblack84
• Twitter - @D_Black84