3D_Music_Footer_Navigation
음악/오디오 플랫폼을 위한 복잡한 3D에서 영감을 받은 바닥글 탐색 구성 요소로, 따뜻한 중립 색상과 다크 모드 지원으로 완전한 응답성을 제공합니다.
HTML 코드
<footer class="bg-gradient-to-br from-stone-100 to-stone-200 text-stone-700 py-12 px-6 dark:from-stone-900 dark:to-stone-950 dark:text-stone-300 relative overflow-hidden">
<div class="absolute inset-0 z-0 opacity-10 dark:opacity-5" style="background-image: radial-gradient(circle at center, #d6d3d1 1px, transparent 1px); background-size: 20px 20px;"></div>
<!-- Decorative rings for 3D effect -->
<div class="absolute w-96 h-96 rounded-full bg-stone-300 dark:bg-stone-700 opacity-20 dark:opacity-10 -bottom-24 -left-24 blur-3xl"></div>
<div class="absolute w-72 h-72 rounded-full bg-stone-400 dark:bg-stone-600 opacity-15 dark:opacity-8 top-12 -right-12 blur-3xl"></div>
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12 relative z-10">
<!-- Section 1: Logo and Copyright -->
<div class="flex flex-col items-start">
<a href="#" class="inline-flex items-center space-x-2 text-2xl font-bold mb-4 transform transition-transform duration-300 hover:scale-105">
<svg class="w-8 h-8 text-amber-500" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm-1 16.03V7.97c0-.49.38-.87.87-.87H15a.87.87 0 0 1 .87.87v10.06a.87.87 0 0 1-.87.87H11.87a.87.87 0 0 1-.87-.87zM13 14H9v-4h4v4z"/>
</svg>
<span class="bg-clip-text text-transparent bg-gradient-to-r from-amber-600 to-stone-800 dark:from-amber-400 dark:to-stone-200">SoundWave</span>
</a>
<p class="text-sm text-stone-600 dark:text-stone-400 mb-4">Dive into an ocean of sounds. Your ultimate audio experience begins here.</p>
<p class="text-xs text-stone-500 dark:text-stone-400">© 2023 SoundWave. All rights reserved.</p>
<div class="flex space-x-4 mt-6">
<a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
<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.368 21.248 22 17.07 22 12z" clip-rule="evenodd" /></svg>
</a>
<a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.24 3.76c-.92-.92-2.12-1.44-3.44-1.44H7.2c-1.32 0-2.52.52-3.44 1.44C2.84 4.68 2.32 5.88 2.32 7.2v9.6c0 1.32.52 2.52 1.44 3.44s2.12 1.44 3.44 1.44h9.6c1.32 0 2.52-.52 3.44-1.44s1.44-2.12 1.44-3.44V7.2c0-1.32-.52-2.52-1.44-3.44zM12 18.08c-3.35 0-6.08-2.73-6.08-6.08S8.65 5.92 12 5.92s6.08 2.73 6.08 6.08-2.73 6.08-6.08 6.08zM18.42 7.78a1.36 1.36 0 1 1 0-2.72 1.36 1.36 0 0 1 0 2.72z"/><path d="M12 8.08c-2.16 0-3.92 1.76-3.92 3.92s1.76 3.92 3.92 3.92 3.92-1.76 3.92-3.92-1.76-3.92-3.92-3.92z"/></svg>
</a>
<a href="#" class="text-stone-500 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:-translate-y-1">
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22.46 6.03c-.63.28-1.31.47-2.01.56.73-.44 1.29-1.13 1.55-1.99-.68.4-1.43.68-2.22.84-.64-.68-1.55-1.12-2.59-1.12-2.02 0-3.66 1.64-3.66 3.66 0 .29.03.56.08.83-3.05-.15-5.75-1.61-7.56-3.84-.32.55-.5 1.18-.5 1.87 0 1.27.65 2.39 1.63 3.05-.6-.02-1.16-.18-1.65-.45v.05c0 1.77 1.26 3.24 2.93 3.58-.3.08-.6.12-.9.12-.22 0-.44-.02-.65-.06.47 1.45 1.81 2.51 3.41 2.54-1.25.98-2.82 1.57-4.53 1.57-.29 0-.58-.02-.86-.05 1.62 1.04 3.54 1.65 5.59 1.65 6.71 0 10.37-5.56 10.37-10.37 0-.16-.01-.32-.01-.48.71-.51 1.34-1.14 1.83-1.87z"/></svg>
</a>
</div>
</div>
<!-- Section 2: Quick Links (Explore) -->
<div>
<h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Explore</h3>
<ul class="space-y-3">
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">New Releases</a></li>
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Top Charts</a></li>
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Genres</a></li>
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Artists</a></li>
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Podcasts</a></li>
</ul>
</div>
<!-- Section 3: Support & Legal -->
<div>
<h3 class="text-lg font-semibold mb-4 text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Support</h3>
<ul class="space-y-3">
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Help Center</a></li>
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Contact Us</a></li>
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Privacy Policy</a></li>
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Terms of Service</a></li>
<li><a href="#" class="text-stone-600 hover:text-amber-600 dark:text-stone-400 dark:hover:text-amber-400 transition-colors duration-300 transform hover:translate-x-1">Cookie Policy</a></li>
</ul>
</div>
<!-- Section 4: Newsletter & App Download -->
<div class="space-y-6">
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-100 relative after:absolute after:left-0 after:bottom-0 after:w-12 after:h-0.5 after:bg-amber-500 after:rounded-full transform transition-transform duration-300 hover:translate-x-1">Stay Connected</h3>
<div>
<p class="mb-3 text-stone-600 dark:text-stone-400">Subscribe to our newsletter for the latest updates.</p>
<form class="flex flex-col sm:flex-row gap-2">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="min-w-0 flex-auto rounded-md border-0 bg-white/50 dark:bg-stone-800/50 px-3.5 py-2 text-stone-900 dark:text-stone-100 shadow-sm ring-1 ring-inset ring-stone-300 dark:ring-stone-700 placeholder:text-stone-400 dark:placeholder:text-stone-500 focus:ring-2 focus:ring-inset focus:ring-amber-500 sm:text-sm sm:leading-6 transition-all duration-300 focus:outline-none focus:shadow-lg focus:shadow-amber-500/20" placeholder="Enter your email">
<button type="submit" class="flex-none rounded-md bg-amber-500 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-amber-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 transform transition-transform duration-300 hover:scale-105 active:scale-95
relative overflow-hidden group">
<span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-white rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
Subscribe
</button>
</form>
</div>
<div class="mt-6">
<p class="mb-3 text-stone-600 dark:text-stone-400">Download our mobile app to listen on the go!</p>
<div class="flex space-x-3">
<a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
<span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
<svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M17 1H7c-1.1 0-2 .9-2 2v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2zm-2 20h-6v-1h6v1zm3-3H6V4h12v14z"/>
</svg>
<span class="text-stone-800 dark:text-stone-200 text-sm font-medium">App Store</span>
</a>
<a href="#" class="inline-flex items-center bg-stone-300/60 dark:bg-stone-800/60 px-4 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 transform hover:-translate-y-1 relative overflow-hidden group">
<span class="absolute top-0 left-0 w-0 h-0 transition-all duration-300 ease-out bg-stone-600 rounded-full group-hover:w-full group-hover:h-full opacity-10"></span>
<svg class="h-6 w-6 text-stone-800 dark:text-stone-200 mr-2" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2.05 13.9c-.29.54-.84.85-1.4.85-.92 0-1.67-.75-1.67-1.67 0-.92.75-1.67 1.67-1.67.56 0 1.11.31 1.4.85l.76-.76c-.57-.96-1.57-1.54-2.58-1.54-1.84 0-3.33 1.49-3.33 3.33s1.49 3.33 3.33 3.33c1.01 0 2.01-.58 2.58-1.54l-.76-.76zm7.2-2.3l-.76.76c.29-.54.84-.85 1.4-.85.92 0 1.67.75 1.67 1.67 0 .92-.75 1.67-1.67 1.67-.56 0-1.11-.31-1.4-.85l-.76.76c.57.96 1.57 1.54 2.58 1.54 1.84 0 3.33-1.49 3.33-3.33s-1.49-3.33-3.33-3.33c-1.01 0-2.01.58-2.58 1.54z"/>
</svg>
<span class="text-stone-800 dark:text-stone-200 text-sm font-medium">Play Store</span>
</a>
</div>
</div>
</div>
</div>
</footer>관련 구성 요소
Footer Navigation 구성 요소
레트로/빈티지 디자인 스타일의 반응형 바닥글 탐색 구성 요소로, 생생한 색상을 사용하고 소셜 미디어 인터페이스에 맞게 조정되었습니다.
Footer Navigation 구성 요소
대시보드용으로 설계된 반응형 바닥글 탐색 구성 요소로, 생생한 색상의 Skeuomorphic 스타일을 특징으로 합니다. 여기에는 탐색 링크, 로고 및 소셜 미디어 아이콘이 포함되며 Tailwind CSS를 사용하여 완전한 다크 모드를 지원합니다. 이 디자인은 대화형 호버 효과를 사용하여 중간 정도의 복잡성을 목표로 합니다.
Footer Navigation 구성 요소
단색 색 구성표가 있는 Glassmorphism 스타일로 설계된 간단한 바닥글 탐색 구성 요소입니다. 반응형이고 다크 모드를 지원하며 전자 상거래 웹 사이트에 적합합니다.