Tried to analyze example code for product landing page challenge; everything crashes for some reason

Code Feedback
1

I am currently trying to finish product landing page challenge in FCC curriculum. I’ve always wanted to do things even slightly different so that I’m really understanding whole thing.
I always copy and paste whole example code that is uploaded on codepen and try to analyze codes but when I copy and paste product landing page challenge, everything seems broken, and I don’t know what’s wrong with it. I though I know what I’m doing. Here’s my copy, pasted and slightly edited code that I took.


<style>
  /** global element styling **/

@import 'https://fonts.googleapis.com/css?family=Lato:400,700';

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #eee;
  font-family: 'Lato', sans-serif;
}

#page-wrapper {
  position: relative;
  background-color: white;
}

li {
  list-style: none;
}

a {
  color: #000;
  text-decoration: none;
}

/** global classes styling **/

.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

.btn {
  padding: 0 20px;
  height: 40px;
  font-size: 1em;
  font-weight: 900;
  text-transform: uppercase;
  border: 3px black solid;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
}

.grid {
  display: flex;
}

// navigation bar

header {
  position: fixed;
  top: 0;
  min-height: 75px;
  width: 100%;
  padding: 0px 20px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #eee;
  @media (max-width: 600px) {
    flex-wrap: wrap;
  }
}

.logo {
  width: 60vw;
  
  @media (max-width: 650px) {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
  
  img {
    width: 100%;
    height: 100%;
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-left: 20px;
    @media (max-width: 650px) {
      margin: 0 auto;
    }
  }
}

nav {
  font-weight: 400;
  
  @media (max-width: 650px) {
    margin-top: 10px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 50px;
    
    li {
     padding-bottom: 5px; 
    }
  }
  
  ul {
    width: 35vw;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    
    @media (max-width: 650px) {
      flex-direction: column;
    }
  }
}

// hero

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
  h2 {
    margin-bottom: 20px;
    word-wrap: break-word;
  }

  input[type="email"] {
    max-width: 275px;
    width: 100%;
    padding: 5px;
  }

  input[type="submit"] {
    max-width: 150px;
    width: 100%;
    height: 30px;
    margin: 15px 0;
    border: 0;
    background-color: #f1c40f;
    
    &:hover {
      background-color: orange;
      transition: background-color 1s;
    }
  }
  
  @media (max-width: 650px) {
    margin-top: 120px;
  }
}

// features

#features {
  margin-top: 30px;
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 125px;
    width: 20vw;
    color: darkorange;

    @media (max-width: 550px) {
      display: none;
    }
  }

  .desc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 125px;
    width: 80vw;
    padding: 5px;

    @media (max-width: 550px) {
      width: 100%;
      text-align: center;
      padding: 0;
      height: 150px;
    }
  }
  
  @media (max-width: 650px) {
    margin-top: 0;
  }
}

// how it works

#how-it-works {
  margin-top: 50px;
  display: flex;
  justify-content: center;
  
  iframe {
    max-width: 560px;
    width: 100%;
  }
}

// pricing

#pricing {
  margin-top: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  
  #tenor, #bass, #valve {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: calc(100%  / 3);
    margin: 10px;
    border: 1px solid #000;
    border-radius: 3px;
    
    .level {
      background-color: #ddd;
      color: black;
      padding: 15px 0;
      width: 100%;
      text-transform: uppercase;
      font-weight: 700;
    }
    
    h2 {
      margin-top: 15px;
    }
    
    ol {
      margin: 15px 0;
      
      li { padding: 5px 0; }
    }
    
    button {
      border: 0;
      margin: 15px 0;
      background-color: #f1c40f;
      font-weight: 400;
      
      &:hover {
        background-color: orange;
        transition: background-color 1s;
      }
    }
  }
  
  @media (max-width: 800px) {
    flex-direction: column;
    
    #tenor, #bass, #valve { max-width: 300px; width: 100%; margin: 0 auto; margin-bottom: 10px; }
  }
}

// footer

footer {
  margin-top: 30px;
  background-color: #ddd;
  padding: 20px;
  
  ul {
    display: flex;
    justify-content: flex-end;
    
    li {
      padding: 0 10px;
    }
  }
  
  span {
    margin-top: 5px;
    display: flex;
    justify-content: flex-end;
    font-size: 0.9em;
    color: #444;
  }
}
</style>
<html>
<head>
  </head>
<body>
<div id="page-wrapper">
<header id="header">
  <div class="logo">
    <img id="header-img" src="https://s3.amazonaws.com/freecodecamp/original_trombones.png" alt="original trombones logo" />
  </div>

  <nav id="nav-bar">
    <ul>
      <li><a class="nav-link" href="#features">Features</a></li>
      <li><a class="nav-link" href="#how-it-works">How It Works</a></li>
      <li><a class="nav-link" href="#pricing">Pricing</a></li>
    </ul>
  </nav>

</header>

<div class="container">

</div>

<section id="hero">
  <h2>Handcrafted, home-made masterpieces</h2>
  <form id="form" action="https://www.freecodecamp.com/email-submit">
    <input name="email" id="email" type="email" placeholder="Enter your email address" required/>
    <input id="submit" type="submit" value="Get Started" class="btn"></input>
  </form>
</section>


<div class="container">
  <section id="features">
    <div class="grid">
      <div class="icon">
        <i class="fa fa-3x fa-fire"></i>
      </div>
      <div class="desc">
        <h2>Premium Materials</h2>
        <p>Our trombones use the shiniest brass which is sourced locally. This will increase the longevity of your purchase.</p>
      </div>
    </div>
    <div class="grid">
      <div class="icon">
        <i class="fa fa-3x fa-truck"></i>
      </div>
      <div class="desc">
        <h2>Fast Shipping</h2>
        <p>We make sure you recieve your trombone as soon as we have finished making it. We also provide free returns if you are not satisfied.</p>
      </div>
    </div>
    <div class="grid">
      <div class="icon">
        <i class="fa fa-3x fa-battery-full" aria-hidden="true"></i>
      </div>
      <div class="desc">
        <h2>Quality Assurance</h2>
        <p>For every purchase you make, we will ensure there are no damages or faults and we will check and test the pitch of your instrument.</p>
      </div>
    </div>
  </section>
  <section id="how-it-works">
    <iframe id="video" height="315" src="https://www.youtube-nocookie.com/embed/y8Yv4pnO7qc?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
  </section>
  <section id="pricing">
    <div id="tenor">
      <div class="level">
        Tenor Trombone
      </div>
      <h2>$600</h2>
      <ol>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum.</li>
      </ol>
      <button class="btn">Select</button>
    </div>
    <div id="bass">
      <div class="level">
        Bass Trombone
      </div>
      <h2>$900</h2>
      <ol>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum.</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum.</li>
      </ol>
      <button class="btn">Select</button>
    </div>
    <div id="valve">
      <div class="level">
        Valve Trombone
      </div>
      <h2>$1200</h2>
      <ol>
        <li>Plays similar to a Trumpet</li>
        <li>Great for Jazz Bands</li>
        <li>Lorem ipsum dolor.</li>
        <li>Lorem ipsum.</li>
      </ol>
      <button class="btn">Select</button>
    </div>
  </section>
  <footer>
    <ul>
      <li><a href="#">Privacy</a></li>
      <li><a href="#">Terms</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <span>Copyright 2016, Original Trombones</span>
  </footer>
</div>
</div>
</body>
</html>

Screenshot%20from%202019-04-22%2014-11-44
Screenshot%20from%202019-04-22%2014-11-44793×879 169 KB

This is how it looks in my Atom editor. I tried bracket but no chance.
It’s not like css is not working. Changes does appear. Survey form and Tribute page worked with the exact same method!

What should I do? I tried to search but I have no idea where exactly is broken so I couldn’t

I know this post is a mess but I really need help :frowning:

Thank you in advance!

2

Notice the nesting in CSS? It should be a tip that it’s not CSS because CSS doesn’t allow nesting. Rename your .css file[s] to .scss and go from there.

3

Does it mean that only .scss supports nesting? I was kinda curious about it because I really don’t think that I saw lesson about scss and css, let alone nesting. Really appreciate your answer! :pray:t3::pray:t3:

4

It means that CSS doesn’t support nesting :slightly_smiling_face: SCSS is a CSS extension language. But it’s not the only one.

The SCSS (SASS) lessons come later:

5

The way I have done these projects is by looking at the user stories and running the tests, one by one. I do a user story and then run the tests. The errors help you tremendously. I never look at the code in the example, I just look at the rendered page and use it as a design guide.

After the page has passed all the tests, the hard work begins and I can start moving stuff around and adding things.

I normally delete all but the submitted version of my projects. Here is Version 1 of the current project I am working on. Here is Version 32 of the same project. They both passed all the tests.

This is how I would go about doing these projects.

6

This is what I really should do. But I get stuck so hard that cutting only one of my arm is not enough. I always end up cheating :cry:

7

Really appreciate your answer!!