[Solved] Structuring a web page using CSS and html [closed]

by


To design something like this you want to break it down into sections.

In this case we can have the LEFT SIDE, CENTER CONTENT, RIGHT SIDE.
I am breaking it down into columns because the laayout seems to be defined by the widths of these 3 sections.
Then once we have each. Just piece it together.

nav {
  width: 100%;
}

nav:after {
  content: '';
  display: table;
  clear: both;
}

.side-body {
  padding: 5px;
}

.header {
  height: 100px;
  flex-shrink: 0;
  padding: 5px;
  background-color: #feeeee;
}

.header img {
  max-width: 100%;
  max-height: 100%;
}

a {
  float: left;
  display: block;
  padding: 5px;
  background: #eeeeee;
  width: 20%;
}

* {
  box-sizing: border-box;
}

.center-layout {
  display: flex;
  flex-direction: column;
  flex: 1 1 100%;
}

.body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  background-color: #dddddd;
}

.layout {
 display: flex;
}

.left-layout {
  width: 200px;
  flex-shrink: 0;
}

.right-layout {
  width: 150px;
  flex-shrink: 0;
}
<div class="layout">
  <div class="left-layout">
    <div class="header">
      <img src="http://via.placeholder.com/200x100" />
    </div>
    <div class="side-body">
      <h2>List</h2>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="center-layout">
    <div class="header">
      <h1>Title</h1>
    </div>
    <nav>
      <a>Home</a>
      <a>About</a>
      <a>Shop</a>
      <a>Contact</a>
      <a>Terms</a>
    </nav>
    <div class="body">
      <img src="https://via.placeholder.com/200x200" />
    </div>
  </div>
  <div class="right-layout">
    <div class="header">
      <h2>Info</h2>
    </div>
    <div class="side-body">
      <h2>List</h2>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</div>

Flexbox just makes everything easy.
Hope that helps.

0

solved Structuring a web page using CSS and html [closed]