Recipe Page

Table of contents

• Overview
  • Screenshot and live site URL
• My process
  • Built with
  • What I learned
  • Useful resources
• Author
• Inspired by

Overview

Screenshot and live site URL

Desktop	Tablet	Mobile

Live Site URL

My process

Built with

• Semantic HTML
• Flexbox

What I learned

Ordered and unordered lists in HTML have a padding-left value that causes both the text and the bullet or number at the beginning of each line to shift to the right. By setting the padding-left value for the ul or ol element, you can control how far the text and the bullet or number are shifted together. For example:

ul {
  padding-left: 1.25rem; /* shifts the bullet and text to the right */
}

If you want to shift only the text to the right—without changing the bullet or number position—you can set the padding-left on the li element instead:

li {
  padding-left: 1rem; /* shifts text to the right */
}

Useful resources

• PX, EM or REM Media Queries?
• HTML Tables
• HTML Table Styling

Author

• Github - @AminForouzan
• Frontend Mentor - @AminForouzan

Inspired by

• Recipe page challenge on Frontend Mentor.