Coppola

by Martin Bean

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<div>
  <div class="g-0 row">
    <div class="col-3 vh-100" id="first">
      <div class="d-flex flex-column h-100 p-3">
        <div class="flex-grow-1">
          <header class="mb-3">
            <a class="text-decoration-none text-uppercase" href="#" id="logo">Coppola</a>
          </header>
          <nav id="navigation">
            <ul class="flex-column nav text-uppercase">
              <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Pages</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Portfolio</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Blog</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Shop</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Landing</a>
              </li>
            </ul>
          </nav>
        </div>
        <footer class="flex-shrink-0">
          <p class="mb-0 small text-opacity-50 text-white text-uppercase">&copy; 2025 Martin Bean. All rights reserved.</p>
        </footer>
      </div>
    </div>
    <div class="col-3 vh-100" id="middle">
      <div class="h-100 position-relative">
        <div class="bottom-0 p-3 position-absolute start-0 text-white">
          <h1 class="fs-5 mb-0 text-uppercase">
            <a class="stretched-link text-decoration-none text-white" href="#">In The Mood For Red</a>
          </h1>
          <p class="mb-0">Noami Takeda / <abbr class="text-decoration-none" title="United States of America">USA</abbr></p>
        </div>
      </div>
    </div>
    <div class="col-6 overflow-auto vh-100" id="articles">
      <ul class="list-unstyled m-0">
...

CSS

.overflow-auto {
  overflow: auto;
}

#logo {
 color: #f9ed2e;
}

#navigation .nav-link {
  color: #fff;
  padding: .25rem 0;
}
#navigation .nav-link:active,
#navigation .nav-link:hover,
#navigation .nav-link.active {
  color: #eaa57f;
}

#first {
  background-color: #b0766c;
}

#middle {
  background-color: #25130d;
}

#articles li {
  height: 200px;
}
#articles li:nth-child(odd) {
  background-color: #333;
}
#articles li:nth-child(even) {
  background-color: #666;
}