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

CSS

Posted by Josh McMullin
Josh McMullin
3,012 Points

Linear 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
Josh McMullin
3,012 Points

The gradient rule is in the .main_header rule

Josh McMullin
Josh McMullin
3,012 Points

The gradient rule is in the .main_header rule

1 Answer

Ryan Field
PLUS
Ryan Field
Courses Plus Student 21,241 Points
Ryan Field
Ryan Field
Courses Plus Student 21,241 Points

In 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
Josh McMullin
3,012 Points

The devil always hides in the details :-). Thanks.