Скевоморфный компонент нижнего колонтитула
Адаптивный футерный компонент со скевоморфным дизайном, аналогичной цветовой гаммой (зеленый, сине-зеленый) и умеренной сложностью, подходящий для бизнес-сайтов. Включает в себя ссылки, заполнитель логотипа и тонкий скевоморфный эффект, достигаемый с помощью теней и градиентов. Поддерживает светлый и темный режимы.
HTML-код
<footer class="bg-gradient-to-b from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 py-12">
<div class="container mx-auto px-4">
<div class="flex flex-wrap justify-between items-center">
<div class="w-full md:w-1/4 mb-6 md:mb-0">
<!-- Logo Placeholder with Skeuomorphic effect -->
<div class="w-24 h-24 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 rounded-lg shadow-xl dark:shadow-xl-dark flex items-center justify-center">
<svg class="w-12 h-12 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21v-2a4 4 0 00-4-4H9a4 4 0 00-4 4v2m16 0h-3.586a1 1 0 01-.707-.293l-.031-.032A1.5 1.5 0 0015 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 0112.586 17H9.414a1 1 0 01-.707.293l-.031.032A1.5 1.5 0 006 18a1.5 1.5 0 00-2.121-1.06l-.032-.032A1 1 0 013.586 19H1"></path></svg>
</div>
</div>
<div class="w-full md:w-1/4 mb-6 md:mb-0">
<h4 class="text-lg font-semibold mb-4">Quick Links</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Home</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">About Us</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Services</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Contact</a></li>
</ul>
</div>
<div class="w-full md:w-1/4 mb-6 md:mb-0">
<h4 class="text-lg font-semibold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Blog</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Support</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Privacy Policy</a></li>
<li><a href="#" class="hover:text-gray-600 dark:hover:text-gray-400 transition duration-300 ease-in-out">Terms of Service</a></li>
</ul>
</div>
<div class="w-full md:w-1/4">
<h4 class="text-lg font-semibold mb-4">Contact Us</h4>
<p class="mb-2">123 Business Lane, Corporate City</p>
<p class="mb-2">Email: [email protected]</p>
<p>Phone: (123) 456-7890</p>
</div>
</div>
<hr class="my-8 border-gray-400 dark:border-gray-600">
<div class="text-center text-sm">
© 2023 Your Business. All rights reserved.
</div>
</div>
</footer>Связанные компоненты
Компонент нижнего колонтитула
Адаптивный ретро/винтажный компонент нижнего колонтитула для блога с триадической цветовой схемой и поддержкой темной темы.
Нижний колонтитул стекломорфизма
Адаптивный компонент нижнего колонтитула, разработанный в стиле glassmorphism, с эффектами, похожими на матовое стекло, и поддержкой темных тем с использованием Tailwind CSS.
Неоморфный вибрационный футер
Простой, отзывчивый компонент нижнего колонтитула, стилизованный под принципы неморфного дизайна и яркие цвета. Он отличается мягким экструдированным внешним видом с тонкими тенями, сохраняя при этом высокую насыщенность акцентных цветов. Футер включает в себя базовые разделы для навигации по сайту, социальных ссылок и информации об авторских правах с полной поддержкой темного режима.