Responsive Landing Page using CSS

it's nice the only thing you may need to change is the width and height of your box element, it's static right now which is 200 or something which may cause problems in bigger screens, for example, a 32inch screen will not be able to see what is that you've written in the box in some cases user will have to change its zoom level which is not a good UI experience, make it dynamic the width and height using the min-width instead of width and make you can change it to let maybe's say 25% on a larger screens and as well as the font should be bigger as well on larger screens.

Your project must contain a main instead of a div with the "container" class. You can also use section instead of div. A section for image and a section for the content, etc... This way, your HTML becomes more semantic.

You aren't using the right font and the paragraph font size should be 15px.

You should have used h1 in the text with the bigger font size.

Replace <div class="container"> with the main tag and wrap * Improve your front-end skills by building projects* in <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html.

Use the font-family that was given in the styleguide.md.

Replace the height in .card with a padding value for all the sides, this will prevent the content from overflowing on smaller screens and its a responsive replacement. padding:15px

Increase the width of .box for it to be equivalent to the width of the design. width:320px and give the img a max-width of 100%.

Give h1 and p the same font-size of 15px, text-align: center, the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

Hope am helpful.

Well done for completing this challenge. HAPPY CODING

Hey, great solution! A small tip for me in regards to the sizing of the box component. In css there is a calc() function that lets you make calculations using numbers, variables, etc. For this solution you could use a the minimum width 360px calculated with the approximate size you want your .box to take of the entire scree. So the css could look something like calc(360px * 0.7) to get 70% of the minimum width. Hope you find this helpful, good solution! :D