Bauhaus_Retro_News_Footer
뉴스/저널리즘 웹사이트를 위한 복잡하고 반응이 빠른 바닥글 탐색 구성 요소로, 바우하우스에서 영감을 받은 기하학적 형태와 레트로/빈티지 색상 팔레트, 다크 모드 지원을 포함합니다.
HTML 코드
<footer class="bg-amber-100 text-stone-800 py-12 px-4 dark:bg-stone-900 dark:text-stone-300 font-sans">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10 lg:gap-12">
<!-- Brand & Social -->
<div class="flex flex-col items-start">
<a href="#" class="text-3xl font-bold tracking-tight text-red-700 dark:text-red-500 mb-4 uppercase">
<span class="block">The Daily</span>
<span class="block text-xl text-stone-700 dark:text-stone-400 -mt-2">Gazette</span>
</a>
<p class="text-sm mb-6 max-w-sm text-stone-700 dark:text-stone-400 leading-relaxed">
Your source for unbiased news and in-depth analysis from around the globe. Stay informed, stay ahead.
</p>
<div class="flex space-x-4">
<a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Facebook">
<svg class="w-5 h-5" 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.33V22c5.965-.949 10-5.605 10-11.267Z" clip-rule="evenodd" />
</svg>
</a>
<a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Twitter">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M8.29 20.251c1.803.957 3.864 1.43 6.096 1.43 7.334 0 11.332-6.04 11.332-11.332 0-.17-.003-.338-.01-.506A8.134 8.134 0 0024 4.992c-.736.326-1.527.54-2.357.643a4.07 4.07 0 001.76-2.267c-.822.489-1.727.842-2.697 1.03a4.043 4.043 0 00-6.924 3.693 11.493 11.493 0 01-8.381-4.22c-.428.73-.67 1.58-.67 2.493 0 1.737.878 3.27 2.217 4.172a4.053 4.053 0 01-1.834-.508v.05c0 2.393 1.706 4.383 3.963 4.834a4.072 4.072 0 01-1.834.07c.628 1.956 2.445 3.393 4.605 3.432-1.688 1.325-3.805 2.124-6.102 2.124-.397 0-.786-.023-1.168-.069a16.052 16.052 0 009.654 3.013Z" />
</svg>
</a>
<a href="#" class="w-9 h-9 flex items-center justify-center rounded-full bg-red-700 text-amber-100 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 transition-colors duration-200" aria-label="Instagram">
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" d="M12.317 3.093A8.472 8.472 0 0 0 4.542 6.095V10.5h1.996V6.095c0-1.85 1.503-3.35 3.35-3.35h7.224c1.847 0 3.35 1.5 3.35 3.35v7.224a3.35 3.35 0 0 1-3.35 3.35H13.5V18.5h4.417a8.471 8.471 0 0 0-.256-4.542H20a2.001 2.001 0 0 0 2-2V9.091a2.001 2.001 0 0 0-2-2h-3.091a8.472 8.472 0 0 0-4.542-.256V4.091h-2.09ZM12 10.5a1.5 1.5 0 1 0-.001 3.001A1.5 1.5 0 0 0 12 10.5Zm-5.5 0a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z" clip-rule="evenodd" />
</svg>
</a>
</div>
</div>
<!-- Navigation Links -->
<div>
<h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
Sections
<span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
</h3>
<ul class="space-y-3">
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">World News</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Politics</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Business & Economy</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Tech & Science</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Arts & Culture</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200 text-sm font-medium">Sports</a></li>
</ul>
</div>
<!-- Recent Articles (Fictional Thumbnails) -->
<div>
<h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
Latest Reads
<span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
</h3>
<div class="space-y-4">
<a href="#" class="flex items-center space-x-4 group">
<img src="https://picsum.photos/id/1025/70/70" alt="Image of forest" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
<div class="flex-1">
<p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Global Climate Summit Ends with Ambitious New Targets</p>
<p class="text-xs text-stone-600 dark:text-stone-500 mt-1">2 hours ago</p>
</div>
</a>
<a href="#" class="flex items-center space-x-4 group">
<img src="https://picsum.photos/id/1015/70/70" alt="Image of a lake" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
<div class="flex-1">
<p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">New AI Breakthrough Could Revolutionize Medicine</p>
<p class="text-xs text-stone-600 dark:text-stone-500 mt-1">Yesterday</p>
</div>
</a>
<a href="#" class="flex items-center space-x-4 group">
<img src="https://picsum.photos/id/103/70/70" alt="Image of a mountain" class="w-16 h-16 object-cover rounded shadow-md border-2 border-transparent group-hover:border-red-700 dark:group-hover:border-red-500 transition-colors duration-200">
<div class="flex-1">
<p class="text-sm font-medium text-stone-800 dark:text-stone-300 group-hover:text-red-700 dark:group-hover:text-red-500 transition-colors duration-200 line-clamp-2">Cultural Heritage Vandalized in Ongoing Conflict</p>
<p class="text-xs text-stone-600 dark:text-stone-500 mt-1">3 days ago</p>
</div>
</a>
</div>
</div>
<!-- Newsletter & Contact -->
<div>
<h3 class="text-lg font-semibold text-stone-900 dark:text-stone-200 mb-6 uppercase tracking-wider relative group">
Stay Connected
<span class="block h-1 w-8 bg-red-700 dark:bg-red-500 absolute bottom-0 left-0 transition-all duration-300 group-hover:w-16"></span>
</h3>
<p class="text-sm text-stone-700 dark:text-stone-400 mb-4">Subscribe to our newsletter for daily updates straight to your inbox.</p>
<form class="flex flex-col space-y-3">
<input type="email" placeholder="Your email address" aria-label="Your email address" class="px-4 py-2 rounded-md bg-stone-50 border border-stone-300 dark:bg-stone-800 dark:border-stone-700 text-stone-800 dark:text-stone-200 focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:border-transparent outline-none transition-all duration-200">
<button type="submit" class="bg-red-700 hover:bg-red-800 dark:bg-red-500 dark:hover:bg-red-600 text-amber-100 font-bold py-2 px-4 rounded-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-700 dark:focus:ring-red-500 focus:ring-offset-2 focus:ring-offset-amber-100 dark:focus:ring-offset-stone-900 shadow-md text-sm uppercase tracking-wider">
Subscribe
</button>
</form>
<div class="mt-8">
<h4 class="text-md font-semibold text-stone-900 dark:text-stone-200 mb-3">Quick Links</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">About Us</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Careers</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Press Room</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Privacy Policy</a></li>
<li><a href="#" class="text-stone-700 dark:text-stone-400 hover:text-red-700 dark:hover:text-red-500 transition-colors duration-200">Terms of Service</a></li>
</ul>
</div>
</div>
</div>
<!-- Footer Bottom / Copyright -->
<div class="mt-12 pt-8 border-t border-stone-300 dark:border-stone-700 text-center text-sm text-stone-600 dark:text-stone-500">
<p>© 2023 The Daily Gazette. All rights reserved. <span class="hidden md:inline">Designed with a nod to Bauhaus principles and timeless journalism.</span></p>
</div>
</footer>관련 구성 요소
Retro_Jewel_Tone_Dashboard_Footer_Navigation
대시보드용 반응형 바닥글 탐색 구성 요소로, 보석 색조 색상(에메랄드, 사파이어, 루비)과 다크 모드 지원을 통해 레트로/빈티지 미학에서 영감을 받았습니다. 여기에는 탐색 링크, 소셜 미디어 아이콘 및 저작권 정보가 포함됩니다.
Footer Navigation 구성 요소
포트폴리오 웹 사이트에 적합한 어두운 테마의 반응형 바닥글 탐색 구성 요소입니다. 단일 색상의 다양한 음영이 있는 단색 색 구성표, 일부 대화형 기능이 있는 중간 복잡성을 특징으로 하며 dark: 접두사를 사용한 다크 모드 지원을 포함하여 스타일링에 Tailwind CSS를 사용합니다.
바닥글 탐색 구성 요소 38
실제 요소를 모방하기 위해 스큐어모픽 스타일로 설계된 반응형 바닥글 탐색 구성 요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다. 이 구성 요소에는 링크, 자리 표시자 이미지 및 아바타가 포함됩니다.