|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Simple Blog Website</title> |
|
|
|
<style> |
|
.bpost{ |
|
margin:10px 10px 10px 10px!important; |
|
padding:10px; |
|
border-color: white; |
|
border-width: medium; |
|
border-radius: 10px; |
|
background:cornflowerblue; |
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
text-wrap: pretty; |
|
width: fit-content; |
|
} |
|
.resp1{ |
|
margin:10px 10px 10px 20px!important; |
|
padding:10px; |
|
border-color: white; |
|
border-width: medium; |
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
text-wrap: pretty; |
|
width: fit-content; |
|
} |
|
.resp2{ |
|
margin:10px 10px 10px 30px!important; |
|
padding:10px; |
|
border-color: white; |
|
border-width: medium; |
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
text-wrap: pretty; |
|
width: fit-content; |
|
} |
|
|
|
.div_box{ |
|
|
|
display: flex; |
|
flex-wrap: wrap; |
|
flex-direction: column; |
|
|
|
overflow-wrap: anywhere; |
|
} |
|
</style> |
|
|
|
|
|
</head> |
|
<body> |
|
<header> |
|
<h1>$title</h1> |
|
</header> |
|
<main> |
|
<section class="posts"> |
|
|
|
<article class="post"> |
|
<h4>$name</h4> |
|
<time datetime="YYYY-MM-DD">Post Date</time> |
|
<h2>$title</h2> |
|
<p>Short post summary...</p> |
|
<div>$body</div> |
|
|
|
<a href="#readmore" class="button">Read More</a> |
|
</article> |
|
|
|
</section> |
|
<aside class="sidebar"> |
|
|
|
</aside> |
|
</main> |
|
<footer> |
|
<p>© Copyright Your Name - Simple Blog Website</p> |
|
</footer> |
|
</body> |
|
</html> |
