I am stuck here please someone should help please

Blockquote
I dont seems to understand where the box-shadow should be

  **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;
}
</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/87.0.4280.88 Safari/537.36

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

Link to the challenge:

Blockquote

If I understand what you’re doing…
.fullCard

You mean the box-shadow should be in .fullcard???

Hi @bickyseun !

The instructions tell you to add a box shadow to the #thumbnail selector.

You first need to add the #thumbnail selector to the css.
Then you need to add the box-shadow that FCC gave you.

Hope that helps!

2 Likes

I did that at first below the fullcard, i add .thumbnail selector, but it doesnt take effect, my question where will i insert the thumbnail selector, i mean the position

Can I see your code so I know what you are working with?


When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

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

I haven’t tested your code yet, but it probably this error here

thumbnail is an id not a class.
Try making that change and it should pass.

Fine, i will remove it but where will insert the box shadow thats where im stucked, im sorry for taking much of your time

I just tested your code and the only change you have to make is here

Make that an id and the test will pass.

You don’t need to change anything else.

Where will i put it please because its already ID in the code, am going to remove it or where will write it with box shadow with it,

Do not remove anything from the html.

Let’s take a look at the code you just sent me.

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

All of that is correct except for one thing.

For here, you need to delete the period

and add a hash tag in front of the word thumbnail.

In css, if you want to style an id, you have to use a #
Not a .

Does that make sense?

I am also going to link the lesson for how to style elements using an id.
Just in case there is confusion on how to do that.

Sure, absolutely you are right

Everything works perfect now

1 Like

SOLUTION REDACTED

you have written this snippet under the style tag.
for id we “#” except “.”.

Hi @Vishakha710 !

Welcome to the forum!

We don’t encourage users to post full solutions on the forum.
Your solution has been redacted.

Instead you should help guide the user to the correct answers through hints.

In this case, the user has already found the correct answer.

Thanks!

Yes i did everything correctly, thanks for your response, it helps a lot

hi @jwilkins.oboe!
from next time I help the user through hints.

What do the 3 backticks do? Do you hit the code icon, add the 3 backticks, paste in your code, and then 3 backticks again? Or are you saying don’t even use the code icon to enter code?