Neighborhood Guides: Images 2


#1

I am so sorry to be a pain in the butt.....

Here is my code....I am lost : :frowning:

<!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="nav">
      <div class="container">
        <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>
      </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>
    </div>

    <div class="row">

    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0sX3jq" >
    </div>
    </div>
    
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/0sX3jq" >  
    </div>
    </div>
    
    <div class="col-md-4">
    <div class="thumbnail">
    <img src="http://goo.gl/Av1pac" >
    </div>
    </div>
    
    <div class="col-md-4">
    <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 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>

</body>
</html>

Please advise.......thankyou in advance too!


Neighborhood Guides: Images 2
#2

You are definitely a little bit lost, but don't worry, you can do it! :smile:

Did you understand that we are building a row with three columns?
And did you know that to start a column div we are using this?

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

See the Neighborhood Guides section in this finished version of the page. There are three columns. Each thumbnail div contains one image. The first column has two thumbnail divs, the second column has two thumbnail divs and the third column has one thumbnail div.

Your code has FIVE columns!

Step back to exercise 5 where we first made our three columns and work your way back.

Let me know if you need any help. Come back and tell us how you got on with that.


#3

Woohooooooooo......OMG I made it!

Than kyou so much....I went back to Ex 5 & restarted from there as you suggested, but I kept getting lost in the midst of the code....deleting & editing various segments....left my brain like scrambled eggs! Thus I took a break, popped open a beer & had a cigarette...then I decided to go back to Ex 1 at the start of this section, and worked my way up every stage....and now I see the method to the madness in coding....its all about sections....and about opening & closing them...in an orderly manner!

Woohooooooo!

Again my heartfelt thanks!

Sam out! :wink:


#4

Congratulations!
Congratulations! You accomplished a lot in this section. You applied Bootstrap's grid to organize the Learn More section of the page. Then you used the grid to create the Neighborhood Guide section from scratch.

Instructions
Click Save and Submit Code to continue.