Finished Homepage
This commit is contained in:
Nikurasu
parent
23040f0c48
commit
a451aeafc7
|
|
@ -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 |
236
index.html
236
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>
|
||||
Loading…
Reference in New Issue