Frontend Mentor - Product preview card component solution

This is a solution to the Product preview card component challenge on Frontend Mentor.

Table of contents

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

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

Overview

My Second Front-End Mentor Challenge

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size
• See hover and focus states for interactive elements

Screenshot

Links

• Solution URL: Solution URL
• Live Site URL: Live Site

My process

in this project after i ended making the html code i started to make the css layout then i started to look at the design image and my results and made every signle edit to make it be as the design identically.

Built with

• Semantic HTML5
• CSS3 Styling
• Flexbox Layout
• Mobile-first workflow

What I learned

one new thing i learned in this project which is you can change img src on different screen size not using backgorund-image: URL("example.com"); property but using this:

<img src="images/favicon-32x32.png"
      srcset="images/image-product-mobile.jpg 1000w,
      images/image-product-desktop.jpg 2000w">

border-top-right-radius: value;

Continued development

what i want to focus on as i said in the previous project if really someone read the previous project's "README" i want to focus on timing i want to complete the projects faster than am i now everything is simple i don't need to take long time making it.

Useful resources

• Mozilla Docs - This helped for learning more about css properties.

Author

• Website - Omar Refaee
• Frontend Mentor - @OmarRefaee
• Facebook - @OmarRefaee0