6. Neighborhood Guides: Images I


#1

What would the code look like then with it all fixed?

Thanks!

:grinning:


Need help on Bootstap 6 image 1, how do I post my code?
#2

From the Community Guidelines:

Please do not just post answers, or ask for them. Some people may help you by posting some code or showing you errors ...

So, basically, please be specific about the parts of your code that you have doubts about. Tell us about parts of the instructions that you are struggling with. Show us what you've tried so far and tell us what the error is telling you.

There are several pinned topics at the top of this list to get you started.


#3

ok thanks!

What I really needed help on was my code, Here it is.

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link rel="stylesheet" href="main.css">
    
  </head>

  <body>
  <div class="container">

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

</div>
  <ul class="pull-left">
  ...
</ul>

<ul class="pull-right">
  ...
</ul>
    <div class="nav">
      <div class="container">
        <ul>
          <li><a href="#">Name</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>
        <a href="#">Learn More</a>
      </div>
    </div> 
<div class="neighborhood-guides">
  <div class="container">
    <h2>Neighborhood Guides</h2>
    <p>Not sure where to stay? We've created neighborhood guides for cities all around the world.</p>

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

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

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

 <div class="learn-more">
  <div class="container">
    <div class="row">

      <div class="col-md-4">
        <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 class="col-md-4">
        <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 class="col-md-4">
        <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>

Not sure why It looks so weird. Any help is appreciated!


#4

First let's clean up these pull-left and pull-right divs that you have stuck in above your nav div.

  <ul class="pull-left">
  ...
</ul>

<ul class="pull-right">
  ...
</ul>

The exercise wanted you to add those classes to the existing ul elements INSIDE your nav div, it didn't want you to create new ones like that.

In your nav div, you should add those classes to your existing ul elements, like this:

        <ul class="pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class="pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>

Now your two lists will shift to each side of the web page. Do you see how that works now?

Alright, now on to the thumbnails in exercise 6. All of this code is in a very unexpected place:

  <div class="container">

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

</div>

In exercise 6, you should be adding two thumbnails to the first column in your neighborhood-guides div. You have instead added ALL of that code to the space above your nav div.

You'll need to remove all that unexpected code and just put the thumbnails inside the first column of your neighborhood-guides div.

More questions? Just ask.


#5