Build a Product Landing Page(header)

[Anand123]

Tell us what’s happening:

How do i insert logo and nav in one header(one line) ? Screenshot attached for reference…

Your code so far
Style.css

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

li {
  list-style: none;
}

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

/** global classes styling **/
.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  
}
body html{
align:center;
}

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

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

.logo {
  width: 60px;
}
@media (max-width: 650px) {
  .logo {
    margin-top: 15px;
    width: 100%;
    position: relative;
  }
}
.logo 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) {
  .logo img {
    margin: 0 auto;
  }
}

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

#hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 200px;
  margin-top: 50px;
}
#hero h2 {
  margin-bottom: 20px;
  word-wrap: break-word;
}
#hero input[type="email"] {
  max-width: 275px;
  width: 100%;
  padding: 5px;
}
#hero input[type="submit"] {
  max-width: 150px;
  width: 100%;
  height: 30px;
  margin: 15px 0;
  border: 0;
  background-color: #f1c40f;
}
#hero input[type="submit"]:hover {
  background-color: orange;
  transition: background-color 1s;
}
@media (max-width: 650px) {
  #hero {
    margin-top: 120px;
  }
}

#features {
  margin-top: 30px;
}
#features .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 20vw;
  color: darkorange;
}
@media (max-width: 550px) {
  #features .icon {
    display: none;
  }
}
#features .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 125px;
  width: 80vw;
  padding: 5px;
}
@media (max-width: 550px) {
  #features .desc {
    width: 100%;
    text-align: center;
    padding: 0;
    height: 150px;
  }
}
@media (max-width: 650px) {
  #features {
    margin-top: 0;
  }
}

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

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

footer {
  margin-top: 30px;
  background-color: #ddd;
  padding: 20px;
}
footer ul {
  display: flex;
  justify-content: flex-end;
}
footer ul li {
  padding: 0 10px;
}
footer span {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  font-size: 0.9em;
  color: #444;
}

Html code

<head>
<head>
<style>
<link rel="stylesheet" href="styles.css">

</style>
</head>
<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" height="42" width="200"/>
  </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>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36.

Link to the challenge:

freeCodeCamp.org

[Ronnehag]

Could you provide your codepen? Its easier to dee whats going on and in which container they are in.

[Anand123]

Thanks for the response I got the answer
Cheers!

[szabina74]

I am having the same issue, but cannot find the answer on this topic. What was the problem then??

[Ronnehag]

There are a few different approaches. I would put them in a container with display grid and line them up. You could also use float or flex.

[szabina74]

Thank you Ronnehag - I shall try that out too. It has also turned out that my CSS preprocessor was not set to SCSS, therefore the example page on freeCodeCamp project did not display well upon trying to re-create it…

Well, we just keep on learning…