Add a box-shadow to a Card-like Element (Help with the thumbnail id)

Hey Guys!

I’m having a little trouble with this challenge. I got the second part right by including the box-shadow code. My card does appear to have a shadow surrounding it. However, I’m not sure what they want me to do with the thumbnail id? What do they mean by add the box-shadow property for the thumbnail id?

** code so far**


<style>
  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  
  
  
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }



</style>
<div class="fullCard" id="thumbnail">

  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element

The challenge is asking you to use CSS to target the card using the ID instead of the Class…
They want you to write your own instead of using the existing .fullCard{}

Ok I got it,

I was using .thumbnail instead of #thumbnail

Thanks!

2 Likes