used html and css only

Hello there! 👋

Congrats for completing the challenge! Everything looks great and the code is clean. 🙌

Hope this was helpful for you!

Happy holidays! 🎉✌

Replace <div class="container"> with the main tag, <h2> with <h1> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

To center .container on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

There is no need to give .container a height value, the heigh will make content overflow when it is resize.

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

in the media query give the width of .container a value. e.g: width: 320px; and flex-direction: column, no need for display: flex again and justify-content: space-between.

Give .image2 display: block ;instead of inline-block by default the img is an in-line element. in the media query you want to it to occupy and entire space.

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey there! 👋 Here are some suggestions to help improve your code:

Congrats on completing your first challenge!🎊🎆

• Do not forgot to check your FEM report, to see what is incorrect and update your code with it right after you submit your challenge.

• To properly center ✅ your content to your page, you will want to add the following to your body (this method uses CSS Grid):

body {
    min-height: 100vh;
    display: grid;
    place-content: center;
}

More Info: 📚

Centering in CSS

• The image’s alt tag description needs to be improved upon. Assume that you are describing the image to a someone over the phone.

More Info:📚

https://www.w3.org/WAI/tutorials/images/

• This component requires the use of two images 🎑 at different breakpoints. The picture element will facilitate this.

Here is an example of how it works: EXAMPLE

Syntax:

  <picture>
    <source media="(min-width: )" srcset="">
    <img src="" alt="">
  </picture>

More Info:📚

https://www.w3schools.com/html/html_images_picture.asp

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! 🎄🎁