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

Dwane Pennant
Dwane Pennant
12,337 Points
Posted by Dwane Pennant
Dwane Pennant
12,337 Points

Challenge Taske 1 of 1 : Gradients answer?

Can someone help me with the answer of this question?

What I think is the answer is not working....

Q: Create a new rule that targets .main-header. Then, use the background-image property to define a linear gradient. Set the first color stop to steelblue and the second color stop to darkslateblue. Set the second color stop's position to 90%. Finally, add the value that sets the gradient direction from bottom to top.

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

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

8 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Your first color stop shouldn't have a value of 0% because it doesn't need one. In your actual code you could specify that the stop start at 0% but it is unnecessary to add it because that is where the gradient will start from by default. Remove the 0% and the challenge will pass! :)

Sobin Sebastian
Sobin Sebastian
5,348 Points
Sobin Sebastian
Sobin Sebastian
5,348 Points

so whats the answer!!? i am also stuck !!

Jessica Jimenez Hageman
Jessica Jimenez Hageman
7,670 Points
Jessica Jimenez Hageman
Jessica Jimenez Hageman
7,670 Points

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

is the answer :)

ANTONIO ALTAMIRANO
ANTONIO ALTAMIRANO
9,428 Points
ANTONIO ALTAMIRANO
ANTONIO ALTAMIRANO
9,428 Points

my problem was that I was writing: .main-header { background-image: linear-gradient (bottom to top, steelblue, darkslateblue 90%) } once i removed "bottom" it all worked out.

casthrademosthene
casthrademosthene
6,275 Points

Do you know why that happened when the direction asked us to do bottom to top? Cuz I was stuck on this quiz for like 2 weeks going over videos and finally I got tired of it and came to check out the forum for the answer. It worked perfect after I removed the 'bottom' and wrote it as (to top, steelblue, darkslateblue 90%)

Dwane Pennant
Dwane Pennant
12,337 Points
Dwane Pennant
Dwane Pennant
12,337 Points

I swear I tried that first time... but you were correct I removed it and I hve now finished the CSS Basics. Thank you!

Marcus Parsons
Marcus Parsons
15,719 Points

My pleasure! Good luck, Dwane!

Jonathan Terman
Jonathan Terman
11,107 Points
Jonathan Terman
Jonathan Terman
11,107 Points

Also, make sure that there is not space between the coma and the colors, it might be a bug with the program that checks for the answer.

Marcus Parsons
Marcus Parsons
15,719 Points

There can be spaces in between *commas and colors. It was the color stop that was the problem.

Awais jamil
.a{fill-rule:evenodd;}techdegree
Awais jamil
Java Web Development Techdegree Student 4,742 Points

yupe the program has a bug it didn't let me pass while i had space between coma. thanks for answer

Jonathan Terman
Jonathan Terman
11,107 Points
Jonathan Terman
Jonathan Terman
11,107 Points

Try this, and you will see it wont go thought.

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

Marcus Parsons
Marcus Parsons
15,719 Points

I was talking about after the comma not before it. But even though it might not pass the challenge, it would still be valid code and will execute normally.

Sara Rena Anderson
Sara Rena Anderson
15,045 Points
Sara Rena Anderson
Sara Rena Anderson
15,045 Points

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

Leanne Millar
Leanne Millar
9,555 Points
Leanne Millar
Leanne Millar
9,555 Points 
.main-header { 
background-image: linear-gradient (to top, steelblue, darkslateblue 90%); 
}

This worked fine for me :D

Sam Allen
Sam Allen
7,176 Points

This just worked for me but I swear I was entering perfectly acceptable items, yet CSS just wouldn't take it.