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:
Learn to Code — For Free
Blockquote
tlc35us
September 10, 2021, 12:52am
2
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
bickyseun:
.thumbnail
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
bickyseun:
.thumbnail
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
bickyseun:
.thumbnail
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.
kernix
September 14, 2021, 11:43am
20
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?