12+ CSS Blog Layout Examples

This post contains a total of 12+ Hand-Picked CSS Blog Layout Examples with Source Code. All the Blog Layouts are made using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. By Aysenur Turk

Made by Aysenur Turk. Modern Blog Layout with CSS Grid. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,[email protected],400;1,500&family=Inter:[email protected];400;500;600&family=Space+Grotesk:[email protected];500;600;700&display=swap");
* {
  outline: none;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

body {
  background-color: #121418;
  display: flex;
  font-family: "Inter", sans-serif;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 0 2em;
  font-weight: 400;
  height: 100vh;
}
@media screen and (max-width: 768px) {
  body {
    padding: 0;
  }
}

.blog {
  background-color: #e9e6e4;
  max-width: 1350px;
  display: grid;
  height: 90vh;
  max-height: 800px;
  overflow: hidden;
  grid-template-columns: 15% 20% 35% 30%;
  grid-template-rows: 100%;
  width: 100%;
  padding: 40px 4px;
  position: relative;
}
@media screen and (max-width: 1030px) {
  .blog {
    grid-template-columns: 20% 50% 30%;
  }
}
@media screen and (max-width: 768px) {
  .blog {
    grid-template-columns: 25% 75%;
    width: 100%;
    max-width: none;
  }
}
@media screen and (max-width: 560px) {
  .blog {
    grid-template-columns: 100%;
  }
}
.blog-part {
  padding: 0 20px;
}
.blog-part:not(:last-child) {
  border-right: 1px solid #94918f;
}
.blog-menu {
  font-size: 22px;
  text-decoration: none;
  color: #161419;
  display: flex;
  letter-spacing: -0.5px;
  align-items: center;
}
@media screen and (max-width: 1260px) {
  .blog-menu {
    font-size: 1.6vw;
  }
}
.blog-menu svg {
  width: 22px;
  margin-left: 4px;
}
.blog-menu + .blog-menu {
  margin-top: 24px;
}
.blog-menu.mention {
  margin-top: auto;
  font-size: 19px;
}
@media screen and (max-width: 1260px) {
  .blog-menu.mention {
    font-size: 1.4vw;
  }
}
.blog-menu.subscribe {
  margin-top: 8px;
  font-size: 19px;
  position: relative;
}
@media screen and (max-width: 1260px) {
  .blog-menu.subscribe {
    font-size: 1.4vw;
  }
}
.blog-menu.subscribe:before {
  content: "";
  width: 16px;
  height: 16px;
  background-color: #161419;
  left: 0;
  border-radius: 1px;
  margin-right: 14px;
}
.blog-menu.rounded:before {
  content: "";
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background-color: #161419;
  margin-right: 12px;
}
.blog .is-menu {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 1030px) {
  .blog .is-menu {
    display: none;
  }
}
.blog-big__title {
  font-size: 132px;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -5px;
  line-height: 1;
  margin-bottom: 6px;
}
@media screen and (max-width: 1400px) {
  .blog-big__title {
    font-size: 120px;
  }
}
@media screen and (max-width: 1260px) {
  .blog-big__title {
    font-size: 9vw;
    letter-spacing: -2px;
  }
}
@media screen and (max-width: 560px) {
  .blog-big__title {
    font-size: 36px;
    margin-bottom: 12px;
  }
}
.blog-header {
  display: flex;
  flex-direction: column;
}
.blog-article {
  padding: 0 20px;
}
.blog-article img {
  height: 260px;
  max-height: 22vh;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  filter: grayscale(1);
}

.page-number {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  font-size: 72px;
  text-align: center;
  letter-spacing: -3px;
  font-weight: lighter;
  font-family: "Space Grotesk", sans-serif;
  border-right: 1px solid #94918f;
  white-space: nowrap;
}
@media screen and (max-width: 1260px) {
  .page-number {
    font-size: 5vw;
  }
}

.small-title {
  border-bottom: 1px solid #94918f;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
@media screen and (max-width: 560px) {
  .small-title {
    font-size: 14px;
    position: absolute;
    top: 10px;
    right: 24px;
    border-bottom: 0;
  }
}

.date {
  display: flex;
  justify-content: flex-end;
}

.blog-article h2 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.2;
  margin: 8px 0 8px;
}
.blog-article h2 span {
  font-family: "Playfair Display", serif;
}
.blog-article p {
  line-height: 1.5;
  margin: 14px 0;
}
.blog-article a {
  color: #161419;
  text-decoration: none;
  font-size: 26px;
  letter-spacing: -1px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid #94918f;
  padding-top: 14px;
}
.blog-article a svg {
  width: 26px;
  margin-right: 10px;
}

.blog-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.blog-detail span {
  font-family: "Playfair Display", serif;
}

.blog-header-container {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  -ms-scroll-snap-type: y mandatory;
      scroll-snap-type: y mandatory;
  border-right: 1px solid #94918f;
}
@media screen and (max-width: 768px) {
  .blog-header-container {
    border-right: 0;
  }
}
.blog-header-container > * {
  flex-shrink: 0;
  min-height: 100%;
  scroll-snap-align: start;
}
.blog-header-container .blog-article:not(.header-article) {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

marquee {
  font-size: 20px;
  background-color: #121418;
  color: #e9e6e4;
  padding: 6px 0;
  width: calc(100% + 44px);
  margin-left: -20px;
  flex-shrink: 0;
}
marquee span:before {
  display: inline-block;
  content: "";
  border-radius: 50%;
  width: 10px;
  height: 10px;
  position: relative;
  top: -1px;
  vertical-align: baseline;
  background-color: #e9e6e4;
  margin: 0 16px;
}

.blog-right {
  overflow: auto;
  height: calc(100% + 60px);
}
.blog-right .rounded {
  font-style: italic;
  font-size: 18px;
}
.blog-right .rounded:before {
  content: "";
  border-radius: 50%;
  width: 9px;
  height: 9px;
  background-color: #161419;
  margin-right: 6px;
}

.blog-right-title {
  font-size: 25px;
  font-family: "Playfair Display", serif;
}

.blog-right-title-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #94918f;
  margin-bottom: 20px;
  padding-bottom: 20px;
  margin-top: 100px;
  letter-spacing: -1px;
}
@media screen and (max-width: 1400px) {
  .blog-right-title-container {
    margin-top: 88px;
  }
}
@media screen and (max-width: 1260px) {
  .blog-right-title-container {
    margin-top: 6vw;
  }
}
@media screen and (max-width: 1030px) {
  .blog-right-title-container {
    margin-top: 5vw;
  }
}

.blog-title-date {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.blog-right-page {
  font-size: 56px;
  margin-bottom: 16px;
  font-family: "Space Grotesk", sans-serif;
}
.blog-right-page-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 28px;
  font-weight: 600;
  max-width: 16ch;
  letter-spacing: -2px;
}
.blog-right-page-subtitle {
  max-width: 33ch;
  font-size: 15px;
  margin-top: 12px;
  line-height: 1.4;
}

.blog-right-container + .blog-right-container {
  margin-top: 40px;
}

.right-blog {
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 768px) {
  .right-blog {
    display: none;
  }
}
@media screen and (max-width: 1030px) {
  .right-blog .blog-menu {
    display: none;
  }
}

::-webkit-scrollbar {
  display: none;
}

.circle {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: #121418;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #e9e6e4;
  padding: 20px;
  text-align: center;
  margin-top: 40px;
}
.circle-title {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
  font-family: "Space Grotesk", sans-serif;
}
@media screen and (max-width: 1030px) {
  .circle-title {
    display: none;
  }
}
.circle-subtitle {
  max-width: 30ch;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 16px;
}
.circle-footer {
  font-family: "Playfair Display", serif;
  font-size: 30px;
}

@media screen and (max-width: 560px) {
  .blog-is-sticky {
    display: none;
  }
}
</style>
</head>
<body>
  <div class="blog">
 <div class="blog-part is-menu">
  <a href="#" class="blog-menu">
   Work
   <svg fill="none" stroke="currentColor" stroke-width=".7" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-up-right" viewBox="0 0 24 24">
    <path d="M7 17L17 7M7 7h10v10" />
   </svg>
  </a>
  <a href="#" class="blog-menu">Studio</a>
  <a href="#" class="blog-menu">Blog</a>
  <a href="#" class="blog-menu">Contact</a>
  <a href="#" class="blog-menu mention">@MagazineDope</a>
  <a href="#" class="blog-menu subscribe">Subscribe</a>
 </div>
 <div class="blog-header blog-is-sticky">
  <div class="blog-article header-article">
   <div class="blog-big__title">Self</div>
   <div class="blog-menu rounded small-title">Pinned Issue</div>
  </div>
  <div class="blog-article page-number">
   NO. 01
  </div>
 </div>
 <div class="blog-header-container">
  <div class="blog-header">
   <div class="blog-article header-article">
    <div class="blog-big__title">Esteem</div>
    <div class="blog-menu small-title date">12.06.2021</div>
   </div>
   <div class="blog-article">
    <img src="https://images.unsplash.com/photo-1496629062893-b0f566065d44?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjV8fGJsYWNrJTIwYW5kJTIwd2hpdGV8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
    <h2>Sharing The <span>Widespread</span> Acclaim About Motivation</h2>
    <div class="blog-detail">
     <span>By Richard Carnation</span>
     <span>5 Min Read</span>
    </div>
    <p>Demo text</p>
    <a href="#">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
      <path d="M15 10l5 5-5 5" />
      <path d="M4 4v7a4 4 0 004 4h12" />
     </svg>
     See More
    </a>
   </div>
  </div>
  <div class="blog-header">
   <div class="blog-article header-article">
    <div class="blog-big__title">Love</div>
    <div class="blog-menu small-title date">12.06.2021</div>
   </div>
   <div class="blog-article">
    <img src="https://images.unsplash.com/photo-1529255484355-cb73c33c04bb?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTh8fGJsYWNrJTIwYW5kJTIwd2hpdGV8ZW58MHwwfDB8fA%3D%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
    <h2>Talking About <span>Vulnerability</span> During Quarantine</h2>
    <div class="blog-detail">
     <span>By Tom Hiddleston</span>
     <span>5 Min Read</span>
    </div>
    <p>demo text</p>
    <a href="#">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
      <path d="M15 10l5 5-5 5" />
      <path d="M4 4v7a4 4 0 004 4h12" />
     </svg>
     See More
    </a>
   </div>
  </div>
  <div class="blog-header">
   <div class="blog-article header-article">
    <div class="blog-big__title">Control</div>
    <div class="blog-menu small-title date">12.06.2021</div>
   </div>
   <div class="blog-article">
    <img src="https://images.unsplash.com/photo-1616248249518-b16013cd4e42?ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTkzfHxibGFjayUyMGFuZCUyMHdoaXRlfGVufDB8MHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="">
    <h2>How 2020 Changed <span>Understanding</h2>
    <div class="blog-detail">
     <span>By Scarlett Witch</span>
     <span>5 Min Read</span>
    </div>
    <p>demo text</p>
    <a href="#">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-corner-down-right" viewBox="0 0 24 24">
      <path d="M15 10l5 5-5 5" />
      <path d="M4 4v7a4 4 0 004 4h12" />
     </svg>
     See More
    </a>
   </div>
  </div>
 </div>
 <div class="blog-part right-blog">
  <marquee width="100%" direction="left">
   <span>Now And Then You Miss It Sounds Make You Cry</span>
   <span>Now In - MoMa Sharing Exhibition NOW</span>
   <span>NYC Opens After Long Lockdown Check</span>
  </marquee>
  <div class="blog-right-title-container">
   <div class="blog-right-title">
    Featured Articles
   </div>
   <div class="blog-menu rounded">See All</div>
  </div>
  <div class="blog-right">
   <div class="blog-right-container">
    <div class="blog-title-date">
     <div class="blog-right-page">1</div>
     <div class="date">12.06.2021</div>
    </div>
    <div class="blog-right-page-title">Blonde - Widespread Acclaim</div>
    <div class="blog-right-page-subtitle">demo text</div>
   </div>
   <div class="blog-right-container">
    <div class="blog-title-date">
     <div class="blog-right-page">2</div>
     <div class="date">12.06.2021</div>
    </div>
    <div class="blog-right-page-title">Introspective Lyrics and Beats</div>
    <div class="blog-right-page-subtitle">demo text</div>
   </div>
   <div class="blog-right-container">
    <div class="blog-title-date">
     <div class="blog-right-page">3</div>
     <div class="date">12.06.2021</div>
    </div>
    <div class="blog-right-page-title">The Language Of Gris: Comples Beauty Of Monochrome</div>
    <div class="blog-right-page-subtitle">demo text</div>
   </div>
   <div class="blog-right-container">
    <div class="blog-title-date">
     <div class="blog-right-page">4</div>
     <div class="date">12.06.2021</div>
    </div>
    <div class="blog-right-page-title">A24 IS LAUNCHING ITS OWN BEAUTY BRAND</div>
    <div class="blog-right-page-subtitle">demo text</div>
   </div>
   <div class="blog-right-container">
    <div class="blog-title-date">
     <div class="blog-right-page">5</div>
     <div class="date">12.06.2021</div>
    </div>
    <div class="blog-right-page-title">Elon Musk's SpaceX is launching a moon satellite</div>
    <div class="blog-right-page-subtitle">demo text</div>
   </div>
   <div class="blog-right-container">
    <div class="blog-title-date">
     <div class="blog-right-page">6</div>
     <div class="date">12.06.2021</div>
    </div>
    <div class="blog-right-page-title">What Happens When You Leave Your Old life Behind</div>
    <div class="blog-right-page-subtitle">demo text</div>
   </div>
   <div class="circle">
    <div class="circle-title">Leave Your Old Life Behind</div>
    <div class="circle-subtitle">demo text.</div>
    <div class="circle-footer">Explore</div>
   </div>
  </div>
 </div>
</div>
</body>
</html>

2. By Bilal Ayub

Made by Bilal Ayub. Responsive Minimal Blog Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700|Droid+Serif:400,700,400italic,700italic|Droid+Sans:400,700');

/* CLEARFIX */
.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  height: 100%;
  min-width: 320px;
  max-height: 100%;
  font-size: 62.5%; }

body {
  height: 100%;
  max-height: 100%;
  font-family: Droid Serif, Georgia, serif;
  font-size: 1.8rem;
  line-height: 1.5em;
  color: #3A4145;
  width: 100%;
  background: #333 }

::selection {
  color: #ffffff;
  background: #FF3399;
  text-shadow: none;
}

h2, h3, h4 {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0;
  font-family: 'Droid Sans', Arial, sans-serif;
  font-weight: 400;
  color: #566160; }

h2 {
  font-size: 2.8rem;
  line-height: 1.2em;
  letter-spacing: -1px;
  text-indent: -2px; }

h3 {
  font-size: 2.4rem; }

h4 {
  font-size: 2.0rem; }

a {
  color: #4a4a4a;
  transition: color ease 0.3s, border ease 0.3s, background ease 0.3s; }

a:hover {
  color: #57A3E8; }

h2 a, h3 a, h4 a {
  color: #50585D; }

p, ul, ol {
  margin: 1.6em 0; }

ol ol, ul ul,
ul ol, ol ul {
  margin: 0.4em 0; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #efefef;
  margin: 3.2em 0;
  padding: 0; }

blockquote {
  margin: 1.6em 0 1.6em 0;
  padding: 0 0 0 1.6em;
  border-left: #4a4a4a 0.4em solid;
  margin: 0.8em 0;
  font-style: italic; }

blockquote small {
  display: inline-block;
  margin: 0.8em 0 0.8em 1.5em;
  font-size: 0.9em;
  color: #ccc; }

blockquote small:before {
  content: '\2014 \00A0'; }

article p:first-of-type:first-letter {
  float: left;
  font-size: 5.8rem;
  line-height: 5.4rem;
  margin: 0 6px 0 0; }

nav {
  position: fixed;
  z-index: 1;
  font-size: 18px;
  line-height: 48px;
  top: 0px;
  bottom: 0;
  left: 0;
  width: 40%;
  background-color: black;
  color: #ffffff;
  text-align: center;
  overflow: auto;
}

h4 {
  font-size: 4rem;
  margin: 0 auto;
  padding: 0 10%;
  color: #ffffff; }

.centre {
  top: 25%;
  width: 100%;
  height: 50%;
  position: absolute;
}

nav ul {
  display: block;
  list-style: none;
  padding: 46px 11.4%;
  margin: 30px 0 30px 0;
}

nav li {
  float: left;
  width: 100%;
  border-bottom: 1px solid #555555;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding: 10px 0; }

nav li:last-child {
  border-bottom: none; }

nav {
  color: #666666; }

nav a {
  color: #666666;
  text-decoration: none; }

nav a:hover {
  color: #ffffff;
  text-decoration: none; }

h3, h4 {
  font-family: Montserrat, Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 700; }

h3 {
  margin: 0;
  padding: 0;
  font-size: 2rem; }

nav li .date {
  font-size: 1.2rem;
  line-height: 2rem; }

main {
  width: 60%;
  position: relative;
  padding: 0;
  margin: 0 0 0 40%;
}

article {
  padding: 40px 11.14%;
  word-break: break-word;
  hyphens: auto;
  background-color: #ffffff;
  border-radius: 4px; }

h2 {
  font-size: 7.4rem;
  font-weight: 700;
  text-transform: uppercase;
  font-family: Montserrat, Arial, sans-serif;
  text-align: center;
  opacity: 0.95;
  padding: 0 11.4%;
  font-style: normal;
  font-size: 4.2rem;
    line-height: 4.6rem;
    padding: 0;
}

  h2, h2 a {
    color: #333638; }

.post-end {
  color: #BBC7CC;
  margin: 0;
}

.post-end span {
  float: right;
  font-style: italic; }

article img {
  display: block;
  max-width: 100%;
  margin: 0 auto; }

  article {
    padding: 8%; }


@media only screen and (min-width: 900px) {
  article {
    margin: 0;
    border-radius: 0;
    border-bottom: 1px dotted #222;
  } }

@media only screen and (max-width: 900px) {

  nav {
    display: none; }

  blockquote {
    margin-left: 0; }

  p:first-child:first-letter {
    font-size: 5.2rem;
    line-height: 5rem;
    margin: 0 4px 0 0; }

  main {
    width: 80%;
    max-width: none;
    margin: 10%; }

  article {
    font-size: 0.9em;
    line-height: 1.6em;
    margin-bottom: 30px;
    padding: 8%;
  }

  h2 {
    font-size: 2.4rem;
    line-height: 1.1em;
    letter-spacing: 0; }

  h3 {
    font-size: 2.0rem;
    line-height: 2.2rem; }

  h4 {
    font-size: 1.8rem;
    line-height: 2.0rem; }}

@media only screen and (max-width: 500px) {
  
  main {
    width: 95%;
    max-width: none;
    margin: 3% auto; }

  article {
    width: auto;
    font-size: 0.8em;
    line-height: 1.6em; }

  p:first-child:first-letter {
    font-size: 4.4rem;
    line-height: 4.6rem;
    margin: 0 4px 0 0; }

  h2 {
    font-size: 2.4rem;
    line-height: 1.1em;
    letter-spacing: 0; }

  h3 {
    font-size: 2.0rem;
    line-height: 2.2rem; }

  h4 {
    font-size: 1.8rem;
    line-height: 2.0rem; }
 }
</style>
</head>
<body>
  <nav>
  <div class="centre">
    <h4>Quantum Fuzziness</h4>
    <ul class="clearfix">    
      <li>
        <h3>
          <a href="#">Imaginary Time</a>
        </h3>
        <div class="date">3 hours ago</div>
      </li>
      
      <li>
        <h3>
          <a href="#">Alpha Particles</a>
        </h3>
        <div class="date">4 days ago</div>
      </li>
      
      <li>
        <h3>
          <a href="#">M Theory</a>
        </h3>
        <div class="date">1 week ago</div>
      </li>
      
    </ul>
  </div>
</nav>

<main>
  
  <article>
    
    <h2>Imaginary Time</h2>
    <p>Demo text</p>    
    <blockquote>text<small>text</small></blockquote>    <    
    <p class="post-end clearfix">3 hours ago<span>I. Newton</span></p>
    
  </div>
</article>
<article>
  <h2>Alpha Particles</h2>
  <p>Demo text</p>    
  <p class="post-end clearfix">4 days ago<span>L. Boltzmann</span></p>
</article>

<article>
  <h2>M Theory</h2>  
  <p><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Calabi_yau.jpg/230px-Calabi_yau.jpg"></p>  
  <p>Demo text</p>
  <p class="post-end clearfix">1 week ago<span>M. Planck</span></p>
  
</article>
</main>

</body>
</html>

3. By Rich Lewis

Made by Rich Lewis. Grid-based blog layout with hover effects. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css'>
  
<style>
@import url("https://fonts.googleapis.com/css?family=Lato:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i");
* {
  font-family: Lato, sans-serif;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(to top, #37ecba 0%, #72afd3 100%);
}

.container {
  max-width: 948px;
  margin: 4em auto;
  padding: 4em;
  background: #fff;
  border-radius: 1em;
}

section.cards {
  margin: 0 auto;
  display: grid;
  grid-auto-flow: row dense;
  grid-template-columns: repeat(3, 256px);
  grid-template-rows: repeat(12, 196px);
  grid-gap: 16px;
}

.card {
  display: flex;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.25s ease;
}

.card:hover {
  transform: scale(1.05);
}

.vertical {
  flex-direction: column;
  grid-row: span 2;
  grid-column: span 1;
}

.horizontal {
  flex-direction: row;
  grid-row: span 1;
  grid-column: span 2;
}

.reverse-horizontal {
  flex-direction: row-reverse;
  grid-row: span 1;
  grid-column: span 2;
}

.horizontal .card__img, .reverse-horizontal .card__img {
  height: 100%;
}

.vertical .card__img {
  width: 100%;
}

.card__content {
  padding: 16px;
}

.card__type {
  font-variant: small-caps;
  letter-spacing: 2px;
  opacity: 0.9;
  color: palevioletred;
  padding-bottom: 0.5em;
}

.card__title {
  font-size: 18px;
  opacity: 0.8;
  font-weight: 700;
  padding-bottom: 0.5em;
  transition: all 0.25s ease;
}

.card__date {
  font-size: 14px;
  padding-bottom: 0.5em;
  opacity: 0.3;
}

.card__time-to-read {
  font-style: italic;
}

.card__excerpt {
  font-size: 16px;
  padding-bottom: 0.5em;
}

.card__tags {
  margin-top: auto;
}

.tag {
  display: inline;
  background: papayawhip;
  padding: 0.5em;
  border-radius: 0.5em;
  font-size: 12px;
  color: palevioletred;
  user-select: none;
  cursor: pointer;
}

.tag:hover {
  background: #ffe5bc;
}

.tag:active {
  background: #ffdca2;
}

.tag i {
  margin-right: 4px;
}
</style>
</head>
<body>
  <div class="container">
  <h1> Blog </h1>
  <p> This is my blog! </h1>

  <section class="cards">
    <article class="horizontal card">
      <img class="card__img" src="https://picsum.photos/256/196/?image=321" class="card__image">
      <div class="card__content">
        <div class="card__type">article</div>
        <div class="card__title">
          Test Post: Electric Boogaloo
        </div>
        <div class="card__date">14 March 2011 &middot; <span class="card__time-to-read">5 min read</span></div>
        <div class="card__excerpt">
          This is a test article, in a perculiar context, to see whether grid and flexbox works to make a blog...
        </div>
        <div class="card__tags">
          <div class="tag"><i class="fa fa-tag"></i>test</div>
          <div class="tag"><i class="fa fa-tag"></i>test</div>
        </div>
      </div>
    </article>
    <article class="vertical card">
      <img class="card__img" src="https://picsum.photos/256/196/?image=990" class="card__image">
      <div class="card__content">
        <div class="card__type">article</div>
        <div class="card__title">
          Test Post: Electric Boogaloo
        </div>
        <div class="card__date">14 March 2011 &middot; 5 min read</div>
        <div class="card__excerpt">
          This is a test article, in a perculiar context, to see whether grid and flexbox works to make a blog...
        </div>
        <div class="card__tags">
          <div class="tag"><i class="fa fa-tag"></i>test</div>
          <div class="tag"><i class="fa fa-tag"></i>test</div>
        </div>
      </div>
    </article>
    <article class="vertical card">
      <img class="card__img" src="https://picsum.photos/256/196/?image=123" class="card__image">
      <div class="card__content">
        <div class="card__type">article</div>
        <div class="card__title">
          Test Post: Electric Boogaloo
        </div>
        <div class="card__date">14 March 2011 &middot; 5 min read</div>
        <div class="card__excerpt">
          This is a test article, in a perculiar context, to see whether grid and flexbox works to make a blog...
        </div>
        <div class="card__tags">
          <div class="tag"><i class="fa fa-tag"></i>test</div>
          <div class="tag"><i class="fa fa-tag"></i>test</div>
        </div>
      </div>
    </article>
    <article class="vertical card">
      <img class="card__img" src="https://picsum.photos/256/196/?image=421" class="card__image">
      <div class="card__content">
        <div class="card__type">article</div>
        <div class="card__title">
          Test Post: Electric Boogaloo
        </div>
        <div class="card__date">14 March 2011 &middot; 5 min read</div>
        <div class="card__excerpt">
          This is a test article, in a perculiar context, to see whether grid and flexbox works to make a blog...
        </div>
        <div class="card__tags">
          <div class="tag"><i class="fa fa-tag"></i>test</div>
          <div class="tag"><i class="fa fa-tag"></i>test</div>
        </div>
      </div>
    </article>
    <article class="horizontal card">
      <img class="card__img" src="https://picsum.photos/256/196/?image=424" class="card__image">
      <div class="card__content">
        <div class="card__type">article</div>
        <div class="card__title">
          Test Post: Electric Boogaloo
        </div>
        <div class="card__date">14 March 2011 &middot; 5 min read</div>
        <div class="card__excerpt">
          This is a test article, in a perculiar context, to see whether grid and flexbox works to make a blog...
        </div>
        <div class="card__tags">
          <div class="tag"><i class="fa fa-tag"></i>test</div>
          <div class="tag"><i class="fa fa-tag"></i>test</div>
        </div>
      </div>
    </article>
    <article class="vertical card">
      <img class="card__img" src="https://picsum.photos/256/196/?image=721" class="card__image">
      <div class="card__content">
        <div class="card__type">article</div>
        <div class="card__title">
          Test Post: Electric Boogaloo
        </div>
        <div class="card__date">14 March 2011 &middot; 5 min read</div>
        <div class="card__excerpt">
          This is a test article, in a perculiar context, to see whether grid and flexbox works to make a blog...
        </div>
        <div class="card__tags">
          <div class="tag"><i class="fa fa-tag"></i>test</div>
          <div class="tag"><i class="fa fa-tag"></i>test</div>
        </div>
      </div>
    </article>
    <article class="vertical card">
      <img class="card__img" src="https://picsum.photos/256/196/?image=426" class="card__image">
      <div class="card__content">
        <div class="card__type">article</div>
        <div class="card__title">
          Test Post: Electric Boogaloo
        </div>
        <div class="card__date">14 March 2011 &middot; 5 min read</div>
        <div class="card__excerpt">
          This is a test article, in a perculiar context, to see whether grid and flexbox works to make a blog...
        </div>
        <div class="card__tags">
          <div class="tag"><i class="fa fa-tag"></i>test</div>
          <div class="tag"><i class="fa fa-tag"></i>test</div>
        </div>
      </div>
    </article>
    <article class="reverse-horizontal card">
      <img class="card__img" src="https://picsum.photos/256/196/?image=161" class="card__image">
      <div class="card__content">
        <div class="card__type">article</div>
        <div class="card__title">
          Test Post: Electric Boogaloo
        </div>
        <div class="card__date">14 March 2011 &middot; 5 min read</div>
        <div class="card__excerpt">
          This is a test article, in a perculiar context, to see whether grid and flexbox works to make a blog...
        </div>
        <div class="card__tags">
          <div class="tag"><i class="fa fa-tag"></i>test</div>
          <div class="tag"><i class="fa fa-tag"></i>test</div>
        </div>
      </div>
    </article>
  </section>
</div>
</body>
</html>

4. By Envato Tuts+

Made by Envato Tuts+. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bulma/0.3.1/css/bulma.min.css'>
  
<style>
.post {
  position: relative;
  padding: 20px;
  flex-basis: auto;
}

.post__category {
  font-size: .8rem;
  text-transform: uppercase;
}

.post__title {
  font-size: 1.8rem;
  font-weight: 600;
  margin: 20px 0 10px;
}

.post__content {
  font-size: 1.3rem;
  margin-bottom: 50px;
}

.post__category,
.post__permalink {
  color: #4a4a4a;
  text-decoration: underline;
}

.post__permalink {
  position: absolute;
  bottom: 20px;
}

.fb-auto {
  flex-basis: auto;
}

.pink {
  background: #ffdae0;
}

.gray {
  background: #e7f0da;
}

.green {
  background: #ddebd0;
}

.gold {
  background: #fcf5b6;
}

.blue {
  background: #cae9ef;
}

.red {
  background: #f8c9c1;
}
</style>
</head>
<body>
  <section class="section">
  <div class="container">

    <!-- FIRST ROW -->
    <div class="tile is-ancestor">
      <div class="tile is-parent">
        <article class="tile is-child green post">
          <a class="post__category" href="">Animals</a>
          <h2 class="post__title">Blog #1</h2>
          <div class="post__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt blandit tellus. Nam et varius lectus. Mauris placerat eros lorem, vitae aliquam elit viverra eget. Vestibulum et rhoncus ante.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
      </div>

      <div class="tile is-6 is-parent">
        <article class="tile is-child pink post">
          <a class="post__category" href="">Other</a>
          <h2 class="post__title">Blog #2</h2>
          <div class="post__content">Pellentesque vestibulum dui in mauris varius, quis semper justo fringilla. Curabitur nec suscipit velit, eu aliquam sem. Aliquam erat volutpat. Praesent volutpat tincidunt porta. Mauris a maximus elit. Etiam ante tortor, faucibus sit amet gravida
            eget, accumsan et metus. Morbi sem metus, suscipit ac diam eget, aliquam pharetra est. Duis hendrerit nibh vel mi rhoncus sagittis. Suspendisse et lectus cursus, iaculis risus vitae, convallis nunc.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
      </div>

      <div class="tile is-vertical is-parent">
        <article class="tile is-child blue post">
          <a class="post__category" href="">travel</a>
          <h2 class="post__title">Blog #3</h2>
          <div class="post__content">Cras aliquam sit amet turpis eget sodales. Praesent scelerisque aliquet rhoncus. Nunc rhoncus eros vehicula, sollicitudin ligula quis, ullamcorper nisl.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
        <article class="tile is-child gold post">
          <a class="post__category" href="">holidays</a>
          <h2 class="post__title">Blog #4</h2>
          <div class="post__content">Nulla neque tortor, posuere eget euismod sit amet, auctor non odio. Nulla quis aliquam nibh. Donec maximus metus nec posuere commodo.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
      </div>
    </div>

    <!-- SECOND ROW -->
    <div class="tile is-ancestor">
      <div class="tile is-6 is-parent">
        <article class="tile is-child gray post">
          <a class="post__category" href="">technology</a>
          <h2 class="post__title">Blog #5</h2>
          <div class="post__content">Duis mattis ex nisi, lobortis lacinia ipsum suscipit in. Quisque sed leo at purus eleifend porttitor. Quisque ultricies, erat a fringilla efficitur, urna arcu sodales erat, ac auctor mauris velit at elit. Duis fringilla diam egestas diam vehicula
            auctor. Cras non bibendum ex. Integer tempor mollis dignissim. Maecenas egestas tortor mi, in egestas mi vulputate vel. Suspendisse in mollis odio, et aliquet orci. Vivamus eleifend facilisis venenatis. Etiam lobortis nec turpis suscipit ullamcorper.
            Nunc vel lorem ac turpis luctus malesuada. Etiam vulputate vitae ex nec interdum. Maecenas condimentum volutpat turpis sed vulputate. Mauris egestas hendrerit fermentum. Proin non lacus dolor. Nulla ac hendrerit ante.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
      </div>

      <div class="tile is-vertical is-parent">
        <article class="tile is-child blue post">
          <a class="post__category" href="">trends</a>
          <h2 class="post__title">Blog #6</h2>
          <div class="post__content"> Etiam ante tortor, faucibus sit amet gravida eget, accumsan et metus. Morbi sem metus, suscipit ac diam eget, aliquam pharetra est. Duis hendrerit nibh vel mi rhoncus sagittis. Suspendisse et lectus cursus.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
        <article class="tile is-child gold post">
          <a class="post__category" href="">music</a>
          <h2 class="post__title">Blog #7</h2>
          <div class="post__content">Praesent rutrum turpis vitae massa dictum rhoncus. Nullam vel purus velit. Ut posuere velit quis arcu aliquet.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
      </div>

      <div class="tile is-parent">
        <article class="tile is-child red post">
          <a class="post__category" href="">fashion</a>
          <h2 class="post__title">Blog #8</h2>
          <div class="post__content">Duis mattis ex nisi, lobortis lacinia ipsum suscipit in. Quisque sed leo at purus eleifend porttitor. Quisque ultricies, erat a fringilla efficitur, urna arcu sodales erat, ac auctor mauris velit at elit.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
      </div>
    </div>

    <!-- THIRD ROW -->
    <div class="tile is-ancestor">
      <div class="tile is-8 is-vertical">
        <div class="tile fb-auto">
          <div class="tile is-parent">
            <article class="tile is-child blue post">
              <a class="post__category" href="">travel</a>
              <h2 class="post__title">Blog #9</h2>
              <div class="post__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tincidunt blandit tellus. Nam et varius lectus. Mauris placerat eros lorem, vitae aliquam.</div>
              <a class="post__permalink" href="">Learn more</a>
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child gray post">
              <a class="post__category" href="">media</a>
              <h2 class="post__title">Blog #10</h2>
              <div class="post__content">Aliquam congue congue tempus. Aenean hendrerit nisl a massa venenatis bibendum. Nullam fermentum augue sit amet magna euismod luctus. Morbi massa neque.</div>
              <a class="post__permalink" href="">Learn more</a>
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child red post">
              <a class="post__category" href="">animals</a>
              <h2 class="post__title">Blog #11</h2>
              <div class="post__content">Etiam ante tortor, faucibus sit amet gravida eget, accumsan et metus. Morbi sem metus, suscipit ac diam eget, aliquam pharetra est. Duis hendrerit nibh vel mi rhoncus sagittis. Suspendisse et lectus cursus.</div>
              <a class="post__permalink" href="">Learn more</a>
            </article>
          </div>
        </div>

        <div class="tile fb-auto">
          <div class="tile is-parent">
            <article class="tile is-child pink post">
              <a class="post__category" href="">technology</a>
              <h2 class="post__title">Blog #12</h2>
              <div class="post__content">Aliquam congue congue tempus. Aenean hendrerit nisl a massa venenatis bibendum. Nullam fermentum augue sit amet magna euismod luctus. Morbi massa neque.</div>
              <a class="post__permalink" href="">Learn more</a>
            </article>
          </div>
          <div class="tile is-parent">
            <article class="tile is-child gold post">
              <a class="post__category" href="">fashion</a>
              <h2 class="post__title">Blog #13</h2>
              <div class="post__content">Etiam ante tortor, faucibus sit amet gravida eget, accumsan et metus.</div>
              <a class="post__permalink" href="">Learn more</a>
            </article>
          </div>
        </div>
      </div>

      <div class="tile is-parent">
        <article class="tile is-child green post">
          <a class="post__category" href="">fashion</a>
          <h2 class="post__title">Blog #14</h2>
          <div class="post__content">Duis mattis ex nisi, lobortis lacinia ipsum suscipit in. Quisque sed leo at purus eleifend porttitor. Quisque ultricies, erat a fringilla efficitur.</div>
          <a class="post__permalink" href="">Learn more</a>
        </article>
      </div>
    </div>

  </div>
  <!-- /container -->
</section>
</body>
</html>

5. By Sebastien Treciak

Made by Sebastien Treciak. Photo Blog Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css2?family=Raleway:[email protected];800&display=swap" rel="stylesheet"
  <title></title> 
<style>
img{
	width: 30%;
	margin: 1.66%;
	float: left;
}
p{
	font-family: raleway;
	margin-left: 1.66%;
	font-size: 23px;
	font-weight: 800;
	text-transform: uppercase;
	width: 30%;
	border-bottom: 2px solid lightgray;
	padding-bottom: 10px;
}
</style>
</head>
<body>
<p>Sebastien/Treciak</p>
<!-- Massimo Margagnoni -->
<table>
<img src="https://c1.staticflickr.com/9/8450/8026519634_f33f3724ea_b.jpg">
<img src="https://c2.staticflickr.com/8/7218/7209301894_c99d3a33c2_h.jpg">
<img src="https://c2.staticflickr.com/8/7231/6947093326_df216540ff_b.jpg">
</table>

<!-- Giuseppe Milo -->
<img src="https://c1.staticflickr.com/9/8788/17367410309_78abb9e5b6_b.jpg">
<img src="https://c2.staticflickr.com/6/5814/20700286354_762c19bd3b_b.jpg">
<img src="https://c2.staticflickr.com/6/5647/21137202535_404bf25729_b.jpg">

<!-- GΓΆrlitzPhotography -->
<img src="https://c2.staticflickr.com/6/5588/14991687545_5c8e1a2e86_b.jpg">
<img src="https://c2.staticflickr.com/4/3888/14878097108_5997041006_b.jpg">
<img src="https://c2.staticflickr.com/8/7579/15482110477_0b0e9e5421_b.jpg">

<!-- All Photos Licensed Under Creative Commons 2.0 -->
<!-- https://creativecommons.org/licenses/by/2.0/legalcode  -->
</body>
</html>

6. By Jerome A

Made by Jerome A. Simple Blog Layout using CSS. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 
<style>
@charset "UTF-8";
body {
  box-sizing: border-box;
}

.triangle {
  width: 17%;
  border-bottom: 75rem solid green;
  border-right: 7rem solid transparent;
  color: white;
  font-size: 1.5rem;
  position: fixed;
}
.triangle > ul {
  position: fixed;
  list-style: none;
  margin-top: 10rem;
  margin-left: 2.55%;
  font-variant: small-caps;
}
.triangle > ul a {
  color: white;
  text-decoration: none;
  margin-left: -6px;
  padding-left: 5px;
}
.triangle > ul a:hover, .triangle > ul a:active {
  margin-left: -10px;
  padding-left: 5px;
  border-left: 4px solid white;
}

.date {
  color: green;
  font-size: 1.5rem;
}

.excerpt {
  margin-bottom: 4rem;
  margin-top: 1.25rem;
}
.excerpt:after {
  font-size: 1rem;
  content: "read more β†’";
}

.right {
  margin-left: 50%;
  font-size: 2.3rem;
  margin-top: 3.125rem;
  margin-right: 2rem;
  float: left;
  height: 37.5rem;
}

.container {
  max-width: 60rem;
}

@media screen and (max-width: 980px) {
  .right {
    margin-left: 30%;
    font-size: 1.8rem;
  }

  .triangle > ul {
    margin-left: 0;
    font-size: 1.2rem;
  }
}
</style>
</head>
<body>
  <div class="container">
<div class="triangle">
  <ul>
    <li><a href="#">home</a></li>
    <li><a href="#">twitter</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">archive</a></li>
    <li><a href="#">rss</a></li>
  </ul>
</div>
  <div class="right">
    <div class="date">
      2 days ago
    </div>
    <section class="excerpt">text.<br>
    </section>
    <div class="date">
      4 days ago
    </div>
    <section class="excerpt">text.<br>
    </section>
    <div class="date">
      8 days ago
    </div>
    <section class="excerpt">text<br>
    </section>
</div>
</body>
</html>

7. By Beto da Silva

Made by Beto da Silva. Mobile Blog layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Arvo|PT+Sans:700" rel="stylesheet"> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<style>
@charset "UTF-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.viewer {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVQImWNgYGD4z0AswK4SAFXuAf8EPy+xAAAAAElFTkSuQmCC) repeat;
}

.box {
  width: 520px;
  min-height: 80vh;
  padding: 0 40px;
  margin-bottom: 20px;
  box-shadow: 2px 2px 10px #999999;
}

.header {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-transform: uppercase;
  color: #FFFFFF;
  background: #8e44ad url(https://picsum.photos/723/1024/?blur) no-repeat 0 -60px;
  background-size: cover;
  font-family: "Open Sans", sans-serif;
}
.header .header--wrapper {
  padding: 40px 0;
}
.header h1 {
  max-width: 50%;
  font-size: 42px;
  line-height: 1.4em;
  margin-top: 0.5em;
}
.header .tag {
  border: 1px solid #fff;
  align-self: flex-start;
  background: #fff;
  color: #2F343A;
  letter-spacing: 1.5px;
  padding: 10px 20px;
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.67s, color 0.5s;
}
.header .tag:hover {
  background: transparent;
  color: #fff;
}
.header .author {
  background: rgba(0, 0, 0, 0.3);
}

.footer {
  display: flex;
  margin-left: -40px;
  margin-right: -40px;
  margin-top: 40px;
  padding: 30px 40px;
  justify-content: space-between;
  color: #2F343A;
  text-transform: uppercase;
  background: #fff;
}
.footer > ul {
  display: flex;
}
.footer > ul > li {
  width: 24px;
  color: #BDBFC2;
}
.footer > ul > li.span {
  color: #2F343A;
}

.btn {
  cursor: pointer;
}

.content {
  background: #F8F9FA;
  color: #616973;
  padding-top: 40px;
}
.content p {
  font-family: "Arvo", serif;
  font-size: 18px;
  line-height: 2.3em;
  word-spacing: 4px;
  margin-bottom: 20px;
}
.content p > span.big-letter {
  color: #2F343A;
  font-size: 7em;
  line-height: 0.5em;
  float: left;
  margin: 30px 30px 20px 0;
}

.comments {
  display: flex;
  flex-flow: column;
  height: 100%;
  background: #FFFFFF;
  justify-content: space-around;
}
.comments__header {
  display: flex;
  justify-content: center;
  padding-top: 2em;
  padding-bottom: 1em;
  text-transform: uppercase;
}
.comments__header-title, .comments__header-icon {
  margin-left: auto;
}
.comments__header-icon {
  font-size: 1.5em;
}

.comment-box {
  display: flex;
}
.comment-box:last-child {
  margin-bottom: 1em;
}

.comment-avatar {
  align-self: flex-start;
  margin-right: 2em;
}

.comment-text {
  flex-grow: 3;
  align-items: baseline;
}
.comment-text > h5 {
  display: inline-block;
  margin-right: 1em;
}
.comment-text > p {
  margin: 1em 0;
}

.comment-time {
  color: #BDBFC2;
}
.comment-time:before {
  display: inline-block;
  content: "β€’";
  margin-right: 1em;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

p {
  font-family: "Arvo", serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
footer {
  font-family: "Open Sans", sans-serif;
}

h1 {
  margin: 1em 0;
}
</style>
</head>
<body>
  <div class="viewer">
  <section class="box header">
    <header>
    <span class="author">mark manson</span>
   <h1>the dark side of the digital nomad</h1>
    <span class="tag">travel</span>
    </header>
    <footer class="footer">
      <span class="btn">close</span>
      <ul>
        <li class="span"></li>
        <li></li>
        <li></li>
      </ul>
      <i class="fa fa-comment-o fa-lg btn" aria-hidden="true"></i>
    </footer>
  </section>
  <section class="box content">
    <article>
      <p><span class="big-letter clearfix">T</span>text.</p>
      <p>text</p>
    </article>
    <footer class="footer">
      <span class="btn">close</span>
      <ul>
        <li></li>
        <li class="span"></li>
        <li></li>
      </ul>
      <i class="fa fa-comment-o fa-lg btn" aria-hidden="true"></i>
    </footer>
  </section>
  <section class="box comments">
    <header class="comments__header">
      <h3 class="comments__header-title">comments (45)</h3>
      <i class="fa fa-times fa-lg comments__header-icon btn" aria-hidden="true"></i>
    </header>
    <div class="comment-box">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8cGF0aCBkPSJNNTUsMjcuNUM1NSwxMi4zMzcsNDIuNjYzLDAsMjcuNSwwUzAsMTIuMzM3LDAsMjcuNWMwLDguMDA5LDMuNDQ0LDE1LjIyOCw4LjkyNiwyMC4yNThsLTAuMDI2LDAuMDIzbDAuODkyLDAuNzUyICBjMC4wNTgsMC4wNDksMC4xMjEsMC4wODksMC4xNzksMC4xMzdjMC40NzQsMC4zOTMsMC45NjUsMC43NjYsMS40NjUsMS4xMjdjMC4xNjIsMC4xMTcsMC4zMjQsMC4yMzQsMC40ODksMC4zNDggIGMwLjUzNCwwLjM2OCwxLjA4MiwwLjcxNywxLjY0MiwxLjA0OGMwLjEyMiwwLjA3MiwwLjI0NSwwLjE0MiwwLjM2OCwwLjIxMmMwLjYxMywwLjM0OSwxLjIzOSwwLjY3OCwxLjg4LDAuOTggIGMwLjA0NywwLjAyMiwwLjA5NSwwLjA0MiwwLjE0MiwwLjA2NGMyLjA4OSwwLjk3MSw0LjMxOSwxLjY4NCw2LjY1MSwyLjEwNWMwLjA2MSwwLjAxMSwwLjEyMiwwLjAyMiwwLjE4NCwwLjAzMyAgYzAuNzI0LDAuMTI1LDEuNDU2LDAuMjI1LDIuMTk3LDAuMjkyYzAuMDksMC4wMDgsMC4xOCwwLjAxMywwLjI3MSwwLjAyMUMyNS45OTgsNTQuOTYxLDI2Ljc0NCw1NSwyNy41LDU1ICBjMC43NDksMCwxLjQ4OC0wLjAzOSwyLjIyMi0wLjA5OGMwLjA5My0wLjAwOCwwLjE4Ni0wLjAxMywwLjI3OS0wLjAyMWMwLjczNS0wLjA2NywxLjQ2MS0wLjE2NCwyLjE3OC0wLjI4NyAgYzAuMDYyLTAuMDExLDAuMTI1LTAuMDIyLDAuMTg3LTAuMDM0YzIuMjk3LTAuNDEyLDQuNDk1LTEuMTA5LDYuNTU3LTIuMDU1YzAuMDc2LTAuMDM1LDAuMTUzLTAuMDY4LDAuMjI5LTAuMTA0ICBjMC42MTctMC4yOSwxLjIyLTAuNjAzLDEuODExLTAuOTM2YzAuMTQ3LTAuMDgzLDAuMjkzLTAuMTY3LDAuNDM5LTAuMjUzYzAuNTM4LTAuMzE3LDEuMDY3LTAuNjQ4LDEuNTgxLTEgIGMwLjE4NS0wLjEyNiwwLjM2Ni0wLjI1OSwwLjU0OS0wLjM5MWMwLjQzOS0wLjMxNiwwLjg3LTAuNjQyLDEuMjg5LTAuOTgzYzAuMDkzLTAuMDc1LDAuMTkzLTAuMTQsMC4yODQtMC4yMTdsMC45MTUtMC43NjQgIGwtMC4wMjctMC4wMjNDNTEuNTIzLDQyLjgwMiw1NSwzNS41NSw1NSwyNy41eiBNMiwyNy41QzIsMTMuNDM5LDEzLjQzOSwyLDI3LjUsMlM1MywxMy40MzksNTMsMjcuNSAgYzAsNy41NzctMy4zMjUsMTQuMzg5LTguNTg5LDE5LjA2M2MtMC4yOTQtMC4yMDMtMC41OS0wLjM4NS0wLjg5My0wLjUzN2wtOC40NjctNC4yMzNjLTAuNzYtMC4zOC0xLjIzMi0xLjE0NC0xLjIzMi0xLjk5M3YtMi45NTcgIGMwLjE5Ni0wLjI0MiwwLjQwMy0wLjUxNiwwLjYxNy0wLjgxN2MxLjA5Ni0xLjU0OCwxLjk3NS0zLjI3LDIuNjE2LTUuMTIzYzEuMjY3LTAuNjAyLDIuMDg1LTEuODY0LDIuMDg1LTMuMjg5di0zLjU0NSAgYzAtMC44NjctMC4zMTgtMS43MDgtMC44ODctMi4zNjl2LTQuNjY3YzAuMDUyLTAuNTE5LDAuMjM2LTMuNDQ4LTEuODgzLTUuODY0QzM0LjUyNCw5LjA2NSwzMS41NDEsOCwyNy41LDggIHMtNy4wMjQsMS4wNjUtOC44NjcsMy4xNjhjLTIuMTE5LDIuNDE2LTEuOTM1LDUuMzQ1LTEuODgzLDUuODY0djQuNjY3Yy0wLjU2OCwwLjY2MS0wLjg4NywxLjUwMi0wLjg4NywyLjM2OXYzLjU0NSAgYzAsMS4xMDEsMC40OTQsMi4xMjgsMS4zNCwyLjgyMWMwLjgxLDMuMTczLDIuNDc3LDUuNTc1LDMuMDkzLDYuMzg5djIuODk0YzAsMC44MTYtMC40NDUsMS41NjYtMS4xNjIsMS45NThsLTcuOTA3LDQuMzEzICBjLTAuMjUyLDAuMTM3LTAuNTAyLDAuMjk3LTAuNzUyLDAuNDc2QzUuMjc2LDQxLjc5MiwyLDM1LjAyMiwyLDI3LjV6IE00Mi40NTksNDguMTMyYy0wLjM1LDAuMjU0LTAuNzA2LDAuNS0xLjA2NywwLjczNSAgYy0wLjE2NiwwLjEwOC0wLjMzMSwwLjIxNi0wLjUsMC4zMjFjLTAuNDcyLDAuMjkyLTAuOTUyLDAuNTctMS40NDIsMC44M2MtMC4xMDgsMC4wNTctMC4yMTcsMC4xMTEtMC4zMjYsMC4xNjcgIGMtMS4xMjYsMC41NzctMi4yOTEsMS4wNzMtMy40ODgsMS40NzZjLTAuMDQyLDAuMDE0LTAuMDg0LDAuMDI5LTAuMTI3LDAuMDQzYy0wLjYyNywwLjIwOC0xLjI2MiwwLjM5My0xLjkwNCwwLjU1MiAgYy0wLjAwMiwwLTAuMDA0LDAuMDAxLTAuMDA2LDAuMDAxYy0wLjY0OCwwLjE2LTEuMzA0LDAuMjkzLTEuOTY0LDAuNDAyYy0wLjAxOCwwLjAwMy0wLjAzNiwwLjAwNy0wLjA1NCwwLjAxICBjLTAuNjIxLDAuMTAxLTEuMjQ3LDAuMTc0LTEuODc1LDAuMjI5Yy0wLjExMSwwLjAxLTAuMjIyLDAuMDE3LTAuMzM0LDAuMDI1QzI4Ljc1MSw1Mi45NywyOC4xMjcsNTMsMjcuNSw1MyAgYy0wLjYzNCwwLTEuMjY2LTAuMDMxLTEuODk1LTAuMDc4Yy0wLjEwOS0wLjAwOC0wLjIxOC0wLjAxNS0wLjMyNi0wLjAyNWMtMC42MzQtMC4wNTYtMS4yNjUtMC4xMzEtMS44OS0wLjIzMyAgYy0wLjAyOC0wLjAwNS0wLjA1Ni0wLjAxLTAuMDg0LTAuMDE1Yy0xLjMyMi0wLjIyMS0yLjYyMy0wLjU0Ni0zLjg5LTAuOTcxYy0wLjAzOS0wLjAxMy0wLjA3OS0wLjAyNy0wLjExOC0wLjA0ICBjLTAuNjI5LTAuMjE0LTEuMjUxLTAuNDUxLTEuODYyLTAuNzEzYy0wLjAwNC0wLjAwMi0wLjAwOS0wLjAwNC0wLjAxMy0wLjAwNmMtMC41NzgtMC4yNDktMS4xNDUtMC41MjUtMS43MDUtMC44MTYgIGMtMC4wNzMtMC4wMzgtMC4xNDctMC4wNzQtMC4yMTktMC4xMTNjLTAuNTExLTAuMjczLTEuMDExLTAuNTY4LTEuNTA0LTAuODc2Yy0wLjE0Ni0wLjA5Mi0wLjI5MS0wLjE4NS0wLjQzNS0wLjI3OSAgYy0wLjQ1NC0wLjI5Ny0wLjkwMi0wLjYwNi0xLjMzOC0wLjkzM2MtMC4wNDUtMC4wMzQtMC4wODgtMC4wNy0wLjEzMy0wLjEwNGMwLjAzMi0wLjAxOCwwLjA2NC0wLjAzNiwwLjA5Ni0wLjA1NGw3LjkwNy00LjMxMyAgYzEuMzYtMC43NDIsMi4yMDUtMi4xNjUsMi4yMDUtMy43MTRsLTAuMDAxLTMuNjAybC0wLjIzLTAuMjc4Yy0wLjAyMi0wLjAyNS0yLjE4NC0yLjY1NS0zLjAwMS02LjIxNmwtMC4wOTEtMC4zOTZsLTAuMzQxLTAuMjIxICBjLTAuNDgxLTAuMzExLTAuNzY5LTAuODMxLTAuNzY5LTEuMzkydi0zLjU0NWMwLTAuNDY1LDAuMTk3LTAuODk4LDAuNTU3LTEuMjIzbDAuMzMtMC4yOTh2LTUuNTdsLTAuMDA5LTAuMTMxICBjLTAuMDAzLTAuMDI0LTAuMjk4LTIuNDI5LDEuMzk2LTQuMzZDMjEuNTgzLDEwLjgzNywyNC4wNjEsMTAsMjcuNSwxMGMzLjQyNiwwLDUuODk2LDAuODMsNy4zNDYsMi40NjYgIGMxLjY5MiwxLjkxMSwxLjQxNSw0LjM2MSwxLjQxMyw0LjM4MWwtMC4wMDksNS43MDFsMC4zMywwLjI5OGMwLjM1OSwwLjMyNCwwLjU1NywwLjc1OCwwLjU1NywxLjIyM3YzLjU0NSAgYzAsMC43MTMtMC40ODUsMS4zNi0xLjE4MSwxLjU3NWwtMC40OTcsMC4xNTNsLTAuMTYsMC40OTVjLTAuNTksMS44MzMtMS40MywzLjUyNi0yLjQ5Niw1LjAzMmMtMC4yNjIsMC4zNy0wLjUxNywwLjY5OC0wLjczNiwwLjk0OSAgbC0wLjI0OCwwLjI4M1YzOS44YzAsMS42MTIsMC44OTYsMy4wNjIsMi4zMzgsMy43ODJsOC40NjcsNC4yMzNjMC4wNTQsMC4wMjcsMC4xMDcsMC4wNTUsMC4xNiwwLjA4MyAgQzQyLjY3Nyw0Ny45NzksNDIuNTY3LDQ4LjA1NCw0Mi40NTksNDguMTMyeiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" class="comment-avatar"/>
      <div class="comment-text">
      <h5>jonathandunn</h5>
      <span class="comment-time">3 hours ago
      </span>
      <p class="comment-text">
        Good point! There are travel bloggers. Then there are freelancers: coders mainly.
      </p>
      </div>
    </div>
    <div class="comment-box">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8cGF0aCBkPSJNNTUsMjcuNUM1NSwxMi4zMzcsNDIuNjYzLDAsMjcuNSwwUzAsMTIuMzM3LDAsMjcuNWMwLDguMDA5LDMuNDQ0LDE1LjIyOCw4LjkyNiwyMC4yNThsLTAuMDI2LDAuMDIzbDAuODkyLDAuNzUyICBjMC4wNTgsMC4wNDksMC4xMjEsMC4wODksMC4xNzksMC4xMzdjMC40NzQsMC4zOTMsMC45NjUsMC43NjYsMS40NjUsMS4xMjdjMC4xNjIsMC4xMTcsMC4zMjQsMC4yMzQsMC40ODksMC4zNDggIGMwLjUzNCwwLjM2OCwxLjA4MiwwLjcxNywxLjY0MiwxLjA0OGMwLjEyMiwwLjA3MiwwLjI0NSwwLjE0MiwwLjM2OCwwLjIxMmMwLjYxMywwLjM0OSwxLjIzOSwwLjY3OCwxLjg4LDAuOTggIGMwLjA0NywwLjAyMiwwLjA5NSwwLjA0MiwwLjE0MiwwLjA2NGMyLjA4OSwwLjk3MSw0LjMxOSwxLjY4NCw2LjY1MSwyLjEwNWMwLjA2MSwwLjAxMSwwLjEyMiwwLjAyMiwwLjE4NCwwLjAzMyAgYzAuNzI0LDAuMTI1LDEuNDU2LDAuMjI1LDIuMTk3LDAuMjkyYzAuMDksMC4wMDgsMC4xOCwwLjAxMywwLjI3MSwwLjAyMUMyNS45OTgsNTQuOTYxLDI2Ljc0NCw1NSwyNy41LDU1ICBjMC43NDksMCwxLjQ4OC0wLjAzOSwyLjIyMi0wLjA5OGMwLjA5My0wLjAwOCwwLjE4Ni0wLjAxMywwLjI3OS0wLjAyMWMwLjczNS0wLjA2NywxLjQ2MS0wLjE2NCwyLjE3OC0wLjI4NyAgYzAuMDYyLTAuMDExLDAuMTI1LTAuMDIyLDAuMTg3LTAuMDM0YzIuMjk3LTAuNDEyLDQuNDk1LTEuMTA5LDYuNTU3LTIuMDU1YzAuMDc2LTAuMDM1LDAuMTUzLTAuMDY4LDAuMjI5LTAuMTA0ICBjMC42MTctMC4yOSwxLjIyLTAuNjAzLDEuODExLTAuOTM2YzAuMTQ3LTAuMDgzLDAuMjkzLTAuMTY3LDAuNDM5LTAuMjUzYzAuNTM4LTAuMzE3LDEuMDY3LTAuNjQ4LDEuNTgxLTEgIGMwLjE4NS0wLjEyNiwwLjM2Ni0wLjI1OSwwLjU0OS0wLjM5MWMwLjQzOS0wLjMxNiwwLjg3LTAuNjQyLDEuMjg5LTAuOTgzYzAuMDkzLTAuMDc1LDAuMTkzLTAuMTQsMC4yODQtMC4yMTdsMC45MTUtMC43NjQgIGwtMC4wMjctMC4wMjNDNTEuNTIzLDQyLjgwMiw1NSwzNS41NSw1NSwyNy41eiBNMiwyNy41QzIsMTMuNDM5LDEzLjQzOSwyLDI3LjUsMlM1MywxMy40MzksNTMsMjcuNSAgYzAsNy41NzctMy4zMjUsMTQuMzg5LTguNTg5LDE5LjA2M2MtMC4yOTQtMC4yMDMtMC41OS0wLjM4NS0wLjg5My0wLjUzN2wtOC40NjctNC4yMzNjLTAuNzYtMC4zOC0xLjIzMi0xLjE0NC0xLjIzMi0xLjk5M3YtMi45NTcgIGMwLjE5Ni0wLjI0MiwwLjQwMy0wLjUxNiwwLjYxNy0wLjgxN2MxLjA5Ni0xLjU0OCwxLjk3NS0zLjI3LDIuNjE2LTUuMTIzYzEuMjY3LTAuNjAyLDIuMDg1LTEuODY0LDIuMDg1LTMuMjg5di0zLjU0NSAgYzAtMC44NjctMC4zMTgtMS43MDgtMC44ODctMi4zNjl2LTQuNjY3YzAuMDUyLTAuNTE5LDAuMjM2LTMuNDQ4LTEuODgzLTUuODY0QzM0LjUyNCw5LjA2NSwzMS41NDEsOCwyNy41LDggIHMtNy4wMjQsMS4wNjUtOC44NjcsMy4xNjhjLTIuMTE5LDIuNDE2LTEuOTM1LDUuMzQ1LTEuODgzLDUuODY0djQuNjY3Yy0wLjU2OCwwLjY2MS0wLjg4NywxLjUwMi0wLjg4NywyLjM2OXYzLjU0NSAgYzAsMS4xMDEsMC40OTQsMi4xMjgsMS4zNCwyLjgyMWMwLjgxLDMuMTczLDIuNDc3LDUuNTc1LDMuMDkzLDYuMzg5djIuODk0YzAsMC44MTYtMC40NDUsMS41NjYtMS4xNjIsMS45NThsLTcuOTA3LDQuMzEzICBjLTAuMjUyLDAuMTM3LTAuNTAyLDAuMjk3LTAuNzUyLDAuNDc2QzUuMjc2LDQxLjc5MiwyLDM1LjAyMiwyLDI3LjV6IE00Mi40NTksNDguMTMyYy0wLjM1LDAuMjU0LTAuNzA2LDAuNS0xLjA2NywwLjczNSAgYy0wLjE2NiwwLjEwOC0wLjMzMSwwLjIxNi0wLjUsMC4zMjFjLTAuNDcyLDAuMjkyLTAuOTUyLDAuNTctMS40NDIsMC44M2MtMC4xMDgsMC4wNTctMC4yMTcsMC4xMTEtMC4zMjYsMC4xNjcgIGMtMS4xMjYsMC41NzctMi4yOTEsMS4wNzMtMy40ODgsMS40NzZjLTAuMDQyLDAuMDE0LTAuMDg0LDAuMDI5LTAuMTI3LDAuMDQzYy0wLjYyNywwLjIwOC0xLjI2MiwwLjM5My0xLjkwNCwwLjU1MiAgYy0wLjAwMiwwLTAuMDA0LDAuMDAxLTAuMDA2LDAuMDAxYy0wLjY0OCwwLjE2LTEuMzA0LDAuMjkzLTEuOTY0LDAuNDAyYy0wLjAxOCwwLjAwMy0wLjAzNiwwLjAwNy0wLjA1NCwwLjAxICBjLTAuNjIxLDAuMTAxLTEuMjQ3LDAuMTc0LTEuODc1LDAuMjI5Yy0wLjExMSwwLjAxLTAuMjIyLDAuMDE3LTAuMzM0LDAuMDI1QzI4Ljc1MSw1Mi45NywyOC4xMjcsNTMsMjcuNSw1MyAgYy0wLjYzNCwwLTEuMjY2LTAuMDMxLTEuODk1LTAuMDc4Yy0wLjEwOS0wLjAwOC0wLjIxOC0wLjAxNS0wLjMyNi0wLjAyNWMtMC42MzQtMC4wNTYtMS4yNjUtMC4xMzEtMS44OS0wLjIzMyAgYy0wLjAyOC0wLjAwNS0wLjA1Ni0wLjAxLTAuMDg0LTAuMDE1Yy0xLjMyMi0wLjIyMS0yLjYyMy0wLjU0Ni0zLjg5LTAuOTcxYy0wLjAzOS0wLjAxMy0wLjA3OS0wLjAyNy0wLjExOC0wLjA0ICBjLTAuNjI5LTAuMjE0LTEuMjUxLTAuNDUxLTEuODYyLTAuNzEzYy0wLjAwNC0wLjAwMi0wLjAwOS0wLjAwNC0wLjAxMy0wLjAwNmMtMC41NzgtMC4yNDktMS4xNDUtMC41MjUtMS43MDUtMC44MTYgIGMtMC4wNzMtMC4wMzgtMC4xNDctMC4wNzQtMC4yMTktMC4xMTNjLTAuNTExLTAuMjczLTEuMDExLTAuNTY4LTEuNTA0LTAuODc2Yy0wLjE0Ni0wLjA5Mi0wLjI5MS0wLjE4NS0wLjQzNS0wLjI3OSAgYy0wLjQ1NC0wLjI5Ny0wLjkwMi0wLjYwNi0xLjMzOC0wLjkzM2MtMC4wNDUtMC4wMzQtMC4wODgtMC4wNy0wLjEzMy0wLjEwNGMwLjAzMi0wLjAxOCwwLjA2NC0wLjAzNiwwLjA5Ni0wLjA1NGw3LjkwNy00LjMxMyAgYzEuMzYtMC43NDIsMi4yMDUtMi4xNjUsMi4yMDUtMy43MTRsLTAuMDAxLTMuNjAybC0wLjIzLTAuMjc4Yy0wLjAyMi0wLjAyNS0yLjE4NC0yLjY1NS0zLjAwMS02LjIxNmwtMC4wOTEtMC4zOTZsLTAuMzQxLTAuMjIxICBjLTAuNDgxLTAuMzExLTAuNzY5LTAuODMxLTAuNzY5LTEuMzkydi0zLjU0NWMwLTAuNDY1LDAuMTk3LTAuODk4LDAuNTU3LTEuMjIzbDAuMzMtMC4yOTh2LTUuNTdsLTAuMDA5LTAuMTMxICBjLTAuMDAzLTAuMDI0LTAuMjk4LTIuNDI5LDEuMzk2LTQuMzZDMjEuNTgzLDEwLjgzNywyNC4wNjEsMTAsMjcuNSwxMGMzLjQyNiwwLDUuODk2LDAuODMsNy4zNDYsMi40NjYgIGMxLjY5MiwxLjkxMSwxLjQxNSw0LjM2MSwxLjQxMyw0LjM4MWwtMC4wMDksNS43MDFsMC4zMywwLjI5OGMwLjM1OSwwLjMyNCwwLjU1NywwLjc1OCwwLjU1NywxLjIyM3YzLjU0NSAgYzAsMC43MTMtMC40ODUsMS4zNi0xLjE4MSwxLjU3NWwtMC40OTcsMC4xNTNsLTAuMTYsMC40OTVjLTAuNTksMS44MzMtMS40MywzLjUyNi0yLjQ5Niw1LjAzMmMtMC4yNjIsMC4zNy0wLjUxNywwLjY5OC0wLjczNiwwLjk0OSAgbC0wLjI0OCwwLjI4M1YzOS44YzAsMS42MTIsMC44OTYsMy4wNjIsMi4zMzgsMy43ODJsOC40NjcsNC4yMzNjMC4wNTQsMC4wMjcsMC4xMDcsMC4wNTUsMC4xNiwwLjA4MyAgQzQyLjY3Nyw0Ny45NzksNDIuNTY3LDQ4LjA1NCw0Mi40NTksNDguMTMyeiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" class="comment-avatar"/>
      <div class="comment-text">
      <h5>jonathandunn</h5>
      <span class="comment-time">3 hours ago
      </span>
      <p class="comment-text">
        Good point! There are travel bloggers. Then there are freelancers: coders mainly.
      </p>
      </div>
    </div>
    <div class="comment-box">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8cGF0aCBkPSJNNTUsMjcuNUM1NSwxMi4zMzcsNDIuNjYzLDAsMjcuNSwwUzAsMTIuMzM3LDAsMjcuNWMwLDguMDA5LDMuNDQ0LDE1LjIyOCw4LjkyNiwyMC4yNThsLTAuMDI2LDAuMDIzbDAuODkyLDAuNzUyICBjMC4wNTgsMC4wNDksMC4xMjEsMC4wODksMC4xNzksMC4xMzdjMC40NzQsMC4zOTMsMC45NjUsMC43NjYsMS40NjUsMS4xMjdjMC4xNjIsMC4xMTcsMC4zMjQsMC4yMzQsMC40ODksMC4zNDggIGMwLjUzNCwwLjM2OCwxLjA4MiwwLjcxNywxLjY0MiwxLjA0OGMwLjEyMiwwLjA3MiwwLjI0NSwwLjE0MiwwLjM2OCwwLjIxMmMwLjYxMywwLjM0OSwxLjIzOSwwLjY3OCwxLjg4LDAuOTggIGMwLjA0NywwLjAyMiwwLjA5NSwwLjA0MiwwLjE0MiwwLjA2NGMyLjA4OSwwLjk3MSw0LjMxOSwxLjY4NCw2LjY1MSwyLjEwNWMwLjA2MSwwLjAxMSwwLjEyMiwwLjAyMiwwLjE4NCwwLjAzMyAgYzAuNzI0LDAuMTI1LDEuNDU2LDAuMjI1LDIuMTk3LDAuMjkyYzAuMDksMC4wMDgsMC4xOCwwLjAxMywwLjI3MSwwLjAyMUMyNS45OTgsNTQuOTYxLDI2Ljc0NCw1NSwyNy41LDU1ICBjMC43NDksMCwxLjQ4OC0wLjAzOSwyLjIyMi0wLjA5OGMwLjA5My0wLjAwOCwwLjE4Ni0wLjAxMywwLjI3OS0wLjAyMWMwLjczNS0wLjA2NywxLjQ2MS0wLjE2NCwyLjE3OC0wLjI4NyAgYzAuMDYyLTAuMDExLDAuMTI1LTAuMDIyLDAuMTg3LTAuMDM0YzIuMjk3LTAuNDEyLDQuNDk1LTEuMTA5LDYuNTU3LTIuMDU1YzAuMDc2LTAuMDM1LDAuMTUzLTAuMDY4LDAuMjI5LTAuMTA0ICBjMC42MTctMC4yOSwxLjIyLTAuNjAzLDEuODExLTAuOTM2YzAuMTQ3LTAuMDgzLDAuMjkzLTAuMTY3LDAuNDM5LTAuMjUzYzAuNTM4LTAuMzE3LDEuMDY3LTAuNjQ4LDEuNTgxLTEgIGMwLjE4NS0wLjEyNiwwLjM2Ni0wLjI1OSwwLjU0OS0wLjM5MWMwLjQzOS0wLjMxNiwwLjg3LTAuNjQyLDEuMjg5LTAuOTgzYzAuMDkzLTAuMDc1LDAuMTkzLTAuMTQsMC4yODQtMC4yMTdsMC45MTUtMC43NjQgIGwtMC4wMjctMC4wMjNDNTEuNTIzLDQyLjgwMiw1NSwzNS41NSw1NSwyNy41eiBNMiwyNy41QzIsMTMuNDM5LDEzLjQzOSwyLDI3LjUsMlM1MywxMy40MzksNTMsMjcuNSAgYzAsNy41NzctMy4zMjUsMTQuMzg5LTguNTg5LDE5LjA2M2MtMC4yOTQtMC4yMDMtMC41OS0wLjM4NS0wLjg5My0wLjUzN2wtOC40NjctNC4yMzNjLTAuNzYtMC4zOC0xLjIzMi0xLjE0NC0xLjIzMi0xLjk5M3YtMi45NTcgIGMwLjE5Ni0wLjI0MiwwLjQwMy0wLjUxNiwwLjYxNy0wLjgxN2MxLjA5Ni0xLjU0OCwxLjk3NS0zLjI3LDIuNjE2LTUuMTIzYzEuMjY3LTAuNjAyLDIuMDg1LTEuODY0LDIuMDg1LTMuMjg5di0zLjU0NSAgYzAtMC44NjctMC4zMTgtMS43MDgtMC44ODctMi4zNjl2LTQuNjY3YzAuMDUyLTAuNTE5LDAuMjM2LTMuNDQ4LTEuODgzLTUuODY0QzM0LjUyNCw5LjA2NSwzMS41NDEsOCwyNy41LDggIHMtNy4wMjQsMS4wNjUtOC44NjcsMy4xNjhjLTIuMTE5LDIuNDE2LTEuOTM1LDUuMzQ1LTEuODgzLDUuODY0djQuNjY3Yy0wLjU2OCwwLjY2MS0wLjg4NywxLjUwMi0wLjg4NywyLjM2OXYzLjU0NSAgYzAsMS4xMDEsMC40OTQsMi4xMjgsMS4zNCwyLjgyMWMwLjgxLDMuMTczLDIuNDc3LDUuNTc1LDMuMDkzLDYuMzg5djIuODk0YzAsMC44MTYtMC40NDUsMS41NjYtMS4xNjIsMS45NThsLTcuOTA3LDQuMzEzICBjLTAuMjUyLDAuMTM3LTAuNTAyLDAuMjk3LTAuNzUyLDAuNDc2QzUuMjc2LDQxLjc5MiwyLDM1LjAyMiwyLDI3LjV6IE00Mi40NTksNDguMTMyYy0wLjM1LDAuMjU0LTAuNzA2LDAuNS0xLjA2NywwLjczNSAgYy0wLjE2NiwwLjEwOC0wLjMzMSwwLjIxNi0wLjUsMC4zMjFjLTAuNDcyLDAuMjkyLTAuOTUyLDAuNTctMS40NDIsMC44M2MtMC4xMDgsMC4wNTctMC4yMTcsMC4xMTEtMC4zMjYsMC4xNjcgIGMtMS4xMjYsMC41NzctMi4yOTEsMS4wNzMtMy40ODgsMS40NzZjLTAuMDQyLDAuMDE0LTAuMDg0LDAuMDI5LTAuMTI3LDAuMDQzYy0wLjYyNywwLjIwOC0xLjI2MiwwLjM5My0xLjkwNCwwLjU1MiAgYy0wLjAwMiwwLTAuMDA0LDAuMDAxLTAuMDA2LDAuMDAxYy0wLjY0OCwwLjE2LTEuMzA0LDAuMjkzLTEuOTY0LDAuNDAyYy0wLjAxOCwwLjAwMy0wLjAzNiwwLjAwNy0wLjA1NCwwLjAxICBjLTAuNjIxLDAuMTAxLTEuMjQ3LDAuMTc0LTEuODc1LDAuMjI5Yy0wLjExMSwwLjAxLTAuMjIyLDAuMDE3LTAuMzM0LDAuMDI1QzI4Ljc1MSw1Mi45NywyOC4xMjcsNTMsMjcuNSw1MyAgYy0wLjYzNCwwLTEuMjY2LTAuMDMxLTEuODk1LTAuMDc4Yy0wLjEwOS0wLjAwOC0wLjIxOC0wLjAxNS0wLjMyNi0wLjAyNWMtMC42MzQtMC4wNTYtMS4yNjUtMC4xMzEtMS44OS0wLjIzMyAgYy0wLjAyOC0wLjAwNS0wLjA1Ni0wLjAxLTAuMDg0LTAuMDE1Yy0xLjMyMi0wLjIyMS0yLjYyMy0wLjU0Ni0zLjg5LTAuOTcxYy0wLjAzOS0wLjAxMy0wLjA3OS0wLjAyNy0wLjExOC0wLjA0ICBjLTAuNjI5LTAuMjE0LTEuMjUxLTAuNDUxLTEuODYyLTAuNzEzYy0wLjAwNC0wLjAwMi0wLjAwOS0wLjAwNC0wLjAxMy0wLjAwNmMtMC41NzgtMC4yNDktMS4xNDUtMC41MjUtMS43MDUtMC44MTYgIGMtMC4wNzMtMC4wMzgtMC4xNDctMC4wNzQtMC4yMTktMC4xMTNjLTAuNTExLTAuMjczLTEuMDExLTAuNTY4LTEuNTA0LTAuODc2Yy0wLjE0Ni0wLjA5Mi0wLjI5MS0wLjE4NS0wLjQzNS0wLjI3OSAgYy0wLjQ1NC0wLjI5Ny0wLjkwMi0wLjYwNi0xLjMzOC0wLjkzM2MtMC4wNDUtMC4wMzQtMC4wODgtMC4wNy0wLjEzMy0wLjEwNGMwLjAzMi0wLjAxOCwwLjA2NC0wLjAzNiwwLjA5Ni0wLjA1NGw3LjkwNy00LjMxMyAgYzEuMzYtMC43NDIsMi4yMDUtMi4xNjUsMi4yMDUtMy43MTRsLTAuMDAxLTMuNjAybC0wLjIzLTAuMjc4Yy0wLjAyMi0wLjAyNS0yLjE4NC0yLjY1NS0zLjAwMS02LjIxNmwtMC4wOTEtMC4zOTZsLTAuMzQxLTAuMjIxICBjLTAuNDgxLTAuMzExLTAuNzY5LTAuODMxLTAuNzY5LTEuMzkydi0zLjU0NWMwLTAuNDY1LDAuMTk3LTAuODk4LDAuNTU3LTEuMjIzbDAuMzMtMC4yOTh2LTUuNTdsLTAuMDA5LTAuMTMxICBjLTAuMDAzLTAuMDI0LTAuMjk4LTIuNDI5LDEuMzk2LTQuMzZDMjEuNTgzLDEwLjgzNywyNC4wNjEsMTAsMjcuNSwxMGMzLjQyNiwwLDUuODk2LDAuODMsNy4zNDYsMi40NjYgIGMxLjY5MiwxLjkxMSwxLjQxNSw0LjM2MSwxLjQxMyw0LjM4MWwtMC4wMDksNS43MDFsMC4zMywwLjI5OGMwLjM1OSwwLjMyNCwwLjU1NywwLjc1OCwwLjU1NywxLjIyM3YzLjU0NSAgYzAsMC43MTMtMC40ODUsMS4zNi0xLjE4MSwxLjU3NWwtMC40OTcsMC4xNTNsLTAuMTYsMC40OTVjLTAuNTksMS44MzMtMS40MywzLjUyNi0yLjQ5Niw1LjAzMmMtMC4yNjIsMC4zNy0wLjUxNywwLjY5OC0wLjczNiwwLjk0OSAgbC0wLjI0OCwwLjI4M1YzOS44YzAsMS42MTIsMC44OTYsMy4wNjIsMi4zMzgsMy43ODJsOC40NjcsNC4yMzNjMC4wNTQsMC4wMjcsMC4xMDcsMC4wNTUsMC4xNiwwLjA4MyAgQzQyLjY3Nyw0Ny45NzksNDIuNTY3LDQ4LjA1NCw0Mi40NTksNDguMTMyeiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" class="comment-avatar"/>
      <div class="comment-text">
      <h5>jonathandunn</h5>
      <span class="comment-time">3 hours ago
      </span>
      <p class="comment-text">
        Good point! There are travel bloggers. Then there are freelancers: coders mainly.
      </p>
      </div>
    </div>
    <div class="comment-box">
      <img src="data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDU1IDU1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1NSA1NTsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHdpZHRoPSI2NHB4IiBoZWlnaHQ9IjY0cHgiPgo8cGF0aCBkPSJNNTUsMjcuNUM1NSwxMi4zMzcsNDIuNjYzLDAsMjcuNSwwUzAsMTIuMzM3LDAsMjcuNWMwLDguMDA5LDMuNDQ0LDE1LjIyOCw4LjkyNiwyMC4yNThsLTAuMDI2LDAuMDIzbDAuODkyLDAuNzUyICBjMC4wNTgsMC4wNDksMC4xMjEsMC4wODksMC4xNzksMC4xMzdjMC40NzQsMC4zOTMsMC45NjUsMC43NjYsMS40NjUsMS4xMjdjMC4xNjIsMC4xMTcsMC4zMjQsMC4yMzQsMC40ODksMC4zNDggIGMwLjUzNCwwLjM2OCwxLjA4MiwwLjcxNywxLjY0MiwxLjA0OGMwLjEyMiwwLjA3MiwwLjI0NSwwLjE0MiwwLjM2OCwwLjIxMmMwLjYxMywwLjM0OSwxLjIzOSwwLjY3OCwxLjg4LDAuOTggIGMwLjA0NywwLjAyMiwwLjA5NSwwLjA0MiwwLjE0MiwwLjA2NGMyLjA4OSwwLjk3MSw0LjMxOSwxLjY4NCw2LjY1MSwyLjEwNWMwLjA2MSwwLjAxMSwwLjEyMiwwLjAyMiwwLjE4NCwwLjAzMyAgYzAuNzI0LDAuMTI1LDEuNDU2LDAuMjI1LDIuMTk3LDAuMjkyYzAuMDksMC4wMDgsMC4xOCwwLjAxMywwLjI3MSwwLjAyMUMyNS45OTgsNTQuOTYxLDI2Ljc0NCw1NSwyNy41LDU1ICBjMC43NDksMCwxLjQ4OC0wLjAzOSwyLjIyMi0wLjA5OGMwLjA5My0wLjAwOCwwLjE4Ni0wLjAxMywwLjI3OS0wLjAyMWMwLjczNS0wLjA2NywxLjQ2MS0wLjE2NCwyLjE3OC0wLjI4NyAgYzAuMDYyLTAuMDExLDAuMTI1LTAuMDIyLDAuMTg3LTAuMDM0YzIuMjk3LTAuNDEyLDQuNDk1LTEuMTA5LDYuNTU3LTIuMDU1YzAuMDc2LTAuMDM1LDAuMTUzLTAuMDY4LDAuMjI5LTAuMTA0ICBjMC42MTctMC4yOSwxLjIyLTAuNjAzLDEuODExLTAuOTM2YzAuMTQ3LTAuMDgzLDAuMjkzLTAuMTY3LDAuNDM5LTAuMjUzYzAuNTM4LTAuMzE3LDEuMDY3LTAuNjQ4LDEuNTgxLTEgIGMwLjE4NS0wLjEyNiwwLjM2Ni0wLjI1OSwwLjU0OS0wLjM5MWMwLjQzOS0wLjMxNiwwLjg3LTAuNjQyLDEuMjg5LTAuOTgzYzAuMDkzLTAuMDc1LDAuMTkzLTAuMTQsMC4yODQtMC4yMTdsMC45MTUtMC43NjQgIGwtMC4wMjctMC4wMjNDNTEuNTIzLDQyLjgwMiw1NSwzNS41NSw1NSwyNy41eiBNMiwyNy41QzIsMTMuNDM5LDEzLjQzOSwyLDI3LjUsMlM1MywxMy40MzksNTMsMjcuNSAgYzAsNy41NzctMy4zMjUsMTQuMzg5LTguNTg5LDE5LjA2M2MtMC4yOTQtMC4yMDMtMC41OS0wLjM4NS0wLjg5My0wLjUzN2wtOC40NjctNC4yMzNjLTAuNzYtMC4zOC0xLjIzMi0xLjE0NC0xLjIzMi0xLjk5M3YtMi45NTcgIGMwLjE5Ni0wLjI0MiwwLjQwMy0wLjUxNiwwLjYxNy0wLjgxN2MxLjA5Ni0xLjU0OCwxLjk3NS0zLjI3LDIuNjE2LTUuMTIzYzEuMjY3LTAuNjAyLDIuMDg1LTEuODY0LDIuMDg1LTMuMjg5di0zLjU0NSAgYzAtMC44NjctMC4zMTgtMS43MDgtMC44ODctMi4zNjl2LTQuNjY3YzAuMDUyLTAuNTE5LDAuMjM2LTMuNDQ4LTEuODgzLTUuODY0QzM0LjUyNCw5LjA2NSwzMS41NDEsOCwyNy41LDggIHMtNy4wMjQsMS4wNjUtOC44NjcsMy4xNjhjLTIuMTE5LDIuNDE2LTEuOTM1LDUuMzQ1LTEuODgzLDUuODY0djQuNjY3Yy0wLjU2OCwwLjY2MS0wLjg4NywxLjUwMi0wLjg4NywyLjM2OXYzLjU0NSAgYzAsMS4xMDEsMC40OTQsMi4xMjgsMS4zNCwyLjgyMWMwLjgxLDMuMTczLDIuNDc3LDUuNTc1LDMuMDkzLDYuMzg5djIuODk0YzAsMC44MTYtMC40NDUsMS41NjYtMS4xNjIsMS45NThsLTcuOTA3LDQuMzEzICBjLTAuMjUyLDAuMTM3LTAuNTAyLDAuMjk3LTAuNzUyLDAuNDc2QzUuMjc2LDQxLjc5MiwyLDM1LjAyMiwyLDI3LjV6IE00Mi40NTksNDguMTMyYy0wLjM1LDAuMjU0LTAuNzA2LDAuNS0xLjA2NywwLjczNSAgYy0wLjE2NiwwLjEwOC0wLjMzMSwwLjIxNi0wLjUsMC4zMjFjLTAuNDcyLDAuMjkyLTAuOTUyLDAuNTctMS40NDIsMC44M2MtMC4xMDgsMC4wNTctMC4yMTcsMC4xMTEtMC4zMjYsMC4xNjcgIGMtMS4xMjYsMC41NzctMi4yOTEsMS4wNzMtMy40ODgsMS40NzZjLTAuMDQyLDAuMDE0LTAuMDg0LDAuMDI5LTAuMTI3LDAuMDQzYy0wLjYyNywwLjIwOC0xLjI2MiwwLjM5My0xLjkwNCwwLjU1MiAgYy0wLjAwMiwwLTAuMDA0LDAuMDAxLTAuMDA2LDAuMDAxYy0wLjY0OCwwLjE2LTEuMzA0LDAuMjkzLTEuOTY0LDAuNDAyYy0wLjAxOCwwLjAwMy0wLjAzNiwwLjAwNy0wLjA1NCwwLjAxICBjLTAuNjIxLDAuMTAxLTEuMjQ3LDAuMTc0LTEuODc1LDAuMjI5Yy0wLjExMSwwLjAxLTAuMjIyLDAuMDE3LTAuMzM0LDAuMDI1QzI4Ljc1MSw1Mi45NywyOC4xMjcsNTMsMjcuNSw1MyAgYy0wLjYzNCwwLTEuMjY2LTAuMDMxLTEuODk1LTAuMDc4Yy0wLjEwOS0wLjAwOC0wLjIxOC0wLjAxNS0wLjMyNi0wLjAyNWMtMC42MzQtMC4wNTYtMS4yNjUtMC4xMzEtMS44OS0wLjIzMyAgYy0wLjAyOC0wLjAwNS0wLjA1Ni0wLjAxLTAuMDg0LTAuMDE1Yy0xLjMyMi0wLjIyMS0yLjYyMy0wLjU0Ni0zLjg5LTAuOTcxYy0wLjAzOS0wLjAxMy0wLjA3OS0wLjAyNy0wLjExOC0wLjA0ICBjLTAuNjI5LTAuMjE0LTEuMjUxLTAuNDUxLTEuODYyLTAuNzEzYy0wLjAwNC0wLjAwMi0wLjAwOS0wLjAwNC0wLjAxMy0wLjAwNmMtMC41NzgtMC4yNDktMS4xNDUtMC41MjUtMS43MDUtMC44MTYgIGMtMC4wNzMtMC4wMzgtMC4xNDctMC4wNzQtMC4yMTktMC4xMTNjLTAuNTExLTAuMjczLTEuMDExLTAuNTY4LTEuNTA0LTAuODc2Yy0wLjE0Ni0wLjA5Mi0wLjI5MS0wLjE4NS0wLjQzNS0wLjI3OSAgYy0wLjQ1NC0wLjI5Ny0wLjkwMi0wLjYwNi0xLjMzOC0wLjkzM2MtMC4wNDUtMC4wMzQtMC4wODgtMC4wNy0wLjEzMy0wLjEwNGMwLjAzMi0wLjAxOCwwLjA2NC0wLjAzNiwwLjA5Ni0wLjA1NGw3LjkwNy00LjMxMyAgYzEuMzYtMC43NDIsMi4yMDUtMi4xNjUsMi4yMDUtMy43MTRsLTAuMDAxLTMuNjAybC0wLjIzLTAuMjc4Yy0wLjAyMi0wLjAyNS0yLjE4NC0yLjY1NS0zLjAwMS02LjIxNmwtMC4wOTEtMC4zOTZsLTAuMzQxLTAuMjIxICBjLTAuNDgxLTAuMzExLTAuNzY5LTAuODMxLTAuNzY5LTEuMzkydi0zLjU0NWMwLTAuNDY1LDAuMTk3LTAuODk4LDAuNTU3LTEuMjIzbDAuMzMtMC4yOTh2LTUuNTdsLTAuMDA5LTAuMTMxICBjLTAuMDAzLTAuMDI0LTAuMjk4LTIuNDI5LDEuMzk2LTQuMzZDMjEuNTgzLDEwLjgzNywyNC4wNjEsMTAsMjcuNSwxMGMzLjQyNiwwLDUuODk2LDAuODMsNy4zNDYsMi40NjYgIGMxLjY5MiwxLjkxMSwxLjQxNSw0LjM2MSwxLjQxMyw0LjM4MWwtMC4wMDksNS43MDFsMC4zMywwLjI5OGMwLjM1OSwwLjMyNCwwLjU1NywwLjc1OCwwLjU1NywxLjIyM3YzLjU0NSAgYzAsMC43MTMtMC40ODUsMS4zNi0xLjE4MSwxLjU3NWwtMC40OTcsMC4xNTNsLTAuMTYsMC40OTVjLTAuNTksMS44MzMtMS40MywzLjUyNi0yLjQ5Niw1LjAzMmMtMC4yNjIsMC4zNy0wLjUxNywwLjY5OC0wLjczNiwwLjk0OSAgbC0wLjI0OCwwLjI4M1YzOS44YzAsMS42MTIsMC44OTYsMy4wNjIsMi4zMzgsMy43ODJsOC40NjcsNC4yMzNjMC4wNTQsMC4wMjcsMC4xMDcsMC4wNTUsMC4xNiwwLjA4MyAgQzQyLjY3Nyw0Ny45NzksNDIuNTY3LDQ4LjA1NCw0Mi40NTksNDguMTMyeiIgZmlsbD0iIzAwMDAwMCIvPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K" class="comment-avatar"/>
      <div class="comment-text">
      <h5>jonathandunn</h5>
      <span class="comment-time">3 hours ago
      </span>
      <p class="comment-text">
        Good point! There are travel bloggers. Then there are freelancers: coders mainly.
      </p>
      </div>
    </div>
  </section>
</div>
</body>
</html>

8. By Lloyd James

Made by Lloyd James. Blog Reveal Layout with CSS Polygons. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
<style>
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{font-size:100%;font:inherit;padding:0;border:0;margin:0;vertical-align:baseline}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}.clear{clear:both}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}

textarea:focus, input:focus{outline: none;}
*:focus {outline: none;}

body {
	width: 100%;
	font-family: Arial;
	-webkit-font-smoothing: antialiased;
	line-height: 1.1;
  background-color: #131313;
}


h1,h2,h3,h4,h5,h6 {
	margin: 0px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	font-style: normal; 
	line-height: 1.3;
}

h1 {font-size: 30px;}
h2 {font-size: 22px;}
h3 {font-size: 18px;}
h4 {font-size: 16px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}

.normal {font-weight: 400;}
.semibold {font-weight: 600;}
.bold {font-weight: 700;}

p {
	font-family: 'Open Sans', sans-serif;
	font-weight: 300;
	line-height: 1.3;
	font-size: 16px;
}

b, strong {font-weight: bold;}
i {font-style: italic;}
a {
	text-decoration: none;
	color: inherit;
}

input {-webkit-appearance: none;}

.title-wrapper {
  width: 100%;
  float: left;
  padding: 50px 0 0 0;
  box-sizing: border-box;
}
.title-wrapper h1 {
  font-size: 40px;
  color: #f1f1f1;
  text-align: center;
  font-weight: 400;
}

#blog-wrapper {
	width: 100%;
	float: left;
	padding: 50px 0 200px 0;
	box-sizing: border-box;
}
.blog {
	width: 960px;
  max-width: 90%;
	min-height: 500px;
	margin: 0 auto;
	position: relative;
}

.blog-post-1,
.blog-post-2,
.blog-post-3 {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top center;
	cursor: pointer;
	-moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}
.blog-post-1.z,
.blog-post-2.z,
.blog-post-3.z {z-index: 10;}


.blog-post-1 {
	-webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 50% 100%);
	background-image: url(https://images.pexels.com/photos/4827/nature-forest-trees-fog.jpeg?cs=srgb&dl=fog-foggy-forest-4827.jpg&fm=jpg);
}
.showblog1 .blog-post-1 {
	-webkit-clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);
}

.blog-post-2 {
	-webkit-clip-path: polygon(3% 0%, 50% 93%, 50% 93%, 97% 0%);
	background-image: url(http://www.highwallpaper.com/wp-content/uploads/Dark-Woods-1920x1080.jpg);
}
.showblog2 .blog-post-2 {
	-webkit-clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%);
}

.blog-post-3 {
	-webkit-clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 50% 100%);
	background-image: url(https://images.pexels.com/photos/5049/forest-trees-fog-foggy.jpg?cs=srgb&dl=firs-fog-foggy-5049.jpg&fm=jpg);
}
.showblog3 .blog-post-3 {
	-webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.blog-copy {
	width: 70%;
	padding: 100px 0 0 0;
	margin: 0 auto;
	text-align: center;
}
.blog-copy h2 {
	font-size: 38px;
	color: #FFFFFF;
	font-weight: 400;
	margin: 0 0 40px 0;
	text-shadow: 0px 0px 20px #000000;
}
.blog-copy p {
	font-size: 16px;
	color: #FFFFFF;
	text-shadow: 0px 0px 20px #000000;
}
</style>
</head>
<body>
  <!-- CLICK TO REVEAL BLOG POSTS -->  

<!-- Jquery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

  <!-- Open Sans -->
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:700,300,600,400" rel="stylesheet" type="text/css">
  
  <body>
    
  <div class="title-wrapper">
    <h1>THE BLOG</h1>
  </div>
	
	<div id="blog-wrapper">

		<div class="blog">

			<div class="blog-post-1">
				<div class="blog-copy">
					<h2>More Trees</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>

			<div class="blog-post-2">
				<div class="blog-copy">
					<h2>Trees</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>

			<div class="blog-post-3">
				<div class="blog-copy">
					<h2>And Some More Trees</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
				</div>
			</div>

		</div>	

	</div>


</body>
      <script>
$(document).ready(function () {

  // Blog

  $(".blog-post-1").click(function () {
    if ($("#blog-wrapper").hasClass("showblog1")) {
      $("#blog-wrapper").removeClass("showblog1");
      setTimeout(function () {
        $(".blog-post-1").removeClass("z");
      }, 500);
    } else {
      $("#blog-wrapper").addClass("showblog1");
      setTimeout(function () {
        $(".blog-post-1").addClass("z");
      }, 0);
    }
  });

  $(".blog-post-2").click(function () {
    if ($("#blog-wrapper").hasClass("showblog2")) {
      $("#blog-wrapper").removeClass("showblog2");
      setTimeout(function () {
        $(".blog-post-2").removeClass("z");
      }, 500);
    } else {
      $("#blog-wrapper").addClass("showblog2");
      setTimeout(function () {
        $(".blog-post-2").addClass("z");
      }, 0);
    }
  });

  $(".blog-post-3").click(function () {
    if ($("#blog-wrapper").hasClass("showblog3")) {
      $("#blog-wrapper").removeClass("showblog3");
      setTimeout(function () {
        $(".blog-post-3").removeClass("z");
      }, 500);
    } else {
      $("#blog-wrapper").addClass("showblog3");
      setTimeout(function () {
        $(".blog-post-3").addClass("z");
      }, 0);
    }
  });

});
    </script>
</body>
</html>

9. By Jeff Aspen

Made by Jeff Aspen. Blog layout with hover effect. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,300,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
body {
  background: #fbfbfb;
  font-family: "Merriweather", serif;
  font-size: 16px;
  color: #777;
}

h1, h4 {
  font-family: "Montserrat", sans-serif;
}

.row {
  padding: 50px 0;
}

.seperator {
  margin-bottom: 30px;
  width: 35px;
  height: 3px;
  background: #777;
  border: none;
}

.title {
  text-align: center;
}
.title .row {
  padding: 50px 0 0;
}
.title h1 {
  text-transform: uppercase;
}
.title .seperator {
  margin: 0 auto 10px;
}

.item {
  position: relative;
  margin-bottom: 30px;
  min-height: 1px;
  float: left;
  -webkit-backface-visibility: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.item .item-in {
  background: #fff;
  padding: 40px;
  position: relative;
}
.item .item-in:hover:before {
  width: 100%;
}
.item .item-in::before {
  content: "";
  position: absolute;
  bottom: 0px;
  height: 2px;
  width: 0%;
  background: #333333;
  right: 0px;
  transition: width 0.4s;
}

.item h4 {
  font-size: 18px;
  margin-top: 25px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.item p {
  font-size: 12px;
}
.item a {
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  color: #666666;
  margin-top: 10px;
}
.item a i {
  opacity: 0;
  padding-left: 0px;
  transition: 0.4s;
  font-size: 24px;
  display: inline-block;
  top: 5px;
  position: relative;
}
.item a:hover {
  text-decoration: none;
}
.item a:hover i {
  padding-left: 10px;
  opacity: 1;
  font-weight: 300;
}

.item .icon {
  position: absolute;
  top: 27px;
  left: -16px;
  cursor: pointer;
}
.item .icon a {
  font-family: "Merriweather", serif;
  font-size: 14px;
  font-weight: 400;
  color: #999;
  text-transform: none;
}
.item .icon svg {
  width: 32px;
  height: 32px;
  float: left;
}
.item .icon .icon-topic {
  opacity: 0;
  padding-left: 0px;
  transition: 0.4s;
  display: inline-block;
  top: 0px;
  position: relative;
}
.item .icon:hover .icon-topic {
  opacity: 1;
  padding-left: 10px;
}

@media only screen and (max-width: 768px) {
  .item .icon {
    position: relative;
    top: 0;
    left: 0;
  }
}
</style>
</head>
<body>
  <section class="title container">
  <div class="row">
    <div class="col-md-12">
      <h1>Blog Layout</h1>
      <div class="seperator"></div>
      <p>Blocks with hover effects</p>
    </div>
  </div>
</section>

<!-- Start Blog Layout -->
<div class="container">
  <div class="row">
    <div class="col-md-6 item">
      <div class="item-in">
        <h4>Some Kind of Title</h4>
        <div class="seperator"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi expedita eveniet consectetur, voluptates voluptatum, sit excepturi earum. Veniam eius amet, accusantium, deserunt officia, quos qui debitis laboriosam velit quis autem!</p>
        <a href="#">Read More
          <i class="fa fa-long-arrow-right"></i>
        </a>
      </div>
    </div>
    <div class="col-md-6 item">
      <div class="item-in">
        <h4>Some Kind of Title</h4>
        <div class="seperator"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi expedita eveniet consectetur, voluptates voluptatum, sit excepturi earum. Veniam eius amet, accusantium, deserunt officia, quos qui debitis laboriosam velit quis autem!</p>
        <a href="#">Read More
          <i class="fa fa-long-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>
  <p style="text-align:center;">With Icons <em>(hover over icons)</em></p>
  <!-- With Icons -->
  <div class="row">
    <div class="col-md-6 item">
      <div class="item-in">
        <div class="icon">
          <a href="#">
          <?xml version="1.0" encoding="iso-8859-1"?>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16.662 16.662" xml:space="preserve" width="512px" height="512px">
            <g>
              <path d="M13.365,0.324H3.297L0,5.109l8.331,11.229l8.331-11.229C16.662,5.109,13.365,0.324,13.365,0.324z    M15.213,4.734h-3.4l1.298-3.054C13.111,1.68,15.213,4.734,15.213,4.734z M12.526,1.303l-1.342,3.156L9.071,1.303H12.526z    M10.544,4.734H6.442l1.909-3.273L10.544,4.734z M7.648,1.303L5.856,4.378L4.185,1.303H7.648z M3.584,1.634l1.685,3.1h-3.82   C1.449,4.734,3.584,1.634,3.584,1.634z M1.45,5.421h4.124l1.95,8.184C7.524,13.605,1.45,5.421,1.45,5.421z M6.279,5.421h4.548   l-2.468,8.732C8.359,14.153,6.279,5.421,6.279,5.421z M9.28,13.413l2.259-7.992h3.672L9.28,13.413z" fill="#777777"/>
            </g>
            </svg>
             <div class="icon-topic">Work Topic</div>
            </a>
        </div>
        <h4>Some Kind of Title</h4>
        <div class="seperator"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi expedita eveniet consectetur, voluptates voluptatum, sit excepturi earum. Veniam eius amet, accusantium, deserunt officia, quos qui debitis laboriosam velit quis autem!</p>
        <a href="#">Read More
          <i class="fa fa-long-arrow-right"></i>
        </a>
      </div>
    </div>
    <div class="col-md-6 item">
      <div class="item-in">
        <div class="icon">
          <a href="#">
          <?xml version="1.0" encoding="iso-8859-1"?>
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16.662 16.662" xml:space="preserve" width="512px" height="512px">
            <g>
              <path d="M13.365,0.324H3.297L0,5.109l8.331,11.229l8.331-11.229C16.662,5.109,13.365,0.324,13.365,0.324z    M15.213,4.734h-3.4l1.298-3.054C13.111,1.68,15.213,4.734,15.213,4.734z M12.526,1.303l-1.342,3.156L9.071,1.303H12.526z    M10.544,4.734H6.442l1.909-3.273L10.544,4.734z M7.648,1.303L5.856,4.378L4.185,1.303H7.648z M3.584,1.634l1.685,3.1h-3.82   C1.449,4.734,3.584,1.634,3.584,1.634z M1.45,5.421h4.124l1.95,8.184C7.524,13.605,1.45,5.421,1.45,5.421z M6.279,5.421h4.548   l-2.468,8.732C8.359,14.153,6.279,5.421,6.279,5.421z M9.28,13.413l2.259-7.992h3.672L9.28,13.413z" fill="#777777"/>
            </g>
            </svg>
             <div class="icon-topic">Another Category or Post Type</div>
            </a>
        </div>
        <h4>Some Kind of Title</h4>
        <div class="seperator"></div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi expedita eveniet consectetur, voluptates voluptatum, sit excepturi earum. Veniam eius amet, accusantium, deserunt officia, quos qui debitis laboriosam velit quis autem!</p>
        <a href="#">Read More
          <i class="fa fa-long-arrow-right"></i>
        </a>
      </div>
    </div>
  </div>
</div>
</body>
</html>

10. By Sam

Made by Sam. Creative Blog Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
<style>
* {
  box-sizing: border-box;
}

body {
  font-family: Lato, Verdana, sans-serif;
  color: #242025;
  font-size: 0.9rem;
  background: #FA643C;
}

a {
  text-decoration: none;
  color: #FA643C;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.7rem;
  transition: all 0.2s ease;
}
a:hover {
  color: #f93c0a;
}

.clear:before,
.clear:after {
  content: "";
  display: table;
}

.clear:after {
  clear: both;
}

.clear {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

.list--reset {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list--inline li {
  display: block;
  float: left;
}

button.btn {
  background: transparent;
  border: transparent;
}
button.btn:focus, button.btn:active {
  outline: none;
}

nav {
  background: #FA643C;
  position: relative;
  padding: 0 1rem;
  height: 3.5rem;
}
nav a {
  color: #ffffff;
  padding: 0 0.3rem;
  position: relative;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
}
nav a:hover {
  color: rgba(255, 255, 255, 0.6);
}
nav a.nav--svg {
  margin-top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
}
nav a.profile--img {
  margin-top: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
}
nav a:hover img {
  opacity: 0.6;
}
nav p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: 900;
  font-size: 1.5rem;
  margin: 0;
}
nav ul li {
  height: 3.5rem;
  line-height: 3.5rem;
}
nav ul li:last-child a {
  margin-right: 0;
}

.nav--svg img {
  height: 1.5rem;
  width: 1.5rem;
  transition: all 0.2s ease;
  position: absolute;
  left: 0;
}

.profile--img img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  transition: all 0.2s ease;
  position: absolute;
  left: 0;
}

.nav--left {
  float: left;
}

.menu--button {
  margin-right: 1rem;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 1rem;
  position: relative;
}
.menu--button img {
  height: 1.5rem;
  width: 1.5rem;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s ease;
}
.menu--button:hover img {
  opacity: 0.6;
}

.nav--right {
  float: right;
}

.container--fluid {
  width: 100%;
  overflow: hidden;
}

.main--content,
.post {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

.post {
  width: 100%;
  background: gray;
  min-height: 25rem;
  height: 40vw;
  position: relative;
  opacity: 0;
  overflow: hidden;
}
.post:after {
  content: "";
  display: block;
  background: transparent;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: all 0.2s ease;
}
.post:hover:after {
  background: rgba(0, 0, 0, 0.2);
}
.post:nth-child(odd) {
  -webkit-animation: slideLeft ease 1;
          animation: slideLeft ease 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.post:nth-child(odd) .p__full--details {
  -webkit-animation: slideTop ease 1;
          animation: slideTop ease 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.post:nth-child(even) {
  -webkit-animation: slideRight ease 1;
          animation: slideRight ease 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
}
.post:nth-child(even) .p__full--details {
  -webkit-animation: slideTop ease 1;
          animation: slideTop ease 1;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}
.post:first-child {
  background: url("https://images.unsplash.com/photo-1450849608880-6f787542c88a?crop=entropy&dpr=2&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1575") no-repeat;
  background-size: cover;
  background-position: 50% 100%;
}
.post:nth-child(2) {
  background: url("https://images.unsplash.com/photo-1445285303476-2f3b16d67b7a?crop=entropy&dpr=2&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1575") no-repeat;
  background-size: cover;
  background-position: 50% 100%;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.post:nth-child(3) {
  background: url("https://images.unsplash.com/photo-1445285303476-2f3b16d67b7a?crop=entropy&dpr=2&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1575") no-repeat;
  background-size: cover;
  background-position: 50% 100%;
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
.post:nth-child(4) {
  background: url("https://images.unsplash.com/photo-1444090542259-0af8fa96557e?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=39512ac7f1f82a13ce3509eb20424be4") no-repeat;
  background-size: cover;
  background-position: 50% 100%;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

.p--title {
  margin: 0;
  max-width: 75%;
}

.data {
  letter-spacing: 1px;
  font-size: 0.6rem;
  display: inline-block;
  float: left;
  margin: 0;
  line-height: 1.5rem;
  height: 1.5rem;
  padding-left: 1.5rem;
  position: relative;
}
.data:first-child {
  margin-right: 1rem;
}

.data--source:before {
  content: "";
  display: inline-block;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/source-icon.svg") no-repeat;
  width: 1.5rem;
  height: 1.5rem;
  position: absolute;
  left: 0;
  opacity: 0.6;
}

.data--time:before {
  content: "";
  display: inline-block;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/clock-icon.svg") no-repeat;
  width: 1rem;
  height: 1rem;
  margin: 0.25rem;
  position: absolute;
  left: 0;
  opacity: 0.6;
}

.data--category {
  float: right;
}
.data--category:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
}

.post__full {
  color: #ffffff;
}
.post__full .p__full--details {
  position: absolute;
  padding: 2rem;
  bottom: 0rem;
  left: 0rem;
  right: 0rem;
  z-index: 10;
}
.post__full .p__full--details .p--title {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.post__full .data {
  color: rgba(255, 255, 255, 0.8);
}
.post__full .data--source:before {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/source-icon.svg") no-repeat;
}
.post__full .data--time:before {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/clock-icon.svg") no-repeat;
}
.post__full .data--category:after {
  background: rgba(255, 255, 255, 0.3);
}

.post__half {
  color: #242025;
  position: relative;
}
.post__half .p__half--details {
  position: absolute;
  padding: 2rem;
  top: 0;
  bottom: 0rem;
  background: #ffffff;
  z-index: 10;
}
.post__half .p--title {
  font-size: 1.6rem;
  position: absolute;
  width: 75%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.post__half:nth-child(even) .p__half--details {
  left: 0;
  right: 50%;
}
.post__half:nth-child(even) .data--category {
  position: absolute;
  right: 2rem;
  bottom: 2rem;
  color: rgba(255, 255, 255, 0.7);
  z-index: 10;
}
.post__half:nth-child(even) .data--category:after {
  background: rgba(255, 255, 255, 0.3);
}
.post__half:nth-child(odd) .p__half--details {
  left: 50%;
  right: 0;
}
.post__half:nth-child(odd) .data--category {
  position: absolute;
  left: 2rem;
  bottom: 2rem;
  color: rgba(255, 255, 255, 0.7);
  padding-left: 0;
  z-index: 10;
}
.post__half:nth-child(odd) .data--category:after {
  background: rgba(255, 255, 255, 0.3);
}
.post__half .p__half-data {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
}
.post__half .data {
  color: #242025;
}
.post__half .data--source:before {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/source-icon-blck.svg") no-repeat;
}
.post__half .data--time:before {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/clock-icon-blck.svg") no-repeat;
}
.post__half .data--category:after {
  background: rgba(36, 32, 37, 0.3);
}

.link__section {
  height: 10rem;
  text-align: center;
  line-height: 10rem;
}
.link__section a {
  color: #ffffff;
  padding: 0.75rem 1.5rem;
  border: 1px solid #ffffff;
}
.link__section a:hover {
  background: #ffffff;
  color: #FA643C;
}

footer {
  height: 20rem;
  padding: 1rem;
  margin: 0 auto;
  text-align: center;
  color: #ffffff;
  width: 80%;
  max-width: 80rem;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  position: relative;
}
footer h3 {
  margin-top: 3rem;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}
footer ul.list--inline {
  margin: 0 auto;
}
footer ul.list--inline li {
  display: inline-block;
  padding: 1rem;
  float: none;
  padding: 0.5rem;
}
footer a {
  color: #ffffff;
  padding: 0.5rem;
}
footer a:hover {
  color: rgba(255, 255, 255, 0.8);
}

.copyright {
  margin-top: 6rem;
  font-size: 0.9em;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.5);
}

@media screen and (min-width: 50rem) {
  .post {
    width: 50%;
    float: left;
  }
}
@media screen and (min-width: 70rem) {
  nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
  }

  .container--fluid {
    width: 80%;
    margin: 0 auto;
  }

  .main--content {
    padding-top: 5%;
    margin-top: 5%;
  }

  .post {
    width: 50%;
    float: left;
  }

  .post__full .p__full--details .p--title {
    font-size: 2.5rem;
  }

  .post__half .p--title {
    font-size: 1.9rem;
  }
}
@-webkit-keyframes slideLeft {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@keyframes slideLeft {
  from {
    left: -100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}
@-webkit-keyframes slideRight {
  from {
    right: -100%;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}
@keyframes slideRight {
  from {
    right: -100%;
    opacity: 0;
  }
  to {
    right: 0;
    opacity: 1;
  }
}
@-webkit-keyframes slideTop {
  from {
    bottom: -100%;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
@keyframes slideTop {
  from {
    bottom: -100%;
    opacity: 0;
  }
  to {
    bottom: 0;
    opacity: 1;
  }
}
@-webkit-keyframes slideFourth {}
@keyframes slideFourth {}
</style>
</head>
<body>
  <nav class="clear">
  <div class="nav--left">
    <ul class="list--reset list--inline">
      <li><button type="button" class="btn menu--button"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/menu-icon.svg" alt="Menu" /></button></li>
      <li><a href="#0">News</a></li>
    </ul>
  </div>

  <p>N</p>

  <div class="nav--right">
    <ul class="list--reset list--inline">
      <li><a href="#0" class="nav--svg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/search-icon.svg" alt="Search" /></a></li>
      <li><a href="#0" class="profile--img"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/profile-img.jpg" alt="Profile" /></a></li>
      <li><a href="#0" class="nav--svg"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/252775/bookmar-icon.svg" alt="bookmark" /></a></li>
    </ul>
  </div>
</nav>

<div class="container--fluid main--content clear">

  <section class="post post__full">
    <div class="p__full--details">
      <h2 class="p--title">This is the big title about the blog post</h2>
      <div class="p__full-data clear">
        <a class="data data--source" href="#0">Space.com</a>
        <p class="data data--time">28m ago</p>
        <a class="data data--category" href="#0">Category</a>
      </div>
    </div>
  </section>

  <section class="post post__half">
    <div class="p__half--details">
      <h2 class="p--title">This is the big title about the blog post</h2>
      <div class="p__half-data">
        <a class="data data--source" href="#0">Space.com</a>
        <p class="data data--time">28m ago</p>
      </div>
    </div>
    <a class="data data--category" href="#0">Category</a>
  </section>

  <section class="post post__half">
    <div class="p__half--details">
      <h2 class="p--title">This is the big title about the blog post</h2>
      <div class="p__half-data">
        <a class="data data--source" href="#0">Space.com</a>
        <p class="data data--time">28m ago</p>
      </div>
    </div>
    <a class="data data--category" href="#0">Category</a>
  </section>

  <section class="post post__full">
    <div class="p__full--details">
      <h2 class="p--title">This is the big title about the blog post</h2>
      <div class="p__full-data">
        <a class="data data--source" href="#0">Space.com</a>
        <p class="data data--time">28m ago</p>
        <a class="data data--category" href="#0">Category</a>
      </div>
    </div>
  </section>

</div>

<div class="container--fluid link__section">
  <a href="#0" class="btn btn-default">Load More</a>
</div>

<footer>
  <h3>How is this footer awesome</h3>
  <ul class="list--reset list--inline clear">
    <li><a href="#0">Links</a></li>
    <li><a href="#0">Links</a></li>
    <li><a href="#0">Links</a></li>
    <li><a href="#0">Links</a></li>
    <li><a href="#0">Links</a></li>
  </ul>
  <p class="copyright">Β©2015 All rights reserved</p>
</footer>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

11. By Arjun sreekumar

Made by Arjun sreekumar. Responsive Minimal Blog layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>

<style>
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900,400italic,700italic,900italic);
html {
  box-sizing: border-box;
}

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


/*! normalize.css v3.0.2 | MIT License | git.io/normalize */


/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}


/**
 * Remove default margin.
 */

body {
  margin: 0;
}


/* HTML5 display definitions
   ========================================================================== */


/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}


/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */
}


/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}


/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}


/* Links
   ========================================================================== */


/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}


/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}


/* Text-level semantics
   ========================================================================== */


/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}


/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}


/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}


/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}


/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}


/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}


/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}


/* Embedded content
   ========================================================================== */


/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}


/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}


/* Grouping content
   ========================================================================== */


/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}


/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}


/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}


/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}


/* Forms
   ========================================================================== */


/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */


/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */
}


/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}


/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}


/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */
}


/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}


/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}


/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}


/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}


/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}


/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box;
}


/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}


/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}


/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */
}


/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}


/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}


/* Tables
   ========================================================================== */


/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

body {
  margin: 0px;
  background: #DFCCAE;
}

.nav {
  background: #F4821C;
  border-bottom: 1px solid #EFEFEF;
  height: 100px;
}

.nav .logo {
  margin-top: 0px;
}

.nav .logo img {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 100%;
  width: 137px;
  height: 137px;
  position: absolute;
  left: 50%;
  top: 90px;
  transform: translate(-50%, -50%);
}

.nav .logo img:last-child {
  margin-right: 0;
}

.post {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
  background: white;
  padding:1% 0;
}

.post::after {
  clear: both;
  content: "";
  display: table;
}


.post .section {
  width: 70%;
  margin: 0 auto;
  padding-bottom: 5%;
}

.post h1 {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  color: #423B35;
  text-align: left;
  font-size: 36px;
}

.post h1::first-letter {
  font-weight: 700;
  font-size: 40px;
}

.post p {
  outline-offset: 110px;
  text-align-last: center;
  font-family: open sans;
  font-weight: 400;
  margin: 5% auto;
}

.post .readmore {
  text-decoration-color: #DFCCAE;
  text-decoration: overline;
  color: #423B35;
  display: block;
  float: right;
  font-family: 'Playfair Display', serif;
  border-bottom: 2px inset #423B35;
}

.post .readmore:hover {
  color: #F4821C;
}

.post_header {
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  background: #f4f4f4;
  padding: 1%;
  font-family: open sans light;
}

.post_header::after {
  clear: both;
  content: "";
  display: table;
}

.post_header span {
  float: left;
  display: block;
  margin-right: 2.35765%;
  width: 31.76157%;
  text-align: center;
  color: #423B35;
  text-decoration: none;
}

.post_header span:last-child {
  margin-right: 0;
}

.post_header .share {
  background-image: url(../images/icons/share.png);
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
}

.footer {
  font-family: 'Playfair Display', serif;
  margin: 100px;
  text-align: center;
}


.logo_icon{
  background:#423B35;
  border-radius:50%;
  padding:50px;
  width:100px;
  height:100px;
  font-size:20px;
}
</style>
</head>
<body>
  <html>
<head>
    <title>Minimal Blog</title>
    <link rel="stylesheet" href="css/main.css" type="text/css">
</head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
   <div class="wrap">
  <div class="nav">
     <a class="logo" href="#"><img src="https://raw.githubusercontent.com/inspirebin/simple_blog_/master/site/images/logo.png" alt="Minimal Blog"/></a>
    </div>
    <div class="posts">
        <div class="post">
            <div class="section">
                <h1>How to get things done without depending others</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum laborum in possimus maiores nesciunt sint, blanditiis excepturi eius similique ab nostrum repellat illo quae iure quia! Adipisci repellendus numquam voluptates!</p>
            <a href="#" class="readmore">Read More</a>
            </div>
        </div>
        <div class="post">
            <div class="section">
                <h1>The best set of lorem ipsum posts ever made by admin</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum laborum in possimus maiores nesciunt sint, blanditiis excepturi eius similique ab nostrum repellat illo quae iure quia! Adipisci repellendus numquam voluptates!</p>
            <a href="#" class="readmore">Read More</a>
            </div>
        </div>
    </div>
    <div class="footer">
        <p>copyright (C) 2015 Minimal Blog Inc.</p>
    </div>
</div>
</body>
</html>

12. By Ricky Eckhardt

Made by Ricky Eckhardt. News Blog Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<style>
@import url(https://fonts.googleapis.com/css?family=Karma:600);
@import url(https://fonts.googleapis.com/css?family=Hind:300);
@import url(https://fonts.googleapis.com/css?family=Rozha+One);
* {
  padding: 0;
  margin: 0;
}

body {
  padding-left: 300px;
  font-family: "Hind", sans-serif;
  color: rgba(0, 0, 0, 0.8);
}

h1 {
  font-family: "Karma", serif;
  color: black;
}

h2 {
  font-weight: 500;
}

a {
  text-decoration: none;
  color: rgba(0, 0, 0, 0.8);
}

#left-menu {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 300px;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-right: 2px solid rgba(0, 0, 0, 0.1);
}

.search {
  position: relative;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

[type=search] {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  line-height: 30px;
  padding: 5px 1em;
}

[type=search]:focus {
  outline: none;
}

nav {
  position: relative;
  padding: 10px 1em;
}

.social {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100px;
  width: 100%;
  line-height: 100px;
  text-align: center;
  background-color: #ebebeb;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  z-index: 99;
}

i {
  margin: 0 0.5em;
  font-size: 1.5em;
}

ul li {
  list-style-type: none;
}

nav {
  font-size: 0.875em;
  line-height: 1.428571429em;
  background-color: white;
}

nav ul li {
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0.5em;
}

nav h1 {
  line-height: 1.8em;
  font-size: 1.24em;
}

nav p {
  margin-bottom: 0.5em;
}

time {
  font-size: 0.75em;
  color: rgba(0, 0, 0, 0.6);
}

main {
  max-width: 760px;
  margin: 0 auto;
  padding: 2em;
}

article h1 {
  text-align: center;
  font-size: 3.263157895em;
  line-height: 1.306451613em;
  margin-top: 0.87096774em;
  margin-bottom: 0.43548387em;
}

article p {
  margin-top: 1.42105263em;
  margin-bottom: 1.42105263em;
  font-size: 1.1875em;
  line-height: 1.421052632em;
}

article time {
  display: block;
  font-size: 1.1875em;
  text-align: center;
}
</style>
</head>
<body>
  <section id="left-menu">
  <section class="search">
    <input placeholder="Search..." type="search" />
  </section>
  <nav id="nice-scroll">
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
    <ul>
      <li>
        <a href="#">
          <h1>
            10 Things That Are Awesome
          </h1>
          <p>
            This post is about everything awesome in life. You could click on this, but it doesn't actually link to anything.
          </p>
          <time>20 AUG 2014</time></a>
      </li>
    </ul>
  </nav>
  <section class="social">
    <i class="fa fa-twitter-square"></i><i class="fa fa-pinterest-square"></i><i class="fa fa-facebook-square"></i><i class="fa fa-pied-piper"></i>
  </section>
</section>
<main>
  <article>
    <h1>
      Why You Are Awesome
    </h1>
    <time>12 JUL 2014</time>
    <p>
        Hi.
    </p>
  </article>
</main>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/jquery.nicescroll.min.js'></script>
      <script id="rendered-js" >
$(document).ready(
function () {

  var winHeight = $(window).height();
  var height = winHeight - 200;
  $("nav").css("height", height);

  $("#nice-scroll").niceScroll({ cursorfixedheight: 100 });
});

$(window).resize(
function () {
  var winHeight = $(window).height();
  var height = winHeight - 200;

  $("nav").css("height", height);
});
    </script>
</body>
</html>

13. By Kase

Made by Kase. Responsive Blog Layout. ( Source )

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
<style>
@import url("https://fonts.googleapis.com/css?family=Roboto");
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
body {
  background: #1e1e1e;
}
#main {
  background: #fff;
  box-shadow: 0 0 20px 12px rgba(0,0,0,0.2);
  -o-: box-shadow 0 0 20px 12px rgba(0,0,0,0.2);
  -webkit-: box-shadow 0 0 20px 12px rgba(0,0,0,0.2);
  -moz-: box-shadow 0 0 20px 12px rgba(0,0,0,0.2);
  width: 960px;
  padding: 0px 0px 40px 0px;
  margin: 20px auto;
}
header {
  width: 100%;
  height: 300px;
  background: url("https://i.imgur.com/B2X2HSe.png");
}
#article-info {
  position: relative;
  background: rgba(0,0,0,0.75);
  z-index: 2;
  padding: 15px 0px 15px 0px;
  min-height: 30px;
}
#article-title {
  line-height: 30px;
  font-size: 28px;
  margin-bottom: 10px;
  width: 600px;
  font: 23px "Roboto", sans-serif;
  margin: auto;
  color: #fff;
}
#article-description {
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  width: 600px;
  font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  line-height: 20px;
}
h1 {
  width: 100%;
  background-color: rgba(0,0,0,0);
  text-align: center;
  line-height: 220px;
  color: #0b914f;
  font-family: 'Ubuntu', sans-serif;
  font-size: 4em;
  text-transform: uppercase;
}
h4 {
  font-family: 'Ubuntu', sans-serif;
  font-size: 20px;
  padding: 25px 0px 5px 0px;
  text-transform: capitalize;
  color: #46d28e;
  width: 600px;
  margin: auto;
}
p {
  width: 600px;
  padding: 5px 0px 10px 0px;
  margin: auto;
  font-size: 14px;
  line-height: 20px;
  font-family: 'Roboto', sans-serif;
  color: #222;
}
@media only screen and (max-width: 960px) {
  #main {
    width: 100%;
    margin: 0px auto;
  }
}
@media only screen and (max-width: 768px) {
  p {
    width: 80%;
  }
  h4 {
    width: 80%;
  }
  #article-title {
    width: 80%;
  }
  #article-description {
    width: 80%;
  }
}
</style>
</head>
<body>
  <section id="main">
  <header>
    <h1>title</h1>
    <section id="article-info">
      <h2 id="article-title">Article title</h2>
      <h3 id="article-description">Short description</h3>
    </section>
    
  </header>
  <h4>title</h4>
  <p>text
  </p>
  <h4>title</h4>
  <p>text</p>
  <h4>title</h4>
 <p>     Text </p>
  <h4>title</h4>
 <p>  Text  </p>
  
</section>
</body>
</html>