Retro_Earth_Tone_Portfolio_Footer
포트폴리오 웹사이트를 위한 반응형 복고풍 테마의 바닥글 탐색 구성 요소로, 흙색과 다크 모드 지원을 제공합니다. 80/90년대의 미학을 염두에 두고 디자인되어 향수를 불러일으키는 느낌을 줍니다.
HTML 코드
<footer class="bg-amber-100 dark:bg-gray-900 text-amber-900 dark:text-gray-100 py-8 md:py-12 font-mono border-t-4 border-amber-900 dark:border-gray-700">
<div class="container mx-auto px-4 md:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
<div class="flex flex-col items-center md:items-start text-center md:text-left">
<a href="#" class="text-2xl font-bold uppercase tracking-wider mb-4 hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">
[Your Portfolio]
</a>
<p class="text-sm mb-4 max-w-xs">Crafting digital experiences since the '90s. Pixel-perfect code. Analog soul.</p>
<div class="flex space-x-4">
<a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 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.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.33V22c5.373-.623 9.573-4.721 9.573-9.879Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Facebook</span>
</a>
<a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 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.315 2c2.43 0 2.784.002 3.797.048.843.04 1.15.148 1.465.247a4.872 4.872 0 0 1 3.427 3.427c.099.315.207.622.247 1.465.047 1.013.049 1.371.049 3.797 0 2.43-.002 2.784-.048 3.797-.04.843-.148 1.15-.247 1.465a4.872 4.872 0 0 1-3.427 3.427c-.315.099-.622.207-1.465.247-1.013.047-1.371.049-3.797.049s-2.784-.002-3.797-.048c-.843-.04-1.15-.148-1.465-.247a4.872 4.872 0 0 1-3.427-3.427c-.099-.315-.207-.622-.247-1.465-.047-1.013-.049-1.371-.049-3.797s.002-2.784.048-3.797c.04-.843.148-1.15.247-1.465a4.872 4.872 0 0 1 3.427-3.427c.315-.099.622-.207 1.465-.247C9.567 2.002 9.92 2 12.315 2Zm0 0S5.474 2 5.031 2.008c-.844.04-1.282.174-1.637.387a3.36 3.36 0 0 0-1.921 1.921c-.213.355-.347.793-.387 1.637C2.002 6.969 2 7.413 2 12.001c0 4.588.002 5.031.008 5.875.04.844.174 1.282.387 1.637a3.36 3.36 0 0 0 1.921 1.921c.355.213.793.347 1.637.387C6.969 22.002 7.413 22 12.001 22c4.588 0 5.031-.002 5.875-.008.844-.04 1.282-.174 1.637-.387a3.36 3.36 0 0 0 1.921-1.921c.213-.355.347-.793.387-1.637.006-.844.008-1.282.008-5.875s-.002-5.031-.008-5.875c-.04-.844-.174-1.282-.387-1.637a3.36 3.36 0 0 0-1.921-1.921c-.355-.213-.793-.347-1.637-.387C17.031 2.002 16.588 2 12.001 2Zm0 5.875a6.126 6.126 0 1 0 0 12.252 6.126 6.126 0 0 0 0-12.252ZM12.001 16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm6.406-11.848a1.69 1.69 0 1 0 0 3.38 1.69 1.69 0 0 0 0-3.38Z" clip-rule="evenodd" />
</svg>
<span class="sr-only">Instagram</span>
</a>
<a href="#" class="text-amber-800 dark:text-gray-400 hover:text-amber-600 dark:hover:text-amber-200 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.35c-4.69 0-8.5-3.81-8.5-8.5s3.81-8.5 8.5-8.5c2.3 0 4.41.92 5.89 2.45l-1.8 1.8c-1.07-.95-2.52-1.55-4.09-1.55-3.32 0-6 2.68-6 6s2.68 6 6 6c3.04 0 5.6-2.26 5.89-5.3h-5.89V10h9.5c.13.62.2 1.25.2 1.9 0 5.24-4.24 9.5-9.5 9.5Z"/>
<path d="M23 12h-9c0 5.24 4.24 9.5 9.5 9.5h-.5c-4.41 0-7.97-3.56-7.97-7.97 0-.65.07-1.28.2-1.9H23v2.85z"/>
</svg>
<span class="sr-only">Google</span>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Quick Links</h3>
<nav class="flex flex-col space-y-2">
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Home</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">About</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Portfolio</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Services</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Contact</a>
</nav>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Categories</h3>
<nav class="flex flex-col space-y-2">
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Web Design</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Branding</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">UI/UX</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Development</a>
<a href="#" class="hover:text-amber-700 dark:hover:text-amber-300 transition-colors duration-300">Illustration</a>
</nav>
</div>
<div>
<h3 class="text-lg font-semibold mb-4 border-b border-amber-500 pb-2">Get in Touch</h3>
<address class="not-italic text-sm space-y-2">
<p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" 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.727A8 8 0 016.343 7.273L17.657 16.727zm0 0A8.001 8.001 0 0120 12c0 2.21-1.206 4.16-3.097 5.29-1.425.864-3.153 1.34-5.028 1.34-3.957 0-7.25-3.047-7.25-6.81 C4.625 9.09 5.86 6.88 7.625 5.56L17.657 16.727zM6.343 7.273 C5.83 6.94 5.376 6.541 4.98 6.095m0 0a8.001 8.001 0 01-2.316 2.502L6.343 7.273z"></path></svg>123 Pixel Drive, Retroville, RV 90210</p>
<p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" 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.106 9.2A1 1 0 0011.233 10c1.354-.42 2.766-.671 4.29-1.284A1 1 0 0016 8.35v-1.7a2 2 0 012-2h3a2 2 0 012-2v16a2 2 0 01-2 2h-3a2 2 0 01-2-2v-1.7a1 1 0 00-.777-.962c-1.524-.613-2.936-.864-4.29-1.284a1 1 0 00-1.127.784l-.872 3.518A1 1 0 018.28 21H5a2 2 0 01-2-2V5z"></path></svg><a href="tel:+1234567890" class="hover:underline">+1 (234) 567-890</a></p>
<p class="flex items-center"><svg class="w-5 h-5 mr-2 text-amber-700 dark:text-amber-300" 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 8l7.983 5.485c.346.238.749.362 1.167.362.418 0 .82-.124 1.167-.362L21 8M6.25 10a.75.75 0 100 1.5.75.75 0 000-1.5zM12 12c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zM21 8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2h14a2 2 0 002-2V8z"></path></svg><a href="mailto:[email protected]" class="hover:underline">[email protected]</a></p>
</address>
</div>
</div>
<div class="mt-10 pt-6 border-t-2 border-amber-800 dark:border-gray-700 text-center text-sm">
<p>© <span id="current-year"></span> [Your Portfolio]. All rights reserved. <span class="hidden md:inline">Designed with '80s passion.</span></p>
</div>
</div>
</footer>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>관련 구성 요소
Footer Navigation 구성 요소
마켓플레이스를 위한 유기적/자연에서 영감을 받은 바닥글 탐색 구성 요소로, 유선, 유사한 색 구성표, 여러 섹션 및 다크 모드를 지원하는 반응형 디자인을 특징으로 합니다.
Footer Navigation 구성 요소
Material Design을 사용한 전자 상거래를 위한 바닥글 탐색 구성 요소 - 반응형 및 다크 모드를 지원하는 간단한 구성 요소로, 보색 구성표를 특징으로 합니다.
Footer Navigation 구성 요소
대시보드용으로 설계된 반응형 바닥글 탐색 구성 요소로, 생생한 색상의 Skeuomorphic 스타일을 특징으로 합니다. 여기에는 탐색 링크, 로고 및 소셜 미디어 아이콘이 포함되며 Tailwind CSS를 사용하여 완전한 다크 모드를 지원합니다. 이 디자인은 대화형 호버 효과를 사용하여 중간 정도의 복잡성을 목표로 합니다.