Professional Documents
Culture Documents
DOCTYPE html>
<html>
<title>W3.CSS Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/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">
<style>
h1,h2,h3,h4,h5,h6 {font-family: "Oswald"}
body {font-family: "Open Sans"}
</style>
<body class="w3-light-grey">
<div class="w3-justify">
<img src="/w3images/girl_hat.jpg" alt="Girl Hat" style="width:100%"
class="w3-padding-16">
<p><strong>More Hats!</strong> 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. Sed mattis nunc id lorem euismod placerat.
Vivamus porttitor
magna enim, ac accumsan tortor cursus at. Phasellus sed ultricies mi
non congue ullam corper. Praesent tincidunt sedtellus ut rutrum. Sed vitae justo
condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</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. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<p class="w3-left"><button class="w3-button w3-white w3-border"
onclick="likeFunction(this)"><b><i class="fa fa-thumbs-up"></i>
Like</b></button></p>
<p class="w3-right"><button class="w3-button w3-black"
onclick="myFunction('demo1')" id="myBtn"><b>Replies </b> <span class="w3-tag w3-
white">1</span></button></p>
<p class="w3-clear"></p>
<div class="w3-row w3-margin-bottom" id="demo1" style="display:none">
<hr>
<div class="w3-col l2 m3">
<img src="/w3images/avatar_smoke.jpg" style="width:90px;">
</div>
<div class="w3-col l10 m9">
<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>
<hr>
<div class="w3-justify">
<img src="/w3images/man_hat.jpg" alt="Men in Hats" style="width:100%"
class="w3-padding-16">
<p><strong>Hats!</strong> 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. Sed mattis nunc id lorem
euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed ultricies
mi non congue ullam corper. Praesent tincidunt sedtellus ut rutrum. Sed
vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non
fringilla.</p>
<p class="w3-left"><button class="w3-button w3-white w3-border"
onclick="likeFunction(this)"><b><i class="fa fa-thumbs-up"></i>
Like</b></button></p>
<p class="w3-right"><button class="w3-button w3-black"
onclick="myFunction('demo2')"><b>Replies </b> <span class="w3-tag w3-
white">2</span></button></p>
<p class="w3-clear"></p>
<div class="w3-justify">
<img src="/w3images/runway.jpg" alt="Runway" style="width:100%"
class="w3-padding-16">
<p><strong>Dont miss!</strong> The runway in New York City this weekend
is gonna be legendary!</p>
<p>Some text about this blog entry. Fashion fashion and mauris neque
quam, fermentum ut nisl vitae, convallis maximus nisl. Sed mattis nunc id lorem
euismod placerat. Vivamus porttitor magna enim, ac accumsan tortor cursus at.
Phasellus sed ultricies
mi non congue ullam corper. Praesent tincidunt sedtellus ut rutrum. Sed
vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non
fringilla.</p>
<p class="w3-left"><button class="w3-button w3-white w3-border"
onclick="likeFunction(this)"><b><i class="fa fa-thumbs-up"></i>
Like</b></button></p>
<p class="w3-right"><button class="w3-button w3-black"
onclick="myFunction('demo3')"><b>Replies </b> <span class="w3-tag w3-
white">3</span></button></p>
<p class="w3-clear"></p>
<script>
// Toggle between hiding and showing blog replies/comments
document.getElementById("myBtn").click();
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", "");
}
}
function likeFunction(x) {
x.style.fontWeight = "bold";
x.innerHTML = "? Liked";
}
</script>
</body>
</html>