Organic_Nature_Inspired_Real_Estate_Footer
부동산 플랫폼을 위한 복잡하고 자연에서 영감을 받은 보색 바닥글 구성 요소로, 흐르는 선, 자연스러운 형태, 다양한 대화형 요소, 다크 모드 지원을 통한 완전한 응답성을 특징으로 합니다.
HTML 코드
<footer class="bg-gradient-to-br from-green-50 to-blue-50 text-gray-800 py-12 dark:from-green-950 dark:to-blue-950 dark:text-gray-200 overflow-hidden relative">
<!-- Background organic shapes - these are visual only and might need careful positioning -->
<div class="absolute -bottom-20 -left-20 w-80 h-80 rounded-full bg-green-200 opacity-30 blur-3xl dark:bg-green-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
<div class="absolute -top-10 -right-10 w-96 h-96 rounded-full bg-blue-200 opacity-30 blur-3xl dark:bg-blue-700 dark:opacity-20 transition-all duration-500 ease-in-out"></div>
<div class="absolute bottom-1/4 left-1/4 w-60 h-60 rounded-full bg-green-100 opacity-20 blur-2xl dark:bg-green-800 dark:opacity-10 transition-all duration-500 ease-in-out"></div>
<div class="container mx-auto px-4 relative z-10">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-10 lg:gap-12">
<!-- Company Info / Logo -->
<div class="lg:col-span-2 flex flex-col items-start">
<a href="#" class="flex items-center space-x-3 mb-6 transition-transform hover:scale-105 duration-300">
<img src="https://picsum.photos/id/10/50/50" alt="Nature Estate Logo" class="rounded-full shadow-lg border-2 border-green-400 dark:border-green-600">
<span class="font-extrabold text-3xl text-green-700 dark:text-green-300 font-serif">NatureNest</span>
</a>
<p class="text-base leading-relaxed text-gray-700 dark:text-gray-300 mb-6 max-w-sm">
Discover your dream home nestled in harmony with nature. We connect you to serene properties that breathe life into your living.
</p>
<form class="w-full max-w-sm relative group">
<input type="email" placeholder="Your email for updates..." class="w-full p-3 rounded-full bg-white bg-opacity-70 border-2 border-green-300 dark:bg-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent dark:border-green-700 pr-12 transition-all duration-300 group-focus-within:shadow-lg group-focus-within:border-blue-400">
<button type="submit" class="absolute right-2 top-1/2 -translate-y-1/2 p-2 bg-green-500 rounded-full text-white hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-blue-400 dark:bg-green-600 dark:hover:bg-green-700 transition-all duration-300">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
</button>
</form>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Quick Links</h3>
<ul class="space-y-4">
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Properties</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>About Us</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Contact</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Blog</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Careers</a></li>
</ul>
</div>
<!-- Services -->
<div>
<h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Services</h3>
<ul class="space-y-4">
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Buy Property</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Sell Property</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Property Valuation</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Mortgage Advice</a></li>
<li><a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>Rental Management</a></li>
</ul>
</div>
<!-- Contact Info -->
<div>
<h3 class="text-xl font-bold mb-6 text-green-700 dark:text-green-300 border-b-2 border-green-400 pb-2 inline-block transition-colors duration-300">Connect</h3>
<ul class="space-y-4">
<li class="flex items-start">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 mt-1 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.727A8 8 0 016.343 7.273L7.757 8.687a6 6 0 008.486 8.486l1.414 1.414z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 7.273a4 4 0 115.656 5.656L10 17.657 4.343 12zm0 0L4.343 7.273m0 0L9.172 2.445" />
</svg>
<address class="not-italic text-gray-700 dark:text-gray-300">
123 EcoLane, Green Oasis City, GO 45678
</address>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.5 9.071c.325.399.075.95-.476 1.113l-1.424.378a12.013 12.013 0 008.68-8.68l.377-1.425c.164-.551.715-.801 1.113-.476l4.045 1.554A1 1 0 0121 16.72V19a2 2 0 01-2 2H5a2 2 0 01-2-2v-5.28a1 1 0 01.684-.948l1.554-4.045z" />
</svg>
<a href="tel:+1234567890" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">+1 (234) 567-890</a>
</li>
<li class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-3 text-blue-500 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26c.73.48 1.67.48 2.4 0L21 8m-18 8V6a2 2 0 012-2h14a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
</svg>
<a href="mailto:[email protected]" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">[email protected]</a>
</li>
</ul>
</div>
</div>
<div class="mt-12 pt-8 border-t border-green-300 dark:border-green-700 flex flex-col md:flex-row items-center justify-between text-sm text-gray-600 dark:text-gray-400">
<p class="mb-4 md:mb-0">© 2023 NatureNest. All rights reserved. <span class="hidden md:inline">|</span> <br class="md:hidden"> Designed with nature in mind.</p>
<div class="flex space-x-6">
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Privacy Policy</a>
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Terms of Service</a>
<a href="#" class="hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">Sitemap</a>
</div>
</div>
</div>
</footer>관련 구성 요소
3D 유사 간단한 블로그 바닥글
Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 바닥글 구성 요소. 바닥글은 유사한 색상의 단순한 3D 디자인을 가지고 있습니다. 블로그/콘텐츠 웹사이트에 최적화되어 있습니다.
소셜 미디어 바닥글 구성 요소
소셜 네트워킹 인터페이스를 위한 반응형 바닥글 구성 요소로, 단색 파란색 색 구성표를 사용하는 Material Design 원칙에 따라 설계되었습니다. 그리드 기반 레이아웃, 깊이 효과(그림자), 대화형 요소에 대한 호버 및 전환 애니메이션, 뉴스레터 구독 양식, 소셜 아이콘, 사용자 아바타 및 Tailwind의 dark: 수정자를 통한 다크 모드 지원을 제공합니다.