We Are Broadway - Project

Projects
1

Here is my solution to #10 for the We Are Broadway project. Is there a better way to keep the columns above the footer other than my application of the margin values on the columns?

Any advice is greatly appreciated! :slightly_smiling_face:

CSS

html, body {
  margin: 0;
  padding: 0;
}

header {
  background-color: #333333;
  position: fixed;
  width: 100%;
  z-index: 11;
}

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

nav li {
  color: #fff;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  display: inline-block;
  width: 80px;
}

main {
  text-align: center;
  position: relative;
  top: 80px;

}

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

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  position: fixed;
  display: inline-block;
  bottom: 0;
  width: 100%;
  z-index: 11;
}

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

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

.jumbotron {
  height: 800px;
  background-image: url("http://s3.amazonaws.com/codecademy-content/projects/broadway/bg.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.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;
}

.btn-default {
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 1.3px;
  padding: 10px 20px;
  text-decoration: none;
  text-transform: uppercase;  
  margin-bottom: 20px;      
}

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

.supporting .col {
  font-family: 'Raleway', sans-serif;
  text-align: center;
  position: relative;
  display: inline-block;
  top: 25px;
  width: 200px;
  margin-bottom: 75px;
}

.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 20px;
  margin-bottom: 20px;
}

.supporting a {
  background-color: white;
  color: #333333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.3px;
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px;
  margin-bottom: 10px;
  border: 2px solid #333333; 
}

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


}

HTML

<!DOCTYPE html>
<html>
  
  <head>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400, 600' rel='stylesheet' type='text/css'>
    <link href='style.css' rel='stylesheet' type='text/css'/>
  </head>

  <body>
    
    <header>
        <nav>
          <ul>
            <li> About </li> <li> Work </li> <li> Team </li> <li> Contact </li>
          </ul>
        </nav>
    </header>

    <main>
      <div class="jumbotron">
        <div class="container">  
          <h1>We are Broadway</h1>
          <a href="#" class="btn-main"> Get Started </a>
        </div>
      </div>
    </main>

    <section 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>
          <a href="#"> Learn More</a><br>
        </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>
          <a href="#"> Learn More</a><br>
        </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>
          <a href="#"> Learn More</a><br>
        </div>
        
      </div>
    </section>

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

Is there a question to go with this topic?

3

My apologies; this is my first code post, so I was still figuring things out when I first posted it. :sweat_smile:

I have a question with it now!

4

If you want your footer always below page content, then give it position: relative.

1 Like
5

Is it possible to keep it fixed at the bottom of the page regardless of scrolling but also keep it from blocking other content when scrolled all the way to the bottom? I tried that with changing the margins of my supporting columns, and it seems to work, but I guess I was wondering if there was a more efficient way…?

6

A bottom margin on the normal flow content is all you can do to ensure that the full page can be viewed. position: fixed is out of normal flow so the margin makes sure that scolling reaches the bottom. If your footer is 100px, then make the bottom margin 110px, for a wee bit of wiggle room.

Since HTML and CSS are not logical code, but declarations, there is no concern of efficiency, just readability, semantics and structure that makes sense to user agents such as search engines and screen readers.

.supporting {
    margin-bottom: 110px;
}
7

Gotcha! That makes sense. Thank you for taking the time to help!!

1 Like
10

I’m wondering why position: sticky; isn’t used for this project. I applied it to to the header and footer to achieve the same effects as the code above, but with less steps. Like this:

header {
position: sticky;
top: 0;
}
footer {
position: sticky;
bottom: 0;
}

This keeps the header and footer at the top and bottom of the screen while scrolling without messing with the positioning of the other elements. No need to change the z-index of the header or footer, shift the position main down or add margin to the bottom of the columns.

2 Likes
11

Yes, there is:

footer {
  background-color: #333;
  color: #fff;
  padding: 30px 0;
  position: fixed;
  width: 100%;
  z-index: 1;
  bottom: 0;
}
12

What I don’t understand is when we set the header position to absolute, we could still see it in the page. However, in the last task, when we do the same to the footer, we can’t see it anymore. Why is this?

13

I tried using sticky and it just doesn’t register, the project specifically wants you to use ‘fixed’

14

I have used sticky and it has worked, only then I have put a bottom of 0 and it is perfect