<!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>  Back
</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;
}
