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

Posted by Marc-André Beaulieu
Marc-André Beaulieu
Courses Plus Student 3,634 Points

bottom top seems to not work the way I did it.

I don't understand why my gradient linear seems to not work. Do anybod have a little hints for me. I looked on csstrick to help me understand and everything seems ok from my perspective .

.gradient { background-image: linear-gradient( to right, it might be to top red,<---- steelblue yellow 10% <----- darklateblue90% ); }

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

.main-header  { 
  background-image:
    linear-gradient(
     to bottom top, 
      steelblue, darklateblue 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

Caree Belle
Caree Belle
3,057 Points
Caree Belle
Caree Belle
3,057 Points

I noticed that one color is titled 'darklateblue' rather than dark*slate*blue with an s. If you are inputting an invalid color keyword, this could be your problem. Here is where you can find W3C's comprehensive list of all color keywords.

Let me know if this does not solve your problem and I can try to help you further.

Marc-André Beaulieu
PLUS
Marc-André Beaulieu
Courses Plus Student 3,634 Points
Marc-André Beaulieu
Marc-André Beaulieu
Courses Plus Student 3,634 Points

ok Thank you Caree belle. I will try this to see what happen. However, I perfectly understand that it's important to know the keywords color. Thank you for your quicl response.