How to add "block-shadow" property under id thumbnail

HTML-CSS
1

Tell us what’s happening:

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;
}
</style>
<div class="fullCard" 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 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.106 Safari/537.36.

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

Link to the challenge:

2 
#thumbnail {
    box-shadow: 0px(X-offset) 10px(Y-offset) 20px(Blur) rgba(0,0,0,0.19)(color);
    //you can stack multiple shadows saperated by a comma  ( , ) 
    //which can help in generating cool effects like neumorphism
  }
3 
type or paste code here
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; } 
<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>

wht’s wrong with this? can’t solve it :frowning:

4

where is the div with .fullcard class in your code sample as the styles of .fullcard class will be valid on its particular div

5

(post withdrawn by author, will be automatically deleted in 24 hours unless flagged)

6

Hello @vishal.bhattacharjee ,
Your box-shadow attribute should be applied to the thumbnail id not the fullCard class. From previous lessons you should know how to reference id’s and classes in CSS. You can always go back for a refresher on the lessons. Hope this helps.

Happy Coding.

7

Your code has been blurred out to avoid spoiling a full working solution for other campers who may not yet want to see a complete solution. In the future, if you post a full passing solution to a challenge and have questions about it, please surround it with [spoiler] and [/spoiler] tags on the line above and below your solution code.

Thank you.

8

thanks mate I didn’t know that. :+1: