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

Abraham Kan
Abraham Kan
4,588 Points
Posted by Abraham Kan
Abraham Kan
4,588 Points

This code challenge bugged? I had to hack through the first part already by avoiding "px" syntax

Hello everyone, just wanted to do this code challenge.

Part 1 was weird, as you can see from my code that as you can see the .main-heading and .title has reads the box shadow to process. Unfortunately, the color code doesn't seem to be working as I just copy and pasted/ retyped the value.

style.css 
/* Complete the challenge by writing CSS below */
.main-heading{
  text-shadow: 0 0 5px #be7b31; 
}

.title{
  text-shadow: 1px 3px 0px #e59740;
}
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>

7 Answers

Jeff McCullough
Jeff McCullough
5,874 Points
Jeff McCullough
Jeff McCullough
5,874 Points

It looks like the code challenge just bugged out on you. Your code looks correct and I tested it out and it working on my system. I have found a few of the challenges are a bit buggy. Give it some time and try it again and it should work.

Jeff McCullough
Jeff McCullough
5,874 Points
Jeff McCullough
Jeff McCullough
5,874 Points

The first two, .main-heading and .title are correct and the px value should be in there for the values that aren't 0. If the value is 0, then you don't need the px after the number, otherwise you do.

For the last one, .main-header, the line for the box-shadow doesn't have the semi-colon at the end and the line for the inset needs a colon after the word inset and a "px" after the value "60".

With those few changes, the code should work.

Abraham Kan
Abraham Kan
4,588 Points
Abraham Kan
Abraham Kan
4,588 Points

Thanks for the confirmation.

I guess I can just try using another browser or clearing my cookies or some superstitious method :(

I just tried in Mozilla, and it seems like step 2 works but step 3 I'm stuck again even if I'm using the right syntax. I just want that badge.

Jeff McCullough
Jeff McCullough
5,874 Points
Jeff McCullough
Jeff McCullough
5,874 Points

Well step three is calling for a box shadow and I don't see any code for that. But your code for the first two steps is correct.

Abraham Kan
Abraham Kan
4,588 Points
Abraham Kan
Abraham Kan
4,588 Points

I didn't post the code for step 3. Oh well.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Abraham Kan,

Can you please post the code you used for the box-shadow? Thanks!

Abraham Kan
Abraham Kan
4,588 Points
Abraham Kan
Abraham Kan
4,588 Points

This is the code which I wrote to get past the quirks of steps 1, 2, 3, and 4 - I basically used trial and error and other versions didn't work at all.

/* Complete the challenge by writing CSS below / .main-heading{ text-shadow: 0 0 5px #be7b31; /*** Step 1, had to omit px in vertical and horizontal **/ }

.title{ text-shadow: 1px 3px 0 #e59740; /**** Step 2, had to omit px in blur radius **/ }

.main-header{ box-shadow: 0 2px 15px #aaa, /* Step 3, omit px in horizontal */ inset 0 0 60 5px firebrick ; / Step 4 - inset had to be in the front }