User Interface II: Great Idea!

index.html

<link href="https://fonts.googleapis.com/css?family=Bangers|Titillium+Web" rel="stylesheet">

<section id="nav-bar">
  <img class="logo" src="https://tk-assets.lambdaschool.com/98785fd8-942e-459c-8475-425203614051_logo.png" alt="Great Idea! Company logo.">
  <nav>
    <a href="">Services</a>
    <a href="">Product</a>
    <a href="">Vision</a>
    <a href="">Features</a>
    <a href="">About</a>
    <a href="">Contact</a>
  </nav>
</section>

<header>
  <div>
    <h1>Innovation<br> On<br> Demand</h1>
    <button>Get Started</button>
  </div>
  <div>
    <img id="hero-img" src="https://tk-assets.lambdaschool.com/579bc2cd-8c96-4412-9ac6-a3eac2aaec37_header-img.png" alt="Image of a code snippet.">
  </div>
</header>

<section id="primary-details">
  <div>
    <h2>Features</h2>
    <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
  </div>
  <div>
    <h2>About</h2>
    <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
  </div>
</section>

<section>
  <img class="middle-img" src="https://tk-assets.lambdaschool.com/88f4cadc-1086-4ecf-9c66-1bfa05843707_mid-page-accent.jpg" alt="Image of code snippets across the screen">
</section>

<section id="secondary-details">
  <div>
    <h2>Services</h2>
    <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
  </div>
  <div>
    <h2>Product</h2>
    <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
  </div>
  <div>
    <h2>Vision</h2>
    <p>Aliquam elementum magna eros, ac posuere elvit tempus et. Suspendisse vel tempus odio, in interdutm nisi. Suspendisse eu ornare nisl. Nullam convallis augue justo, at imperdiet metus scelerisque quis.</p>
  </div>
</section>
 
<section>
  <div>
    <h2>Contact</h2>
    <address>
      <p>
        123 Way 456 Street<br>
      Somewhere, USA
      </p>
      <p>
        1 (888) 888-8888
      </p>
      <p>
        sales@greatidea.io        
      </p>
    </address>
  </div>
</section>

<footer>
  <p>Copyright Great Idea! 2018</p>
</footer>
  

style.css

* {
  box-sizing: border-box;
  font-family: "Titillium Web", sans-serif;
  width: 87%;
  height: auto;
  margin-left: 8%;
}
}

body {
  margin: 20;
}

h1, h2, h3, h4 {
  font-family: "Bangers", serif;
}

.logo {
  display: block;
  margin: 1rem auto;
}

nav {
  display: flex;
  flex-direction: column;
  text-align: center;
}

nav a {
  color: #B4B6B7;
  text-decoration: none;
  border-top: 1px solid #B4B6B7;
  border-bottom: 1px solid #B4B6B7;
  padding: .5rem 0;
}

header {
  text-align: center;
  padding-bottom: 3rem;
  margin: 0 1rem;
  border-bottom: 2px solid black
}

header h1 {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 1rem;
}

header button {
  border: 1px solid black;
  color: black;
  padding: .1rem 2.5rem;
}

#hero-img {
  display: none;
}

section {
  margin: 0 1rem;
}

#nav-bar {
  margin: 0;
}

section div {
  margin: 2rem 0;
}

section h2 {
  font-size: 1.25rem;
  margin: 0 0 .5rem;
}

section p {
  font-size: .9rem;
  margin: 0;
}

#secondary-details {
  border-bottom: 2px solid black;
}

.middle-img {
  max-width: 100%;
   display: block;
  margin-left: auto;
  margin-right: auto;

}

address {
  font-style: normal;
}

address p {
  margin: 0 0 .75rem;
}

footer {
  text-align: center;
  font-size: .8rem;
}

@media (min-width: 500px) {
  nav {
    flex-direction: row;
    justify-content: space-around;
  }
  
  nav a {
    border: 0;
  }
  
  header h1 {
    font-size: 4rem;
    margin-bottom: 1.5rem;
  }

  header button {
    font-size: 1rem;
  }
  
  #primary-details, #secondary-details {
    display: flex;
    justify-content: space-around;
  }
  
  #primary-details div {
    width: 48%;
  }
  
  #secondary-details div {
    width: 30%;
  }
}

@media (min-width: 800px) {
  #nav-bar {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 3rem;
  }
  
  .logo {
    margin: 0 0 0 2rem;
  }
  
  nav a {
    margin: 0 1.2rem;
  }
  
  header {
    display: flex;
    justify-content: space-between;
  }
  
  header div {
    width: 50%
  }
  
  #hero-img {
    display: block;
    width: 350px;
    height: auto;
  }
}

user-interface-ii-great-idea.markdown

User Interface II: Great Idea!

A Pen by Chris Boydstun on CodePen.

License.