Project Broadway multiple issues

Projects
1

I’m a new user and this is my first project.

There’s a section to the Broadway project(the browser) that lets you view in real time the effect your coding has on the page you’re designing. It doesn’t seem to work for me no matter what I do. So I’m clearly very confused. Either I’m not doing something right or something’s not working right - I don’t know. Am I supposed to do what needs done without being able to check whether it has any effect on the page? And I would delete everything to test whether there’s a problem with the project(to see if the browser section goes blank) but there aren’t any reset code buttons like there are in the lessons so I don’t want to do that.

Here is my index.html code:

<!DOCTYPE html>
<html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='style.css'/>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <ul class="nav">
          <li>About</li>
          <li>Work</li>
          <li>Team</li>
          <li>Contact</li>

        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">  
        <div class="main">
          <h1>We are Broadway</h1>
          
        </div>
      </div>
    </div>

    <div class="supporting">
      <div class="container">
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/design.svg">
          <h2>Design</h2>
          <p>Make your projects look great and interact beautifully.</p>
          
        </div>
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/develop.svg">
          <h2>Develop</h2>
          <p>Use modern tools to turn your design into a web site</p>
          
        </div>
        <div class="col">
          <img src="https://s3.amazonaws.com/codecademy-content/projects/broadway/deploy.svg">
          <h2>Deploy</h2>
          <p>Use modern tools to turn your design into a web site</p>
          
        </div>
      </div>
      <div class="clearfix"></div>
    </div>

    <div class="footer">
      <div class="container">
        <p>&copy; Broadway 2015</p>
      </div>
    </div>
  </body>
</html>

Here’s my style.css code:
`html, body {
margin: 0;
padding: 0;
}

.container {
max-width: 940px;
margin: 0 auto;
padding: 0 10px;
}

.jumbotron {
height: 800px;
background-image:“http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg”;
}

.nav {
margin: 0;
padding: 20px 0;
}

.nav li {
color: #fff;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 12px;
display:inline;
}

.main {
position: relative;
top: 180px;
text-align: center;
}

.main h1 {
color: #333;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 70px;
margin-top: 0;
margin-bottom: 80px;
text-transform: uppercase;
}

.btn-main {
background-color: #333;
color: #fff;
font-family: ‘Raleway’, sans-serif;
font-weight: 600;
font-size: 18px;
letter-spacing: 1.3px;
padding: 16px 40px;
text-decoration: none;
text-transform: uppercase;
}

.supporting {
padding-top: 80px;
padding-bottom: 100px;
}

.supporting .col {
float: left;
width: 33%;
font-family: ‘Raleway’, sans-serif;
text-align: center;
}

.supporting img {
height: 32px;
}

.supporting h2 {
font-weight: 600;
font-size: 23px;
text-transform: uppercase;
}

.supporting p {
font-weight: 400;
font-size: 14px;
line-height: 20px;
padding: 0 50px;
margin-bottom: 40px;
}

.clearfix {
clear: both;
}

.footer {
background-color: #333;
color: #fff;
padding: 30px 0;
}

.footer p {
font-family: ‘Raleway’, sans-serif;
text-transform: uppercase;
font-size: 11px;
}

@media (max-width: 500px) {
.main h1 {
font-size: 50px;
padding: 0 40px;
}

.supporting .col {
width: 100%;
}

.header {
background-color:#333333;
}
}`

And this is what my browser section shows:

1024×768 103 KB

1024×768 143 KB

2

Hi Nicu,

I don’t think it’s a live-update browser, you’ll need to click the refresh :leftwards_arrow_with_hook: in the virtual browser to see changes.

Nope! All developers often have a hard time doing stuff, and have to check whether it’s working or not :slight_smile:

You should have url(...) around that, like this:

background-image: url("http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg");
3

Yes, I used the refresh button. It doesn’t seem to be working.

I tried your method and still nothing shows up in the browser.

1024×768 146 KB

4

@megasolver29373 Hm, that’s weird :confused: It looks like you have a bunch of browser extensions; could you try disabling them all and seeing if that changes anything?

(also, adblock is blocking your access to Advisor chat. See here: Where do I contact advisors for help?)

5

Thank you. Actually I discovered the problem was that I didn’t save anything after writing my code. After I saved, it worked.

1024×768 441 KB

How can I access the Advisor chat, though? I disabled Adblock for this site and I still can’t find the icon anywhere.
I even removed the other extensions for this. Might the problem be with the browser? I’m using Torch currently, a spawn of Chrome as I understand it, with built-in extensions- nothing much, just for music, videos, and such. I never use them. I’m using Torch as an alternative, though, because Chrome doesn’t work at all for me for some reason.

The Advisor chat seems to finally work. Never mind.

1 Like
6

Hey man, i did the same thing, and still can’t see the background image. I saved and everything, refreshed and everything. whats going on? The chat is not working.

7

@photolaw90 If you create a new topic with your code in it, we’ll be happy to help you :slight_smile: