A blog-preview page using basic HTML,Css flex,position,query and hover

Community feedback

• 

  CHarvey820•190

  @CHarvey820Posted 8 months ago

  This looks like a great start!

  • You can move your attribution lines just under your <section> so they don't show up in the actual component.

  </section>
  <a class="link-2" href="https://www.frontendmentor.io/profile/yourusername">Challenge by Frontend Mentor</a><br>
  <a class="link-2" href="">Coded by Boy Programmer</a>
  </body>
  </html>
  

  • Remember to use both align-items: center; and justify-content: center; to fully center a flexbox component.

  • Try viewing the solution on a larger screen if possible. It looks good in smaller screens, but a bit stretched on larger ones.

  • Change your .head-image to have max-width: 100%; so it does not overflow past its container. You can also remove the border from the image, as it isn't present in the solution.

  • The section in the solution does not have a hover state; instead, it is simply a static box-shadow. You can remove your section:hover entirely, and move your box shadow into your section selector. The box shadow also does not need the blur or spread radius values, instead you can try something like this: box-shadow: 8px 6px #000000;

  I hope this can give you a good start on some ways to improve your project. Happy coding!

  Marked as helpful

  0

  ---

  

  De Boy Programmer•60

  @Ciscomahlee005codesPosted 8 months ago

  @CHarvey820 Thank you for the corrections

  0