From a451aeafc7710cbe6880fec4aac4248c9a3874f1 Mon Sep 17 00:00:00 2001
From: Nikurasu <accounts@nikurasu.de>
Date: Sun, 13 Mar 2022 12:17:28 +0100
Subject: [PATCH] Finished Homepage

---
 images/mailicon.svg |   7 ++
 index.html          | 236 +++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 240 insertions(+), 3 deletions(-)
 create mode 100644 images/mailicon.svg

diff --git a/images/mailicon.svg b/images/mailicon.svg
new file mode 100644
index 0000000..a055791
--- /dev/null
+++ b/images/mailicon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Svg Vector Icons : http://www.onlinewebfonts.com/icon -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1000 1000" enable-background="new 0 0 1000 1000" xml:space="preserve">
+<metadata> Svg Vector Icons : http://www.onlinewebfonts.com/icon </metadata>
+<g><path d="M612,591.7C556.7,636,522.2,658,487.8,658c-33,0-66.4-20.6-118-60.8L62.7,867.5h864.9L615.5,589.1C614.3,589.9,613,591,612,591.7z"/><path d="M247.7,502.7C174.8,446.5,90.7,381.5,10,317.6v509.5c0,1.6,0.8,3,0.9,4.5l309.6-272.5C298.1,541.6,274,523.1,247.7,502.7z"/><path d="M987.6,838.9c1.2-3.7,2.4-7.6,2.4-11.8V296c-96.9,75.4-237.2,184.6-325.8,254.5L987.6,838.9z"/><path d="M928.8,132.5H71.3c-22.4,0-61.3,38.9-61.3,61.3V242c90.3,71.9,188.4,147.6,271.5,211.7c45.8,35.4,86.9,67.2,119.3,92.5c87.4,68.5,87.4,68.5,176.6-2.8C658.1,479,875.2,310.1,990,220.8v-26.9C990,171.4,951.1,132.5,928.8,132.5z"/></g>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index e796b18..d24572f 100644
--- a/index.html
+++ b/index.html
@@ -68,8 +68,8 @@
         </div>
     </header>
     
-    <main class="max-w-6xl mx-auto mt-20">
-        <article class="bg-gray-200 rounded-xl">
+    <main class="max-w-6xl mx-auto mt-20 space-y-6">
+        <article class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 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">
@@ -109,8 +109,238 @@
                 </div>
             </div>
         </article>
+
+        <div class="grid grid-cols-2">
+            <article class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl">
+                <div class="py-6 px-5">
+                    <div class="">
+                        <img src="https://picsum.photos/799/500" alt="A Picture" class="rounded-xl">
+                    </div>
+                    <div class="flex-1 flex flex-col justify-between mt-6">
+                        <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>
+
+            <article class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl">
+                <div class="py-6 px-5">
+                    <div class="">
+                        <img src="https://picsum.photos/799/500" alt="A Picture" class="rounded-xl">
+                    </div>
+                    <div class="flex-1 flex flex-col justify-between mt-6">
+                        <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>
+        </div>
+
+        <div class="grid grid-cols-3">
+            <article class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl">
+                <div class="py-6 px-5">
+                    <div class="">
+                        <img src="https://picsum.photos/799/500" alt="A Picture" class="rounded-xl">
+                    </div>
+                    <div class="flex-1 flex flex-col justify-between mt-6">
+                        <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>
+
+            <article class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl">
+                <div class="py-6 px-5">
+                    <div class="">
+                        <img src="https://picsum.photos/799/500" alt="A Picture" class="rounded-xl">
+                    </div>
+                    <div class="flex-1 flex flex-col justify-between mt-6">
+                        <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>
+
+            <article class="transition-colors duration-300 hover:bg-gray-100 border border-black border-opacity-0 hover:border-opacity-5 rounded-xl">
+                <div class="py-6 px-5">
+                    <div class="">
+                        <img src="https://picsum.photos/799/500" alt="A Picture" class="rounded-xl">
+                    </div>
+                    <div class="flex-1 flex flex-col justify-between mt-6">
+                        <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>
+        </div>
     </main>
     
-    <footer></footer>
+    <footer class="bg-gray-100 border border-black border-opacity-5 rounded-xl text-center p-10 mt-14">
+        <img class="mx-auto" src="./images/picrew3.png" width="165" height="16">
+        <h5 class="text-3xl">Verpassse keine Artikel</h5>
+        <p class="text-small">Kein Frühstücksfleisch für dein Postfach!</p>
+
+        <div class="mt-10">
+            <div class="relative inline-block mx-auto bg-gray-300 rounded-full">
+                <form action="POST" action="#" class="flex text-sm">
+                    <div class="py-3 px-5 inline-flex items-center">
+                        <label for="email">
+                            <img src="./images/mailicon.svg" width="15" height="15">
+                        </label>
+                
+
+                        <input type="text" class="bg-transparent pl-4 focus-within:outline-none" placeholder="Deine Email-Adresse" name="" id="email">
+                    </div>
+
+                    <button class="bg-blue-500 ml-3 rounded-full text-xs font-semibold text-white uppercase py-3 px-8" type="submit">Abonnieren</button>
+                </form>
+            </div>
+        </div>
+    </footer>
 </section>
 </body>
\ No newline at end of file