Untitled

<!DOCTYPE html>
<html>
<head>
    <title>Angga Gemilang</title>
    <style type="text/css">
        header
        {
            position: absolute;
            left: 50%;
            top: 12%;
            transform: translate(-50%, -50%);
            width: 65%;
            z-index: 2;
            height: 12%;
            background: #292929;
            box-shadow: 7px 7px 20px 5px;
        }
        header p
        {
            text-align: center;
            padding: 20px 20px;
            text-transform: uppercase;
            color: #fff;
            font-size: 20pt;
        }
        .container
        {
            z-index: 1;
            position: absolute;
            left: 50%;
            top: 55%;
            transform: translate(-50%, -50%);
            width: 65%;
            height: 75%;
            background: grey
            ;
        }
        .container .lseparator
        {
            float: left;
            width: 50%;
            height: 100%;
            background: grey;
        }
        .container .lseparator img
        {
            height: 400px;
            position: relative;
            margin: 5px 180px;
        }
        .container .rseparator
        {
            position: relative;
        }
        .container .rseparator .ad
        {
            box-sizing: border-box;
            margin-top: 70px;
        }
        .container .rseparator .vd
        {
            margin-top: 136px;
            margin-right: -26px;
        }
        .border-line
        {
            height: 57%;
            left: 51%;
            top: 27%;
            z-index: 3;
            position: absolute;
            width: 4px;
            background-color: #000;
        }
        .container .rseparator .greet
        {
            position: absolute;
            right: 1%;
            bottom: 0%;
            top: 106%;
        }
    </style>
</head>
<body>
    <header>
        <p>Nella Kharisma</p>
    </header>
    <div class="container">
        <div class="lseparator">
            <h2 style="text-transform: uppercase; text-align: center; margin-top: 40px;">The Dangduters</h2>
            <img src="nella.jpg">
            <h1 align="center" style="margin-top: -2px;">Biodata</h1>
            <ul style="margin: -10px; font-size: 15pt; margin-left: 155px;">
                <li>Nama : Nella Charisma
                    <li>TTL : Nganjuk, 4 November 1994
                        <li>Tinggi : 162 CM
                            <li>Agama : Islam
                                <li>Label Rekaman : Samudera Record
                                    <li>Mulai Aktif dalam perdangdutan : 2014</li>
                                </li>
                            </li>
                        </li>
                    </li>
                </li>
            </ul>
        </div>
        <div class="rseparator">
                <div class="greet"><font color="#fff">Made With love by Angga</font></div>
            <div align="center" class="ad">
                <h2 style="margin-bottom: 50px;">Nella kharisma = Jaran Goyang</h2>
                <audio autoplay="autoplay" controls="controls">
                        <source src="" type="audio/mpeg">
                </audio></div><br>

            <div align="center" class="vd">
                <h2>Nella kharisma = Jaran Goyang</h2>
                <video controls="controls" width="45%">
                        <source src="" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
    <div class="border-line"></div>
</body>
</html>