Create Blog card using HTML & CSS

Community feedback

• 

  David Dutra•230

  @dvdgdPosted 7 months ago

  Hello! Great job on the blog preview!

  I have some suggestions to refine the design further:

  • Consider using height: 100vh; instead of defining the height in pixels for the body to ensure it fills the entire screen:

    body, html {
        height: 100vh;
        background-color: hsl(47, 88%, 63%);
    }
    

  • To center align items within your main element, you can utilize the existing display: flex; property and add align-items: center; and height: 100%;. This will ensure the main section occupies the full available height.

  • Enhance the box styling with a solid shadow effect:

    .blog--container {
        box-shadow: 8px 8px 0px black;
    }
    

  Don't forget to include a hover state for the card. Use CSS selectors to change the title's color to yellow and increase the box shadow when the user hovers over the card:

  .blog--container:hover .blog--title {
    color: hsl(47, 88%, 63%);
  }
  .blog--container:hover {
      box-shadow: 16px 16px 0px black;
  }
  

  Plus: Add transitions for a smoother hover effect. Apply a transition property to the .blog--container and .blog--title elements: transition: your-css-property 0.3s ease

  For more information on transitions, refer to the MDN Transition docs.

  Overall, your work is commendable, but these tweaks will enhance the design and user experience even further. Keep up the great work!

  Marked as helpful

  0

  ---

  

  P

  Nadji CHABANE•500

  @CHBNDJPosted 7 months ago

  @dvdgd thank you for the review i appreciated :)

  0
• 

  josh-conde•190

  @josh-condePosted 7 months ago

  loooks goooooooooooooooooooooooooooooooooood

  Marked as helpful

  0