Blog Layout

FEATURED

In this example below you will see how to do a Blog Layout with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Yuki, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Yuki ©
  • HTML
  • CSS
  • JavaScript
    <!--
I designed my blog based on this layout: http://www.ykst.de/
some tweaks are added. 

blog post about this design(in Japanese) :
http://www.ykst.de/blog-new-layout/
-->
<header>
    <h3 class="site-title">Site Title</h3>
    <ul>
      <li>Blog</li>
      <li>Work</li>
      <li>About</li>
    </ul>
 </header>
 <section>
    <article>
      <div class="article-wrapper">
        <div class="blog-label">
        <div class="home-label">
        <h4 class="home-label-title">BLOG</h4>
        </div>
        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
           <div class="thumbnail-frame">

           </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
        <div class="blog-list-home">
          <div class="blog-thumbnail">
            <div class="thumbnail-frame">

            </div>
          </div>
          <div class="blog-list-content">
            <h4>Blog Title Sample</h4>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus nam, vero facilis sint dolorem numquam veniam consequuntur repudiandae pariatur ipsa.
          </div>

        </div>
      </div>

      </div>
    </article>
    <aside>
      <div class="aside-about">
        <div class="home-label aside-label">
          <h4 class="home-label-title">ABOUT</h4>
        </div>
        <div class="aside-content-home">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nam neque non rem rerum ipsa in doloremque aspernatur eius iste, cupiditate repudiandae, quis laboriosam ipsam, architecto sed dolorem quos enim optio eveniet dignissimos aliquam temporibus? Laboriosam ipsa veritatis nemo ab.
        </div>
      </div>
      <div class="aside-work">
        <div class="home-label aside-label">
          <h4 class="home-label-title">WORK</h4>
        </div>
        <div class="aside-content-home">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum nam neque non rem rerum ipsa in doloremque aspernatur eius iste, cupiditate repudiandae, quis laboriosam ipsam, architecto sed dolorem quos enim optio eveniet dignissimos aliquam temporibus? Laboriosam ipsa veritatis nemo ab.
        </div>
      </div>
    </aside>
 </section>
 <footer>
    footer
 </footer>

/*Downloaded from https://www.codeseek.co/yukisato/blog-layout-gKgqyG */
    body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body * {
  box-sizing: border-box;
}

/*
  ======  550px ======
*/

@media (min-width: 550px) {
/*
 this is to apply flexbox to header and section when the window width is more than 550px.
  */
header {
  display: flex;
  }

section {
	display: flex;
  }
}

header {
  height: 45px;
  border-bottom: 1px solid #eee;
}

header h3 {
  flex: 3;
  margin-left: 30px;
  margin-top: 15px;
}

header ul {
  flex: 1;
}

header li{
  display: inline-block;
  margin-left: 15px;
  font-size: 0.9rem;
}


article {
  flex-basis: 70%;
  border: 1px solid #F8F8F8;
}

aside {
  flex-basis: 30%;
  background: #F8F8F8;
  padding: 10px;
}

footer {
  height: 200px;
  background: #eee;
  text-align: center;
  padding-top: 20px;
}



.article-wrapper {
  width: 90%;
  background: #eee;
  margin: 0 auto;
}

.home-label {
  border-bottom: 1px #333 solid;
}

.aside-label {
  width: 90%;
}

.home-label-title {
  display: inline-block;
  background: #333;
  color: #fff;
  margin-bottom: 0;
  padding: 8px 15px 3px 15px;
  border-radius: 5px 5px 0 0;
  font-weight: 200;
  font-size: 0.9rem;
}


.blog-list-home {
  display: flex;
  flex-direction: row;
  border-bottom: solid 1px #B8B8B8;
}

.blog-thumbnail {
  flex-basis: 30%;
  background: #ccc;
  padding: 15px;
}

.thumbnail-frame {
  width: 130px;
  background: #eee;
  height: 80px;
  display: block;
}

.blog-list-content {
  flex-basis:  70%;
  background: #F0F0F0;
  line-height: 1.2rem;
  color: #303030;
  font-size: 0.9rem;
  padding: 8px;
}

.blog-list-content h4 {
  font-size: 1.2rem;
  margin: 10px 0;
}

.aside-content-home {
  padding: 10px;
  line-height: 1.2rem;
  color: #303030;
}




/*Downloaded from https://www.codeseek.co/yukisato/blog-layout-gKgqyG */
    

Comments