<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="dist/styles.css">
</head>
<body class='bg-black'>
    <div class="bg-yellow-300 h-48 mx-auto flex justify-center items-center flex-col">
        <div class="text-gray-800 font-black sm:text-6xl text-4xl">Ahmet KÖŞKER</div>
        <div class="sm:text-4xl md: text-gray-800 italic text-2xl">Ahmet KÖŞKER</div>
    </div>
    <div class="sm:w-full w-full bg-gray-900 h-auto m-auto">
        <div class="w-auto">
            <ul class="text-2xl text-yellow-200 text-center sm:flex justify-end sm:justify-center block">
                <li class="sm:p-5 p-3 hover:bg-gray-600"><a href=""
                        class="transition-all hover:text-4xl  hover:text-yellow-400">AHO</a></li>
                <li class="sm:p-5 p-3 hover:bg-gray-600"><a href=""
                        class="transition-all hover:text-4xl hover:text-yellow-400">AHO</a></li>
                <li class="sm:p-5 p-3 hover:bg-gray-600"><a href=""
                        class="transition-all hover:text-4xl hover:text-yellow-400">AHO</a></li>
            </ul>
        </div>
    </div>
    <div>
        <% if (data){ %>
            <%data.forEach(function (data) {%>
                <div class="sm:w-1/2 mx-auto text-yellow-700">
                    <div>
                        <div class='mb-10'>
                            <div class='overflow-hidden'>
                                <img class='hover:scale-110 hover:transition-all hover:duration-700 ease-in-out mx-auto'
                                    src='/images/<%=data.blogImage%>'>
                            </div>
                            <div class='w-3/4 mx-auto p-6 border-b-4 border-green-500'>
                                <a href='/showBlogs/<%=data._id%>'>
                                    <div class='mb-8 mx-auto'>
                                        <h1 class='text-5xl text-center'>
                                            <%=data.blogTitle%>
                                        </h1>
                                    </div>
                                </a>
                                <div>
                                    <h4 class='text-center'>
                                        <%=data.blogSummary%>
                                    </h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <% }) %>
                    <% } %>
    </div>

    </body>

</html>