Made it using bootstrap

👾Hello @oxieoxie, Congratulations on completing this challenge!

Your solution its almost done and I’ve some tips to help you to improve it:

Using <picture> you’ve more control over the elements and its better than using the product image as <img> or background-image. Look that for SEO and search engine reasons it isn't a better practice to import this product image with CSS since this will make it harder to the image. You can manage both images inside the <picture> tag and use the html to code to set when the images should change setting the device max-width depending of the device (phone / computer) Here’s a guide about how to use picture: https://www.w3schools.com/tags/tag_picture.asp

✌️ I hope this helps you and happy coding!

Hello, Emmanuel Chidozie Anyasor Congratulations on finishing this project. It's lovely and great on the whole! Just a little tip:

• You might want to use semantic tags like the <main> to wrap your code, instead of div. like

<main>
<div class="container"></div>
<div class="attribution"></div>
</main>

This would help improve accessibility.

• add the below code to the body. It will center everything

body {
    justify-content: center;
    align-items: center;
    display: flex;
    height: 100vh;
    flex-direction: column;
    background-color: hsl(30, 38%, 92%);
}

• add max-width: 750px in the .container & remove /* padding: 7% 15%; */ /* background-color: hsl(30, 38%, 92%);*/

• in the button add border: none; outline: none;

• This is my solution of this challenge live, repo

• Instead of using px, use relative units like rem or em to get better performance when the information on your page needs to be resized for multiple screens and devices. REM and EM apply to all sizes, not just font-size. You can code your entire page in px and then, at the very end, use the VsCode plugin px to rem to perform the automatic conversion px to rem

I hope it will work. Happy coding.

Congrats on completing this project Emmanuel

You have a great solution there

1. You can do better by reading through the style.md file well and putting more effort into following the design(fonts, sizes, colors, spacing, etc)

2.Ensure that all content on your page is contained within a landmark region, e.g <main>