Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS Enhancing Design with CSS Finishing Touches CSS Gradients

Brett Kiger
Brett Kiger
1,713 Points

There has to be a bug on task 4. I have done it EXACTLY as it's asked and it will not let me move on.

style.css
/* Complete the challenge by writing CSS below */
.main-header{
    background-image: linear-gradient(to bottom, steelblue, darkslateblue 90%);
}
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 -->
  </body>
</html>

2 Answers

Mel Rumsey
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Mel Rumsey
Treehouse Staff

Hi Brett Kiger, You are super close, but this challenge is asking you to set the gradient from "from bottom to top", so instead of to bottom, you'll want it to be to top.

Hope this helps!

Brett Kiger
Brett Kiger
1,713 Points

I initially tried that. Anytime I enter {to (any direction)} followed by a , and then the steelblue; the error reads: "make sure your steelblue color is your first declaration. So then I tried putting the direction of the gradient to the end of the declaration and the error reads: "make sure your darkslateblue is set to 90%", which it is. No matter how I enter the info, it gives me an error code when I know for a fact I've written it correctly.

Mel Rumsey
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree seal-36
Mel Rumsey
Treehouse Staff

Brett Kiger I just copy pasted your answer and just changed to top to to bottom and it works all the way through all 4 steps. It's likely some caching issue if you are still not passing. Try hitting the restart button or go back to the previous step and go back into the challenge and add the code as you have it above. That should work :)