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

Manish Giri
Manish Giri
16,266 Points
Posted by Manish Giri
Manish Giri
16,266 Points

Bug: Placing 'inset' at the starting doesn't pass the challenge

In the video, it is said that the inner shadow can be placed either at the beginning or at the end, it just needs the , either way for the right syntax.

However, in this challenge, I can't pass the task if I place inset and the second shadow at the beginning, it only works if inset is placed at the end.

My code is attached. If you see the CSS - placing inset at the front doesn't work.

Is this a bug?

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: inset 0 0 60px 5px firebrick,
                  0 2px 15px #aaa;
}
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>
Doegena Fennich
Doegena Fennich
8,974 Points
Doegena Fennich
Doegena Fennich
8,974 Points

place the box shadow of task 3 above the box shadow inset of task 4.

example:

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

2 Answers

Murdo MacNab
Murdo MacNab
9,245 Points
Murdo MacNab
Murdo MacNab
9,245 Points

I don'nt think it's a bug, just that it's not the correct answer to the question. Worth copying the code into a text editor and testing it to see if it works either way.

Feisty Mullah
Feisty Mullah
25,849 Points
Feisty Mullah
Feisty Mullah
25,849 Points

Hi Manish, You need to change the position of your codes. I have tried like this and it passed.

.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;

}