Stuck with thumbnails


#1

I would appreciate if someone can help me get "unstuck".
Have been working on this page for more than an hour and cannot find the required correction.

thank you very much!
Christiaan


#2

Two problems: wrong forum, this html + css forum, there is also a make a website forum, which is where this exercise belongs (could be, by the time someone read this, the question has been moved)

Second problem, you post a image, which is nice, but it means i can't just paste the code and run it. From what i can see, you forgot to close your first col before opening the second col


#3

Thanks @stetim94 for quick response.
I am really fresh here so my apologies for posting wrongly.

I am going to try your feedback right away!

have a pleasant evening,
christiaan


#4

Thanks to the new forum fast responses are so much easier. If you post your code, so i can run, i will have another look at it. I hope my suggestion helped


#5

as I am a new user the forum only allows me to paste one picture at a time.
Is there a different way to share my code?


#6

if you edit/update your question, leave a reply so i get a notification. You can just paste your code to forum, and then take the following steps it is visible:

this way, i can copy the code and run it, which debugs a lot easier. Some people (just a few) prefer to past there code in a bin (on a site like jsbin) and share the url of the bin.


#7
    <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>Neighborhoud-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 class=thumbnail> 
<img src=http://goo.gl/0sX3jq>
</div>
<div class=thumbnail> 
<img src=http://goo.gl/an2HXY>
</div>
</div>
</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>

#8

Oh wow, how did i miss that, even in the image?

Many (most class) are missing a whole lot quotation marks (") but also some src attributes are missing them. Your code:

<div class=thumbnail>

correct code:

<div class="thumbnail">

see the quotation mark? i see you miss a lot of them. Well, now i am lying, according to the latest html5 standards you can use attributes without ", it is still recommended to support older browsers. Anwyway, SCT does want you to use "


#9

Hey Stetim94,

Thanks for your tip!
I changed it but still didn't work. Can you see anything else I have done wrong or possibly wrong?

thanks again,
christiaan

<!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>Neighborhoud-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 class="thumbnail"> 
<img src="http://goo.gl/0sX3jq">
</div>
<div class="thumbnail"> 
<img src="http://goo.gl/an2HXY">
</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>
    <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>

#10

see comment in this code:

<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>
<!-- missing closing div tag to close col-md-4 -->
<div class="col-md-4">

this snippet of code is the first col and the opening tag of the second col


#11

Yes man!
You did it! I am though :smile:

thank you very much!


#12

Very good! You understand what col-md-4 does?