<div class="header">
  <h1>Flexbox layout</h1>
</div>

<div class="main">
<div class="sidebar">
  <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
   </ul>
</div>
 
<div class="article">
  <h1>Welcome to our Flexbox layout</h1>
  <p>Much improved! No hacks, it just works as it should</p>
  <p>You have much more design possibilities with flexbox</p>
  <p>You can also reorder content with Flexbox</p>
</div>
</div>

<div class="footer">
  <p>copyright ©Flexbox SCHOOL ltd</p>
</div>

*{ padding:0; margin:0;}
body {font:16px Helvetica, Arial,sans-serif; margin:10px;}
.header {background-color:#91AB6F; padding:25px;}
.header h1{ font-size:30px; color:white;}
.main {  display:flex;} 
.sidebar  { width:25%; background-color:#B1D188}
.sidebar ul{ line-height:40px; list-style:none; font-size:19px; padding:20px}
.sidebar a {color:#5B6B46;} 
.article  { width:75%; padding-bottom:9em; background-color:#C7EB98 }
.article h1{ margin:25px;}
.article p{ margin:25px;}
.footer{ background-color:#5B6B46; color:white; text-align:center; padding:10px;}