Advantage of applying 'box-shadow' tag to the #thumbnail element vs .Fullcard?

Tell us what’s happening:
Describe your issue in detail here.
Just wondering if there is a reason you would not elect to apply the shadowing to the full card vs the #thumbnail ? I did both and it looks the same to me. thanks

  **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" 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/97.0.4692.99 Safari/537.36

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

Link to the challenge:

No, not really, at least not using an id. I’m sure it is done to make it more clear and maybe also to make testing easier.

What you might have are multiple classes. One for the base card layout style, like width, padding, margin, and so on, and one for the look of the card that might include border, border-radius, box-shadow, colors, and so on.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.