make website 3 coding

Navigation

The navigation menus are made up of two ulelements. In each ul, the li elements display on new lines because they are block elements. Let's style the li elements so that they display on the same line. This can be done with thedisplay property.

Jumbotron

Nice! The menu items inside each ul now are now inline elements. [We'll see how to move the two uls to display on the same line in the next section.]

Next let's change the position of the text inside the large feature. Currently the text is positioned at the very top of the large feature. Let's move the text down so that its more in the middle of the large feature. This can be done with the position property.

In index.html, the <div class="jumbotron">..</div> groups elements that are part of the large feature section of the web page. Inside<div class="jumbotron">..</div> is the <divclass="container">..</div> which has the text 

Adding Bootstrap

Bootstrap is a CSS framework used to build pages faster. Bootstrap provides a lot of useful CSS out of the box. Check out the Bootstrap file at "http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css" - it has CSS properties and values, many of which you've seen already, to style HTML.

What just happened?

Nicely done! What's going on here?

The order of the CSS files matter.
1. The browser first sees shift.css, and makes the Shift font available to use in the page
2. Next the browser sees bootstrap.css, and applies those styles to the page.
3. Then the browser sees main.css, and applies those custom styles to the page. The custom styles override the Bootstrap styles.

The order of the CSS files tell the browser that your styles in main.css are more important than the styles in bootstrap.css, so the final page that loads is the customized web page.

Navigation

In index.html inside <div class="nav">..</div>, the navigation menus are made up of two ul elements. So far we've styled the lielements to display on the same line. Now let's style the ul elements to show up on the same line too.

Bootstrap provides the .pull-left class to left-align an element, and the .pull-rightclass to right-align an element. Let's use these classes to finish styling the navigation bar.

Learn More: Grid

Looking good! Both menus now show up on the same line, and the navigation bar is complete.

Next, let's use Bootstrap's grid to arrange the three pieces of supporting content inside the<div class="learn-more">..</div> section. Here's how to use Bootstrap's grid.

<div class="container">

  <div class="row">
    <div class="col-md-4">
      ...
    </div>

    <div class="col-md-4">
      ...
    </div>

    <div class="col-md-4">
      ...
    </div>

  </div>
</div>

1. First inside <div class="container">..</div>, there is a row defined by <div class="row">..</div>
2. A row is made up of columns, so inside<div class="row">..</div>, there are three columns each defined by <div class="col-md-4">

Why is the .col-md-4 class being used? Remember that Bootstrap's grid is 12 columns. Therefore, to create three equal-sized columns, they each need to span 4 grid columns.

Neighborhood Guides: Grid

Excellent! Using Bootstrap's grid, you arranged the three pieces of supporting content into a three-column layout.

Let's use Bootstrap's grid again to create another section on the page. This section will contain a grid of images.

Neighborhood Guides: Images 1

Nice work! Next let's add some images inside the columns.

Bootstrap provides the ".thumbnail" class to easily display grids of images. An img element is wrapped in a div element with the class "thumbnail".

<div class="row">
  <div class="col-md-4">
     <img src="http://goo.gl/0sX3jq" >
  </div>

  <div class="col-md-4">
    <div class="thumbnail">
      <img src="http://goo.gl/Av1pac" >
    </div>
    <div class="thumbnail">
      <img src="http://goo.gl/vw43v1">
    </div>
  </div>

  <div class="col-md-4">
    <div class="thumbnail">
      <img src="http://goo.gl/0Kd7UO" >
    </div>
  </div>

</div>

Neighborhood Guides: Final touches

Excellent! Using Bootstrap's grid, we created a brand new section on the web page displaying a grid of images.

Let's finish up this section with a few custom CSS styles.

In main.css, make a new CSS rule that selects.neighborhood-guides

1. Set the background-color to #efefef
2. Set border-bottom to 1px solid #dbdbdb

Make a second CSS rule that selects the h2element inside .neighborhood-guides

1. Set the color to #393c3d
2. Set the font-size to 24px

Make a third CSS rule that selects the pelement inside .neighborhood-guides

1. Set the font-size to 15px
2. Set the margin-bottom to 13px

Navigation

You've done a lot so far. You learned about HTML, CSS, and Bootstrap, and created the Airbnb home page from scratch.

Now it's time to make it your own. Let's start with the navigation bar and work our way down the page.