Retro_Jewel_Tone_Dashboard_Footer_Navigation
대시보드용 반응형 바닥글 탐색 구성 요소로, 보석 색조 색상(에메랄드, 사파이어, 루비)과 다크 모드 지원을 통해 레트로/빈티지 미학에서 영감을 받았습니다. 여기에는 탐색 링크, 소셜 미디어 아이콘 및 저작권 정보가 포함됩니다.
HTML 코드
<footer class="bg-gradient-to-r from-emerald-700 to-sapphire-800 text-white py-12 px-6 sm:px-8 lg:px-12 dark:from-emerald-950 dark:to-slate-900 border-t-4 border-emerald-500 dark:border-ruby-600 font-mono">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-10">
<div class="col-span-1">
<h3 class="text-2xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide uppercase">Retr<span class="text-emerald-300 dark:text-ruby-400">o</span>Dash</h3>
<p class="text-emerald-100 text-sm leading-relaxed mb-4">
Navigating the digital frontier with a nostalgic glance. Your trusted partner for insights from the past, presented for the future.
</p>
<div class="flex space-x-4">
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<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.79c0-2.508 1.493-3.89 3.776-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.33V22C17.361 21.109 22 16.51 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.31c9 0 13.92-7.55 13.92-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42 9 0 13.93-7.55 13.93-13.92 0-.21 0-.42-.01-.63A10.02 10.02 0 0024 4.31a9.8 9.8 0 01-2.82.77A4.9 4.9 0 0023.23 2.7c.92-2.73-1.66-4.57-4.42-4.57-2.61 0-4.66 1.77-5.5 4.1-.11.29-.11.59-.11.89C13.2 5 8.7 5.76 5.2 3.25c-3.1 5.3-7.53 10.05-13.62 10.05v-.01c.21 0 .42 0 .63-.01A4.9 4.9 0 003.35 18a9.8 9.8 0 01-6.88 1.94c-1.39.06-2.76-.09-4.1-.42z" />
</svg>
</a>
<a href="#" class="text-emerald-100 hover:text-ruby-300 transition-colors duration-300">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12 2C6.477 2 2 6.477 2 12c0 4.42 2.863 8.163 6.84 9.504.498.09.678-.216.678-.47v-1.68c-2.775.605-3.363-1.34-3.363-1.34-.455-1.157-1.11-1.464-1.11-1.464-.908-.62.069-.608.069-.608 1.006.07 1.532 1.026 1.532 1.026.892 1.53 2.34 1.085 2.91.83.09-.645.35-1.085.637-1.34-2.22-.253-4.555-1.11-4.555-4.912 0-1.087.388-1.974 1.029-2.672-.102-.253-.448-1.267.098-2.637 0 0 .84-.268 2.75 1.024A9.56 9.56 0 0112 6.844c.594 0 1.18.08 1.74.242 1.91-1.292 2.75-1.024 2.75-1.024.546 1.37.202 2.384.1 2.637.64.698 1.028 1.585 1.028 2.672 0 3.81-2.337 4.656-4.564 4.904.358.308.675.918.675 1.85V21c0 .254.18.56.678.47A9.995 9.995 0 0022 12c0-5.523-4.477-10-10-10z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<nav class="col-span-1 md:col-span-2 lg:col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Quick Links</h3>
<ul class="space-y-4">
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Dashboard Home</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Data Overview</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Analytics Reports</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">User Settings</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Support & Help</a></li>
</ul>
</nav>
<div class="col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Resources</h3>
<ul class="space-y-4">
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Documentation</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">API Reference</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Blog & Articles</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Privacy Policy</a></li>
<li><a href="#" class="text-emerald-100 hover:text-ruby-300 dark:hover:text-emerald-300 transition-colors duration-300 text-sm">Terms of Service</a></li>
</ul>
</div>
<div class="col-span-1">
<h3 class="text-xl font-bold mb-6 text-ruby-200 dark:text-emerald-300 tracking-wide">Contact Us</h3>
<address class="not-italic text-emerald-100 text-sm space-y-2">
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0L6.343 16.657a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>123 Pixel Blvd, Data City, 90210</p>
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-4l-4 4v-4H5a2 2 0 01-2-2v-8z"></path></svg>[email protected]</p>
<p class="flex items-center"><svg class="w-5 h-5 mr-3 text-ruby-300 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9l2.592-1.555a2 2 0 012.288-.04l2.583 1.55A1 1 0 0121 11.69a2 2 0 01-2 2h-.096l-3.328 1.997a2 2 0 01-.734 3.323l-3.328 1.997a2 2 0 00-2.264 0l-3.328-1.997a2 2 0 01-.734-3.323L3.096 13.69A2 2 0 013 11.69V5z"></path></svg>+1 (555) RETRO-88</p>
</address>
</div>
</div>
<div class="border-t border-emerald-500/50 dark:border-ruby-700/50 pt-8 mt-10 text-center text-emerald-200 dark:text-slate-400 text-sm">
<p>© 2023 RetroDash. All rights reserved. <span class="hidden sm:inline">Embrace the past, power your future.</span></p>
</div>
</footer>관련 구성 요소
Footer Navigation 구성 요소
Material Design을 사용한 전자 상거래를 위한 바닥글 탐색 구성 요소 - 반응형 및 다크 모드를 지원하는 간단한 구성 요소로, 보색 구성표를 특징으로 합니다.
Footer Navigation 구성 요소
어두운 테마를 지원하는 대시보드를 위한 반응형 바닥글 탐색 구성 요소로, 트라이어딕 색상과 복잡한 요소를 사용하여 링크 호버에 대한 마이크로 인터랙션을 제공합니다. JavaScript는 없으며 Tailwind CSS가 있는 HTML만 있습니다.
Footer Navigation 구성 요소
레트로/빈티지 디자인 스타일의 반응형 바닥글 탐색 구성 요소로, 생생한 색상을 사용하고 소셜 미디어 인터페이스에 맞게 조정되었습니다.