Corporate_Industrial_Footer_Ocean_Blue
반응형, 기업 및 산업 테마의 바닥글 구성 요소로, 제조 회사를 위해 설계된 바다/파란색 색 구성표가 있습니다. 탐색 링크, 연락처 정보, 소셜 미디어 및 저작권이 포함되며 완전한 다크 모드를 지원합니다.
HTML 코드
<footer class="bg-sky-700 text-white dark:bg-gray-950 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 md:gap-12">
<!-- Company Info / Logo -->
<div class="col-span-1 md:col-span-1">
<h3 class="text-2xl font-bold mb-4 text-sky-100 dark:text-sky-400">AeroFab Inc.</h3>
<p class="text-sky-100 dark:text-gray-400 text-sm leading-relaxed mb-4">
Leading the future of industrial manufacturing through innovation and precision engineering.
</p>
<p class="text-sky-100 dark:text-gray-400 text-sm">
Building tomorrow's industries, today.
</p>
</div>
<!-- Quick Links -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Quick Links</h4>
<ul class="space-y-3">
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Our Solutions</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Industries Served</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Case Studies</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Careers</a></li>
<li><a href="#" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300 text-sm">Blog & News</a></li>
</ul>
</div>
<!-- Contact Info -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Contact Us</h4>
<div class="space-y-3 text-sky-100 dark:text-gray-400 text-sm">
<p>
123 Industrial Way<br>
Tech City, TX 75001<br>
USA
</p>
<p>
Email: <a href="mailto:[email protected]" class="hover:text-sky-300 transition duration-300">[email protected]</a>
</p>
<p>
Phone: <a href="tel:+1234567890" class="hover:text-sky-300 transition duration-300">+1 (234) 567-890</a>
</p>
<p>
Fax: +1 (234) 567-891
</p>
</div>
</div>
<!-- Newsletter & Social Media -->
<div class="col-span-1">
<h4 class="text-lg font-semibold mb-4 text-sky-100 dark:text-sky-400">Stay Connected</h4>
<p class="text-sky-100 dark:text-gray-400 text-sm mb-4">Subscribe to our newsletter for the latest updates.</p>
<form class="flex flex-col sm:flex-row gap-2 mb-6">
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-2 rounded-md bg-sky-800 border border-sky-600 text-white placeholder-sky-200 focus:outline-none focus:ring-2 focus:ring-sky-300 dark:bg-gray-800 dark:border-gray-700 dark:placeholder-gray-500 dark:text-gray-200 dark:focus:ring-sky-500 text-sm">
<button type="submit" class="bg-sky-500 hover:bg-sky-600 text-white px-5 py-2 rounded-md font-semibold transition duration-300 dark:bg-sky-600 dark:hover:bg-sky-700 text-sm">
Subscribe
</button>
</form>
<div class="flex space-x-4">
<a href="#" aria-label="Facebook" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-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.33V22C17.34 21.128 22 16.991 22 12z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="Twitter" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c-2.096.166-4.103-.687-5.556-2.18l-.51-.595s4.9-1.928 8-1.57c2.97.337 5.166-.821 5.927-2.36l1.378-2.757-.101-.01c-1.391-.144-2.738-2.09-.766-3.82L20.5 4.3 22 4.3c-.015 2.92-1.306 5.239-3.414 7.02l-1.025.856s-.66-.45-1.527-1.1c-1.284-.967-2.285-2.274-2.868-3.79l.523-1.05s-2.001 1.776-3.078 2.057l-1.12.28s-1.89-1.1-2.903-2.58l.191-.19s-2.92 5.09-2.92 5.09c.677.29 1.579-.9 2.042-1.3l.086.08s-.486 1.13.013 1.96c.49-.69.96-.92 1.341-1.09l.343-2.09s.893.3 1.258.46c.928-.27 1.597-.73 2.158-1.48l-.05.02c.005.006.012.012.019.019.566-.75.766-1.56 1-2.25l-.2-.14s-.2-.16-.3-.3l.04.14s-.5.06-1.05.2c-.44.2-.84.4-1.21.6-.33.1-.6.1-.7.1s-.4-.1-.7-.1c-1.87-1.34-3.1-3.69-3.7-6.22l-1.4 0H4s-.2 1.5.8 2.6c1.65 1.8 1.95 3.5 2.15 4.07l.08.19s-.01.07-.01.12l-.02.04s-.06.27-.06.49c-.06.2-.2.4-.2.4ZM3.109 20.211l-.813-.812c-.524-.523-.972-1.246-1.347-2.09-.38-.85-.689-1.802-.934-2.859-.245-1.057-.42-2.195-.526-3.399-.105-1.204-.158-2.457-.158-3.753 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057.59-2.009 1.05-2.859.458-.85.992-1.574 1.599-2.164.607-.59 1.306-1.042 2.098-1.353.791-.31 1.666-.465 2.624-.465 0 0 1.296-.062 2.618.318 1.488-.309 3.01-.132 4.416.533C19.141 3.32 20.35 4.71 21.08 6.45c.731 1.74 1.1 3.55 1.1 5.43s-.369 3.69-1.1 5.43c-.73 1.74-1.94 3.13-3.46 4.102-1.52.973-3.19 1.459-5.01 1.459-.958 0-1.833-.156-2.624-.465-.792-.31-1.492-.763-2.098-1.353-.607-.59-1.141-1.314-1.599-2.164-.464-.85-.81-1.802-1.055-2.859-.245-1.056-.42-2.194-.526-3.399-.105-1.204-.158-2.457-.158-3.752 0-1.295.052-2.548.158-3.752.106-1.205.277-2.343.523-3.399.245-1.057-.015-.018-.031-.035-.047-.05ZM5.2 7A1 1 0 014 7.2L3 13.9C2.7 15.6 3.6 17 5 17s2.3-1.4 2.3-3.1L7 7.2A117 117 0 005.2 7zM18.8 7a1 1 0 00-1.2.2L17 13.9c.3 1.7 1.2 3.1 2.6 3.1s2.3-1.4 2.3-3.1L21 7.2A117 117 0 0118.8 7z" />
</svg>
</a>
<a href="#" aria-label="LinkedIn" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" aria-label="YouTube" class="text-sky-100 hover:text-sky-300 dark:text-gray-400 dark:hover:text-sky-300 transition duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M19.8 4.3c.09-1.07.72-1.93 1.7-2.3C21.8 1.9 23 2.1 24 2.6l-1 2.4c-.09.3-.12.6-.09 1c.09 1.07.72 1.93 1.7 2.3C23.6 8.5 24 7.6 24 6.8c0-.6-.3-.9-1-1.3-.8-.3-1.6-.2-2.3 0-.7.3-1.2.9-1.4 1.7-.2.7-.2 1.5-.1 2.3.1.8.4 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7c-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1c-.3.09-.6.12-1 .09-1.07-.09-1.93-.72-2.3-1.7-.4-1-.1-2.1.2-3.1.2-.8.5-1.5.8-2.2l.4-.7c.09-.2.03-.5-.2-.6l-2.4-1.1c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4 1-.1 2.1.2 3.1.2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6L0 7.2c-.3-.09-.6-.12-1-.09-1.07.09-1.93.72-2.3 1.7-.4.9-.1 2 .2 3 .2.8.5 1.5.8 2.2l.4.7c.09.2-.03.5-.2.6l-2.4 1.1c-.3-.09-.6-.12-1-.09z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
</div>
<!-- Divider -->
<hr class="my-8 border-sky-600 dark:border-gray-700">
<!-- Copyright / Bottom Text -->
<div class="text-center text-sky-100 dark:text-gray-400 text-sm">
© 2023 AeroFab Inc. All rights reserved. | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Privacy Policy</a> | <a href="#" class="hover:text-sky-300 dark:hover:text-sky-300 transition duration-300">Terms of Service</a>
</div>
</div>
</footer>관련 구성 요소
수채화/예술적 네온 바닥글
수채화/예술적 미학과 생생한 네온 색 구성표가 있는 간단하고 반응이 빠른 바닥글 구성 요소로 포트폴리오 웹사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
Bauhaus 단색 헬스케어 바닥글
의료 애플리케이션을 위한 간단하고 기능적인 바닥글 구성 요소로, Bauhaus 디자인 원칙에서 영감을 받았습니다. 단색 색 구성표, 반응형 레이아웃 및 다크 모드 지원이 특징입니다.