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

Posted by znyc
znyc
1,551 Points

Am I supposed to replace .main-header's 1st box-shadow property value with the 2nd one I've listed ?

I'm not sure if I should be replacing the first property value for .main-header with the second one I have written. I've tried removing the first box-shadow property/value and leaving only the second one, but then I'm told that task 3 is no longer passing. Help!

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>
Ryan Holdeman
Ryan Holdeman
8,067 Points

What's the question asking for?

znyc
znyc
1,551 Points

Hi Ryan, I needed to include both properties/values under .main-header so there would be shadows both inside and outside of the box. Pavlo cleared it up, I was missing a comma and needed to remove the second "box-shadow" property. Thank you for inquiring though!

1 Answer

Pavlo Kochubei
Pavlo Kochubei
15,009 Points
Pavlo Kochubei
Pavlo Kochubei
15,009 Points

Your code for the .main-header should look like this. We're adding another, inner shadow, so we don't need to create another value for box-shadow, just divide them with ","

/* 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; }

znyc
znyc
1,551 Points

Thank you Pavlo!