Split Feature Layout in CSS – Dual Column Services With Checklist UI

Whether you’re offering multiple services or want to segment your audience visually, a split-column layout with feature checklists is a great design choice. This modern CSS layout supports visuals, headlines, and bullet-style lists — ideal for service pages, portfolios, or landing pages.

Preview

HTML Code

<div class="custom-service-section">
  <h1 style="letter-spacing: 1px; font-size: clamp(27px, 5vw, 50px); line-height: 40px;">
    MADE FOR <span class="outline">CREATOR & BUSINESS</span>
  </h1>
  <p style="color: gray;">You create, we enhance—perfect for YouTubers, educators, influencers, and podcasters.</p>
</div>

<div class="custom-service-grid">
  <!-- Service Card 1 -->
  <div class="custom-card">
    <div class="custom-left">
      
      <img src="img/voice.webp" alt="Service 1">
    </div>
    <div class="custom-right">
      <ul>
        <span class="custom-service-title"><b>VOICE OVER VIDEO</b></span>
        <li>Script Writing</li>
        <li>Voice Artists</li>
        <li>Audio Sync</li>
        <li>CAPTION</li>
        <li>Background Music</li>
        <li>Noise Removal</li>
        <li>STORYBOARD</li>
      </ul>
    </div>
  </div>
  <div class="custom-divider"></div>

  <!-- Service Card 2 -->
  <div class="custom-card">
    <div class="custom-left">
      
      <img src="img/face.webp" alt="Service 2">
    </div>
    <div class="custom-right">
      <ul>
        <span class="custom-service-title"><b>FACE-CAM VIDEO</b></span>
        <li>Camera Setup</li>
        <li>Green Screen</li>
        <li>Color Grading</li>
        <li>Angle Switch</li>
        <li>Jump Cuts</li>
        <li>Brand Labels</li>
        <li>STORYBOARD</li>
      </ul>
    </div>
  </div>
  <div class="custom-divider"></div>

  <!-- Service Card 3 -->
  <div class="custom-card">
    <div class="custom-left">
      
      <img src="img/shorts.webp" alt="Service 3">
    </div>
    <div class="custom-right">
      <ul>
        <span class="custom-service-title"><b>SHORTS OR REELS</b></span>
        <li>Hook Edits</li>
        <li>Trend Effects</li>
        <li>Motion Captions</li>
        <li>CAPTION</li>
        <li>Beat Sync</li>
        <li>Frame Grab</li>
        <li>Format Ready</li>
      </ul>
    </div>
  </div>
  <div class="custom-divider"></div>

  <!-- Service Card 4 -->
  <div class="custom-card">
    <div class="custom-left">
      
      <img src="img/audio.webp" alt="Service 4">
    </div>
    <div class="custom-right">
      <ul>
        <span class="custom-service-title"><b>AUDIO SERVICE (AI)</b></span>
        <li>Audio Cleanup</li>
        <li>Podcast Edit</li>
        <li>Music Overlay</li>
        <li>Voice Boost</li>
        <li>DUBBING</li>
        <li>Ad Audio</li>
        <li>Format Export</li>
      </ul>
    </div>
  </div>
</div>

CSS Code

<style>
.custom-service-section {
  padding: 15px;
  display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.custom-service-section h1 {
    text-align: center;
}

.custom-service-section p {
    font-size: 16px;
    color: #989898;
}

.custom-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 10px;
}

.custom-card {
  display: flex;
  overflow: hidden;
  max-width: 800px;
  margin: 40px auto;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}

.custom-divider {
  display: none;
}

.custom-service-title {
  font-size: 16px;
}

.custom-left {
  width: 40%;
  height: auto;
  overflow: hidden;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  display: flex;
  align-items: center;
  z-index: 2;
}

.custom-left img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 10px;
    border-top-right-radius: 10px;
}


.custom-right {
  padding: 30px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #0d0d0d, #1a1a1a);
  margin-left: -40px;
  z-index: 1;
  width: 70%;
  border-radius: 10px;
}

.custom-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-right li {
  color: #ededed;
  font-size: 13px;
  margin: 10px 0;
  position: relative;
  padding-left: 20px;
}

.custom-right li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 2px;
}



@media (max-width: 600px) {
  .custom-service-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }

  .custom-divider {
    display: block;
    width: 70%;
    height: 1px;
    background-color: gray;
    margin: 20px auto;
    border-radius: 2px;
  }
}
</style>

Features

• Responsive 2-column layout
• Visual support for each service
• Checklist-style items using custom bullet points
• Dark theme with soft contrast

Where You Can Use This

• Creative or digital agencies
• Online course platforms
• Freelancer service sites
• SaaS or product offerings

How to Customize

• Replace images to match your industry
• Add animations or hover states to icons/lists
• Convert into cards with CTA buttons

Ishaan Singh

Ishaan is a passionate programmer with a knack for simplifying complex ideas. With expertise in Python and PHP, he enjoys creating small projects that help others learn and apply coding skills practically. Through his articles, Ishaan aims to inspire and educate budding developers.