바닥글 탐색 구성 요소 - Industrial Ocean
이벤트/컨퍼런스 웹 사이트에 적합한 바다/파란색 색 구성표의 산업 스타일의 복잡하고 반응이 빠른 바닥글 탐색 구성 요소입니다. 다중 열 링크, 소셜 미디어 아이콘, 저작권 및 다크 모드 지원이 포함됩니다.
HTML 코드
<footer class="bg-sky-950 text-white dark:bg-gray-950 py-12 md:py-16 border-t-4 border-sky-700 dark:border-gray-800 font-sans">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-8 lg:gap-12">
<!-- Company Info / Logo -->
<div class="col-span-1 lg:col-span-2 flex flex-col items-start">
<h2 class="text-3xl font-extrabold text-sky-200 dark:text-sky-400 mb-4 tracking-tight uppercase">
<span class="block">Event</span>
<span class="block text-sky-400 dark:text-sky-200">Connect</span>
</h2>
<p class="text-sky-300 dark:text-gray-400 text-sm leading-relaxed mb-4">
Bringing together minds, ideas, and innovations. Your premier platform for unforgettable events and conferences worldwide.
</p>
<div class="flex space-x-4">
<a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
<svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="facebook-f" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 223.75 0c-73.66 0-121.05 44.38-121.05 124.7v70.30H27.5v92.66h74.05V512h94.92V288z"></path></svg>
<span class="sr-only">Facebook</span>
</a>
<a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
<svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="twitter" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M459.37 151.716c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96c.92 1.33 1.153 2.05 1.153 2.05 0 20.31-7.85 41.5-23.27 61.35-16.14 20.91-36.26 37.95-58.4 51.52-22.14 13.57-45.1 23.95-69.83 30.73-24.74 6.78-49.8 9.94-75.14 9.94-73.67 0-141.22-31.96-189.28-86.87-47.9-54.8-73.34-124.63-73.34-201.07 0-.32.02-.64.04-.96 0-.32.02-.64.04-.96.02-.32.04-.64.06-.96.04-.64.04-1.28.08-1.92.06-.96.12-1.92.18-2.88 0-1.28.02-2.56.04-3.84 0-.64.02-1.28.04-1.92 0-.64-.02-1.28-.04-1.92-.04-.64-.06-1.28-.1-1.92-.04-.64-.06-1.28-.1-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96-.02-.32-.04-.64-.06-.96-.04-.64-.06-1.28-.1-1.92-.04-.64-.08-1.28-.12-1.92-.02-.32-.04-.64-.06-.96z"></path></svg>
<span class="sr-only">Twitter</span>
</a>
<a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
<svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.28 448H7.4V148.9h92.88zM53.79 114.71C24.09 114.71 0 91.63 0 62.84 0 34.05 24.09 11.05 53.79 11.05c29.7 0 53.79 23 53.79 51.79 0 28.79-24.1 51.79-53.79 51.79zM448 448h-92.68V302.4c0-34.74-27.02-63.53-63.07-63.53-34.88 0-56.36 25.35-65.73 40.57h-.42V448H172.5V148.9h92.54v33.43c12.26-21.72 40.16-59.54 102.4-59.54 77.29 0 137.4 69.49 137.4 165.48z"></path></svg>
<span class="sr-only">LinkedIn</span>
</a>
<a href="#" class="text-sky-400 hover:text-sky-200 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-300">
<svg class="h-6 w-6 fill-current" aria-hidden="true" focusable="false" data-prefix="fab" data-icon="instagram" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M224.1 204.2c-56.3 0-102.2 45.9-102.2 102.2s45.9 102.2 102.2 102.2S326.3 362.5 326.3 306.2 280.4 204.2 224.1 204.2zm0 159.2c-31.9 0-57.8-25.9-57.8-57.8s25.9-57.8 57.8-57.8 57.8 25.9 57.8 57.8-26 57.8-57.8 57.8z"></path><path d="M185 36h78.8c.8 0 1.2.6 1.2 1.3 0 2.2-1.7 4.1-3.9 4.1H185c-2.2 0-3.9-1.9-3.9-4.1 0-.7.4-1.3 1.2-1.3zM.4 121.7C.3 121.2 0 120.5 0 119.8V42.6c0-4.6 3.4-8.8 8.1-9.3 4.7-.5 9.1 2.3 10.9 6.8l.6 1.4-15.6 15.6c-.6.6-.9 1.4-.9 2.2v43.2c0 .8.3 1.6.9 2.2l15.6 15.6-.6 1.4c-1.8 4.5-6.2 7.3-10.9 6.8-4.7-.5-8.1-4.7-8.1-9.3v-77.2c0-.7-.3-1.3-.4-1.8z"></path><path d="M384 0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm-48.9 154.5v198.8c0 24.9-20.2 45.1-45.1 45.1H159.2c-24.9 0-45.1-20.2-45.1-45.1V154.5c0-24.9 20.2-45.1 45.1-45.1h130.8c24.9 0 45.1 20.2 45.1 45.1zm-8.8-97.8c-2.4 0-4.8 1-6.5 2.7-1.7 1.7-2.7 4.1-2.7 6.5s1 4.8 2.7 6.5c1.7 1.7 4.1 2.7 6.5 2.7s4.8-1 6.5-2.7c1.7-1.7 2.7-4.1 2.7-6.5s-1-4.8-2.7-6.5c-1.7-1.7-4.1-2.7-6.5-2.7z"></path></svg>
<span class="sr-only">Instagram</span>
</a>
</div>
</div>
<!-- Navigation Links -->
<div class="col-span-1">
<h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">About</h3>
<ul class="space-y-3">
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Our Mission</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Team</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Partners</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Careers</a></li>
</ul>
</div>
<div class="col-span-1">
<h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">Events</h3>
<ul class="space-y-3">
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Upcoming Events</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Past Events</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Submit a Proposal</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Sponsor An Event</a></li>
</ul>
</div>
<div class="col-span-1">
<h3 class="text-lg font-semibold text-sky-200 dark:text-sky-400 mb-4 uppercase tracking-wide">Support</h3>
<ul class="space-y-3">
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">FAQ</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Contact Us</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Privacy Policy</a></li>
<li><a href="#" class="text-sky-300 hover:text-sky-100 dark:text-gray-400 dark:hover:text-gray-200 text-sm transition-colors duration-300">Terms of Service</a></li>
</ul>
</div>
</div>
<!-- Newsletter Signup -->
<div class="mt-12 pt-8 border-t border-sky-700 dark:border-gray-800 flex flex-col items-center justify-between text-center md:flex-row md:text-left gap-6">
<div class="max-w-md">
<h3 class="text-xl font-bold text-sky-200 dark:text-sky-400 mb-2">Stay Connected</h3>
<p class="text-sky-300 dark:text-gray-400 text-sm">Subscribe to our newsletter for the latest updates on events and industry insights.</p>
</div>
<form class="flex flex-col sm:flex-row w-full max-w-sm space-y-3 sm:space-y-0 sm:space-x-3">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required
class="w-full appearance-none rounded-md border border-sky-600 dark:border-gray-700 px-4 py-2 text-gray-900 placeholder-gray-500 rounded-lg
focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-sky-500 sm:text-sm
bg-sky-100 dark:bg-gray-700 dark:text-gray-100 dark:placeholder-gray-400"
placeholder="Enter your email">
<button type="submit"
class="flex-shrink-0 rounded-md border border-transparent bg-sky-600 px-4 py-2 text-base font-medium text-white shadow-sm
hover:bg-sky-700 dark:bg-sky-700 dark:hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2
dark:focus:ring-offset-gray-950 transition-colors duration-300">
Subscribe
</button>
</form>
</div>
<!-- Copyright -->
<div class="mt-8 pt-8 border-t border-sky-800 dark:border-gray-700 text-center text-sky-400 dark:text-gray-500 text-xs">
© <span id="current-year"></span> EventConnect. All rights reserved. Built with <span class="text-red-400">♥</span>
</div>
</div>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</footer>관련 구성 요소
Footer Navigation 구성 요소
마켓플레이스를 위해 설계된 복잡하고 반응이 빠른 바닥글 탐색 구성 요소로, 흑백 색 구성표와 한 가지 밝은 강조 색(남색)이 있는 어두운 모드 UI를 특징으로 합니다. 탐색, 회사 정보, 법률 링크 및 소셜 미디어에 대한 여러 섹션이 포함되어 있으며 완전한 다크 모드를 지원합니다.
Footer Navigation 구성 요소
머티리얼 디자인(Material Design) 원칙과 비즈니스/기업 웹사이트를 위한 유사한 색 구성표로 스타일이 지정된 간단한 바닥글 탐색 구성 요소입니다. 다크 모드를 지원하며 반응형입니다.
바닥글 탐색 구성 요소 38
실제 요소를 모방하기 위해 스큐어모픽 스타일로 설계된 반응형 바닥글 탐색 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다. 이 구성 요소에는 링크, 자리 표시자 이미지 및 아바타가 포함됩니다.