웹프로그램밍 자료실/HTML 자료
[해피CGI][cgimall] Premium Responsive Navbar
해피CGI윤실장
2025. 9. 16. 09:02
웹 인터페이스를 위해 설계된 최첨단 UI 구성 요소 내비게이션 디자인 입니다.
디자인할때 참고하면 유용할거 같습니다.
자세한 내용은 데모를 참고해 주시기 바랍니다.
HTML
|
<div class="bg-black text-white font-['Space_Grotesk'] overflow-x-hidden">
<!-- Background elements -->
<div class="fixed inset-0 overflow-hidden pointer-events-none z-0">
<div class="absolute top-20 left-10 w-96 h-96 bg-indigo-900/10 rounded-full blur-3xl"></div>
<div class="absolute bottom-10 right-10 w-80 h-80 bg-purple-900/10 rounded-full blur-3xl"></div>
<div class="absolute top-40 right-20 w-64 h-64 bg-cyan-900/10 rounded-full blur-3xl"></div>
<!-- Decorative grid lines -->
<div class="absolute inset-0 grid grid-cols-12 opacity-5 pointer-events-none">
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
<div class="border-r border-cyan-500"></div>
</div>
<div class="absolute inset-0 grid grid-rows-12 opacity-5 pointer-events-none">
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
<div class="border-b border-cyan-500"></div>
</div>
</div>
</div>
|
