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

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

#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.


#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


#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


#20

Explanation of Box-shadow/#thumbnail

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