Flex Portal

by whelkaholism

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="portal-ui">
  <div class="header">
    <div class="primary">
      <div class="logo">
        <i class="material-icons">nature_people</i>
      </div>
      <div class="location">
        <span>Portal</span>
        <span>Dashboard</span>
      </div>      
    </div>
    <div class="secondary">
      <div class="status">
        (10) Messages
      </div>    
      <div class="account-info">
        <a class="user">Rob Watkins</a>
        <a class="logout">Sign out</a>
      </div>    
    </div>
  </div>
  <div class="nav">
    <ul>
      <li>Dashboard</li>
      <li>My Account</li>
    </ul>
  </div>
</div>
<div class="portal-content">
<div id="lipsum">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis facilisis leo vel pulvinar. Phasellus odio lectus, accumsan et interdum eget, efficitur quis magna. Aenean consectetur erat et ante hendrerit, vitae pretium nisl porta. Donec velit nulla, euismod molestie congue non, interdum ut augue. Nam scelerisque tristique nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras varius porttitor fermentum. Nulla pharetra lorem id finibus feugiat. Fusce pulvinar sem vel tempus pretium. Etiam eget est vitae lacus cursus efficitur. Morbi scelerisque consequat pellentesque. Vivamus a orci nec justo mollis volutpat at vitae massa. Maecenas posuere ante nec aliquet suscipit. Sed pellentesque pellentesque velit, ut viverra orci commodo non. Sed sed nibh at nisl vulputate tempor. Aenean faucibus eros eget erat dignissim, quis iaculis eros viverra.
</p>
<p>
Aenean in lorem quis justo ornare interdum. In hac habitasse platea dictumst. Donec a diam aliquam, consequat tellus gravida, tincidunt leo. Vestibulum interdum sed tellus tempus imperdiet. Nulla consequat lorem accumsan, luctus...

CSS

body { 
  padding: 0;
  margin: 0; 
}

.portal-ui *,
.portal-content {
   box-sizing: border-box; 
}

.portal-ui .header {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  box-shadow: 0 10px 20px 5px rgba(255, 255, 255, 1);
}

.portal-ui .header > * {
  display: flex;
  align-items: center;
}

.portal-ui .header .logo {
  display: flex;
  align-items: center;
}

.portal-ui .header > * > *:last-child {
  padding: 0 !important;
  margin: 0 !important;
}

.portal-ui .nav {
  position: fixed;
}

.portal-ui .account-info {
  display: flex;
}

/* ======================================================= */
.portal-ui .header {
  background: #303030;
  color: #ffffff;
  height: 40px;
}

.portal-ui .nav {
  background: #505050;
  color: #ffffff;
  top: 40px;
  width: 180px;
  height: calc(100vh - 40px);
}

.portal-content {
  margin-left: 200px;
}

.portal-ui .header > * {
  background: rgba(255, 255, 255, 0.3);
  padding: 0 10px;
}

.portal-ui .header > * > * {
  padding-right: 10px;
}

.portal-ui .header .secondary > * {
  border-right: 1px solid rgba(255, 255, 255, 0.75);
  margin-right: 10px;
}

.portal-ui .header .secondary > *:last-child {
  border: none;
}