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 Enhancing Design with CSS Finishing Touches CSS Gradients

Posted by 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
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Mel Rumsey
Treehouse Moderator
Mel Rumsey
.a{fill-rule:evenodd;}techdegree seal-36
Mel Rumsey
Treehouse Moderator

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
MOD
.a{fill-rule:evenodd;}techdegree seal-36
Mel Rumsey
Treehouse Moderator
Mel Rumsey
.a{fill-rule:evenodd;}techdegree seal-36
Mel Rumsey
Treehouse Moderator

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 :)