Finished Homepage

main
Nikurasu 9 months ago
parent 23040f0c48
commit a451aeafc7
  1. 7
      images/mailicon.svg
  2. 236
      index.html

@ -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>

After

Width:  |  Height:  |  Size: 1.1 KiB

@ -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>
Loading…
Cancel
Save