How Do I Create A Split Screen Using CSS And HTML

admin_img Posted By Bajarangi soft , Posted On 27-11-2020

Using CSS we can create split screen .So today we dUsing CSS we can create split screen .So today we discuss how to do it.iscuss how to do it.

How Do I Create A Split Screen Using CSS And HTML

Complete Code For Creating A Split Screen Using CSS And HTML.

<!DOCTYPE html>
<html>
<head>
    <title>How Do I Create A Split Screen Using CSS And HTML</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial;
            color: white;
        }

        .split {
            height: 100%;
            width: 50%;
            position: fixed;
            z-index: 1;
            top: 0;
            overflow-x: hidden;
            padding-top: 20px;
        }

        .left {
            left: 0;
            background-color: #111;
        }

        .right {
            right: 0;
            background-color: lightpink;
        }

        .centered {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }

        .centered img {
            width: 150px;
            border-radius: 50%;
        }
    </style>
</head>
<body>

<div class="split left">
    <div class="centered">
        <img src="../image/demo1.jpg" alt="Avatar woman">
        <h2>Jane Flex</h2>
        <p>Some text.</p>
    </div>
</div>

<div class="split right">
    <div class="centered">
        <img src="../image/demo2.jpg" alt="Avatar woman">
        <h2>John Doe</h2>
        <p>Some text here too.</p>
    </div>
</div>

</body>
</html>

Related Post