CSS - Flexbox layout - Cosmos Blog

In this example below you will see how to do a CSS - Flexbox layout - Cosmos Blog with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by zaccb, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright zaccb ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>CSS - Flexbox layout - Cosmos Blog</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="page">
  <div class="header">
    <div class="header-inner">
      Cosmos Blog
    </div>
  </div>
  <div class="content">
    <div class="sidebar left">
      <span>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa velit sequi sapiente ex quam ea illo dolore, sint fugit. Libero velit voluptatibus inventore vel consequuntur, sed dolor saepe animi provident cumque. Molestias odit nostrum quidem, aliquam asperiores quia placeat cupiditate tenetur modi debitis assumenda tempora numquam porro, quibusdam aperiam soluta?
      </span>
    </div>
    <div class="main">
      <img src="http://spaceholder.cc/900x200" alt="" />
      <h1>In a galaxy far, far away...</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident voluptate ullam inventore aliquam a, laboriosam voluptas ipsam saepe quod numquam dolorum facilis impedit at sint accusamus animi odio. Quis ex repellendus odio corporis quo. Excepturi dolorum autem minima minus neque, porro recusandae. In iure fuga vel consequatur ea molestias quisquam modi ut voluptas dignissimos totam, rem quam reiciendis sunt recusandae itaque et quos minus, quasi mollitia culpa temporibus. Eligendi nostrum beatae dolores nemo natus consequuntur totam modi perspiciatis ipsum. Ducimus obcaecati corporis, magnam quod veritatis pariatur dolorum voluptatum tenetur eveniet.</p>
    </div>
    <div class="sidebar right">
      <span>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid facere, sequi maxime libero rerum nobis quam non sint nostrum?
      </span>
    </div>
  </div>
  <div class="footer">
    Thank you for reading the Cosmos Blog.
    
    <ul>
      <li>Link 1</li>
      <li>Link 2</li>
      <li>Link 3</li>
      <li>Link 4</li>
      <li>Link 5</li>
      <li>Link 6</li>
    </ul>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/zaccb/css-flexbox-layout-cosmos-blog-RRvQZK */
body {
  padding: 0;
  margin: 0;
}
.page {
  font-family: arial;
  color: #555555;
  padding-top: 100px;
}
.page > div {
  padding: 20px;
}
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  box-sizing: border-box;
  background-color: #222222;
  color: white;
  font-weight: bold;
}
.header:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.header-inner {
  display: inline-block;
  vertical-align: middle;
}
.footer {
  background-color: #888888;
  text-align: center;
  color: #222222;
}
.footer ul {
  list-style-type: none;
  padding: 0;
  margin-top: 40px;
}
.footer li {
  margin-bottom: 3px;
}
.content {
  display: flex;
}
.content .sidebar {
  color: white;
  flex: 0 0 200px;
  height: auto;
}
.content .sidebar span {
  padding: 20px;
  display: block;
  background-color: rebeccapurple;
}
.content .main {
  padding: 20px;
  padding-top: 0;
}
.content .main img {
  width: 100%;
}
.content .main p:first-child {
  padding-top: 0;
  margin-top: 0;
}

Comments