Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog Preview Card using HTML/CSS box shadowing

@forhisglory85

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

I was able to take a lot of what I learned from building the QR Code project and apply to this project, so my code was cleaner. I also incorporated section elements this time which seemed appropriate.

I find myself changing main element tags like p or adding a div far into the process which I feel like I should know whats needed where at the beginning of the project. I should be able to properly structure my html and the start.

What challenges did you encounter, and how did you overcome them?

I didnt understand if the "active" state included both the H1 and P elements to be highlighted at the same time when hovered over with the cursor. I tried to do that, but I couldn't figure it out. I ended up having their active states happen separately with a different class selector for both elements.

What specific areas of your project would you like help with?

Can the active state for H1 and P happen at the same time but with different styling? (The H1 changes to yellow when hovered, while the main P changes to gray).

Community feedback

@scamgi

Posted

I think the active state was referred to H1 only.

Yes, you can change the color the color of H1 and P when you get over them with your cursor. A possible solution could be this one:

You create a <div class="h1-and-p-container"> and you put H1 and P inside it.

<div class="h1-and-p-container">
  <h1>...</h1>
  <p>...</p>
</div>

Then you write this css code:

.h1-and-p-container:hover h1 {
  color: yellow;
}

.h1-and-p-container:hover p {
  color: gray;
}
1

@forhisglory85

Posted

@scamgi

Do you know why my design solution is positioned higher than the original design? On my browser it looks fine and centered, but can't figure out why it's so high on the design comparison. Thanks!

0

@scamgi

Posted

hey @forhisglory85

I didn't notice it. Do you know how to use the developer tools of google chrome? If not use them ASAP, with them you can see that when you make your window smaller, the .container can't be vertically centered because of the margin-top:5rem. For example you can remove it when the hight is too low with a @media rule.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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