Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Basics (2014) Enhancing the Design With CSS Text Shadows and Box Shadows

Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points
Posted by Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points

I keep getting an error message on this Code Challenge question

I'm having trouble with a code challenge question. It's asking me to define a second set of box shadow values. I believe I've done it correctly but I'm still getting an error message.

This is the question:

Let's give .main-header an inner-shadow with a second set of box-shadow values. Set the new shadow's horizontal and vertical offsets to 0, the blur radius to 60px, the spread radius to 5px, and the color to firebrick. Don't forget to include the keyword value that creates an inner box shadow.

This is my answer:

.main-header { box-shadow: 0px 2px 15px #aaa, inset 0px 0px 60px 5px firebrick; }

The values to the left of the , are the ones that were created in the previous challenge question.

Any ideas what I might be doing wrong?

Thanks, Mario

style.css 
/* Complete the challenge by writing CSS below */
index.html 
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1 class="main-heading">Lake Tahoe, California</h1>
    </header>

        <div class="primary-content">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>
        </div><!-- End .primary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>

6 Answers

Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points
Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points

Mario Sanchez Carrion try switching the order of each declaration, like this:

.main-header { box-shadow: inset 0px 0px 60px 5px #b22222, 0 2px 15px #aaa; }

Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points
Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points

Hi Kevin, just tried again and it passed. Perhaps it was a temporary bug in the software. Thanks!

Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points
Kevin Fitzhenry
Kevin Fitzhenry
30,096 Points

Glad it worked out! I was stumped...

Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points
Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points

Hi Kevin, I tried that and I get another error: "Oops! It looks like Task 3 is no longer passing." Apparently it is not recognizing any more the code introduced in step 3. Very strange... Thanks, Mario

Gavin Eyquem
seal-mask
.a{fill-rule:evenodd;}techdegree
Gavin Eyquem
Front End Web Development Techdegree Student 20,732 Points
Gavin Eyquem
.a{fill-rule:evenodd;}techdegree
Gavin Eyquem
Front End Web Development Techdegree Student 20,732 Points

I'm also having a problem with challenge task 4 of 4. Inner box shadow, I am using invest as the first value but to no success. What am I doing wrong?

Gavin Eyquem
seal-mask
.a{fill-rule:evenodd;}techdegree
Gavin Eyquem
Front End Web Development Techdegree Student 20,732 Points
Gavin Eyquem
.a{fill-rule:evenodd;}techdegree
Gavin Eyquem
Front End Web Development Techdegree Student 20,732 Points

I'm also having a problem with challenge task 4 of 4. Inner box shadow, I am using invest as the first value but to no success. What am I doing wrong?

Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points
Mario Sanchez Carrion
Mario Sanchez Carrion
17,541 Points

Hi Gavin, You mean "inset", not "invest", right? This is the order it should be written in: .main-header { box-shadow: inset 0px 0px 60px 5px firebrick, 0px 2px 15px #aaa; } I tried this several times with no success until one time it finally worked. If the same thing happens to you try closing the browser and opening it again, or log out of your account and log back in. It may be an issue with the software. I have no other explanation, since the css declaration is correct.

Gavin Eyquem
seal-mask
.a{fill-rule:evenodd;}techdegree
Gavin Eyquem
Front End Web Development Techdegree Student 20,732 Points
Gavin Eyquem
.a{fill-rule:evenodd;}techdegree
Gavin Eyquem
Front End Web Development Techdegree Student 20,732 Points

This is my code, have tried more than one way of laying the code. If you or anyone spots something wrong then please let me know? box-shadow:inset 0px 0px 60px 5px firebrick, 0px 2px 15px #aaa;