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

Heriberto Nieves
Heriberto Nieves
2,466 Points
Posted by Heriberto Nieves
Heriberto Nieves
2,466 Points

Set the second color stop's position to 90%. Then, add the value that sets the gradient direction

this is currently on the style.css

.main-header { background-image: linear-gradient(steelblue, darkslateblue); }

and its asking me to set the second color to stop at 90% and then add the value that makes the gradient from bottom to top, so i go ahead and do this:

.main-header { background-image: linear-gradient(bottom to top, steelblue, darkslateblue 90%); }

and when i click check work it just says oops task 3 is no longer passing and makes me go back and re do all again and then arrive at the same point just to say the samething is there something im doing wrong? or its an error??

style.css 
/* Complete the challenge by writing CSS below */

.main-header {
   background-image: linear-gradient(steelblue, darkslateblue);
}
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>

4 Answers

Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Hi Heriberto,

You were super close with your original try! Instead of "bottom to top", it should just be "to top". You can check out more about the syntax for linear-gradients at the MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

.main-header {
  background-image: linear-gradient(to top, steelblue, darkslateblue 90%);
}
Benjamin Larson
Benjamin Larson
34,055 Points
Benjamin Larson
Benjamin Larson
34,055 Points

Alternatively, you could have started at 0 degrees:

.main-header {
  background-image: linear-gradient(0deg, steelblue, darkslateblue 90%);
}
Heriberto Nieves
Heriberto Nieves
2,466 Points
Heriberto Nieves
Heriberto Nieves
2,466 Points

thanks for the reply benjamin! yea i found out a few minutes after posting this i just kept watching the course was about to post the answer but yea i was close, thanks again!

bas van Laarhoven
bas van Laarhoven
4,074 Points
bas van Laarhoven
bas van Laarhoven
4,074 Points

Thank you benjamin! The description says to place the collorstop at 90% but why choose the second collor?

Madiha Sherazi
PLUS
Madiha Sherazi
Courses Plus Student 1,232 Points
Madiha Sherazi
Madiha Sherazi
Courses Plus Student 1,232 Points

thanks alot i was just stuck in the same situation