WordPress

Allgemein

Technik

Design

Konzept

WordPress Plugins

Interessantes

Vermarktung

Themen

Font / Schriften

Social Media

Youtube

eCommerce

Gemischtes

Kolumne

Webinar

Blog Archiv

Kurse / Webinare

Meine nächste Webinare / Kurse

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

von | Mai 9, 2022 | Design | 0 Kommentare

Schlagwörter: CSS - HTML

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
        * {
            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;
        }




0 Kommentare

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert