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 trialDwane Pennant
12,337 PointsChallenge 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%); }
/* Complete the challenge by writing CSS below */
.main-header {
background-image: linear-gradient(to top, steelblue 0%, darkslateblue 90%);
}
<!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
15,719 PointsYour 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
5,348 Pointsso whats the answer!!? i am also stuck !!
Jessica Jimenez Hageman
7,670 Points.main-header { background-image: linear-gradient(to top, steelblue, darkslateblue 90%); }
is the answer :)
ANTONIO ALTAMIRANO
9,428 Pointsmy 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
6,275 PointsDo 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
12,337 PointsI 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
15,719 PointsMy pleasure! Good luck, Dwane!
Jonathan Terman
11,107 PointsAlso, 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
15,719 PointsThere can be spaces in between *commas and colors. It was the color stop that was the problem.
Awais jamil
Java Web Development Techdegree Student 4,742 Pointsyupe the program has a bug it didn't let me pass while i had space between coma. thanks for answer
Jonathan Terman
11,107 PointsTry this, and you will see it wont go thought.
.main-header { background-image: linear-gradient(to top, steelblue , darkslateblue 90%); }
Marcus Parsons
15,719 PointsI 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
15,045 Points.main-header { background-image: linear-gradient (to top, steelblue, darkslateblue 90%); }
Leanne Millar
9,555 Points.main-header {
background-image: linear-gradient (to top, steelblue, darkslateblue 90%);
}
This worked fine for me :D
Sam Allen
7,176 PointsThis just worked for me but I swear I was entering perfectly acceptable items, yet CSS just wouldn't take it.