A Pen by Joe Bliss

Thumbnail
This awesome code was written by ga-joe, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ga-joe ©
  • HTML
  • CSS
  • JavaScript
    <div id="wrapper">
  <header>
    <h1>Bonobos</h1>
    <nav>
      <a href="#">Blah</a>
      <a href="#">Blah</a>
      <a href="#">Blah</a>
    </nav>
  </header>
  <main>
    <div class="column" id="column1">
      <div class="column-content">
        <p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p>
      </div>
    </div>
    <div class="column" id="column2">
      <div class="column-content">
        <p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p><p>This is the Main Content</p>
      </div>
    </div>
  </main>
</div>

/*Downloaded from https://www.codeseek.co/ga-joe/a-pen-by-joe-bliss-JpbrNP */
    html, body {
  height: 100%;
}

header {
  padding: 10px;
}

#wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  height: 100%;
}

main {
  display: flex;
  flex-grow: 1;
  justify-content: space-evenly;
}

.column {
  flex-grow: 1;
  padding: 10px;
  background-color: gray;
  overflow-y: scroll;
  width: 50%;
}


/*Downloaded from https://www.codeseek.co/ga-joe/a-pen-by-joe-bliss-JpbrNP */
    

Comments