How to Add a box-shadow to a Card-like Element

Tell us what’s happening:

I don’t understand the following question; “Your code should add a box-shadow property for the thumbnail id.”?

Your code so far


<style>
  h4 {
    text-align: center;
    background-color: rgba(45, 45, 45, 0.1);
    padding: 10px;
    font-size: 27px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  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>
      <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>

Your browser information:

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

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

You should have a selector for the id thumbnail and it should apply a box-shadow (similar to what was done for h2 elements).

Is there an example? I don’t see h2 elements in this page.

I tried this one

id=“thumbnail box-shodow”

but not working.

That’s because styles do not go in the id attribute. box-shadow needs to be added via a CSS syle.

They are counting on you remembering some things from an earlier lesson here. It took me a bit to figure out what I was doing wrong.

First, notice that they’re asking you to add the box-shadow property to the thumbnail ID. Now, looking at the original code on there, there’s no ID for thumbnail. So you need to create one instead of adding code to h4 as you did.

So you need to remember the difference between a class and an id. (Hint: it has to do with punctuation, and I was inadvertently creating a class for thumbnail instead of an id) and type an id for thumbnail. Then, in its properties, add the box-shadow details.

3 Likes
#thumbnail{ }
2 Likes

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

nice approach to cracking this… makes u think rather than giving a direct answer