You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
htmlcsstraining/index.html

346 lines
20 KiB

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