How to Build a Website Layout with Flexbox (burger)

how-to-build-a-website-layout-with-flexbox-burger.markdown

How to Build a Website Layout with Flexbox (burger)

Forked from Jeremy Thomas. Read the full tutorial on Envato Tuts+.

Forked from Jeremy Thomas's Pen Tuts Report 06.

A Pen by uyriq on CodePen.

License.

index.html

<header class="header">
  <section class="main  ">
    <div class="header-article   ">
     <div class="article first-article" > 1
    </div>
           <div class="article first-article" > 2
    </div>
      <div class="article first-article" > 3
    </div>
      <div class="article first-article" > 4
    </div>
    </div>
  </section>
</header>
<div class="middle main">
      <h2><a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-news-website-layout-with-flexbox--cms-26611">Read tutorial</a></h2>
</div>
<main class="main columns">
  <section class="column main-column">
    <div class="article first-article" >

      <div class="article-body">
        <h2 class="article-title">
          Hello World
        </h2>
        <p class="article-content">
          First Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros.
        </p>

      </div>
    </div>

  </section>

  <section class="column">
    <div class="article"  >

      <div class="article-body">
        <h2 class="article-title">
          Hello World
        </h2>
        <p class="article-content">
          Second Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>

      </div>
    </div>
<div class="middle main">
      <h2><a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-news-website-layout-with-flexbox--cms-26611">Rend m'lcompte!</a></h2>
</div>
  </section>
</main>

style.css

*,
*::before,
*::after {
  box-sizing: border-box;
  box-sizing: inherit;
}

html {
  background: mediumseagreen;
 
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  min-width: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
 
}

body {
  

  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
}


div,
h2,
p,
 {
  margin: 0;
  padding: 0;
}

.header {
  color: white;
  padding: 10px 0 10px;
  text-align: center;
}

.header h1 {
  font-size: 40px;
  font-weight: bold;
}


.main {
  margin: 0 auto;
  max-width: 1280px;
 
}

.column {
  flex: 1;
  flex-direction: column;
}

.header-article {
  background: grey;
 
  color: #666;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-basis: auto;
  margin: 10px;
}

.article {
  background: white;
 
  color: #666;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-basis: auto;
  margin: 10px;
}


 

.middle {
  padding-left: 2%;
}

.article-body {
  display: flex;
  flex: 1;
  flex-basis: auto;
  flex-direction: column;
  padding: 20px;
}

.article-title {
  color: #333;
  flex-shrink: 0;
  font-size: 1.4em;
  font-weight: 700;
  line-height: 1.2;
}

.article-content {
  flex: 1;
  flex-basis: auto;
  margin-top: 5px;
}

 

@media screen and (min-width: 800px) {
  .columns,
  .column {
    display: flex;
  }
}

@media screen and (min-width: 1000px) {
  .first-article, .header-article {
    flex-direction: row;
  }

  .first-article .article-body {
    flex: 1;
  }

  .first-article   {
    width: 55vw;
  }


  .main-column {
    flex: 1.5;
  }

  
}