From d056d76904ad303e518eeb551d1b3a1b5270bdbd Mon Sep 17 00:00:00 2001
From: Nikurasu <publicmail@nikurasu.de>
Date: Sun, 23 Jan 2022 17:59:39 +0100
Subject: [PATCH] Added the article card

---
 index.html | 43 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d55b155..e796b18 100644
--- a/index.html
+++ b/index.html
@@ -68,7 +68,48 @@
         </div>
     </header>
     
-    <main></main>
+    <main class="max-w-6xl mx-auto mt-20">
+        <article class="bg-gray-200 rounded-xl">
+            <div class="py-6 px-5 flex">
+                <div class="flex-1 mr-8">
+                    <img src="https://picsum.photos/799/500" alt="A Picture" class="rounded-xl">
+                </div>
+                <div class="flex-1 flex flex-col justify-between">
+                    <header>
+                        <div class="space-x-2">
+                            <a href="#" class="px-2 py-1 border border-blue-300 rounded-full text-blue-300 text-xs uppercase font-semibold">Japan</a>
+                            <a href="#" class="px-2 py-1 border border-red-300 rounded-full text-red-300 text-xs uppercase font-semibold">Travel</a>
+                        </div>
+                        <div class="mt-4">
+                            <h1 class="text-3xl">This is a very long title for my travel to Japan, enjoy it.</h1>
+                            <time class="mt-2 block text-gray-400 text-xs">1 day ago</time>
+                        </div>
+                    </header>
+                    <div class="text-sm mt-6">
+                        <p> 
+                            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+                            ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+                            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+                            sit amet.
+                        </p>
+                    </div>
+                    <footer class="flex justify-between items-center mt-8">
+                        <div class="flex items-center text-sm">
+                            <img class="rounded-full" style="height:35px;" src="images/picrew04.png" alt="avatar">
+                            <div class="ml-3">
+                                <h5 class="font-bold">Nikurasu</h5>
+                                <h6>Just a blogger</h6>
+                            </div>
+                        </div>
+
+                        <div>
+                            <a href="#" class="text-xs font-semibold bg-gray-400 rounded-full py-2 px-6">Read More</a>
+                        </div>
+                    </footer>
+                </div>
+            </div>
+        </article>
+    </main>
     
     <footer></footer>
 </section>