I need solution to the box shadow property

Tell us what’s happening:
I’m stuck,pls I need help
It keeps saying your box shadow must have the CSS 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;
}



.fullCard {
  width: 245px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px 5px;
  padding: 4px;
}
.cardContent {
  padding: 10px;
}
.cardText {
  margin-bottom: 30px;
}
#thumbnail{
  box-shadow:"0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23)";
}
</style>
<div
class="fullCard">

<div id="thumbnail"
box-shadow:"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)";

>


<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 (Linux; Android 7.0; TECNO K7 Build/NRD90M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/62.0.3202.84 Mobile Safari/537.36.

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

Link to the challenge:

  1. It is not a string value. You have to remove the quotes " " around the value.

  2. You have added the CSS rule on the opening tag of the thumbnail div element. That is not how you set styles on an element, you should remove that even though it won’t actually make the tests fail.

1 Like

Hi! i think the problem is that you put the values of the box-shadow in quotation marks, like this:

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

When it should be without the quotation marks, like this:

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

you also put the box-shadow property inside of the thumbnail div, you should delete that, change this:

<div id="thumbnail"
box-shadow:"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)";

>

To this:

<div id="thumbnail">

That should work :smiley:

1 Like

Thank you very much.It finally worked

1 Like