Add a box-shadow to a Card-like Element stumped

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;
  }
  
  box-shadow {
    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;
    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;
  }
</style>
<div class="fullCard" id="box-shadow">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>
    </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/67.0.3396.99 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element/

2

You have defined the style well. Just give it a correct name. Instead of selecting ‘box-shadow’ you want to select ‘thumbnail’ id.

3

i dont know what you mean???

4

What I mean is you have the correct style but you are targeting the wrong element.

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

You can replace … with ‘thumbnail’ id

5

thank you sooooo much for your help but i am still lost on what you are trying to tell me. not sure if you are aware but i am take a teach-yourself online class and i am a beginner. big time beginner :slight_smile: i tried replacing the “thumbnail id” a few dozen times in a variety of ways and nothing worked. I know its something simple; you said i am targeting the wrong element? i dont understand . . sorry

6
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; } box-shadow { 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; 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; }

Alphabet

Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.
7

Hey MobiBlue,
You need to first understand about “id” selectors.
The way to select an element with an id “x” is to use #x.
That is, an element is selected by its id using # sign.
Try doing it now.
I have given the answer below but you should try it by yourself first.

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

1 Like
8

sorry man, dont mean to be so dense but i dont know what you mean when you say “select an id “x” is to use #x” ??? totally lost . . .

the test is telling me:
“Your code should add a box-shadow property for the thumbnail id.”

so i changed to id by adding “bob-shadow”:

i also tried may versions like:

still confused . . .

9

for some reason i dont see all the text i sent you??

10
11

In order to send codes in reply use the preformatted text button in reply window.

12

what performatted text button are you talking about???

13

what is a pre-formatted text button?

i really am a beginner :slight_smile:

14

When i said x i meant that whenever you want to select something with id use the #(hashtag) sign.
For example: for element with id “dog” use #dog in css.
for element with id “cat” use #cat in css.
In your case in order to get element with “thumbnail” use #thumbnail.
Also give the id “thumbnail” to your div element with class “fullcard” instead of “box-shadow”.

15

Untitled
Untitled1366×768 54.4 KB

16

dont know what you mean “use #thumbnail in css”

how do i do that?

do i create a css style???

thumbnail {
#thumbnail;
{

totally confused . . . .

17

i dont see “thumbnail” in css, i only see it in that <div part

18

#thumbnail{
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
The above part you have to enter in style tag.
And in your div element change the id name to thumbnail.

19

now i understand.

thank you sooooooo much. I was totally stumped on that one.

wow lots to learn and understand. I am 63 years old trying to teach myself coding for the first time :slight_smile:

long road to travel.

it would not let me send this message, saying i exceeded my message limit had to wait 22 hours sorry

1 Like
20

Explanation of Box-shadow/#thumbnail

Hey aditya_p , Great job in your explanation and I commemorate your patience too. Thumbs up !! lol

1 Like