mizek1 / single-price-grid-component

Single Price Grid component for FrontEnd Mentor challenge.

Frontend Mentor - Single price grid component solution

This is a solution to the Single price grid component challenge on Frontend Mentor.

Table of contents

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

Overview

The challenge

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

Desktop design

Mobile design

Links

• Solution URL: Here!
• Live Site URL: Here!

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• BEM methodology
• Mobile first

What I learned

This one was pretty easy too! I added BEM methodology and did mobile layout first.

Some snippets:

The BEM methodology in HTML:

<div class="section-2">
    <div class="section-2__title">Monthly Subscription</div>
    <div class="section-2__price">
    <span class="section-2__value">&dollar;29</span
    ><span class="section-2__frequency"> per month</span>
    </div>
    <div class="section-2__subtitle">
    Full access for less than &dollar;1 a day
    </div>
    <div class="section-2__sign-up-button">Sign Up</div>
</div>

Continued development

I'm still learning BEM methodology and trying to make my code more clean and reusable!

Author

• Website - Danilo Alves
• Frontend Mentor - @mizek1