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

Johnny Servin
Johnny Servin
4,137 Points

Can't get past this...

I'm not clear on why my answer is still rejected. My first box shadow values passed. The second ones start with "inset", and is comma separated from the first. No extra commas or semicolons...

style.css
/* Complete the challenge by writing CSS below */
.main-heading {
  text-shadow: 0px 0px 5px #be7b31;
}
.title {
  text-shadow: 1px 3px 0px #e59740;
}
.main-header {
  box-shadow: 0px 2px 15px #aaa, 
            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

Shawn Flanigan
PLUS
Shawn Flanigan
Courses Plus Student 15,815 Points

Johnny,

This code would work in a normal environment, but I think for the quiz to pass you'll need to remove the line break in your code.

Let me know if that works.

{ +1 } I tested this as well, and came to the same conclusion. Looks like a bug in the quiz. As Shawn mentioned, your code is completely valid CSS, just ditch the line break before your inner box-shadow and you should be good to go.

Johnny Servin
Johnny Servin
4,137 Points

Thanks boys... no dice. I submitted: ".main-header {box-shadow: 0px 2px 15px #aaa, inset 0px 0px 60px 5px firebrick;}" and it still insists that I'm on crack. Okay, maybe it didn't say that, but it still insists that I've got an error. I also tried reversing the declarations - but it said that was breaking step 3. So the quiz is clearly looking for something very specific that I'm not providing.

Johnny,

Is there any chance that you broke the line and then backspaced? When I did that, it wouldn't pass at all. I had to restart the entire challenge and make sure I didn't break the line at all to get it to pass. Seems like any line break there invalidates anything and everything that succeeds it.

Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

I just copy/pasted your code into the 4th challenge and it worked like a charm...hopefully Christopher's advice works!

Johnny Servin
Johnny Servin
4,137 Points

I restarted the challenge, and then typed that straight away. I've since completed the next challenge for the next topic without incident. There be ghosts in the system. Thanks for looking guys. I get screwed out of a few points, but really, no biggie.