Box-shadow and id attributes

HTML-CSS
1

I’m not quite sure why I’m struggling with this challenge. I’ve been on it for 2 days and I’m stuck I made sure my box shadow wasn’t classified as a class and I’ve checked my card and I’m basically confused on the task “you should use the given CSS for the box shadow 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;
}
#thumbnail {box-shadow: 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;
}
.box-shadow {box-shadow: inset 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 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.

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

Link to the challenge:

2

The box-shadow property for #thumbnail has a syntax error in it, you are missing a character. Here are the instructions again for multiple shadows:

Multiple box-shadows can be created by using commas to separate properties of each box-shadow element.

3

Same thing happened to me. If you select the help button and watch the video. They copy and paste the css from the example. Copy and paste the example and run the code should work.

4

Let me know if that works for you

5

It looks like your missing a comma after the first rgba values, just after the closing comma.
Here is the correction.

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

Small mistakes happen, to all of us. Its one of those things that since this is all new to you, your not looking for the common mistakes. It all comes with time, your doin great though. Keep it up :slight_smile:

Thats not a bad way to double-check but I think its important to type it out honestly. Otherwise you’ll will miss the reason why you had a mistake. There isn’t always a answer key in the real world and finding the problem is half the battle.

6

I agree with you, but then you gave them the answer instead of letting them find it :slight_smile:

1 Like
7

You are right, I shouldn’t of given the answer and allowed them to find it themselves. I was just trying to help since they are new to coding.

1 Like
8

Completely understand. I wasn’t really serious, just having some fun with you (hence the smiley at the end). And sometimes people just don’t see these types of typos and need them pointed out. Sorry if my remark came off wrong.

9

Y’all are right there isn’t always an answer key. I’m glad that there is though for us beginners. I must’ve been missing that comma too. Reset and ran the same css several times. :man_facepalming:t4: Had to resort to seeing how the experts did it. I guess patience, persistence and and an eye for the small details are required in situations like that. Glad we have people to help when it’s needed though.

10

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