Skip to content
Submitted over 2 years ago

Grid Component Using Grid Template Columns

#accessibility
Tauri StClaire•40
@tauri-st
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • The color displayed by Figma for the "why us" list as well as the Subscription "per month" is white, but they look to be a light grey? There is a drop shadow affect listed, is this an inset drop shadow?
  • This is my last FEM hacking it on my own before using a component library! I'm going to explore SASS and Tailwind, and would appreciate any favorite resources :)

Community feedback

  • Tauri StClaire•40
    @tauri-stPosted over 2 years ago

    Also, can anyone see where I'm having the accessibility issue: "<ul> and <ol> must only directly contain <li>, or <template> elements"?

    Also also, I would love if you have and would like to share your own solutions to this challenge!

    0
    Vander Santos•1,750
    @vandermsPosted over 2 years ago

    @tauri-st, the accesbility issue happens because you forgot to close the <ul> tag. Instead of writting </ul> you wrote <ul> in line 48 of index.html.

    Marked as helpful
    1
    Tauri StClaire•40
    @tauri-stPosted over 2 years ago

    @vanderms Thank you so much! So obvious, but I wasn't seeing so I appreciate you putting eyes on it! Such an easy fix! My bad for not validating my code, rookie mistake. {:

    1

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord