Skip to content
Submitted about 2 years ago

Responsive landing Page using HTML and CSS

Tobi•300
@Tobylarry
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @Tobylarry , good job on this challenge! 👋

    Here is some feedback you can consider for future challenges:

    • The color of the Paragraph element is unreadable because it is too light compared to its background, change the color to hsl(220deg, 15%, 55%) for example

    • Try to use semantic tags in your code More information here:

    Instead of:

    <body>
   <div class="contain">
   </div>
<body>

    Try using:

    <body>
   <main  class="contain">
   </main>
<body>

    • Instead of using px in font-size use relative units of measurement like rem or em, the font size not be px because in some browsers the user with limited vision cannot change the font size, using px in fonts does not provide web accessibility

    • The container is not center. If you want to center an element, you can use flexbox to center things:

    body {
   width: 100%;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}
    • width: 100% take the full width of the element(screen)
    • height: 100vh means the height of the body element is equal to 100% of the viewport height.
    • display: flex is used to set the layout of the element to flex.
    • justify-content: center align the flex item at the center of the container horizontally.
    • align-items: center align the items vertically.

    And delete margin: 100px auto; in .contain

    More info here: https://www.w3schools.com/howto/howto_css_center-vertical.asp

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    I hope those tips will help you

    Good Job !

    Marked as helpful
    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord