110 lines
6.2 KiB
Django/Jinja
110 lines
6.2 KiB
Django/Jinja
<header class="sticky top-0 inset-x-0 z-50 bg-white">
|
|
<nav class="max-w-6xl basis-full w-full py-4 px-4 sm:px-6 lg:px-8 lg:mx-auto">
|
|
<div class="flex flex-wrap md:flex-nowrap basis-full justify-between gap-x-2 w-full">
|
|
<div class="flex items-center gap-x-1">
|
|
<!-- Logo -->
|
|
<a class="flex-none rounded-md text-xl inline-block font-semibold focus:outline-hidden focus:opacity-80"
|
|
href="/"
|
|
aria-label="Kubeload">
|
|
<svg class="w-24 h-auto"
|
|
width="116"
|
|
height="32"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 5.61631 5.43583 2 9.75 2C13.4633 2 16.5282 4.68197 17.3077 8.22257C19.9376 8.2545 22 10.465 22 13.1111C22 15.7766 19.9073 18 17.25 18H9.75C5.43583 18 2 14.3837 2 10Z" fill="#155dfc" />
|
|
</svg>
|
|
</a>
|
|
<!-- End Logo -->
|
|
<div class="ms-1 sm:ms-2"></div>
|
|
</div>
|
|
<!-- Button Group -->
|
|
<div class="md:order-3 flex gap-x-1">
|
|
<a class="py-2 px-2.5 flex items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
|
href="#">로그인</a>
|
|
<a class="py-2 px-2.5 inline-flex items-center gap-x-1.5 whitespace-nowrap text-[13px] md:text-sm rounded-lg shadow-md bg-blue-600 text-white hover:bg-blue-700 hover:shadow-none focus:outline-hidden focus:bg-blue-700 focus:shadow-none disabled:opacity-50 disabled:pointer-events-none"
|
|
href="#">가입하기</a>
|
|
<!-- Collapse Button Trigger -->
|
|
<button type="button"
|
|
class="hs-collapse-toggle md:hidden flex justify-center items-center size-9 rounded-lg shadow-2xs bg-white border border-gray-200 text-sm text-gray-800 hover:bg-gray-100 focus:outline-hidden focus:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none"
|
|
id="hs-pro-dmh-collapse"
|
|
aria-expanded="false"
|
|
aria-controls="hs-pro-dmh"
|
|
aria-label="Toggle navigation"
|
|
data-hs-collapse="#hs-pro-dmh">
|
|
<svg class="shrink-0 size-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="1" />
|
|
<circle cx="12" cy="5" r="1" />
|
|
<circle cx="12" cy="19" r="1" />
|
|
</svg>
|
|
</button>
|
|
<!-- End Collapse Button Trigger -->
|
|
</div>
|
|
<!-- End Button Group -->
|
|
<!-- Collapse -->
|
|
<div id="hs-pro-dmh"
|
|
class="hs-collapse hidden overflow-hidden transition-all duration-300 basis-full grow md:block bg-white"
|
|
aria-labelledby="hs-pro-dmh-collapse">
|
|
<div class="overflow-hidden overflow-y-auto max-h-[75vh] [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-white/10 [&::-webkit-scrollbar-thumb]:bg-white/30">
|
|
<!-- Nav -->
|
|
<div class="flex flex-col md:flex-row md:gap-y-0 md:gap-x-1 py-2 md:p-0">
|
|
<a class="py-2 px-2.5 flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
|
href="../products/cloud">클라우드</a>
|
|
<!-- <a class="py-2 px-2.5 flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100" href="../products/ai">AI</a>-->
|
|
<a class="py-2 px-2.5 flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
|
href="../products/storage">저장소</a>
|
|
<!-- Dropdown Link -->
|
|
<div class="hs-dropdown [--strategy:static] md:[--strategy:fixed] [--adaptive:none] md:[--adaptive:adaptive] md:[--trigger:hover] md:inline-block">
|
|
<!-- Link -->
|
|
<button id="hs-pro-cnncddm"
|
|
type="button"
|
|
class="hs-dropdown-toggle py-2 px-2.5 w-full md:w-auto flex items-center gap-x-1.5 text-sm whitespace-nowrap text-start text-gray-800 rounded-lg hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden focus:bg-gray-100"
|
|
aria-haspopup="menu"
|
|
aria-expanded="false"
|
|
aria-label="Dropdown">
|
|
서비스
|
|
<svg class="shrink-0 size-4"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round">
|
|
<path d="m6 9 6 6 6-6" />
|
|
</svg>
|
|
</button>
|
|
<!-- End Link -->
|
|
<!-- Dropdown Menu -->
|
|
<div class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] md:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 relative w-full md:w-52 hidden z-10 top-full bg-white md:rounded-lg md:shadow-xl shadow-stone-200 ps-6 md:ps-0 before:absolute before:-top-4 before:start-0 before:w-full before:h-5 md:after:hidden after:absolute after:top-1 after:start-4.5 after:w-0.5 after:h-[calc(100%-4px)] after:bg-stone-100"
|
|
role="menu"
|
|
aria-orientation="vertical"
|
|
aria-labelledby="hs-pro-cnncddm">
|
|
<div class="p-1 space-y-0.5">
|
|
<a class="relative group py-2 px-3 flex items-center gap-x-3 text-sm text-gray-800 hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 "
|
|
href="../products/dns">DNS</a>
|
|
<a class="relative group py-2 px-3 flex items-center gap-x-3 text-sm text-gray-800 hover:bg-gray-100 rounded-lg focus:outline-hidden focus:bg-gray-100 "
|
|
href="../products/loadbalancer">로드밸런서</a>
|
|
</div>
|
|
</div>
|
|
<!-- End Dropdown Menu -->
|
|
</div>
|
|
<!-- End Dropdown Link -->
|
|
<!-- End Nav -->
|
|
</div>
|
|
</div>
|
|
<!-- End Collapse -->
|
|
</div>
|
|
</nav>
|
|
</header>
|