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 Gradients

Joshua Bland
Joshua Bland
1,104 Points
Posted by Joshua Bland
Joshua Bland
1,104 Points

Gradients? I have tried multiple ways of doing this and it still will not pass, I am sure I am doing something wrong?

When I sumit the code below it says the step before isn't passing any longer. If i just hit submit it passes though? The step before is just adding the colors to the gradient. Any help would be appriciated :)

style.css 
/* Complete the challenge by writing CSS below */
.main-header {
  background-image: linear-gradient( steelblue, to top 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>

1 Answer

john larson
john larson
16,594 Points

When it says a previous step is no longer passing, that is very misleading. It is in fact the CURRENT step that you need to fix

john larson
john larson
16,594 Points

you are so close, you just have "to top" in the wrong place

/* Complete the challenge by writing CSS below */
.main-header {
  background-image: linear-gradient(to top, steelblue, darkslateblue 90%)
}