<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>My Blog Page</title>

		<link rel="icon" href="images/favicon.ico" />

		<link rel="stylesheet" href="css/pages/index.css" />
	</head>

	<!-- https://cssgrid-generator.netlify.app/ -->
	<body>
		<div class="container">
			<div class="div1">
				<h1>This is my blog page.</h1>
				<button class="read-more-btn">read more.<span class="icon">&rarr;</span></button>
				<div class="buttons">
					<button class="psyc-button">Psychology</button>
					<button class="imp-button">Implementation Science</button>
					<button class="spirit-button">Spirituality</button>
					<button class="code-button">Coding</button>
					</button>
				</div>
			</div>
			<div class="div2">
				<% posts.data.forEach((post) => { %>
					<a href="/post/<%= post.slug %>">
				<div class="entrya">
					<h2><%= post.title %></h2>
					<img src="http://localhost:1337<%=post.cover_image.url%>" alt="<%= post.title %>" />
					<p><%= post.description %></p>
				</div>
				</a>
				<% }); %>
			</div>
		</div>
<!-- 		
				<button class="entryb">
					<h2></h2>
					<img />
					<p></p>
				</button>
			
				<button class="entryc">
					<h2></h2>
					<img />
					<p></p>
				</button>
			
				<button class="entryd">
					<h2></h2>
					<img />
					<p></p>
				</button> -->

	</body>
</html>
