<header>
header
<nav>nav</nav>
</header>
<main>
main
<section class="ads">
( ads box )<br><br>image or linkBox or iframe ADS
</section>
<article>
post1
<header class="postHeader">
( post1 header )
<h2>post1 title</h2>
date of post publish : <time>2017/11/27</time>
<br><br>
author / category / comment number / visit number / post link
</header>
<div class="post_content">80first word post1</div>
<footer>
( post1 footer )<br><br>read more button
</footer>
</article>
<article>post2</article>
<article>post3</article>
<article>post4</article>
<article>post5</article>
<nav class="pagination">nav.pagination</nav>
</main>
<aside>
(sidbar right)
<div class="items">
<header>item1 header</header>
<section>item1 content</section>
</div>
<div class="items">
<header>item2 header</header>
<section>item2 content</section>
</div>
<div class="items">
<header>item3 header</header>
<section>item3 content</section>
</div>
</aside>
<footer>footer</footer>
* {
text-align: left;
}
body {
font-family: Verdana,sans-serif;
font-size: 0.9em;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin: 0px auto 0px auto;
direction: rtl;
background-color: white;
max-width: 1366px;
}
header {
order: 1;
/* flex-grow: 1; */
/* flex-shrink: 1; */
flex-basis: 100%;
padding: 10px;
margin:5px;
color: black;
background-color: lightgrey;
}
header.postHeader {
background-color: black;
color: white;
}
main {
order: 3;
flex-grow: 3;
background-color: lightgrey;
margin:5px;
padding: 10px;
}
nav {
background-color: black;
color: white;
padding: 10px;
margin:10px;
}
nav.breadcrumb {
padding: 10px;
margin:10px;
background-color: #16a085;
color: white;
}
nav.pagination {
padding: 10px;
margin:10px;
background-color: #c0392b;
color: white;
}
article {
padding: 10px;
margin:10px;
color: white;
background-color: #27ae60;
}
aside {
display: flex;
flex-direction: column;
order: 2;
flex-grow: 1;
margin: 5px;
padding: 10px;
background-color: lightgrey;
}
aside .items {
height: 200px;
background-color: black;
margin: 5px;
}
aside .items header {
background-color: #27ae60;
}
aside .items section {
background-color: transparent;
}
footer {
order: 4;
/* flex-grow: 1; */
/* flex-shrink: 1; */
flex-basis: 100%;
padding: 10px;
margin:5px;
color: white;
background-color: black;
}
section {
padding: 10px;
margin:10px;
color: white;
background-color: green;
}
section.ads {
background-color: #d35400;
}
section#author {
background-color: #2980b9;
}
section#tags {
background-color: #8e44ad;
}
section#comment {
background-color: #f39c12;
}
section#comment > section {
background-color: black;
}
.post_content {
padding: 10px;
margin:5px;
color: white;
background-color: black;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.