346 lines
20 KiB
HTML
346 lines
20 KiB
HTML
<!doctype html>
|
|
|
|
<title>Nikus HTML/CSS Training Blog</title>
|
|
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
|
|
|
<body style="font-family:Roboto,sans-serif">
|
|
<section class="px-6 py-8">
|
|
<nav class="flex justify-between items-center">
|
|
<div>
|
|
<a href="/">
|
|
<img src="images/logo.svg" alt="Nikurasu" width="165" height="16">
|
|
</a>
|
|
</div>
|
|
|
|
<div>
|
|
<a href="/" class="text-xs text-black font-bold uppercase">Home Page</a>
|
|
<a href="#" class="bg-blue-500 ml-3 rounded-full text-xs font-semibold text-white uppercase py-3 px-5">Subscribe for Updates</a>
|
|
</div>
|
|
</nav>
|
|
<header class="max-w-4xl mx-auto mt-20 text-center">
|
|
<div class="max-w-xl mx-auto">
|
|
<h1 class="text-4xl">Mein kleiner <span class="text-blue-500">Blog</span> halt</h1>
|
|
<h2 class="inline-flex items-center mt-2">by Nikurasu<img style="height:35px;" src="images/picrew3.png" alt="A profile picture"></h2>
|
|
<p class="text-sm mt-14">
|
|
Hey, ich bins Nikurasu! Auf diesem Blog schreib ich Zeug über die Technik die ich so im Alltag benutze,
|
|
meine Erfahrungen im Bereich Informatik und auch noch vieles mehr. Seid gespannt!
|
|
</p>
|
|
|
|
<div class="tw-flex tw-justify-center space-x-8 mt-8">
|
|
<!-- Categories -->
|
|
<span class="relative inline-flex items-center bg-gray-200 inline-block rounded-xl">
|
|
<select class="appearance-none bg-transparent py-2 px-5 text-sm font-semibold">
|
|
<option value="category" disabled selected>Category</option>
|
|
<option value="personal">Personal</option>
|
|
<option value="business">Business</option>
|
|
</select>
|
|
<svg class="transform -rotate-90 absolute pointer-events-none" style="right:2px;"
|
|
height="22" viewBox="0.83 1 20.15 20.15"><g fill="none" fill-rule="evenodd">
|
|
<path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z"></path>
|
|
<path fill="#222" d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z">
|
|
</path></g>
|
|
</svg>
|
|
</span>
|
|
<!-- Other Filters -->
|
|
<span class="relative inline-flex items-center bg-gray-200 inline-block rounded-xl">
|
|
<select class="appearance-none bg-transparent py-2 px-5 text-sm font-semibold">
|
|
<option value="otherFilters" disabled selected>Other Filters</option>
|
|
<option value="personal">Linux</option>
|
|
<option value="business">Opensource</option>
|
|
</select>
|
|
<svg class="transform -rotate-90 absolute pointer-events-none" style="right:2px;"
|
|
height="22" viewBox="0.83 1 20.15 20.15"><g fill="none" fill-rule="evenodd">
|
|
<path stroke="#000" stroke-opacity=".012" stroke-width=".5" d="M21 1v20.16H.84V1z"></path>
|
|
<path fill="#222" d="M13.854 7.224l-3.847 3.856 3.847 3.856-1.184 1.184-5.04-5.04 5.04-5.04z">
|
|
</path></g>
|
|
</svg>
|
|
</span>
|
|
<!-- Search -->
|
|
<span class="relative inline-flex items-center bg-gray-200 inline-block rounded-xl px-3 py-2">
|
|
<form action="GET" action="#">
|
|
<input type="text" name="search" placeholder="Find Something" class="bg-transparent placeholer-black font-semibold text-sm">
|
|
</form>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<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">
|
|
</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>
|
|
|
|
<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 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> |