Projects

CSS Flexbox – Create a website

In this video, I show you how to create a website layout with CSS Flexbox.
You can find the source code for this project below the video.

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com/css?family=Indie+Flower&display=swap" rel="stylesheet">
   <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <header>Header</header>
    
    <div class="container">
      <nav>Nav</nav>
      <main>Main</main>
      <aside>Ads</aside>
    </div>
    <footer>Footer</footer>
    
    
  </body>
  
  
</html>

CSS Code

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  background: #dfe6e9;
  font: 18px sans-serif;
}
header, footer {
  background: #ccc;
  padding: 25px;
  text-align: center;
  font: 30px "Indie Flower", cursive;
}
.container {
  display: flex;
  justify-content: space-around;
  margin: 40px 0;
}
nav, aside {
  flex-basis: 20%;
}
main {
  flex-basis: 50%;
}
nav, main, aside {
  height: 60vh; /* for demo only */ 
  background: #fcfcfc;
  padding: 20px;
  border-radius: 5px;
}
@media (max-width: 600px) {
  .container {
    flex-wrap: wrap;
  }
  nav, main, aside {
    flex-basis: 95%;
    margin: 25px 10px;
    
  }
  nav, aside {
    height: 100px;
  }
}