⚙️ Feature Cards + Navbar changes

This commit is contained in:
Rico van Zelst
2023-10-26 19:12:46 +02:00
parent c1194738c5
commit 55447937a6
3 changed files with 130 additions and 7 deletions

View File

@@ -1,12 +1,12 @@
<nav class="bg-white border-gray-200 dark:bg-gray-900">
<nav class="bg-white drop-shadow-md border-stone-200 dark:bg-stone-800">
<div class="flex flex-wrap items-center justify-between max-w-screen-xl p-4 mx-auto">
<a href="/" class="flex items-center">
<a href="/" class="flex items-center transition-transform hover:scale-105">
<x-logo class="w-auto mr-2 transition-transform h-9 hover:scale-125" alt="Heimerdinger Logo" />
<span class="self-center text-2xl font-medium whitespace-nowrap dark:text-white">Heimerdinger.LoL</span>
<span class="self-center text-2xl font-semibold text-orange-400 whitespace-nowrap">Heimerdinger.LoL</span>
<span class="sr-only">Home</span>
</a>
<button data-collapse-toggle="navbar-default" type="button"
class="inline-flex items-center justify-center w-10 h-10 p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
class="inline-flex items-center justify-center w-10 h-10 p-2 text-sm rounded-lg text-stone-500 md:hidden hover:bg-stone-100 focus:outline-none focus:ring-2 focus:ring-stone-200 dark:text-stone-400 dark:hover:bg-stone-700 dark:focus:ring-stone-600"
aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
@@ -17,10 +17,36 @@
</button>
<div id="navbar-default" class="hidden w-full md:block md:w-auto">
<ul
class="flex flex-col p-4 mt-4 font-medium border border-gray-100 rounded-lg md:p-0 bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
class="flex flex-col p-4 mt-4 font-medium border rounded-lg border-stone-100 md:p-0 bg-stone-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-stone-800 md:dark:bg-stone-800 dark:border-stone-700">
<li>
<a href="#"
class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">About</a>
class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
<i class="fa-duotone fa-users"></i></i> Champions</a>
</li>
<li>
<a href="#"
class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
<i class="fa-duotone fa-palette"></i></i> Skins</a>
</li>
<li>
<a href="#"
class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
<i class="fa-duotone fa-cubes"></i> Assets</a>
</li>
<li>
<a href="#"
class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
<i class="fa-duotone fa-credit-card"></i> Sale Rotation</a>
</li>
<li>
<a href="#"
class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
<i class="fa-duotone fa-newspaper"></i> Posts</a>
</li>
<li>
<a href="#"
class="block py-2 pl-3 pr-4 rounded text-stone-800 hover:bg-stone-100 md:hover:bg-transparent md:border-0 md:hover:text-orange-500 md:p-0 dark:text-white md:dark:hover:text-orange-400 dark:hover:bg-stone-700 dark:hover:text-white md:dark:hover:bg-transparent">
<i class="fa-duotone fa-circle-info"></i></i> About</a>
</li>
</ul>