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

Rishit Shah
Rishit Shah
4,975 Points
Posted by Rishit Shah
Rishit Shah
4,975 Points

box shadow code challenge problem

The code challeng asked me to add two sets of box shadow values, the second being inside the box. I wrote the code as below. However it is not accepting my following code. .main-header{box-shadow: 0px 2px 15px #aaa, inset 0px 0px 60px 5px firebrick;} The error says "make sure you mentioned two sets of values. Did you add a coma in between?" what am I doing wrong?

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 0px 0px 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>

2 Answers

Walker Reed
Walker Reed
5,777 Points

I had the same issue. It's confusing because the videos you watch prior to this give an example of the 3D effect using multiple box-shadows laid out in a cascading fashion. That format isn't accepted by the challenge engine.

John Norris
John Norris
21,145 Points
John Norris
John Norris
21,145 Points

This works

.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;
}
Rishit Shah
Rishit Shah
4,975 Points
Rishit Shah
Rishit Shah
4,975 Points

Thank you for the answer. It worked. However i still don't understand why it was not accepting the code i wrote. The only difference I spotted between the answer you gave and my code is that you haven't mentioned the 'px' after zero. Rest all seems the same. Could you please explain why this happened.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

px unit value isn't necessary if the value is 0 because 0 value is consistent across all the ranges of unit. Plus the challenge engines can be quite picky so something that might be perfectly valid in real life as an answer may not be accepted in a code challenge answer. :-)