フッターナビゲーションコンポーネント - インダストリアルオーシャン
オーシャン/ブルーの配色を備えたインダストリアルスタイルの複雑でレスポンシブなフッターナビゲーションコンポーネントで、イベント/会議のWebサイトに適しています。複数列のリンク、ソーシャル メディア アイコン、著作権、およびダーク モードのサポートが含まれます。
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>関連コンポーネント
フッターナビゲーションコンポーネント
マテリアルデザインの原則と、ビジネス/企業のWebサイト向けの類似の配色でスタイル設定されたシンプルなフッターナビゲーションコンポーネント。ダークモードをサポートし、応答性に優れています。
水彩芸術的なフッターナビゲーションコンポーネント
非営利団体/慈善団体のWebサイト向けに設計された複雑でレスポンシブなフッターナビゲーションコンポーネントで、ソフトなセピア/ブラウンの色調とダークモードをサポートする水彩画の芸術的なスタイルが特徴です。複数のナビゲーションリンク、ソーシャルメディアアイコン、著作権セクションが含まれています。
フッターナビゲーションコンポーネント
レトロ/ビンテージ デザイン スタイルのレスポンシブ フッター ナビゲーション コンポーネントで、鮮やかな色を使用し、ソーシャル メディア インターフェイスに合わせて調整されています。