Add a box-shadow to a Card-like Element, part 2 not completing

HTML-CSS
1

Tell us what’s happening:
Not sure if there is a bug for this challenge. I added the shadow to the object using the #thumbnail, see code below. I completed Your code should add a box-shadow property for the thumbnail id. however for some reason it says I did not You should use the given CSS for the box-shadow value.
Your 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;
  }
  
  #thumbnail {
    box-shadow: 0px 10px 10px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  
  .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/68.0.3440.106 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

2

your box-shadow is not exactly the same as the one they gave you. You have this:

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

and they want this:

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

just fix that and you should be good.

1 Like
3

And btw, could you explain what does “zero” stand for in this formula:
box-shadow: 0 10px 20px rgba(0,0,0,0.19);
0 -?
10px - offset-x
20px - offset-y
rgba - color

4

I am not 100% sure what the first zero is for, but it seems to make the shadow appear more blurred.
Usually the first parameter is the ‘inset’ parameter but that’s not the case here. Maybe someone else can figure this one out.