blog preview card using flex-box

Hi @alphajoeofoe,

Congratulations on successfully completing the challenge! Your code is well-structured, and the website works beautifully across different screens. You've done an excellent job ensuring responsiveness and functionality.

I have a suggestion regarding your code that I believe will be of great interest to you.

1. Centering the Card: The card is not perfectly centered because you used padding in the .container class to center it, which won't work well on different screens. Instead, you can remove the padding and add height: 100vh; to the .container. Since you already have justify-content: center; and align-items: center;, adding height will center it vertically:

   .container {
       height: 100vh;
       display: flex;
       justify-content: center;
       align-items: center;
       /* Remove the padding here */
   }
   

2. Adjusting Card Width for Small Screens: For small screen sizes, the card might get out of the viewport because of the width: 380px; property in the .card class. Change it to max-width: 380px; so the card will have a maximum width of 380px but will reduce automatically for smaller screens:

   .card {
       max-width: 380px;
       /* Add padding to make it more similar to the design */
       padding: 20px;
   }
   

3. Improving Image Size: To make the card more similar to the design, add width: 100%; to the image inside the card:

   .card img:nth-child(1) {
       width: 100%;
   }
   

The feedback you requested about hove and focus: To implement a hover or focus state on a card to make it pop out, you can use CSS to apply transformations and transitions. Here's a general approach:

Ensure your card has a proper structure. Here's an example:

<div class="card">
  <div class="card-content">
    <!-- Card content goes here -->
  </div>
</div>

Apply styles to create the pop-out effect on hover and focus. You can use CSS transforms, transitions, and box-shadows.

.card {
  background-color: #fff; /* White background */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  overflow: hidden; /* Hide overflow for rounded corners */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for transform and shadow */
}

.card:hover,
.card:focus {
  transform: scale(1.05); /* Slightly enlarge the card */
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* More prominent shadow */
  outline: none; /* Remove the default focus outline */
}

.card-content {
  padding: 16px; /* Add some padding inside the card */
}

Explanation:

• Transform: The transform: scale(1.05); property slightly enlarges the card when hovered or focused.
• Box-shadow: The box-shadow property adds a more prominent shadow to give the illusion of the card popping out.
• Transition: The transition property ensures that the changes are smooth and animated.
• Outline: The outline: none; property removes the default focus outline that browsers add, which can interfere with the design. However, ensure that there is another way to indicate focus for accessibility.

While the visual effect is important, you should also ensure that the card remains accessible. If you're removing the default focus outline, consider adding an alternative indicator for keyboard users.

.card:focus {
  outline: 2px solid #007BFF; /* Add a custom focus outline */
}

This custom focus outline provides a clear indicator for keyboard users, enhancing the accessibility of your card component. In this example, the card will pop out when hovered or focused.

I hope you find this helpful, and I would greatly appreciate it if you could mark my comment as helpful if it was.

Feel free to reach out if you have more questions or need further assistance.

Happy coding!

thanks a lot i was missing a lot