scottlaplant/index.html

## index.html
<html>
  <head>
    <title>Medium Layout</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  </head>
  <nav>
    <ul class="write-story">
      <li>Write a Story</li>
    </ul>
    <h1 class="main heading">Medium</h1>
    <ul class="nav-icons">
      <li><i class="fa fa-search" aria-hidden="true"></i></li>
      <li><i class="fa fa-bell-o" aria-hidden="true"></i></li>
      <li class="fa_user"><i class="fa fa-user" aria-hidden="true"></i></li>
    </ul>
  </nav>
  <main>
    <section class="section1">
      <arcticle>
        <div class="section1-heading-nav">
          <h2>You might like</h2>
          <a href="#">MORE ></a>
        </div>
        <hr />
        <div class="inner-section">
          <div class="section1-row1">
            <p>Row1</p>
          </div>

          <div class="row2">
            <div class="row2-col1">
              <p>Row2 Col1</p>
            </div>
            <div class="row2-col2">
              <p>Row2 Col2</p>
            </div>
          </div>

          <div class="row3">
            <div class="row3-col1">
              <p>Row3 Col1</p>
            </div>
            <div class="row3-col2">
              <p>Row3 Col2</p>
            </div>
          </div>
        </div>
      </arcticle>
    </section><!--end of section1 -->

    <section class="section2">
      <arcticle>
        <div class="section2-heading-nav">
          <h2>Javascript</h2>
          <button>Follow</button>
        </div>
        <hr />
        <div class="inner-section">
          <div class="section2-row1">
            <div class="section2-row1-col1">
              <p>Row1 Col1</p>
            </div>
            <div class="section2-row1-col2">
              <p>Row1 Col2</p>
            </div>
          </div>

          <div class="row2">
            <div class="row2-col1">
              <p>Row2 Col1</p>
            </div>
            <div class="row2-col2">
              <p>Row2 Col2</p>
            </div>
          </div>

          <div class="row3">
            <div class="row3-col1">
              <p>Row3 Col1</p>
            </div>
            <div class="row3-col2">
              <p>Row3 Col2</p>
            </div>
          </div>
        </div>
      </arcticle>
    </section> <!--end of section2 -->

    <section class="section3">
      <arcticle>
        <div class="section3-heading-nav">
          <h2>Artifical Intellegence</h2>
          <button>Follow</button>
        </div>
        <hr />
        <div class="inner-section">
          <div class="section3-row1">
            <div class="section3-row1-col1">
              <p>Row1 Col1</p>
            </div>
            <div class="section3-row1-col2">
              <p>Row1 Col2</p>
            </div>
          </div>

          <div class="row2">
            <div class="row2-col1">
              <p>Row2 Col1</p>
            </div>
            <div class="row2-col2">
              <p>Row2 Col2</p>
            </div>
          </div>

          <div class="row3">
            <div class="row3-col1">
              <p>Row3 Col1</p>
            </div>
            <div class="row3-col2">
              <p>Row3 Col2</p>
            </div>
          </div>
        </div>
      </arcticle>
    </section> <!--end of section3 -->
  </main>
  <footer>
    <hr />
    <ul>
      <li>Getting Started</li>
      <li>Help</li>
      <li>Status</li>
      <li>Blog</li>
      <li>Careers</li>
      <li>Privacy</li>
      <li>About</li>
    </ul>
  </footer>
</html>

## medium-layout-clone.markdown

      
    Raw
  

              medium-layout-clone.markdown
            
          
    Medium Layout clone!

A Pen by Yagnesh on CodePen.
License.

  
## style.css
*{
  padding:0;
  margin:0;
}

body{
  width: 90%;
  margin: 0 auto;
}

nav{
  display: flex;
  justify-content: space-between;
  margin-top: 1em;
  margin-bottom: 3em;
}

li{
  list-style: none;
  cursor: pointer;
}

li:not(.fa_user){
margin-right: 2em;
}

.nav-icons{
  display: flex;
}

h1{
  font-size: 2em;
}

.write-story, .nav-icons{
  margin-top: .4em;
}

hr{
  margin-top: 1em;
}

.write-story{
  display: flex;
  justify-content: center;
}

.nav-icons{
  display: flex;
  justify-content: flex-end;
}

.inner-section{
  display: flex;
  justify-content: space-between;
}

.section1-row1{
  height: 620px;
  background: #ddd;
  flex: auto;
  margin: 20px 10px 20px 0px;
}

.row2-col1, .row2-col2, .row3-col1, .row3-col2{
  height: 300px;
  background: #ccc;
  flex: auto;
}

.row2-col2, .row3-col2, .section2-row1-col2, .section3-row1-col2{
  margin-top: 20px;
}

.row2{
  flex: auto;
  margin: 20px 10px 15px 10px;
  height: 600px;
}

.row3{
  flex: auto;
  margin: 20px 0px 15px 10px;
  height: 600px;
}


p {text-align: center;}

.section1-heading-nav, .section2-heading-nav, .section3-heading-nav{
  display: flex;
  justify-content: space-between;
}

a{
  text-decoration: none;
  color: #a5a5a5;
}

.section2-row1, .section3-row1{
  margin-top: 20px;
}

.section2, .section3{
  margin-top: 40px;
}

button{
  padding: 10px 20px;
  border-radius: 10px;
  border: 1px solid green;
  background: #fff;
}

.section2-row1-col1, .section2-row1-col2, .section3-row1-col1, .section3-row1-col2{
  height: 300px;
  background: #eee;
  flex:1;
}

.section2-row1, .section3-row1{
  flex: auto;
  margin: 20px 10px 20px 0px;
}

footer ul{
  margin-top: 20px;
  display: flex;
}
	<html>
	<head>
	<title>Medium Layout</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	</head>
	<nav>
	<ul class="write-story">
	<li>Write a Story</li>
	</ul>
	<h1 class="main heading">Medium</h1>
	<ul class="nav-icons">
	<li><i class="fa fa-search" aria-hidden="true"></i></li>
	<li><i class="fa fa-bell-o" aria-hidden="true"></i></li>
	<li class="fa_user"><i class="fa fa-user" aria-hidden="true"></i></li>
	</ul>
	</nav>
	<main>
	<section class="section1">
	<arcticle>
	<div class="section1-heading-nav">
	<h2>You might like</h2>
	<a href="#">MORE ></a>
	</div>
	<hr />
	<div class="inner-section">
	<div class="section1-row1">
	<p>Row1</p>
	</div>

	<div class="row2">
	<div class="row2-col1">
	<p>Row2 Col1</p>
	</div>
	<div class="row2-col2">
	<p>Row2 Col2</p>
	</div>
	</div>

	<div class="row3">
	<div class="row3-col1">
	<p>Row3 Col1</p>
	</div>
	<div class="row3-col2">
	<p>Row3 Col2</p>
	</div>
	</div>
	</div>
	</arcticle>
	</section><!--end of section1 -->

	<section class="section2">
	<arcticle>
	<div class="section2-heading-nav">
	<h2>Javascript</h2>
	<button>Follow</button>
	</div>
	<hr />
	<div class="inner-section">
	<div class="section2-row1">
	<div class="section2-row1-col1">
	<p>Row1 Col1</p>
	</div>
	<div class="section2-row1-col2">
	<p>Row1 Col2</p>
	</div>
	</div>

	<div class="row2">
	<div class="row2-col1">
	<p>Row2 Col1</p>
	</div>
	<div class="row2-col2">
	<p>Row2 Col2</p>
	</div>
	</div>

	<div class="row3">
	<div class="row3-col1">
	<p>Row3 Col1</p>
	</div>
	<div class="row3-col2">
	<p>Row3 Col2</p>
	</div>
	</div>
	</div>
	</arcticle>
	</section> <!--end of section2 -->

	<section class="section3">
	<arcticle>
	<div class="section3-heading-nav">
	<h2>Artifical Intellegence</h2>
	<button>Follow</button>
	</div>
	<hr />
	<div class="inner-section">
	<div class="section3-row1">
	<div class="section3-row1-col1">
	<p>Row1 Col1</p>
	</div>
	<div class="section3-row1-col2">
	<p>Row1 Col2</p>
	</div>
	</div>

	<div class="row2">
	<div class="row2-col1">
	<p>Row2 Col1</p>
	</div>
	<div class="row2-col2">
	<p>Row2 Col2</p>
	</div>
	</div>

	<div class="row3">
	<div class="row3-col1">
	<p>Row3 Col1</p>
	</div>
	<div class="row3-col2">
	<p>Row3 Col2</p>
	</div>
	</div>
	</div>
	</arcticle>
	</section> <!--end of section3 -->
	</main>
	<footer>
	<hr />
	<ul>
	<li>Getting Started</li>
	<li>Help</li>
	<li>Status</li>
	<li>Blog</li>
	<li>Careers</li>
	<li>Privacy</li>
	<li>About</li>
	</ul>
	</footer>
	</html>
	*{
	padding:0;
	margin:0;
	}

	body{
	width: 90%;
	margin: 0 auto;
	}

	nav{
	display: flex;
	justify-content: space-between;
	margin-top: 1em;
	margin-bottom: 3em;
	}

	li{
	list-style: none;
	cursor: pointer;
	}

	li:not(.fa_user){
	margin-right: 2em;
	}

	.nav-icons{
	display: flex;
	}

	h1{
	font-size: 2em;
	}

	.write-story, .nav-icons{
	margin-top: .4em;
	}

	hr{
	margin-top: 1em;
	}

	.write-story{
	display: flex;
	justify-content: center;
	}

	.nav-icons{
	display: flex;
	justify-content: flex-end;
	}

	.inner-section{
	display: flex;
	justify-content: space-between;
	}

	.section1-row1{
	height: 620px;
	background: #ddd;
	flex: auto;
	margin: 20px 10px 20px 0px;
	}

	.row2-col1, .row2-col2, .row3-col1, .row3-col2{
	height: 300px;
	background: #ccc;
	flex: auto;
	}

	.row2-col2, .row3-col2, .section2-row1-col2, .section3-row1-col2{
	margin-top: 20px;
	}

	.row2{
	flex: auto;
	margin: 20px 10px 15px 10px;
	height: 600px;
	}

	.row3{
	flex: auto;
	margin: 20px 0px 15px 10px;
	height: 600px;
	}


	p {text-align: center;}

	.section1-heading-nav, .section2-heading-nav, .section3-heading-nav{
	display: flex;
	justify-content: space-between;
	}

	a{
	text-decoration: none;
	color: #a5a5a5;
	}

	.section2-row1, .section3-row1{
	margin-top: 20px;
	}

	.section2, .section3{
	margin-top: 40px;
	}

	button{
	padding: 10px 20px;
	border-radius: 10px;
	border: 1px solid green;
	background: #fff;
	}

	.section2-row1-col1, .section2-row1-col2, .section3-row1-col1, .section3-row1-col2{
	height: 300px;
	background: #eee;
	flex:1;
	}

	.section2-row1, .section3-row1{
	flex: auto;
	margin: 20px 10px 20px 0px;
	}

	footer ul{
	margin-top: 20px;
	display: flex;
	}