Компонент навигации по нижнему колонтитулу
Компонент навигации по нижнему колонтитулу с дизайном с неоморфизмом, монохроматической цветовой схемой, сложной сложностью и назначением для социальных сетей. Адаптивный дизайн с поддержкой темных тем.
HTML-код
<footer class="bg-gray-200 dark:bg-gray-800 py-8 px-4">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">About Us</h3>
<p class="text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et est in justo feugiat consectetur.</p>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Quick Links</h3>
<ul class="space-y-2">
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Home</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">About</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Services</a></li>
<li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Contact</a></li>
</ul>
</div>
<div class="neumorphic-card p-6 rounded-lg">
<h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Follow Us</h3>
<div class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-instagram"></i></a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
</div>
<div class="mt-8 text-center text-gray-600 dark:text-gray-300">
© 2023 Your Company. All rights reserved.
</div>
<style>
.neumorphic-card {
background: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
}
.dark .neumorphic-card {
background: #333333;
box-shadow: 7px 7px 15px #222222, -7px -7px 15px #444444;
}
</style>
</footer>Связанные компоненты
Компонент навигации по нижнему колонтитулу
Адаптивный компонент навигации по нижнему колонтитулу для информационных панелей с поддержкой темных тем, с микровзаимодействиями при наведении курсоров на ссылки с использованием триадических цветов и сложных элементов. Никакого JavaScript, только HTML с Tailwind CSS.
Компонент навигации по нижнему колонтитулу
Простой компонент навигации по нижнему колонтитулу, стилизованный под принципы Material Design и аналогичную цветовую схему для бизнес/корпоративных сайтов. Он поддерживает темный режим и является отзывчивым.
Компонент навигации по нижнему колонтитулу
Сложный, отзывчивый компонент навигации по нижнему колонтитулу, разработанный для маркетплейса, с пользовательским интерфейсом темного режима с черно-белой цветовой схемой и одним ярким акцентным цветом (индиго). Включает в себя несколько разделов для навигации, информации о компании, юридических ссылок и социальных сетей, с полной поддержкой темного режима.