Smells Like Bakin' Cupcake

Question

I believe I have followed all the instructions properly but my Smells Like Bakin site does not match up. I stopped coding at 7:10 in the video because after he refreshes the page my site does not match up. Can someone help me out please?! Thank you in advance!!

This is the video link http://teamtreehouse.com/library/websites/build-a-simple-website/creating-a-website-structure/working-with-grids-2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin' Cupcake Company</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>

<body>
  <div class="container clearfix">
    <div class="grid_4">
      <img src="img/logo.gif" alt="Smells Like Bakin">
    </div>  
    <div class="grid_8 omega"> 
      <ul class="nav">
        <li><a href="#">About</a></li>
        <li><a href="#">Cupcakes &amp; Prices</a></li>
        <li><a href="#">Locations</a></li>
        <li class="last"><a href="#">Contact Us</a></li>
       </ul>
    </div>
     <div id="intro" class="grid_9">
      <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1>
      <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
     </div>
     <div class="grid_3">
      <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
     </div>

     <div id="featured cupcake" class="grid_7">
        <h2>Cupcake of the Week</h2>
        <p>This weeks featured cupcake is the <a href="#">Avocado Chocolate Cupcake</a>.
          Its strange combo of flavors will kick your tastebuds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake">
      </div>

      <div id="new-cupcakes" class="grid_5 omega">
        <h2>Fresh Out the Oven</h2>
        <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalepeno So Spicy</a>.</p>
        <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
        <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
      </div>


      <h2>Inside the Kitchen</h2>
      <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
      <p><a href="#" class "btn-small">Read More</a></p>



      <h2>Get Bakin' with Us</h2>

      <div= id="contact">
        <p>Call us: <span>1-555-CUP-CAKE</span><br>
        Email us:<a href="#">bakeon@smellslikebakin.com</a></p>
      </div>


      <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even 
      take requests!</p>
      <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif"  alt="Facebook"></a>
      <a href="http://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif"  alt="Twitter"></a>

      <div id="copyright">
        <p>&copy; 2012 Smells Like Bakin' Cupcake Company.  All Rights Reserved.</p>
      </div>

   </div>
</body>
</html>

Answer 1 · 2013-03-17T17:52:53Z

March 17, 2013 5:52pm

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div>
<div class="grid_8 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div> <div class="grid_3"> <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"> </div>

 <div id="featured cupcake" class="grid_7">
    <h2>Cupcake of the Week</h2>
    <p>This weeks featured cupcake is the <a href="#">Avocado Chocolate Cupcake</a>.
      Its strange combo of flavors will kick your tastebuds into fiesta mode!</p>
    <img src="img/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake">
  </div>

  <div id="new-cupcakes" class="grid_5 omega">
    <h2>Fresh Out the Oven</h2>
    <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalepeno So Spicy</a>.</p>
    <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
    <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
  </div>


  <h2>Inside the Kitchen</h2>
  <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
  <p><a href="#" class "btn-small">Read More</a></p>



  <h2>Get Bakin' with Us</h2>

  <div= id="contact">
    <p>Call us: <span>1-555-CUP-CAKE</span><br>
    Email us:<a href="#">bakeon@smellslikebakin.com</a></p>
  </div>


  <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even 
  take requests!</p>
  <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif"  alt="Facebook"></a>
  <a href="http://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif"  alt="Twitter"></a>

  <div id="copyright">
    <p>&copy; 2012 Smells Like Bakin' Cupcake Company.  All Rights Reserved.</p>
  </div>

</div> </body> </html>

Answer 2 · 2013-03-17T17:57:02Z

March 17, 2013 5:57pm

I am not sure I cant get the top portion of my code to post

Answer 3 · 2013-03-17T18:30:38Z

March 17, 2013 6:30pm

You've missed an equals between class and "btn-small" here :

<p><a href="#" class "btn-small">Read More</a></p>

And you have a stray equals here :

<div= id="contact">

Answer 4 · 2013-03-17T18:40:55Z

March 17, 2013 6:40pm

I fixed both those errors and that still did not fix the problem.

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div>
<div class="grid_8 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div> <div class="grid_3"> <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"> </div>

 <div id="featured cupcake" class="grid_7">
    <h2>Cupcake of the Week</h2>
    <p>This weeks featured cupcake is the <a href="#">Avocado Chocolate Cupcake</a>.
      Its strange combo of flavors will kick your tastebuds into fiesta mode!</p>
    <img src="img/featured-cupcake.jpg" alt="Avacado Chocolate Cupcake">
  </div>

  <div id="new-cupcakes" class="grid_5 omega">
    <h2>Fresh Out the Oven</h2>
    <p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalepeno So Spicy</a>.</p>
    <img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
    <img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
  </div>


  <h2>Inside the Kitchen</h2>
  <p>Smells Like Bakin’ started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a successful store front, catering business and cupcake truck.</p>
  <p><a href="#" class="btn-small">Read More</a></p>



  <h2>Get Bakin' with Us</h2>

  <div id="contact">
    <p>Call us: <span>1-555-CUP-CAKE</span><br>
    Email us:<a href="#">bakeon@smellslikebakin.com</a></p>
  </div>


  <p>We announce all of our new flavors first through Facebook &amp; Twitter, and even 
  take requests!</p>
  <a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif"  alt="Facebook"></a>
  <a href="http://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif"  alt="Twitter"></a>

  <div id="copyright">
    <p>&copy; 2012 Smells Like Bakin' Cupcake Company.  All Rights Reserved.</p>
  </div>

</div> </body> </html>

Answer 5 · 2013-03-17T18:40:02Z

March 17, 2013 6:40pm

Is there another way to post my code because I can't get the top half to post?

Answer 6 · 2013-03-17T18:42:52Z

March 17, 2013 6:42pm

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> </head> <body> <div class="container clearfix"> <div class="grid_4"> <img src="img/logo.gif" alt="Smells Like Bakin"> </div>
<div class="grid_8 omega"> <ul class="nav"> <li><a href="#">About</a></li> <li><a href="#">Cupcakes & Prices</a></li> <li><a href="#">Locations</a></li> <li class="last"><a href="#">Contact Us</a></li> </ul> </div> <div id="intro" class="grid_9"> <h1>Opposites really do attract, especially in our kitchen! We combine unexpected flavors that melt together to create ironically delicious desserts.</h1> <p><a href="#" class="btn">Browse Our Cupcakes</a></p> </div> <div class="grid_3"> <img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush"> </div>

Answer 7 · 2013-03-17T18:44:00Z

March 17, 2013 6:44pm

Every time I try to post the top part that is all that shows up.

Answer 8 · 2013-03-17T18:46:26Z

March 17, 2013 6:46pm

I suspect the error is in the header part and that's why the forum isn't recognizing the code.

Answer 9 · 2013-03-17T18:47:47Z

March 17, 2013 6:47pm

Here's my header up till that point, I may have added stuff due to the fact this is from the finished one. You can compare.

<!DOCTYPE HTML>

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Smells Like Bakin' Cupcake Company</title> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Nunito:400,300,700' rel='stylesheet' type='text/css'> <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no"> </head>

<body>

<div class="container clearfix">
    <div id="logo" class="grid_4">
        <img src="img/logo.gif" alt="Smells Like Bakin'">
    </div>
    <div id="nav" class="grid_8 omega">
        <ul>
            <li class="about"><a href="#">About</a></li>
            <li class="pricing"><a href="#">Cupcakes & Prices</a></li>
            <li class="locations"><a href="#">Locations</a></li>
            <li class="contact"><a href="#">Contact Us</a></li>
        </ul>
    </div>

Answer 10 · 2013-03-17T18:49:28Z

March 17, 2013 6:49pm

It's cut a bit of mine off too, strange. Feel free to email me the file and I'll have a look : greg@pandemicdigital.com

Answer 11 · 2013-03-17T18:53:52Z

March 17, 2013 6:53pm

I am going to email you my file. Yea , I keep looking at the header and I can't see it! I will put the subject as TeamTreeHouse Code. Thank you!

Answer 12 · 2013-03-17T18:54:53Z

March 17, 2013 6:54pm

No problem, send the whole folder so I can view the site.

Answer 13 · 2013-03-17T18:57:06Z

March 17, 2013 6:57pm

ok, I will resend it with the entire folder

Answer 14 · 2013-03-17T20:36:55Z

March 17, 2013 8:36pm

Angela - Rock on with your bad self.

I love it when people solve their own issues.

A great way to troubleshoot syntax errors like this is to look at the syntax highlighting (built into most text editors). If you notice the colors of the syntax highlighting "don't look right", then you have an idea of where to start looking for the issue.

Also most text editors have tag matching, which will highlight the matching tag, thus letting you see which tag doesn't have a match.

Answer 15 · 2013-03-17T19:24:55Z

March 17, 2013 7:24pm

I found the error!! lol.

I was missing the opening bracket for my <div class="container clearfix">

Welcome to the Treehouse Community

Looking to learn something new?

Angela Fonteboa

Angela Fonteboa

Smells Like Bakin' Cupcake

15 Answers

Angela Fonteboa

Angela Fonteboa

Angela Fonteboa

Angela Fonteboa

Greg Richmond

Greg Richmond

Angela Fonteboa

Angela Fonteboa

Angela Fonteboa

Angela Fonteboa

Angela Fonteboa

Angela Fonteboa

Angela Fonteboa

Angela Fonteboa

Greg Richmond

Greg Richmond

Greg Richmond

Greg Richmond

Greg Richmond

Greg Richmond

Angela Fonteboa

Angela Fonteboa

Greg Richmond

Greg Richmond

Angela Fonteboa

Angela Fonteboa

James Barnett

James Barnett

Angela Fonteboa

Angela Fonteboa