Footer Navigation 구성 요소
마켓플레이스를 위한 유기적/자연에서 영감을 받은 바닥글 탐색 구성 요소로, 유선, 유사한 색 구성표, 여러 섹션 및 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.
HTML 코드
<footer class="bg-gradient-to-r from-emerald-50 to-teal-50 dark:from-gray-950 dark:to-emerald-950 text-gray-800 dark:text-gray-200 py-12 md:py-16 overflow-hidden relative">
<div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-20 dark:opacity-10">
<svg class="w-full h-full" viewBox="0 0 1000 300" preserveAspectRatio="xMidYMid slice">
<path fill="currentColor" d="M0,100 C150,200 350,0 500,100 S850,200 1000,100 L1000,300 L0,300 Z" />
</svg>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
<div class="flex flex-col items-start lg:col-span-2">
<a href="#" class="text-3xl font-bold text-teal-600 dark:text-emerald-400 mb-4 tracking-tight font-serif">
NatureNest
</a>
<p class="text-sm leading-relaxed mb-6 max-w-sm">
Discover unique treasures and artisan crafts from around the globe, with a focus on sustainable and handmade products.
</p>
<div class="flex space-x-4">
<a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.715.056 8.96 0 10.154.044 10.154.044s.927-.005 3.71-.161c2.83-.15 4.093-1.077 4.093-1.077s.9-.785 1.554-2.585c.654-1.8.654-2.33 1.134-4.885.48-2.555.444-4.07 0-5.59-1.2-4.032-4.757-5.504-4.757-5.504s-.897-.978-2.066-1.554c-1.169-.576-2.504-.576-2.617-.576-2.065 0-3.328.086-4.524.195-.081-.005-2.06-.017-3.715-.056C7.575-2.006 7.227-1.993 4.797-1.993c-2.43 0-2.784-.013-3.715-.056C-7.868-2.006-8.243-2.006-8.243-2.006s-.927.005-3.71.161c-2.83.15-4.093 1.077-4.093 1.077s-.9.785-1.554 2.585c-.654 1.8-.654 2.33-1.134 4.885-.48 2.555-.444 4.07 0 5.59 1.2 4.032 4.757 5.504 4.757 5.504s-.897.978-2.066 1.554c-1.169.576-2.504.576-2.617.576-2.065 0-3.328-.086-4.524-.195-.081.005-2.06.017-3.715.056C-.415 2.006.014 1.993 2.444 1.993c2.43 0 2.784.013 3.715.056C12.315 2 12.315 2 12.315 2z" />
</svg>
</a>
<a href="#" class="text-teal-600 hover:text-teal-800 dark:text-emerald-400 dark:hover:text-emerald-600 transition-colors duration-200">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.31c-.1.08-.22.1-.34.1-.12 0-.25-.02-.37-.08a.98.98 0 01-.7-.7-.99.99 0 010-.7c.07-.12.18-.22.3-.28.1-.06.21-.09.32-.09.11 0 .22.03.32.09.12.06.22.15.29.28.08.1.1.22.1.34 0 .12-.02.25-.08.37a.9.9 0 01-.28.3c-.07.06-.18.1-.3.1zM5 12h14v-2H5v2zm0-4h14V6H5v2zm0 8h14v-2H5v2z" />
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.23 2.636 7.85 6.305 9.245-.583-.243-1.077-.492-1.52-.772A.99.99 0 016 20.89c0-.447.18-.86.495-1.155.074-.069 1.157-1.18 1.157-1.18a.99.99 0 01.707-.293h.001c.266 0 .52.105.707.293l1.165 1.164a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365a.99.99 0 01.152.365l.353.354a.99.99 0 010 1.414.99.99 0 01-1.414 0l-.353-.354c-.195-.195-.512-.195-.707 0-.097.098-.152.227-.152.365v.001c0 .138.055.267.152.365a.99.99 0 01.366.152l.353.354c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707a.99.99 0 010 1.414c-.39.39-1.023.39-1.414 0a.99.99 0 010-1.414l-.707-.707a.99.99 0 01-1.414 0c-.39-.39-1.023-.39-1.414 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c.195.195.512.195.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707c.2.2.46.29.707.29s.507-.098.707-.293l.353-.354a.99.99 0 011.414 0c.39.39.39 1.023 0 1.414a.99.99 0 01-1.414 0l-.707-.707c-.195-.195-.512-.195-.707 0a.99.99 0 010 1.414l.707.707zM12 21a9 9 0 100-18 9 9 0 000 18z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Shop</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Handmade Crafts</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Organic Produce</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Garden & Home</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Wellness & Beauty</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Seasonal Collections</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Sell</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Start Selling</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shop Setup</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Vendor Tools</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Community Guidelines</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Partner Program</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Help</h3>
<ul class="space-y-4">
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Contact Us</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">FAQs</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Shipping & Returns</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Privacy Policy</a></li>
<li><a href="#" class="text-gray-700 hover:text-teal-600 dark:text-gray-300 dark:hover:text-emerald-400 transition-colors duration-200 text-sm">Terms of Service</a></li>
</ul>
</div>
<div class="lg:col-span-1">
<h3 class="text-lg font-semibold text-teal-700 dark:text-emerald-300 mb-5">Join Our Community</h3>
<p class="text-sm text-gray-700 dark:text-gray-300 mb-4">Subscribe to our newsletter for exclusive offers and updates.</p>
<form class="flex flex-col sm:flex-row gap-2">
<input type="email" placeholder="Your email address" aria-label="Your email address" class="flex-grow px-4 py-2 rounded-lg bg-white dark:bg-gray-800 border border-teal-200 dark:border-emerald-700 focus:ring-2 focus:ring-teal-400 dark:focus:ring-emerald-500 outline-none text-gray-800 dark:text-gray-200 text-sm">
<button type="submit" class="bg-teal-600 hover:bg-teal-700 dark:bg-emerald-600 dark:hover:bg-emerald-700 text-white font-medium py-2 px-4 rounded-lg shadow-md transition-colors duration-200 text-sm focus:outline-none focus:ring-2 focus:ring-teal-400 focus:ring-offset-2 dark:focus:ring-emerald-500 dark:focus:ring-offset-gray-950">
Subscribe
</button>
</form>
<div class="mt-8">
<h4 class="text-md font-semibold text-teal-700 dark:text-emerald-300 mb-3">Latest from our blog</h4>
<a href="#" class="flex items-center space-x-3 group">
<img src="https://picsum.photos/60/60?random=1" alt="Blog post thumbnail" class="w-12 h-12 rounded-lg object-cover border-2 border-teal-300 dark:border-emerald-600 group-hover:scale-105 transition-transform duration-200">
<div>
<p class="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-teal-600 dark:group-hover:text-emerald-400 transition-colors duration-200">Crafting Sustainability: A Guide for Artisans</p>
<span class="text-xs text-gray-500 dark:text-gray-400">Oct 26, 2023</span>
</div>
</a>
</div>
</div>
</div>
<div class="border-t border-teal-200 dark:border-emerald-800 pt-8 mt-12 text-center">
<p class="text-sm text-gray-600 dark:text-gray-400">
© 2023 NatureNest. All rights reserved. Made with <span class="text-red-500" aria-label="Love">❤</span> for a better world.
</p>
</div>
</div>
</footer>관련 구성 요소
Footer Navigation 구성 요소
Material Design을 사용한 전자 상거래를 위한 바닥글 탐색 구성 요소 - 반응형 및 다크 모드를 지원하는 간단한 구성 요소로, 보색 구성표를 특징으로 합니다.
Footer Navigation 구성 요소
대시보드용으로 설계된 반응형 바닥글 탐색 구성 요소로, 생생한 색상의 Skeuomorphic 스타일을 특징으로 합니다. 여기에는 탐색 링크, 로고 및 소셜 미디어 아이콘이 포함되며 Tailwind CSS를 사용하여 완전한 다크 모드를 지원합니다. 이 디자인은 대화형 호버 효과를 사용하여 중간 정도의 복잡성을 목표로 합니다.
Industrial_Rainbow_Footer_Navigation
산업적 미학, 노출된 요소, 금융/은행 인터페이스에 맞게 조정된 다색 무지개 그라데이션 배경을 갖춘 간단하고 반응이 빠른 바닥글 탐색 구성 요소입니다. 다크 모드 지원이 포함됩니다.