Simple QR-Code Web Page

Community feedback

• 

  MikDra1•6,920

  @MikDra1Posted about 2 months ago

  Well done, here are some things to review:

  • Setting html { background-color: #D5E1EF; } applies a light blue background to the entire HTML document. This creates a soft, calming backdrop. Make sure the contrast between this background and your text is sufficient for readability.

  • The body { height: 520px; width: 330px; background-color: white; text-align: center; margin: auto; margin-top: 15%; border-radius: 25px; } rule centers the content horizontally and adds a top margin of 15% of the viewport height. While the fixed height and width create a defined container, they can limit responsiveness on different screen sizes. Consider using relative units or media queries to make the design more flexible. The border-radius: 25px; gives a smooth, rounded appearance to the container, which is visually appealing.

  • For h2 { text-align: center; font-family: Outfit; font-weight: 700; }, centering the text and using a bold font weight (700) helps the heading stand out. Ensure that the font Outfit is available or included in your project to maintain consistency across different devices.

  • The p { text-align: center; font-size: 15px; font-family: Outfit; font-weight: 400; color: gray; } style centers paragraph text and uses a smaller font size of 15px, which is quite readable but may be small for users with visual impairments. A font size of at least 16px is generally recommended for better accessibility. The use of a lighter font weight (400) and gray color ensures that the text is less prominent, which is good for secondary content.

  • The img { text-align: center; margin-top: 5%; border-radius: 15px; width: 300px; height: 300px; } rule applies a fixed width and height to images, ensuring they are displayed as squares with rounded corners. The margin-top: 5%; adds spacing from the top, but fixed dimensions can limit responsiveness. For better scalability, consider using percentage-based dimensions or max-width for images to ensure they adjust well to various screen sizes.

  Hope you found this comment helpful 💗💗💗

  Good job and keep going 😁😊😉

  0
• 

  Samuel600•140

  @Samuel600Posted about 2 months ago

  this is lovely

  0