Where is the spread radius value given here?

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

  **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);
}

.fullCard {
  width: 245px;
  border: 2px 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/94.0.4606.81 Safari/537.36

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

Link to the challenge:

2

Hello arun!

If you refer this website:

https://www.w3schools.com/cssref/css3_pr_box-shadow.asp

As well as the problem statement in this challenge. You can see:

The blur-radius and spread-radius values are optional.

That means in the code you provided they didn’t add a spread radius value!

Screenshot_2021-10-19-09-55-08-185_com.android.chrome
Screenshot_2021-10-19-09-55-08-185_com.android.chrome1080×2340 153 KB

1 Like
3

thanks man. And one more doubt, I’m not able to link a YouTube video in my project. It says ’ www.youtube.com refused to connect’ how can I get rid of this.

4

I would like you to post the problem.

As I cannot guess what the exact problem it might be. Like the more context you can provide and what project, the faster people here will give you the solution!

5

You cannot display a lot of websites inside an iFrame. Reason being that they send an “X-Frame-Options: SAMEORIGIN” response header. This option prevents the browser from displaying iFrames that are not hosted on the same domain as the parent page.

I faced the same error when displaying YouTube links. For example: https://www.youtube.com/watch?v=8WkuChVeL0s

I replaced watch?v= with embed/ so the valid link will be: https://www.youtube.com/embed/8WkuChVeL0s

It works well.

Try to apply the same rule on your case.

SAMEORIGIN

The page can only be displayed in a frame on the same origin as the page itself. The spec leaves it up to browser vendors to decide whether this option applies to the top level, the parent, or the whole chain, although it is argued that the option is not very useful unless all ancestors are also in the same origin.