Box-shadow, box-shadow

HTML-CSS
1

Tell us what’s happening:
Not sure where to put the box-shadow, it has and id=

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: 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;
}
.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 (Macintosh; Intel Mac OS X 10_15) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.5 Safari/605.1.15.

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

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element

2

Hello @VictorMitchell, create a CSS selector id of thumbnail and place box-shadow property in it.

#thumbnail {
box-shadow: value;
}
3

Still lost… explain…

4

The element now has an id of thumbnail . With this selector, use the example CSS values above to place a box-shadow on the card.

you need to use the id selector to apply the css rule
css rules can be applied only to the selected elements
one of the ways in which you can select elements is using their id
to do that, you write #id_name and then the css rules like this:

#id_name {
   /* css rules */
}

in this case the element has id of thumbnail, so you write

#thumbnail {
   /* add rules here */
}

you tried to add the css rule, but without a selector it is not added to anything

1 Like
5

you can easily add it like :

#examole {
box-shadow: color 3px 3px solid ;
}

tip :

after this you need to write the name of your ID

3px and 3px one is the width of your shadow one will be the distance between your shadow and box

6

i need help with this one too ;-;

7

Share your code, so we can see what have you done!

8

lol i already did it i just misspelled thumbnail

9

esta incompleto el numero falta agregar esta parte
0 6px 6px rgba(0,0,0,0.23)