75 lines
4.1 KiB
HTML
75 lines
4.1 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></main>
|
|
|
|
<footer></footer>
|
|
</section>
|
|
</body> |