Footer Navigation 구성 요소
반투명 유리와 같은 반투명 요소와 흐림 효과를 특징으로 하는 glassmorphism 스타일을 사용한 반응형 바닥글 탐색 구성 요소입니다. 다크 모드를 지원하며 자리 표시자 이미지를 포함합니다.
HTML 코드
<footer class="bg-white bg-opacity-30 backdrop-blur-lg dark:bg-gray-900 dark:bg-opacity-30 py-8">
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40" alt="Avatar" class="rounded-full">
<span class="text-lg font-bold text-gray-800 dark:text-gray-200">Your Company</span>
</div>
<nav class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Services</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition">Contact</a>
</nav>
</div>
<div class="mt-6 text-center">
<p class="text-gray-500 dark:text-gray-400">© 2023 Your Company. All rights reserved.</p>
</div>
</div>
</footer>관련 구성 요소
수채화 예술적 바닥글 탐색 구성 요소
비영리/자선 웹사이트를 위해 설계된 복잡하고 반응이 빠른 바닥글 탐색 구성 요소로, 부드러운 세피아/갈색 톤과 다크 모드를 지원하는 수채화 예술적 스타일을 특징으로 합니다. 여러 탐색 링크, 소셜 미디어 아이콘 및 저작권 섹션이 포함됩니다.
Footer Navigation 구성 요소
다크 모드의 비즈니스/기업 웹사이트를 위해 설계된 반응형 바닥글 탐색 구성 요소로, 트라이어드 색 구성표와 대화형 기능을 통한 중간 복잡성을 특징으로 합니다.