Need help about box-shaddow

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;
}

#thumbnail {

box-shaddow: 0 10px 20px 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; rv:86.0) Gecko/20100101 Firefox/86.0.

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

Link to the challenge:

2

The property name is box-shadow check you have it correctly.

Also, not that it matters for the test but you are missing the closing > on the #thumbnail div.

2 Likes
3

God bless u man, i’ve been on this for 6 hours

1 Like
4

If you want to know how box-shadow works, this is the explanation:

  1. using box-shadow property you can add more than one shadow to an element. Comma (,) is used to declare multiple shadow properties in one line.
  2. in the given challenge you are assigning two shadows to box-shadow property
    the first one has 0 pixels horizontal radius, 10 pixels vertical radius, 20 pixels spread, black color (0,0,0) with hue 0.19
    the second one has 0 pixels horizontal radius, 6 pixels vertical radius, 6 pixels spread, and black color (0,0,0) with hue 0.23
  3. By assigning the above shadows, you are creating a dark shadow closer to the box (second with 6 pixels spread and hue 0.23) and dull shadow further from box (the first one with 20 pixels spread and hue 0.19)
  4. Follow the below link if you need further more explanation and syntax of box-shadow: CSS box-shadow property
1 Like
5

It’s good to struggle a bit, but not for too long. So don’t be afraid to ask for help when you need it. Sometimes all we need is just a fresh pair of eyes to guide us.

I would also highly recommend using something like MDN for documentation.

6

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