Акварель/Художественный неоновый нижний колонтитул
Простой, отзывчивый компонент нижнего колонтитула с акварельной/художественной эстетикой и яркой неоновой цветовой гаммой, подходящий для веб-сайта портфолио. Включает поддержку темного режима.
HTML-код
<footer class="relative bg-gradient-to-br from-purple-100 via-pink-100 to-blue-100 text-gray-800 py-8 px-4 sm:px-6 lg:px-8 overflow-hidden dark:from-gray-950 dark:via-gray-900 dark:to-gray-800 dark:text-gray-200">
<!-- Artistic Overlays (Simulated watercolor effect with gradients) -->
<div class="absolute inset-0 z-0 opacity-40 mix-blend-multiply">
<div class="absolute -top-1/4 -left-1/4 w-1/2 h-1/2 bg-blue-400 rounded-full filter blur-3xl opacity-60 dark:bg-blue-600"></div>
<div class="absolute -bottom-1/4 -right-1/4 w-1/2 h-1/2 bg-pink-400 rounded-full filter blur-3xl opacity-60 dark:bg-pink-600"></div>
<div class="absolute top-1/4 right-0 w-1/3 h-1/3 bg-lime-300 rounded-full filter blur-3xl opacity-60 dark:bg-lime-500"></div>
</div>
<div class="relative z-10 max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 text-center md:text-left">
<div class="flex flex-col items-center md:items-start space-y-2">
<p class="text-3xl font-extrabold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-pink-600 to-lime-600 dark:from-blue-400 dark:via-pink-400 dark:to-lime-400">
[Your Name/Studio]
</p>
<p class="text-sm text-gray-600 dark:text-gray-400">
© <span id="current-year"></span> All rights reserved.
</p>
</div>
<nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2">
<a href="#" class="text-sm font-medium hover:text-blue-500 transition duration-300 dark:hover:text-blue-300">Home</a>
<a href="#" class="text-sm font-medium hover:text-pink-500 transition duration-300 dark:hover:text-pink-300">Portfolio</a>
<a href="#" class="text-sm font-medium hover:text-lime-500 transition duration-300 dark:hover:text-lime-300">About</a>
<a href="#" class="text-sm font-medium hover:text-purple-500 transition duration-300 dark:hover:text-purple-300">Contact</a>
</nav>
</div>
<script>
document.getElementById('current-year').textContent = new Date().getFullYear();
</script>
</footer>
Связанные компоненты
Неоморфизм Нижний колонтитул Земли
Адаптивный компонент нижнего колонтитула с поддержкой неоморфизма, земляных тонов и темной темы
Компонент нижнего колонтитула
Адаптивный ретро/винтажный компонент нижнего колонтитула для блога с триадической цветовой схемой и поддержкой темной темы.
Минималистичный футер для социальных сетей
Минималистичный компонент футера с цветовой гаммой земляных тонов для интерфейсов социальных сетей. Адаптивный с поддержкой темных тем.