<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Navigation</title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div class="mobile-layout">
    <header class="mobile-layout-header">
      <a class="mobile-layout-link" href="#">
        <i class="fa fa-arrow-left"></i>&nbsp&nbspBack
      </a>

      <h1 class="mobile-layout-title">Mobile Flexbox App</h1>

      <a class="mobile-layout-link" href="#">
        <i class="fa fa-cog"></i>
      </a>
    </header>

    <main class="mobile-layout-content">
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur et debitis, provident harum eos accusamus deleniti corrupti aspernatur, maiores natus.</p>
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi, dolorum eveniet consectetur recusandae sapiente quos eligendi suscipit cumque autem quas. Tenetur cumque atque tempora, ratione!</p>

      <img class="mobile-layout-image" src="https://source.unsplash.com/150x110">

      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur quisquam dolore quasi adipisicing elit. Et odio debitis, iusto maxime esse provident.</p>
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus amet soluta beatae cupiditate quisquam dolore quasi, autem molestias totam. Fuga expedita unde dolorem nam illum aliquid a, sed nulla veniam!</p>
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque minus perspiciatis a. Obcaecati rerum neque, dignissimos. Eius porro, enim soluta.</p>
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem, doloribus?</p>
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod veritatis corporis, magnam dolorum quo nobis!</p>
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum quidem, qui, suscipit voluptates necessitatibus fugiat amet deserunt esse accusantium sunt.</p>
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur similique possimus, hic quo, earum, odit fugiat accusamus suscipit ad, dolore qui cum eaque repudiandae non neque aut.</p>
      <p class="mobile-layout-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, et!</p>
    </main>

    <footer class="mobile-layout-footer">
      <nav class="mobile-layout-footer-menu">
        <ul class="mobile-layout-footer-menu-list">
          <li class="mobile-layout-item">
            <i class="fa fa-home"></i>Home
          </li>
          <li class="mobile-layout-item">
            <i class="fa fa-bell"></i>Notifications
          </li>
          <li class="mobile-layout-item">
            <i class="fa fa-envelope-square"></i>Messages
          </li>
          <li class="mobile-layout-item">
            <i class="fa fa-user"></i>Me
          </li>
        </ul>
      </nav>
    </footer>
  </div>
</body>
</html>
/*********************
 ****** Global *******
**********************/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  height: 100vh;
  display: flex;
  background: #613327;
}

.mobile-layout {
  width: 400px;
  height: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.mobile-layout > * {
  flex: 1 1 auto;
}

/*********************
 ****** Header *******
**********************/

.mobile-layout-header,
.mobile-layout-footer {
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,.1);
  background: #C70039;
}

.mobile-layout-header {
  flex: 1.5;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.mobile-layout-title {
  font-size: 24px;
}

.mobile-layout-link {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  text-align: center;
  color: #fff;
  padding: 7px;
  border-radius: 2px;
  background: rgba(0,0,0,.2);

}

/*********************
 ****** Content ******
**********************/

.mobile-layout-content {
  flex: 10;
  padding: 30px 40px;
  overflow-y: scroll;
}

.mobile-layout-content > * {
  margin-bottom: 10px;
}

.mobile-layout-paragraph {
  text-align: justify;
}

.mobile-layout-image {
  float: left;
  margin: 0 10px 0 0;
}

/*********************
 ****** Footer *******
**********************/

.mobile-layout-footer {
  flex: 2;
}

.mobile-layout-footer-menu {
  height: 100%;
}

.mobile-layout-footer-menu-list {
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
  list-style: none;
}

.mobile-layout-footer-menu-list > * {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mobile-layout-item > * {
  margin: 7px 0;
}