<div class="booking-container">
<!-- Left Side: Animated Floral "Video" Card -->
<div class="booking-left">
<div class="floral-bg">
</div>
<div class="sparkles-container">
<div class="sparkle">
</div>
<div class="sparkle">
</div>
<div class="sparkle">
</div>
<div class="sparkle">
</div>
</div>
<div class="floral-overlay">
</div>
<div class="left-content">
<div class="stars">
★★★★★
</div>
<p class="subtitle">
Helped over 100+ businesses
</p>
<h1 class="title">
Turn confusion into
<br/>
clarity, today.
</h1>
<p class="desc">
Book a free 30-minute assessment and we'll show you exactly where AI can save you time and money.
</p>
</div>
</div>
<!-- Right Side: Form -->
<div class="booking-right">
<form class="booking-form" id="bookingForm">
<div class="inputs-row">
<input placeholder="Name*" required="" type="text"/>
</div>
<div class="inputs-row">
<input placeholder="Email*" required="" type="email"/>
</div>
<div class="form-section">
<label>
What services are you interested in?
</label>
<div class="pills-group" id="servicesPills">
<button class="pill" type="button">
AI Assessment
</button>
<button class="pill" type="button">
Workflow Automation
</button>
<button class="pill" type="button">
Custom AI Tools
</button>
<button class="pill" type="button">
Training & Support
</button>
<button class="pill" type="button">
Implementing AI
</button>
<button class="pill" type="button">
All of the above
</button>
</div>
</div>
<div class="form-section">
<label>
What's your biggest automation challenge?
</label>
<div class="pills-group" id="challengesPills">
<button class="pill" type="button">
Too many manual tasks
</button>
<button class="pill" type="button">
Unclear where to start
</button>
<button class="pill" type="button">
Previous solutions didn't work
</button>
<button class="pill" type="button">
Need to scale operations
</button>
</div>
</div>
<div class="inputs-row">
<textarea placeholder="Tell us about your business..."></textarea>
</div>
<button class="submit-btn" type="submit">
Book a call →
</button>
<p class="terms">
By submitting, you agree to our
<a href="#">
terms of service.
</a>
</p>
</form>
</div>
</div>
/* BIT_CSS_START */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:wght@600;700&display=swap');
body {
background-color: #FDF9F1;
/* Soft beige background from screenshot */
margin: 0;
padding: 0;
}
.booking-container {
display: flex;
max-width: 1200px;
margin: 40px auto;
padding: 20px;
gap: 60px;
font-family: 'Inter', sans-serif;
align-items: stretch;
}
/* =========================================
LEFT SIDE: FLORAL "VIDEO" CARD
========================================= */
.booking-left {
flex: 1;
position: relative;
border-radius: 24px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 60px 40px;
color: #fff;
min-height: 700px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.floral-bg {
position: absolute;
top: -30%;
left: -30%;
right: -30%;
bottom: -30%;
/* Using a high-quality Unsplash macro floral image */
background-image: url('https://storage.maquinaespacial.com/media/watercolor/001.jpg');
background-size: cover;
background-position: center;
z-index: 0;
/* CSS Animation to simulate video playback */
animation: slow-spin 60s linear infinite;
filter: brightness(1.1) contrast(1.2);
}
@keyframes slow-spin {
0% {
transform: rotate(0deg) scale(1);
filter: hue-rotate(0deg);
}
50% {
transform: rotate(180deg) scale(1.15);
filter: hue-rotate(20deg);
}
100% {
transform: rotate(360deg) scale(1);
filter: hue-rotate(0deg);
}
}
/* Simulated glowing ethereal sparkles */
.sparkles-container {
position: absolute;
inset: 0;
z-index: 1;
overflow: hidden;
pointer-events: none;
}
.sparkle {
position: absolute;
width: 150px;
height: 150px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
border-radius: 50%;
animation: float-sparkle 6s infinite ease-in-out alternate;
mix-blend-mode: overlay;
}
.sparkle:nth-child(1) {
top: 20%;
left: 30%;
animation-delay: 0s;
width: 150px;
height: 150px;
}
.sparkle:nth-child(2) {
top: 60%;
left: 70%;
animation-delay: 2s;
width: 250px;
height: 250px;
}
.sparkle:nth-child(3) {
top: 70%;
left: 20%;
animation-delay: 4s;
width: 200px;
height: 200px;
}
.sparkle:nth-child(4) {
top: 30%;
left: 80%;
animation-delay: 1s;
width: 180px;
height: 180px;
}
@keyframes float-sparkle {
0% {
transform: translate(0, 0) scale(0.8);
opacity: 0.4;
}
100% {
transform: translate(40px, -50px) scale(1.3);
opacity: 0.9;
}
}
.floral-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.2) 100%);
z-index: 2;
}
.left-content {
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
max-width: 400px;
}
.stars {
font-size: 1.2rem;
letter-spacing: 4px;
margin-bottom: 10px;
color: #fff;
}
.subtitle {
font-size: 0.85rem;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 40px;
opacity: 0.9;
}
.title {
font-family: 'Playfair Display', serif;
font-size: 3.2rem;
line-height: 1.1;
margin-bottom: 30px;
font-weight: 700;
}
.desc {
font-size: 1rem;
line-height: 1.6;
font-weight: 300;
opacity: 0.9;
}
/* =========================================
RIGHT SIDE: FORM
========================================= */
.booking-right {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.booking-form {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
}
.inputs-row input,
.inputs-row textarea {
width: 100%;
padding: 16px 20px;
background: #EBE6DF;
border: 1px solid transparent;
border-radius: 12px;
font-size: 0.95rem;
color: #333;
outline: none;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
box-sizing: border-box;
}
.inputs-row input::placeholder,
.inputs-row textarea::placeholder {
color: #8C8882;
}
.inputs-row input:focus,
.inputs-row textarea:focus {
border-color: #B5B0A8;
background: #E2DDD5;
}
.inputs-row textarea {
resize: vertical;
min-height: 120px;
}
.form-section {
display: flex;
flex-direction: column;
gap: 12px;
}
.form-section label {
font-size: 0.95rem;
color: #555;
font-weight: 500;
}
.pills-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.pill {
background: #EBE6DF;
border: 1px solid transparent;
padding: 12px 18px;
border-radius: 30px;
font-size: 0.85rem;
color: #4A4641;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 10px;
font-family: 'Inter', sans-serif;
}
.pill::before {
content: '';
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
background: #C4C0B9;
transition: all 0.3s ease;
}
.pill:hover {
background: #E2DDD5;
}
.pill.active {
background: #D8D4CD;
border-color: #B5B0A8;
}
.pill.active::before {
background: #4A4641;
}
.submit-btn {
background: #2A1A14;
color: #fff;
border: none;
padding: 18px 24px;
border-radius: 16px;
font-size: 1.05rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
margin-top: 10px;
}
.submit-btn:hover {
background: #1A100C;
transform: translateY(-2px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
.terms {
text-align: center;
font-size: 0.75rem;
color: #888;
margin-top: -10px;
}
.terms a {
color: #555;
text-decoration: underline;
}
/* =========================================
RESPONSIVE (Mobile First / Column Layout)
========================================= */
@media (max-width: 900px) {
.booking-container {
flex-direction: column;
/* Image on top, form on bottom */
gap: 30px;
padding: 15px;
margin: 20px auto;
}
.booking-left {
min-height: 320px;
/* Acts as a horizontal banner/card on mobile */
padding: 40px 20px;
border-radius: 16px;
}
.title {
font-size: 2rem;
margin-bottom: 15px;
}
.subtitle {
margin-bottom: 20px;
}
.desc {
font-size: 0.9rem;
}
}
/* BIT_CSS_END */
// BIT_JS_START
document.addEventListener('DOMContentLoaded', () => {
// Function to handle pill selections
function setupPills(containerId, allowMultiple = false) {
const container = document.getElementById(containerId);
if (!container) return;
const pills = container.querySelectorAll('.pill');
pills.forEach(pill => {
pill.addEventListener('click', () => {
if (!allowMultiple) {
// If single select, remove active from all others
pills.forEach(p => p.classList.remove('active'));
}
// Toggle current pill
pill.classList.toggle('active');
});
});
}
// Initialize pill groups
setupPills('servicesPills', true); // Allow multiple services
setupPills('challengesPills', false); // Single challenge
// Form submission prevention for demo
const form = document.getElementById('bookingForm');
if (form) {
form.addEventListener('submit', (e) => {
e.preventDefault();
const btn = form.querySelector('.submit-btn');
const originalText = btn.innerHTML;
btn.innerHTML = 'Booking Confirmed ✓';
btn.style.backgroundColor = '#4A6B53'; // Success green
setTimeout(() => {
btn.innerHTML = originalText;
btn.style.backgroundColor = '';
// Optional: form.reset();
// document.querySelectorAll('.pill').forEach(p => p.classList.remove('active'));
}, 3000);
});
}
});
// BIT_JS_END
Animated Floral Booking Form
This Bit is a high-end, two-column layout component designed to maximize conversions for service-based businesses, agencies, and consultants. It seamlessly blends a highly aesthetic, animated visual card with a highly functional interactive form.
Features
- Simulated Video Background: The left-hand card features a stunning floral graphic powered entirely by CSS keyframe animations (slow rotation, infinite scaling, and dynamic hue shifting), creating the illusion of a heavy
.mp4 video while maintaining zero bandwidth overhead.
- Ethereal Sparkles: Pure CSS radial gradients with
mix-blend-mode float over the background to create glowing, translucent light artifacts.
- Interactive Form Pills: Instead of standard boring checkboxes or radio buttons, this component uses elegant toggle pills to capture user intent.
- Smart Responsive Layout: On mobile devices, the split layout intelligently collapses into a single column. The visual card transforms into a compact, horizontal banner at the top to ensure the form remains the primary focus without losing the brand aesthetic.
Usage
The interactive pills are powered by a lightweight Vanilla JavaScript logic included in the file. It includes both single-select and multi-select behaviors.
Technical Skills & Techniques Used
1. CSS Video Emulation
Instead of relying on heavy video files, this component uses CSS @keyframes to create a mesmerizing fluid video effect:
* slow-spin: Continuously rotates (360deg) and pulses (scale(1.15)) the background image over a 60-second loop.
* hue-rotate: Gently shifts the color spectrum of the image to simulate changing light and dynamic reflections.
2. Advanced Blending Modes
mix-blend-mode: overlay: Used on the floating "sparkles" (radial gradients). This allows the white light to mathematically interact with the colors of the floral image behind it, creating intense, realistic glowing highlights rather than looking like flat white circles.
3. Responsive Re-architecture
- Mobile Top Banner: The CSS uses a media query (
max-width: 900px) to change flex-direction: column. It aggressively re-proportions the left visual block by dropping its min-height to 320px, instantly converting a massive vertical column into a sleek, horizontal hero banner.
4. Vanilla JS Logic
- State Management: The included JavaScript manages the active states of the custom DOM elements (pills), seamlessly handling both multi-select grids (Services) and single-select grids (Challenges) by toggling the
.active CSS class.
Design Decisions
Visual Concept
The component embraces a modern editorial aesthetic, contrasting the highly organic, chaotic beauty of the animated floral graphic against the structured, minimalist geometry of the beige form.
Color Palette
- Background Base (
#FDF9F1): A warm, soft beige used for the page background, replacing stark clinical whites with a much more inviting and premium tone.
- Form Elements (
#EBE6DF): Inputs and inactive pills use a slightly darker, muted grey-beige. This creates subtle depth without relying on heavy borders or aggressive shadows.
- Primary Action (
#2A1A14): The main "Book a call" button uses a very dark, earthy brown (almost black). This grounds the component and draws the eye directly to the conversion point.
Typography
The UI leverages a powerful pairing of two Google Fonts:
* Playfair Display: A high-contrast serif font used exclusively for the main title ("Turn confusion into clarity, today.") to inject elegance and authority.
* Inter: A highly legible, modern sans-serif used for all form inputs, labels, and smaller UI text to guarantee maximum readability.
