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

Nathan Robite
Nathan Robite
3,314 Points
Posted by Nathan Robite
Nathan Robite
3,314 Points

I get 1 of 2 errors, either it can't see that I set the horizontal offset to 0 or it tells me task 3 is now failing

I have tried this two separate ways, one I added a comma after the first box-shadow and input "box-shadow" again and input what they ask me to. This brings up the error that I need to set the horizontal offset to 0, which I do in fact do. (Seen in the code I have written) If I put a comma after the first box-shadow and start with the second one with "inset" (as I've seen people put down in their examples" it tells me that "Task 3 is now failing". I do not change the codes from task 3, so I don't know how it is failing. Even if I delete the new code and recheck it, the error doesn't say I failed to input new code, it tells me still that task 3 is failing.

style.css 
/* Complete the challenge by writing CSS below */

.main-heading {
  text-shadow: 0 0 5px #be7b31; 
}

.title {
  text-shadow: 1px 3px 0 #e59740; 
}

main-header { 
  box-shadow: 0 2px 15px #aaa;,
  box-shadow: inset 0 0 60px 5px firebrick; 
}
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>

3 Answers

behar
behar
10,799 Points
behar
behar
10,799 Points

Hey Nathan! You should do the final step on one line, seperating the two different arguments with a comma:

.main-header { 
  box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px firebrick; 
}
Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I feel like you've worked on this a bit and maybe overworked it a bit. At some point during all this, I believe you managed to accidentally delete the period/full-stop before main-header which would target the class "main-header". Instead, it's now looking for an HTML element tag named that.

You were correct in using the comma and doing both rules on one line.

This is what it looks like when I edit it to work:

.main-header {  /* note the "." preceding the selector */
  box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px firebrick; 
}

Hope this helps! :sparkles:

:bulb: Tip: When you receive a "Task 1 is no longer passing" it is most often because of a syntax error in your code and something can no longer be interpreted. I have a feeling that the stray comma after the semi-colon between your two rules might have been to blame here.

Nathan Robite
Nathan Robite
3,314 Points
Nathan Robite
Nathan Robite
3,314 Points

Thanks to both you! I think it was a combination of both. I did forget the period before main-header and then made it two "box-shadow" elements. So by adding the period and making it one line only separated by a comma it passed. I appreciate the replies, especially being so quick. I was getting a bit flustered and I'm glad I can now move on. :-)