web page design with flexbox

by Berat Emre NebioÄźlu

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">

   <div class ="header">
  Logo
  </div>
<div class ="menu">
<div class="menuIcon">
<i class="fa fa-bars" aria-hidden="true"></i>
</div>
<div class="menuContent">
  <a href="#" class="active">Home</a>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
  <a href="#">Link 4</a>
  </div>
  </div>
  <div class="content">
    <div class="subContent">
     <div class ="innerContent">
  Content #1
  </div>
     <div class ="innerContent">
  Content #2
  </div>   
  <div class ="innerContent">
  Content #3
  </div>
     <div class ="innerContent">
  Content #4
  </div>
     <div class ="innerContent">
  Content #5
  </div>
     <div class ="innerContent">
  Content #6
  </div>
       <div class ="innerContent">
  Content #7
  </div>
  </div>
    <div class ="sliderContent">
  <div class ="slider">
  Announcement #1
  </div>
    <div class ="slider">
  Announcement #2
  </div>
    <div class ="slider">
  Announcement #3
  </div>
    <div class ="slider">
  Announcement #4
  </div>
    <div class ="slider">
  Announcement #5
  </div>
    <div class ="slider">
  Announcement #6
  </div>
    <div class ="slider">
  Announcement #7
  </div>
    <div class ="slider">
  Announcement #8
  </div>
    <div class ="slider">
  Announcement #9
  </div>
    <div class ="slider">
  Announcement #10
  </div>
    <div class ="slider">
  Announcement #11
  </div>
    <div class ="slider">
  Announcement #12
  </div>
    <div class ="slider">
  Announcement #13
  </div>
    <div class ="slider">
  Announcement #14
  </div>
  </div>
      <div class ="footerContent">
  <div class ="footer">
  <div>
    footer #1
    </div>
      <div>
    footer #2
    </div>
      <div>
    footer #3
    </div>
  </div>
  </div>
  </div>

CSS

html,body{
  width:100%;
  height:100%;
}
.container{
    height:100%;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    justify-content:flex-start;
   
    border:1px solid black;
    padding:10px;
 }
 .menu
 {
    display:flex;
    flex-wrap:wrap;
    flex-direction:row;
    justify-content:flex-start;
     border:1px solid black;
     padding:5px;
     height:10%;
     }
     
 .menu .menuContent{
   border: 1px solid black;
    width:70%;
    display:none;
 }    
  .menu .menuContent.visible{
     display:flex;
   flex-wrap:wrap;
   flex-direction:row;
    align-items: center;
    justify-content: space-around;
     
 }
 .menu .menuIcon{
   display:flex;
   flex-wrap:wrap;
   flex-direction:row;
    align-items: center;
    justify-content:center;
    border:1px solid black;
    width:20%;
   font-size:36px;
    }
 .content
 {
   display:flex;
   flex-wrap: wrap;
   flex-direction:row;
   justify-content:space-around;
   height : 80%; 
    width:100%;
    
   border:1px solid red;
   
 }
  .content .subContent{
       display:flex;
   flex-wrap:wrap;
   flex-direction:row;
   justify-content:space-around;
   align-items:center;
    border:1px solid blue;
    width:70%;
    height:90%;
  }
  .content .subContent .innerContent:nth-child(7)
  {
     flex-grow:1;
     align-self:flex-end;
  }
  .content .subContent .innerContent:nth-child(4)
  {
     flex-shrink:0.3;
  }
   .content .subContent .innerContent:nth-child(4)
  {
     order:-1;
  }
 
 .header{
   display:flex;
   justify-content:center;
   align-items:center;
   
   border:1px solid black;
   width:100%;
 }
 .innerContent
 {
   display:flex;
   flex-wrap:wrap;
   flex-direction:column;
   justify-content:center;
   align-items:center;
   border:1px solid black;
   height:20%;
   width:30%;
 }
 .sliderContent
 {
   display:flex;
   flex-wrap:wrap;
   flex-direction:row;
   justify-content:center;;
   align-items:center;;
   width:25%;
   height:90%;
   border:1px solid black;
  ...

JavaScript

var menuIcon = document.querySelector('.fa');
var menuContent = document.querySelector('.menuContent');
menuIcon.addEventListener('click', function()
{
		
		menuContent.classList.toggle('visible');
});