Need help with box shadow element challenge

Hello Jessica
Please help me have had the same problem with this lesson for sometime now. and this is how my code looks like this.


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

  }

  

    #thumbnail

    {

       0 10px 20px rgba(0, 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="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 have created a new topic for you.

It is always best to create your own topics. :grinning:


You didn’t copy the box shadow properly.

Reread the instructions again.

1 Like

You are missing the box-shadow property in the #thumbnail selector, and you have one too many 0 in the first rgba function.

rgba = red, green, blue, alpha

was a bit too hyper over looked having a new topic started, thank you for the reminder. :sweat_smile: :star_struck:

but now the system is saying “Uncaught SyntaxError: Unexpected token…”
not sure whats going on now.

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

  }

  #thumbnail {

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

The code you have shared works on my end. Please ensure that you have disabled any extensions that interface with the freeCodeCamp website (such as Dark Mode and Ad Blocker), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

2 Likes

I might also suggest you copy the code, reset the challenge and paste the code in. Then try the submit again.

2 Likes

thank you so much to you both it worked.
been coding on my phone not sure whats limited it from exsecution.
but it worked :rofl: :joy: :rofl: :sweat_smile:yepiii

Thanks again for helping me with mine :heart_eyes: :star_struck:

I agree with you Lasse and that might even work :grinning: :smiley:

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