Загрузка...
Адаптивный футер для новостных сайтов: лого, подписка на рассылку, ссылки, соцсети. Tailwind CSS. Для медиа и блогов.
<footer class="sm:px-8 max-w-7xl mr-auto ml-auto pt-16 pr-6 pb-12 pl-6">
<div class="relative overflow-hidden bg-white border border-black/5 rounded-3xl">
<div class="relative z-10 p-8 sm:p-12 md:p-16">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-12 pb-12 border-b border-black/5">
<div class="lg:col-span-4">
<div class="flex gap-3 mb-6 items-center">
<a href="#" class="inline-flex items-center justify-center bg-center mix-blend-multiply w-[110px] h-[40px] bg-[url(https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c2eea25b-e832-4b0b-ad0d-e5f906b20722_800w.jpg)] bg-cover rounded"></a>
</div>
<p class="text-xl text-black/70 font-geist max-w-3xl mb-10" style="">Independent journalism, delivered. Morning briefings, weekend reads, and live coverage when it matters.</p>
<div class="rounded-3xl border border-black/5 bg-gradient-to-b from-neutral-700 to-neutral-900 shadow-xl p-8 sm:p-12">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<div class="space-y-6">
<div class="inline-flex items-center gap-2 rounded-full bg-emerald-500/10 text-emerald-400 ring-1 ring-emerald-500/20 px-3 py-2 text-sm font-geist" style="">
<span class="h-2 w-2 rounded-full bg-emerald-500 animate-pulse"></span>
Morning briefings, free
</div>
<h4 class="text-2xl text-white font-semibold tracking-tight font-playfair" style="">Stay informed</h4>
<ul class="space-y-3 text-base text-white/70">
<li class="flex items-start gap-3 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-1 flex-shrink-0"><path d="M20 6 9 17l-5-5" class=""></path></svg>
Key headlines in under 5 minutes.
</li>
<li class="flex items-start gap-3 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-1 flex-shrink-0"><path d="M20 6 9 17l-5-5" class=""></path></svg>
Weekend deep dives.
</li>
<li class="flex items-start gap-3 font-geist" style="">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="check" class="lucide lucide-check w-4 h-4 text-emerald-400 mt-1 flex-shrink-0"><path d="M20 6 9 17l-5-5" class=""></path></svg>
No spam, unsubscribe anytime.
</li>
</ul>
<form class="flex gap-3 pt-2">
<input type="email" required="" placeholder="you@domain.com" class="flex-1 h-12 px-4 rounded-xl border border-white/20 bg-black/20 text-sm placeholder-white/40 text-white outline-none focus:ring-2 focus:ring-white/20 focus:border-white/40 backdrop-blur">
<button class="inline-flex items-center gap-2 h-12 px-5 rounded-xl ring-1 ring-white/20 text-sm text-white bg-black/20 hover:bg-white hover:text-black transition font-geist" style="">
Join
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="send" class="lucide lucide-send w-4 h-4"><path d="M14.536 21.686a.5.5 0 0 0 .937-.024l6.5-19a.496.496 0 0 0-.635-.635l-19 6.5a.5.5 0 0 0-.024.937l7.93 3.18a2 2 0 0 1 1.112 1.11z" class=""></path><path d="m21.854 2.147-10.94 10.939" class=""></path></svg>
</button>
</form>
</div>
<div class="lg:col-span-2 grid grid-cols-2 sm:grid-cols-3 gap-8">
<div class="">
<h5 class="text-white/80 text-xs uppercase tracking-wider font-medium font-geist mb-4" style="">Sections</h5>
<ul class="space-y-3 text-base text-white/70">
<li><a class="hover:text-white transition font-geist" href="#world" style="">World</a></li>
<li><a class="hover:text-white transition font-geist" href="#business" style="">Business</a></li>
<li><a class="hover:text-white transition font-geist" href="#tech" style="">Tech</a></li>
<li><a class="hover:text-white transition font-geist" href="#sports" style="">Sports</a></li>
</ul>
</div>
<div class="">
<h5 class="text-white/80 text-xs uppercase tracking-wider font-medium font-geist mb-4" style="">Resources</h5>
<ul class="space-y-3 text-base text-white/70">
<li class=""><a class="hover:text-white transition font-geist" href="#newsletter" style="">Newsletter</a></li>
<li><a class="hover:text-white transition font-geist" href="#apps" style="">Mobile Apps</a></li>
<li><a class="hover:text-white transition font-geist" href="#alerts" style="">News Alerts</a></li>
<li><a class="hover:text-white transition font-geist" href="#contact" style="">Contact</a></li>
</ul>
</div>
<div class="">
<h5 class="text-white/80 text-xs uppercase tracking-wider font-medium font-geist mb-4" style="">Company</h5>
<ul class="space-y-3 text-base text-white/70">
<li><a class="hover:text-white transition font-geist" href="#about" style="">About</a></li>
<li class=""><a class="hover:text-white transition font-geist" href="#careers" style="">Careers</a></li>
<li><a class="hover:text-white transition font-geist" href="#ethics" style="">Ethics</a></li>
<li><a class="hover:text-white transition font-geist" href="#press" style="">Press</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mt-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-6">
<div class="flex items-center gap-4 text-base text-black/60">
<span class="font-geist" style="">© 2025 Header</span>
<span class="hidden sm:inline text-black/20 font-geist" style="">|</span>
<a href="#privacy" class="hover:text-black transition font-geist" style="">Privacy</a>
<span class="text-black/20 font-geist" style="">/</span>
<a href="#terms" class="hover:text-black transition font-geist" style="">Terms</a>
</div>
<div class="flex items-center gap-3">
<a aria-label="Instagram" class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-black/5 text-black/70 hover:text-black hover:bg-black/10 transition" href="https://instagram.com" target="_blank" rel="noreferrer">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="instagram" class="lucide lucide-instagram w-5 h-5"><rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path><line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line></svg>
</a>
<a aria-label="Twitter/X" class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-black/5 text-black/70 hover:text-black hover:bg-black/10 transition" href="https://twitter.com" target="_blank" rel="noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16" class=""><path d="M12.6 1.7h2.1l-4.6 5.2 5.4 7.4h-4.2L8.9 9.8l-3.9 4.5H2.9l4.9-5.6L2.6 1.7h4.3l3 4.1 2.7-3.1z" class=""></path></svg>
</a>
<a aria-label="YouTube" class="inline-flex h-10 w-10 items-center justify-center rounded-xl bg-black/5 text-black/70 hover:text-black hover:bg-black/10 transition" href="https://youtube.com" target="_blank" rel="noreferrer">
<svg width="20" height="20" fill="currentColor" viewBox="0 0 24 24" class=""><path d="M23.5 6.2a4 4 0 0 0-2.8-2.8C18.8 3 12 3 12 3s-6.8 0-8.7.4A4 4 0 0 0 .5 6.2C0 8.1 0 12 0 12s0 3.9.5 5.8a4 4 0 0 0 2.8 2.8C5.2 21 12 21 12 21s6.8 0 8.7-.4a4 4 0 0 0 2.8-2.8c.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.5v-7L16 12z" class=""></path></svg>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</footer>