<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bloggo</title>
</head>
<style>
   *{
    margin: 0; padding: 0; box-sizing: border-box;
   } body {
    min-height: 100vh; min-width: 100%; align-items: left; justify-content: left; gap: 20px; display: flex; flex-wrap: wrap; flex-direction: column;
   } .starter {
    height: 100vh;
    width: 100%;
   } .starter img {
    height: 100%; width: 100%; filter: blur(8px);
   }
   .starter .dark {
    height: 100vh; width: 100%; background: rgba(0,0,0,0.5);
    align-items: center; justify-content: center; display: flex; color: #fff; font-family: 'Open Sans'; flex-direction: column;
   } .starter .dark h1 { font-size: 80px;}
   .starter .dark span { font-size: 30px;}
   .post {
    height: 5cm;
    width: 80%;
    align-items: left; justify-content: left; display: flex; flex-direction: column; box-shadow: 0px 2px 3px 4px rgba(0,0,0,0.05); margin-left: 20px; white-space: nowrap; flex-wrap: wrap; gap: 20px;
   }
</style>
<body>
    <div class="starter">
        <div class="dark">
            <h1>Bloggo</h1>
            <span>The Ultimate Blogging App</span>
        </div>
    </div>
    <a href="/newpost">New Post</a>
    <% posts.forEach(post => { %>
        <div class="post">
            <h2><%= post.title %></h2>
            <h4><%= post.date %></h4>
            <span><%= post.description %></span>
            <footer><%= post.author %></footer>
            <a href="/<%= post.postid %>">View Blog</a>
        </div>
    <% }); %>
</body>
</html>