7/10 Make a Website: CSS Styling


#1

I thought I had the CSS and HTML correct, but am wondering if I structured the sub-divs incorrectly.

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link href="main.css" rel="stylesheet">
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css"> 
  </head>
  
  <body>
    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#">Airbnb logo</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul>
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">
        <h1>Find a place to stay.</h1>
        <p>Rent from people in over 34,000 cities and 192 countries.</p>
      </div>
    </div> 

    <div class="learn-more">
	  <div>
		<div>
	  	  <div>
			<h3>Travel</h3>
			<p>From apartments and rooms to treehouses and boats: stay in unique spaces in 192 countries.</p>
			<p><a href="#">See how to travel on Airbnb</a></p>
		  </div>
		  <div>
			<h3>Host</h3>
			<p>Renting out your unused space could pay your bills or fund your next vacation.</p>
			<p><a href="#">Learn more about hosting</a></p>
		  </div>
		  <div>
			<h3>Trust and Safety</h3>
			<p>From Verified ID to our worldwide customer support team, we've got your back.</p>
			<p><a href="#">Learn about trust at Airbnb</a></p>
		  </div>
	    </div>
	  </div>
	</div>
  </body>
</html>

CSS:

.nav a {
    color: #5a5a5a;
    font-size: 11px;
    font-weight: bold;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
}

.jumbotron {
    height: 500px;
    background-image: url(https://goo.gl/04j7Nn);
}

.jumbotron h1 {
    color: #fff;
    font-size: 48px;
    font-weight: bold;
    font-family: 'Shift', sans-serif;
}

.jumbotron p {
    color: #fff;
    font-size: 20px;
}

.learn-more {
    background-color #f7f7f7;
}

Attempting to save and submit results in an error stating: "Oops, try again. Set the background-color of

..
to #f7f7f7 "

Any help would be very much appreciated!


#2

You forgot the colon (:) after your background-color property in your .learn-more selector. It should look like this:

.learn-more {
    background-color: #f7f7f7;
}

The code snippet above should work, and if it does, could you please click on the 'Solution' button under my answer so that this question will be marked as solved and the topic doesn't get spammed? Thanks!
~JibblyJ


#3

Thank you @jibblyj ! What a silly mistake, my eyes must be tired today :smile:


#4

No problem! Don't forget to mark my answer as the solution!