Add a box-shadow to a Card-like Element5567

box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

The element now has an id of thumbnail . With this selector, use the example CSS values above ^ to place a box-shadow on the card.

So basically I need to add this box shadow to my element using the id of “thumbnail” but I’m not sure where the box shadow code goes? I tried right after the word thumbnail as well as before it and I also tried putting it in the .fullCard object which will give a shadow around the element but that is not the purpose of this exercise; any help offered is much appreciated.

<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;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard" id="thumbnail">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
    </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>
  **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36

Challenge: Add a box-shadow to a Card-like Element

Link to the challenge:

I don’t see the css selector in your code, have you added that?

1 Like

Hi, ieahleen. Its been awhile since I looked at css but thanks for the hint! Yes i simply needed to add the selector of id which in this case is equaled to “thumbnail”, so I added

  #thumbnail{
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }

and now it works. I dont know if the pound sign # is always needed for id selectors or if there is another way to write it but this worked for me. Thanks

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.