junwei-wong/recipe-page-main

Frontend Mentor - Recipe page solution

This is a solution to the Recipe page 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

Note: Delete this note and update the table of contents based on what sections you keep.

Overview

Screenshot

Links

• Solution URL: Add solution URL here
• Live Site URL: https://junwei-wong.github.io/recipe-page-main/

My process

Built with

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

What I learned

Changing hr into a single shade, you will need to add border-style:solid.

 hr {
    border-color: var(--stone-150);
    border-style: solid;
  }

Targeting the li marker specifically to change it's color

  ul ::marker {
    /* works */
  }

  li::marker{
    /* works */
  }

Adding border to the each rows

  tr:not(:last-child) td {
    border-bottom: 1px solid var(--stone-150);
  }