Wie erstelle ich mit CSS & HTML eine 2 geteilte Ansicht / Split Screen

Auf Webseiten sieht man diesen Effekt immer wieder. Man sieht eine Fullscreen Seite die in 2 Teilen geteilt ist und die Elemente sind eingemittet. Dieser kleine Effekt ergibt gut durchgeführt einen schönen WOW Effekt in jeder Webseite. Ich persönlich liebe FullScreen Seiten.

Heute möchte ich euch zeigen wie ihr sowas selbst erstellen könnt und zwar mit reinem CSS und HTML ohne anderen Schnickschnack oder Pagebuilder.

Damit kann man jede Webseite aufpeppen.

Video

HTML

<div class="split links">
        <div class="zentriert">
            <img src="masken-avatar-fun-juli-2020.jpg">
            <h2>Eric Mächler</h2>
            <p>Entwickler</p>
        </div>
    </div>
 
    
        <div class="split rechts">
        <div class="zentriert">
            <img src="masken-avatar-fun-juli-2020.jpg">
            <h2>Oliver Mächler</h2>
            <p>Youtuber</p>
        </div>
    </div>

CSS

* {
            margin: 0;
            padding: 0;
        }
        
        .split {
            height: 100%;
            width: 50%;
            position: fixed;
            z-index: 1;
            top: 0;
            overflow-x: hidden;
            padding-top: 20px;
        }
        
        .links {
            left: 0;
            background-color: #111;
        }
        
        .rechts {
            right: 0;
            background-color: red;
        }
        
        .zentriert {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            text-align: center;
        }
        .zentriert img {
            width: 150px;
            border-radius: 50%;
        }
        
        h2 {
            color: yellow;
        }
        p {
            color: yellow;
        }