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>Three-step onboarding wizard with an animated progress bar, slide-fade panel transitions and contextual hints. Forward / back nav and completion celebration.
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.
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.
546
Snippets
2629.8k
Views
86.3k
Downloads
Card Grid Layout
Trending now
Trending Bootstrap snippets from the classic library.
Immerse in a modern audio experience with our neumorphic music player, featuring a dynamic waveform scrubber and interactive queue visuals.
Revolutionize your AI interactions with this stunning, neon-infused chat interface. With dynamic status indicators and orbital animations, it captivates and informs.
Craft seamless schedules with an elegant neumorphic interface where you can drag and select time ranges effortlessly in a futuristic calendar view.
Comments(0)
No comments yet — be the first to start the discussion.
Sign in to join the conversation.