W3Schools Tryit Editor

<!DOCTYPE html>

<html>
<title>W3.CSS Fashion Blog Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

.blog-grid {
  display:grid;
  grid-template-columns:1fr;
}

@media (min-width:993px) {
  .blog-grid {
    grid-template-columns:2fr 1fr;
  }
}
</style>

</nav>

<h1 class="w3-xxxlarge">
<b>JANE BLOGLIFE</b>
</h1>

<h6>
Welcome to the blog of
<span class="w3-tag">Jane's world</span>
</h6>

</header>

<h1 class="w3-jumbo w3-text-white w3-hide-small">
<b>FASHION BLOG</b>
</h1>

<p>
<button class="w3-button w3-white w3-padding-large
w3-large w3-opacity w3-hover-opacity-off"
onclick="document.getElementById('subscribe').style.display='block'">
SUBSCRIBE
</button>
</p>

</div>
</header>

<main>

<div class="w3-center">
<h3>TITLE HEADING</h3>
<h5>
Title description,
<span class="w3-opacity">May 2, 2016</span>
</h5>
</div>

<p>
<b>More Hats!</b>
I am crazy about hats these days. Some text about this blog entry.
Fashion fashion and mauris neque quam, fermentum ut nisl vitae,
convallis maximus nisl.
</p>

<p>
Sunt in culpa qui officia deserunt mollit anim id est laborum
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua.
</p>

<p>
<button class="w3-button w3-black"
onclick="myFunction('demo1')" id="myBtn">
<b>Replies  </b>
<span class="w3-tag w3-white">1</span>
</button>
</p>

</div>

<div>
<h4>
George
<span class="w3-opacity w3-medium">
May 3, 2015, 6:32 PM
</span>
</h4>

<p>Great blog post! Following</p>
</div>

</div>
</div>

</div>
</article>

<hr>

<div class="w3-center">
<h3>TITLE HEADING</h3>
<h5>
Title description,
<span class="w3-opacity">April 23, 2016</span>
</h5>
</div>

<p>
<b>Hats!</b>
The trend this summer is hats for men!
</p>

<p>
Some text about this blog entry. Fashion fashion and mauris neque quam,
fermentum ut nisl vitae, convallis maximus nisl.
</p>

<p>
<button class="w3-button w3-black"
onclick="myFunction('demo2')">
<b>Replies  </b>
<span class="w3-tag w3-white">2</span>
</button>
</p>

</div>

<hr>

<div>
<h4>
Amber
<span class="w3-opacity w3-medium">
April 26, 2015, 10:52 PM
</span>
</h4>

<p>
Love your blog page! Simply the best!
</p>
</div>

</div>

<div>
<h4>
Angie
<span class="w3-opacity w3-medium">
April 23, 2015, 9:12 PM
</span>
</h4>

</div>

</div>
</article>

<div class="w3-center">
<h3>TITLE HEADING</h3>

<h5>
Title description,
<span class="w3-opacity">April 7, 2016</span>
</h5>
</div>

<p>
<b>Don't miss!</b>
The runway in New York City this weekend is going to be legendary!
</p>

<p>
Some text about this blog entry. Fashion fashion and mauris neque quam,
fermentum ut nisl vitae, convallis maximus nisl.
</p>

<p>
<button class="w3-button w3-black"
onclick="myFunction('demo3')">
<b>Replies  </b>
<span class="w3-tag w3-white">3</span>
</button>
</p>

</div>

<div>
<h4>
Jane
<span class="w3-opacity w3-medium">
April 10, 2015, 7:22 PM
</span>
</h4>

<p>That was a great runway show! Thanks for everything.</p>
</div>

</div>

<div>
<h4>
John
<span class="w3-opacity w3-medium">
April 8, 2015, 10:32 PM
</span>
</h4>

<p>Keep up the GREAT work! I am cheering for you!!</p>
</div>

</div>

<div>
<h4>
Anja
<span class="w3-opacity w3-medium">
April 7, 2015, 9:12 PM
</span>
</h4>

<p>Can't wait for the runway to start!</p>
</div>

</div>

</div>
</article>

</main>

<aside>

<p>
Just me, myself and I, exploring the universe of unknownment.
I have a heart of love and an interest in lorem ipsum and mauris
neque quam blog.
</p>
</div>

</div>

<hr>

<div class="w3-container w3-padding w3-black">
<h4>Popular Posts</h4>
</div>

<span class="w3-large">Denim</span><br> <span>Sed mattis nunc</span>

</li>

<span class="w3-large">Sweaters</span><br> <span>Praes tinci sed</span>

</li>

<span class="w3-large">Workshop</span><br> <span>Ultricies congue</span>

</li>

<span class="w3-large">Trends</span><br> <span>Lorem ipsum dipsum</span>

</li>

</ul>

</div>

<hr>

<div class="w3-container w3-padding w3-black">
<h4>Advertise</h4>
</div>

</div>
</div>

</div>

<hr>

<p>
<span class="w3-tag w3-black w3-margin-bottom">Fashion</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">New York</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">London</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Hats</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Norway</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Sweaters</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Ideas</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Deals</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Accessories</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">News</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Clothing</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Shopping</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Jeans</span>
<span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Trends</span>
</p>

</div>
</div>

<hr>

<div class="w3-container w3-padding w3-black">
<h4>Inspiration</h4>
</div>

</div>

</div>

<hr>

<div class="w3-container w3-padding w3-black">
<h4>Follow Me</h4>
</div>

</div>

<hr>

<div class="w3-container w3-padding w3-black">
<h4>Subscribe</h4>
</div>

<p>
Enter your e-mail below and get notified about the latest blog posts.
</p>

<p>
<button type="button"
onclick="document.getElementById('subscribe').style.display='block'"
class="w3-button w3-block w3-red">
Subscribe
</button>
</p>

</div>
</div>

</aside>

</div>

<h2 class="w3-wide">SUBSCRIBE</h2>

<p>
Join my mailing list to receive updates on the latest blog posts.
</p>

<button type="button"
class="w3-button w3-block w3-padding-large
w3-red w3-margin-bottom"
onclick="document.getElementById('subscribe').style.display='none'">
Subscribe </button>

</div>
</div>
</div>

<i class="fa fa-arrow-up w3-margin-right"></i>
To the top

</a>

<p>
Powered by
<a href="https://www.w3schools.com/w3css/default.asp"
target="_blank">w3.css</a>
</p>

</footer>

function myFunction(id) {
  var x = document.getElementById(id);

if (x.className.indexOf("w3-show") == -1) {
    x.className += " w3-show";
  } else {
    x.className = x.className.replace(" w3-show","");
  }
}

// Like button
function likeFunction(x) {
  x.style.fontWeight = "bold";
  x.innerHTML = "✓ Liked";
}
</script>

</body>
</html>