<!DOCTYPE html>
<html>

<head>
  <title>Language Palace</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8"/>
  <link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>

<body>
  <div id="container">
    <header lang="ar">العربية</header>
    <div id="content">
        <label for="click" id="lblClick">M</label>
        <input type="checkbox" id="click">
        <nav>
          
            <ul>
                <li>HOME</li>
            </ul>
            
        </nav>
      <article>
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      This is some random text to fill in the form.This is some random text to fill in the form.This is some random text to fill in the form.
      </article>
    
    
    </div>
    <footer></footer>
  </div>
</body>

</html>
nav{
  width:0px;
}
#container{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -webkit-flex-direction:column;
      -ms-flex-direction:column;
          flex-direction:column;
  min-height:calc(100vh - 20px);
  border : 3px solid green;
}
header{
  background-color:red;
  height:50px;
  font-size:2em;
  text-align:center;
  line-height:50px;
  
}
#content{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-flex:1;
  -webkit-flex-grow:1;
      -ms-flex-positive:1;
          flex-grow:1;
  flex-direction:row;
  flex-wrap:nowrap;
}
#lblClick{
    position: fixed;
    top:65px;
    left:17px;
    display:block;
    width:30px;
    height:30px;
    background-color: green;
    text-align: center;
    line-height: 30px;
}
#click{
    display:none;
}

Nav{
  margin-top:35px;
  margin-left: 6px;  
  min-width:200px;
  height:300px;
  background-color:purple;
  transition:min-width 2s;
  overflow: hidden;
  
}
#click:checked ~nav{
    min-width:0px;
}
article{
    margin-left:32px;
  flex-grow:2;
}

footer{
  background-color:blue;
  height:50px;
  
}

/* Small Screens */
@media screen and (max-width:490px) {
  
}

/* Wide Screens */
@media screen and (min-width:490px) {
    header{        
    }
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.