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!
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

Josh McMullin
3,012 PointsLinear gradient not working?
Hi all, for some reason I can't get my linear gradient rule to work. I'd appreciate any help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flowers by Jackie</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Courgette|Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div class="main_header">
<header>
<a href="index.html" id="logo"><h1>Elegant Floral Design for Any Occassion</h1>
<h2>Flowers by Jackie</h2></a>
<p id="par">We are locally owned florist shop located in Beautiful Lakeport California.</p>
<p>We provide floral arrangments for weddings, parties, funerals, and anything else you need.</p>
<!--<nav>
<ul>
<li><a href="About.html" class="selected">About</a></li>
<li><a href="Contact.html">Contact</a></li>
</ul>
</nav> save this if we need to add more pages later -->
</header>
</div>
<div id="wrapper">
<div class="primary-content">
<div class="gallery">
<ul id="row1">
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
</ul>
<ul id="row2">
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
</ul>
</div>
<div class="gallery">
<ul id="bigpic">
<li><img src="img/floral_arrangement2.jpg" alt="flower2"></li>
</ul>
</div>
<div class="gallery">
<ul id="row3">
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
</ul>
<ul id="row4">
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
<li><img src="img/floral_arrangement1.jpg" alt="flower"></li>
</ul>
</div>
</div> <!-- end primary content -->
</div> <!-- end of wrapper -->
<div class="footer">
<p>Flowers by Jackie a Lakeport Florist // (707) 676-4500 // 1445 Main St. Lakeport, California 99999</p>
<a href="#top">Back to top</a>
</div>
</body>
</html>
my css
/** General Styles **/
* {
box-sizing: border-box;
text-decoration: none;
}
h1 {
color: #FF6699;
font-size: 2em;
text-align: center;
font-family: font-family: 'Architects Daughter', cursive;
font-weight: normal;
padding: 10px 0 0 0;
margin: 0;
}
a {
color: #FF6699;
}
h2 {
font-family: 'Courgette', cursive;
margin: 15px 0;
font-size: 1.75em;
font-weight: normal;
line-height: 0.8em;
text-align: center;
}
/** site body **/
body {
background-color: #F0F0F0;
color: #FF6699;
font-family: font-family: font-family: 'Architects Daughter', cursive;
}
/** Home Page**/
.primary-content {
clear: both;
background: none;
overflow: auto;
width: 100%;
padding-left: 40px;
padding-right: 40px;
margin: auto;
max-width: 960px;
}
.primary-content:after {
content: "";
display: table;
clear: both;
}
.main_header {
background-color: #CCCCCC;
text-align: center;
width: 100%;
float: left;
margin: 0 0 30px 0;
padding: 5px 0 10px 0;
background-image: linear-gradient (to top, #ff7cd8, #fcecfc);
}
#par {
padding: 10px;
}
#wrapper {
max-width: 960px;
margin: 0 auto;
padding: 0 5%;
}
#logo {
text-align: center;
margin: 0;
}
/** navigation **/
nav {
text-align: center;
padding: 10px 0;
margin: 20px 0 0;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
nav a, nav a:visited {
color: #FF6699;
}
nav a.selected, nav a:hover {
color: #32673f;
}
/** Page Portfolio **/
.gallery {
width: 100%;
margin: 0;
padding: 0;
overflow: auto;
float: left;
clear: both;
}
.gallery ul {
list-style: none;
}
.gallery li {
float: left;
background-color: #f5f5f5;
color: #bdc3c7;
margin: 10px;
}
img {
max-width: 100%;
}
#bigpic {
float: left;
margin: 0 10% 0 10%;
width: 80%;
padding: 0;
}
#row1 li img,
#row2 li img,
#row3 li img,
#row4 li img{
border-radius: 20px;
}
#bigpic li img {
border-radius: 30px;
}
/** floats **/
#row1, #row2, #row3, #row4 {
padding: 0;
width: 46%;
}
#row1 {
margin: 1% 0 0 4%;
}
#row2 {
margin: 1% 4% 0 0;
}
#row3 {
margin: 1% 4% 1% 0;
}
#row4 {
margin: 1% 0 1% 4%;
}
#row1, #row3 {
float: left;
}
#row2, #row4 {
float: right;
}
/** Footer **/
.footer {
font-size: 1em;
text-align: center;
padding: 50px 0 0 0;
width: 100%;
float: left;
clear: both;
}
.footer:after {
content: "";
display: table;
clear: both;
}

Josh McMullin
3,012 PointsThe gradient rule is in the .main_header rule
1 Answer

Ryan Field
Courses Plus Student 21,241 PointsIn your .main_header
declarations, you have a space between linear-gradient
and the opening parenthesis, which is incorrect formatting. It should look like this:
background-image: linear-gradient(to top, #ff7cd8, #fcecfc);

Josh McMullin
3,012 PointsThe devil always hides in the details :-). Thanks.
Josh McMullin
3,012 PointsJosh McMullin
3,012 PointsThe gradient rule is in the .main_header rule