Bold newsletter section with an aurora gradient background, floating particle field and an inline email form that lifts on focus.
1<section class="news-stage min-h-screen flex items-center justify-center px-4 py-16 relative overflow-hidden">
2 <span class="news-aurora"></span>
3 <span class="news-particles" aria-hidden="true">
4 <span class="news-particle" style="--x:0%;--y:0%;--d:1s"></span><span class="news-particle" style="--x:13%;--y:37%;--d:2s"></span><span class="news-particle" style="--x:26%;--y:74%;--d:3s"></span><span class="news-particle" style="--x:39%;--y:11%;--d:4s"></span><span class="news-particle" style="--x:52%;--y:48%;--d:5s"></span><span class="news-particle" style="--x:65%;--y:85%;--d:6s"></span><span class="news-particle" style="--x:78%;--y:22%;--d:1s"></span><span class="news-particle" style="--x:91%;--y:59%;--d:2s"></span><span class="news-particle" style="--x:4%;--y:96%;--d:3s"></span><span class="news-particle" style="--x:17%;--y:33%;--d:4s"></span><span class="news-particle" style="--x:30%;--y:70%;--d:5s"></span><span class="news-particle" style="--x:43%;--y:7%;--d:6s"></span><span class="news-particle" style="--x:56%;--y:44%;--d:1s"></span><span class="news-particle" style="--x:69%;--y:81%;--d:2s"></span><span class="news-particle" style="--x:82%;--y:18%;--d:3s"></span><span class="news-particle" style="--x:95%;--y:55%;--d:4s"></span><span class="news-particle" style="--x:8%;--y:92%;--d:5s"></span><span class="news-particle" style="--x:21%;--y:29%;--d:6s"></span><span class="news-particle" style="--x:34%;--y:66%;--d:1s"></span><span class="news-particle" style="--x:47%;--y:3%;--d:2s"></span><span class="news-particle" style="--x:60%;--y:40%;--d:3s"></span><span class="news-particle" style="--x:73%;--y:77%;--d:4s"></span>
5 </span>
6
7 <div class="relative w-full max-w-2xl text-center">
8 <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-[0.18em] mb-5 news-pill">
9 <span class="w-1.5 h-1.5 rounded-full bg-cyan-300 animate-pulse"></span>
10 Weekly · since 2021
11 </span>
12 <h2 class="font-bold text-white leading-[1.05] tracking-tight mb-4" style="font-size:clamp(2rem,5vw,3.25rem)">
13 Get the
14 <span class="news-grad">best front-end picks</span>,
15 in your inbox.
16 </h2>
17 <p class="text-base sm:text-lg leading-relaxed text-slate-200/80 max-w-xl mx-auto mb-9">
18 One short email every Friday. Curated components, animation tricks, and the demos worth your reading time.
19 </p>
20
21 <form class="news-form flex flex-col sm:flex-row items-stretch gap-2.5 max-w-lg mx-auto">
22 <label class="news-input-wrap relative flex-1">
23 <span class="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400"><svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg></span>
24 <input type="email" placeholder="you@studio.com" class="news-input w-full rounded-2xl pl-11 pr-4 py-3.5 text-white text-[14px] outline-none" />
25 </label>
26 <button type="button" class="news-submit inline-flex items-center justify-center gap-2 rounded-2xl px-6 py-3.5 text-black font-semibold text-[14px]">
27 Subscribe
28 <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.4"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7l5 5m0 0l-5 5m5-5H6"></path></svg>
29 </button>
30 </form>
31 <p class="text-[11px] mt-4 text-slate-400/85">No spam · unsubscribe in one click · GDPR-friendly</p>
32 </div>
33</section>
Split SaaS hero with bold gradient headline, two CTAs, social-proof logo strip and a tilted browser mockup preview floating to the right. Built for landings.
Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
Glassmorphic sign-up form on a slowly morphing liquid blob background. Animated focus rings on inputs and a candy-gradient primary action.
Cyberpunk-flavoured hero with animated grid, scanline pass, rotating geometry, glitched gradient headline and a glowing neon primary CTA.
Glassmorphic pricing card sitting on an animated aurora gradient. Tailwind for layout and typography; custom CSS keyframes drive the shifting mesh + floating orbs.
Hundreds of production-ready Bootstrap 5 snippets — cards, navbars, dashboards, pricing tables, modals. Live preview, one-click HTML download with the CDN pre-wired, MIT licensed.
517
Snippets
2629.2k
Views
86.2k
Downloads
Card Grid Layout
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.