Box-shadow element query

HTML-CSS
1

Tell us what’s happening:
What is referred to as the second box shadow in the video example? why have two? what are the differences… I couldn’t make out the reason behind adding a coma for another shadow, what am I missing?

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:0 10px 20px rgba(0,0,0,0.19);
}


.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 (Macintosh; Intel Mac OS X 10_15_5) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Safari/605.1.15.

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

Link to the challenge:

2

I’m not sure what it’s telling you about a second box shadow, but I will point out that you have an error in the one that you posted that I can see from here. In your box-shadow element, you didn’t put the space between the colon and the measurements. That might be throwing it off maybe?

3

You need to use the full code from the example for the value.

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

Multiple box-shadows are often used to create and build-up more refined shadows. In the example, you have one shadow that is closer to the box with less blur and one further away from the box with more blur. It sort of mimics how a real shadow might look with some fall-off.