10 CSS Feature Sections 09 / 10

CSS Feature Section with Floating Mockup

Warm parchment background with a CSS-animated floating phone mockup (bob keyframe), two counterphased floating metric cards, a serif italic headline, and a 4-tile bottom grid.

Pure CSS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="fs09">
  <div class="fs09__inner">
    <div class="fs09__split">
      <div>
        <div class="fs09__eyebrow">Mobile-first platform</div>
        <h2 class="fs09__h2">Your entire business,<br>in the palm of <em>your hand</em></h2>
        <p class="fs09__body">A native-quality mobile experience for managing your operations, approving requests, and staying on top of what matters — wherever you are.</p>
        <ul class="fs09__list">
          <li><span class="fs09__check">✓</span> Real-time notifications with one-tap approval</li>
          <li><span class="fs09__check">✓</span> Offline-capable sync for low-connectivity environments</li>
          <li><span class="fs09__check">✓</span> Biometric authentication and face unlock support</li>
          <li><span class="fs09__check">✓</span> Available on iOS and Android — same feature parity</li>
        </ul>
        <div class="fs09__cta-row">
          <a href="#" class="fs09__btn-primary">Download the app →</a>
          <a href="#" class="fs09__btn-link">See all features</a>
        </div>
      </div>

      <div class="fs09__mockup-wrap">
        <div class="fs09__float-card fs09__float-card--a">
          <div class="fs09__fc-num">99.9%</div>
          <div class="fs09__fc-label">Offline reliability</div>
        </div>
        <div class="fs09__float-card fs09__float-card--b">
          <div class="fs09__fc-num">4.9★</div>
          <div class="fs09__fc-label">App Store rating</div>
        </div>

        <div class="fs09__phone">
          <div class="fs09__phone-notch"></div>
          <div class="fs09__phone-screen">
            <div class="fs09__phone-bar fs09__phone-bar--accent"></div>
            <div class="fs09__phone-bar fs09__phone-bar--sm"></div>
            <div class="fs09__phone-bar fs09__phone-bar--md" style="margin-top:8px"></div>
            <div class="fs09__phone-cards">
              <div class="fs09__phone-card">
                <div class="fs09__phone-card-top">
                  <div class="fs09__phone-avatar fs09__phone-avatar--a"></div>
                  <div class="fs09__phone-card-line"></div>
                </div>
                <div class="fs09__phone-card-metric">+$12,440</div>
              </div>
              <div class="fs09__phone-card">
                <div class="fs09__phone-card-top">
                  <div class="fs09__phone-avatar fs09__phone-avatar--b"></div>
                  <div class="fs09__phone-card-line"></div>
                </div>
                <div class="fs09__phone-card-metric" style="color:#6d28d9">3 approvals</div>
              </div>
              <div class="fs09__phone-card">
                <div class="fs09__phone-card-top">
                  <div class="fs09__phone-avatar" style="background:linear-gradient(135deg,#059669,#6ee7b7)"></div>
                  <div class="fs09__phone-card-line"></div>
                </div>
                <div class="fs09__phone-card-metric" style="color:#059669">On track ↑</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fs09__tiles">
      <div class="fs09__tile">
        <div class="fs09__tile-num">i.</div>
        <div class="fs09__tile-title">Push Notifications</div>
        <div class="fs09__tile-desc">Smart alerts that know when to interrupt and when to queue — based on your calendar and work patterns.</div>
      </div>
      <div class="fs09__tile">
        <div class="fs09__tile-num">ii.</div>
        <div class="fs09__tile-title">Offline Mode</div>
        <div class="fs09__tile-desc">Full read and write access when you're on a plane or in a basement. Changes sync the moment you reconnect.</div>
      </div>
      <div class="fs09__tile">
        <div class="fs09__tile-num">iii.</div>
        <div class="fs09__tile-title">Widget Support</div>
        <div class="fs09__tile-desc">Key metrics on your home screen. See today's pipeline, pending approvals, or team pulse without opening the app.</div>
      </div>
      <div class="fs09__tile">
        <div class="fs09__tile-num">iv.</div>
        <div class="fs09__tile-title">Apple Watch / Wear OS</div>
        <div class="fs09__tile-desc">Approve requests, check alerts, and see summaries from your wrist. No phone required for common actions.</div>
      </div>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs09 {
  font-family: 'Inter', sans-serif;
  background: #f8f6f1;
  color: #1a1814;
  padding: 96px 24px;
  overflow: hidden;
  min-height: 100vh;
}

.fs09__inner { max-width: 1100px; margin: 0 auto; }

/* Split hero */
.fs09__split {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 96px;
}

.fs09__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b45309;
  margin-bottom: 20px;
}

.fs09__h2 {
  font-family: 'Instrument Serif', serif;
  font-size: clamp(38px, 5vw, 62px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

.fs09__h2 em {
  font-style: italic;
  color: #b45309;
}

.fs09__body {
  font-size: 16px;
  line-height: 1.75;
  color: #5c5447;
  margin-bottom: 32px;
}

.fs09__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.fs09__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #2d2920;
}

.fs09__check {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fef3c7;
  border: 1.5px solid #f59e0b;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: #92400e;
  flex-shrink: 0;
}

.fs09__cta-row { display: flex; gap: 12px; align-items: center; }

.fs09__btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #1a1814;
  color: #f8f6f1;
  font-size: 15px;
  font-weight: 600;
  padding: 13px 26px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.2s;
}
.fs09__btn-primary:hover { background: #2d2920; }

.fs09__btn-link {
  font-size: 14px;
  color: #5c5447;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Floating mockup area */
.fs09__mockup-wrap {
  position: relative;
  height: 480px;
}

.fs09__phone {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 260px;
  background: #1a1814;
  border-radius: 36px;
  padding: 16px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.25);
  z-index: 2;
  animation: fs09-float 5s ease-in-out infinite;
}

@keyframes fs09-float {
  0%, 100% { transform: translateY(-50%) translateY(0); }
  50% { transform: translateY(-50%) translateY(-14px); }
}

.fs09__phone-notch {
  width: 80px; height: 22px;
  background: #0a0908;
  border-radius: 100px;
  margin: 0 auto 14px;
}

.fs09__phone-screen {
  background: #fff;
  border-radius: 24px;
  padding: 16px;
  min-height: 340px;
}

.fs09__phone-bar { height: 6px; border-radius: 3px; background: #f0ece4; margin-bottom: 8px; }
.fs09__phone-bar--accent { background: linear-gradient(90deg, #b45309, #f59e0b); width: 70%; }
.fs09__phone-bar--sm { width: 45%; }
.fs09__phone-bar--md { width: 80%; }

.fs09__phone-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.fs09__phone-card {
  background: #fafafa;
  border: 1px solid #e8e4dc;
  border-radius: 10px;
  padding: 10px;
}
.fs09__phone-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fs09__phone-avatar { width: 20px; height: 20px; border-radius: 50%; }
.fs09__phone-avatar--a { background: linear-gradient(135deg, #b45309, #f59e0b); }
.fs09__phone-avatar--b { background: linear-gradient(135deg, #6d28d9, #a78bfa); }
.fs09__phone-card-line { height: 5px; flex: 1; border-radius: 3px; background: #e8e4dc; }
.fs09__phone-card-metric {
  font-size: 13px;
  font-weight: 700;
  color: #b45309;
}

/* Floating mini cards */
.fs09__float-card {
  position: absolute;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.12);
  z-index: 3;
  border: 1px solid rgba(0,0,0,0.07);
}

.fs09__float-card--a {
  left: 0; top: 40px;
  animation: fs09-floatA 6s ease-in-out infinite;
}

.fs09__float-card--b {
  left: 60px; bottom: 60px;
  animation: fs09-floatB 7s ease-in-out infinite;
}

@keyframes fs09-floatA {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes fs09-floatB {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(10px) rotate(2deg); }
}

.fs09__fc-num {
  font-family: 'Instrument Serif', serif;
  font-size: 28px;
  font-weight: 400;
  color: #b45309;
  line-height: 1;
}

.fs09__fc-label { font-size: 11px; color: #9c8f7e; margin-top: 2px; white-space: nowrap; }

/* Feature tiles below */
.fs09__tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: #e8e4dc;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid #e8e4dc;
}

.fs09__tile {
  background: #f8f6f1;
  padding: 32px 24px;
  transition: background 0.2s;
}

.fs09__tile:hover { background: #fff; }

.fs09__tile-num {
  font-family: 'Instrument Serif', serif;
  font-size: 14px;
  font-style: italic;
  color: #b45309;
  margin-bottom: 12px;
}

.fs09__tile-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1a1814;
}

.fs09__tile-desc {
  font-size: 13px;
  line-height: 1.6;
  color: #7a6e60;
}

@media (max-width: 780px) {
  .fs09__split { grid-template-columns: 1fr; }
  .fs09__mockup-wrap { height: 340px; }
  .fs09__tiles { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .fs09__tiles { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs09__phone,
  .fs09__float-card--a,
  .fs09__float-card--b { animation: none !important; transform: translateY(-50%) !important; }
  .fs09__float-card--a, .fs09__float-card--b { transform: none !important; }
}

More from 10 CSS Feature Sections

CSS Feature Section Dark GlassmorphismCSS Feature Section with Code PreviewCSS Feature Comparison SectionCSS SaaS Features Section 2025CSS Animated Feature Cards Scroll RevealCSS Feature Section 3D Perspective CardsCSS Feature Section Timeline LayoutCSS Feature Section with Icon GridCSS Bento Grid Features Layout
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →