Finance 바닥글 구성 요소
금융 및 은행 인터페이스를 위한 반응형 바닥글 구성 요소로, 보색 구성표, Material Design 원칙 및 완전한 다크 모드 지원을 특징으로 합니다. 탐색 링크, 소셜 미디어 아이콘 및 저작권 고지가 포함됩니다.
HTML 코드
<footer class="bg-blue-900 text-blue-100 py-8 dark:bg-gray-950 dark:text-gray-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-8 border-b border-blue-700 pb-8 dark:border-gray-800">
<div class="col-span-full lg:col-span-1">
<h3 class="text-2xl font-bold text-orange-400 mb-4 dark:text-orange-500">FinTechBank</h3>
<p class="text-sm text-blue-200 dark:text-gray-400 leading-relaxed">Innovating your financial future with secure and intelligent banking solutions.</p>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Company</h4>
<ul class="space-y-3">
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">About Us</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Careers</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Press & Media</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Partner Program</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Products</h4>
<ul class="space-y-3">
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Personal Banking</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Business Accounts</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Lending Solutions</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Investment Services</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Support</h4>
<ul class="space-y-3">
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Help Center</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Contact Us</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">FAQs</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Security</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-semibold mb-4 text-white dark:text-gray-100">Legal</h4>
<ul class="space-y-3">
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Privacy Policy</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Terms of Service</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Cookie Policy</a></li>
<li><a href="#" class="text-blue-200 hover:text-orange-400 transition-colors duration-300 dark:text-gray-400 dark:hover:text-orange-500 text-sm">Disclosures</a></li>
</ul>
</div>
</div>
<div class="flex flex-col sm:flex-row items-center justify-between pt-6 text-sm">
<p class="mb-4 sm:mb-0 text-blue-300 dark:text-gray-500 text-center sm:text-left">© 2023 FinTechBank. All rights reserved.</p>
<div class="flex space-x-6">
<a href="#" aria-label="Facebook" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.477 2 12c0 5.016 3.655 9.182 8.375 9.94v-7.042H7.078v-2.9h1.921V9.58c0-1.906 1.164-2.955 2.868-2.955 1.096 0 2.036.196 2.308.283v2.55h-1.55c-.752 0-.901.358-.901.884v1.168h2.89l-.47 2.9h-2.42V22c5.016-.818 8.875-5.024 8.875-9.94 0-5.523-4.477-10-10-10z"/></svg>
</a>
<a href="#" aria-label="Twitter" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.8.47-1.68.8-2.6.98C17.26 4.24 16.21 4 15.15 4c-2.36 0-4.29 1.93-4.29 4.29 0 .34.04.67.11.98C7.54 9.17 4.14 7.37 1.81 4.5c-.37.64-.58 1.39-.58 2.19 0 1.49.75 2.81 1.89 3.59-.7-.02-1.37-.21-1.95-.5v.06c0 2.09 1.48 3.82 3.44 4.21-.36.1-.73.15-1.11.15-.27 0-.53-.02-.79-.08.55 1.71 2.13 2.96 4.01 2.99-1.47 1.15-3.33 1.84-5.36 1.84-.35 0-.69-.02-1.03-.06 1.9 1.22 4.16 1.93 6.6 1.93 7.92 0 12.26-6.55 12.26-12.26 0-.19-.01-.39-.01-.58.84-.6 1.56-1.36 2.14-2.22z"/></svg>
</a>
<a href="#" aria-label="LinkedIn" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.273V9.09h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.073a2.464 2.464 0 0 1-2.464-2.464c0-1.363 1.09-2.464 2.464-2.464 1.373 0 2.464 1.1 2.464 2.464 0 1.363-1.091 2.464-2.464 2.464zm1.785 13.38H3.551V9.09h3.571v11.363zM12 2C6.478 2 2 6.478 2 12s4.478 10 10 10 10-4.478 10-10S17.522 2 12 2z"/></svg>
</a>
<a href="#" aria-label="Instagram" class="text-blue-300 hover:text-orange-400 transition-colors duration-300 dark:text-gray-500 dark:hover:text-orange-500">
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.204-.012 3.584-.07 4.85-1.325 3.252-1.691 4.77-4.919 4.919-1.266.058-1.644.069-4.85.069s-3.583-.012-4.85-.07c-3.251-.149-4.77-1.691-4.919-4.919-.058-1.265-.069-1.644-.069-4.85 0-3.204.012-3.584.07-4.85 1.326-3.252 1.69-4.771 4.919-4.919 1.265-.058 1.644-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072C2.79 0 2.039.264 1.22 1.083s-.82 1.57-.902 2.836c-.059 1.28-.073 1.688-.073 4.948 0 3.26.014 3.668.072 4.948.082 1.266.347 2.017 1.166 2.836S2.79 23.992 4.056 24c1.28.058 1.688.072 4.948.072s3.668-.014 4.948-.072c1.265-.082 2.017-.347 2.836-1.166s.82-1.57.902-2.836c.058-1.28.072-1.688.072-4.948s-.014-3.667-.072-4.947c-.082-1.266-.347-2.017-1.166-2.836S21.21 0 19.944 0c-1.28-.058-1.687-.072-4.947-.072H12zm0 6a6 6 0 1 0 0 12 6 6 0 0 0 0-12zm0 10a4 4 0 1 1 0-8 4 4 0 0 1 0 8zm6.5-11.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0z"/></svg>
</a>
</div>
</div>
</div>
</footer>관련 구성 요소
Organic_Nature_Inspired_Real_Estate_Footer
부동산 플랫폼을 위한 복잡하고 자연에서 영감을 받은 보색 바닥글 구성 요소로, 흐르는 선, 자연스러운 형태, 다양한 대화형 요소, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.
럭셔리 SaaS 바닥글
SaaS 애플리케이션을 위한 우아하고 정교한 바닥글 구성 요소로, 여러 탐색 섹션, 뉴스레터 구독, 소셜 미디어 링크 및 저작권 정보를 제공합니다. 바다/파란색 팔레트, 완전한 반응성 및 다크 모드 지원으로 설계되었습니다.