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

Brad Yeoman
Brad Yeoman
7,525 Points
Posted by Brad Yeoman
Brad Yeoman
7,525 Points

Error on task 4 of Text and Box Shadows code challenge

I'm not sure what I'm doing wrong here. I keep getting the error: "The second box shadow needs the value that creates an inner shadow." but I've included the inset value. I've also tried including the inset value at the end with the same result. When I check the preview, the code works.

Where am I going wrong?

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,
              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>

4 Answers

James Alker
James Alker
8,554 Points
James Alker
James Alker
8,554 Points

Someone earlier had a similar problem and needed to have the box-shadow declaration on one line, not two.

.main-header {
     box-shadow: 0 2px 15px #aaa, inset 0 0 60px 5px firebrick;
}
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points
Shawn Flanigan
Shawn Flanigan
Courses Plus Student 15,815 Points

Yup. I answered that one, too. :) Thought about looking for it and linking to the original post, but repeating myself seemed faster.

Brad Yeoman
Brad Yeoman
7,525 Points
Brad Yeoman
Brad Yeoman
7,525 Points

Thanks James. Works now thanks to your suggestions. Appreciate the help.

Tomy Lim
Tomy Lim
4,571 Points
Tomy Lim
Tomy Lim
4,571 Points

Greetings,

I believe teamtreehouse wanted you to put it all in one line. I passed the lesson with this code below. What you are doing is also right. I think this is a bug or some sort.

/* 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, inset 0 0 60px 5px firebrick;
}

Have fun coding, and keep asking questions from the community. We'll be glad to help you.

From,

Tomy

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

Brad,

Your syntax looks good. Just remove your line-break from the box-shadow rule and this should work.

Brad Yeoman
Brad Yeoman
7,525 Points
Brad Yeoman
Brad Yeoman
7,525 Points

Thanks James, Shawn and Tommy. Works now thanks to your suggestions. Appreciate the help.