Responsive landing page using Flexbox

Community feedback

• 

  Gabriel Morandi de Mello•450

  @gabrielmorandiPosted almost 2 years ago

  Hi @Stress0219👋, welcome to the Frontend Mentor Community!

  I have some suggestions you might consider to improve your code:

  • First, over your .hero__picture element, so that it fits your <h1> size as well as design, add it to your @media screen

  .hero__picture {
        width: 80%;
  }
  

  • In order for the font of your site to be changed, you need to import it so that your style can be applied correctly. To do that, just go to your css/Style.css and in the first line of the document put the following line of code:

  @import url('https://fonts.googleapis.com/css2?family=Open+Sans: wght@400;600;700&family=Poppins:wght@700&display=swap');
  

  and with that you will be important both Poppins font and Onpen sans font for your project! If you want to look for other fonts and insert them into your projects, just access the google fonts website and select the desired fonts and sizes and import them into your project!

  • In order for your sections to have the ideal size both on desktop and mobile, create a variable similar to --pading-container: 80px 0px; only with a larger px value like this:

  :root {
      --pading-section: 160px 0px;
  }
  

  • And finally, don't forget to put the alt attribute inside your <img> tag, like this:

  <img src="" alt="Alternative text is used to describe the content of an image.">
  

  In addition to helping the user in situations, such as an error in loading the image due to a bad connection or even an error in the url of the image, it is also of paramount importance for people with visual impairments, thus making your site much more accessible.

  I hope those tips will help you!

  Good job, and happy coding! 😄

  1