Create a Split layout template using HTML and CSS

Last Updated : 29 Dec, 2023

In this article, we will design a Split Layout Template that provides a responsive HTML and CSS webpage layout with a split-screen design, accommodating content in distinct left and right sections.

The layout adapts to different screen sizes and features contrasting colors and subtle hover effects for interactivity. The content is centered vertically and horizontally, providing a visually appealing user experience.

Preview

Output Preview

Approach

First create a HTML structure with two div and use CSS to create a split layout with two panels: left and right.
Now use the Flexbox for a responsive design that adjusts to different screen sizes.
Customize the appearance of each panel with background colors, borders, and transitions by using CSS.
Add hover effects to enhance interactivity, changing background colors and scaling on hover.
At last ensure readability with proper text alignment, font styles, and spacing.
Use media queries, adjusting panel dimensions and layout for improved mobile responsiveness.

Example: In this example, we will design a Split Layout template using HTML and CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <style> 
        body { 
            margin: 20px; 
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
            display: flex; 
            height: 100vh; 
        } 
  
        .split-container { 
            display: flex; 
            width: 100%; 
            height: 95%; 
            background-color: #f0f0f0; 
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
        } 
  
        .split-left, 
        .split-right { 
            flex: 1; 
            overflow: hidden; 
            text-align: center; 
            transition: all 0.3s; 
            border-radius: 10px; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            margin: 5px; 
        } 
  
        .split-left { 
            background-color: #3b3a41; 
            color: #ffffff; 
            border: 2px solid rgb(95, 156, 180); 
  
        } 
  
        p { 
            line-height: 30px; 
        } 
  
        .split-right { 
            background-color: #f6f7fa; 
            color: #333333; 
            border: 2px solid grey; 
  
        } 
  
        .split-left:hover { 
            background-color: #313532; 
            transform: scale(1.05); 
            border: 3px solid rgb(87, 128, 87); 
        } 
  
        .split-right:hover { 
            background-color: #cbeaeb; 
            transform: scale(1.05); 
            border: 3px solid rgb(146, 205, 223); 
        } 
  
        @media (max-width: 768px) { 
            .split-container { 
                flex-direction: column; 
            } 
  
            .split-left, 
            .split-right { 
                margin: 5px; 
                width: 95%; 
                height: 48vh; 
            } 
        } 
    </style> 
    <title>Custom Split Layout</title> 
</head> 
  
<body> 
    <div class="split-container"> 
        <div class="split-left"> 
            <h1>Left Section</h1> 
            <p>This is the left side of the split layout. 
                <br> You can add your content here. 
            </p> 
        </div> 
        <div class="split-right"> 
            <h1>Right Section</h1> 
            <p>This is the right side of the split layout. 
                <br> You can add your content here. 
            </p> 
        </div> 
    </div> 
</body> 
  
</html>