Blog Preview Card using HTML/CSS box shadowing

Community feedback

• 

  Giacomo Scampini•120

  @scamgiPosted 8 months ago

  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•20

  @forhisglory85Posted 8 months ago

  @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

  

  Giacomo Scampini•120

  @scamgiPosted 8 months ago

  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