halaman awal html

Ditanyakan pada tanggal 10 June 2019 oleh Ilyas fardian
<!DOCTYPE html>
<html>
<head>
    <title>halaman awal html</title>
    <style type="text/css">
        body{
            margin: 0;
            overflow: auto;
        }
        .container{
            background-color: transparent;
            width: 100%;
            margin: 0;
        }
        .sidebar{
            background-color: #f2f2f2;
            width: 15%;
            float: left;
            min-height: 600px;
            overflow: scroll;
        }
        .content{
            background-color: white;
            min-height: 600px;

        }
        .footer{
            background-color: green;
            text-align: center;
        }

        ul{
            list-style-type: none;
            padding: 0;
            margin: 0;
            background-color: #f2f2f2;
        }
        li a{
            display: block;
            color: black;
            text-decoration: none;
            padding: 14px 16px;
            text-align: center;
            background-color: #f2f2f2;
        }
        li a:hover{
            background-color: #e6e6e6;
        }
        .active{
            background-color: #33ff33;
        }
        form.username{
            margin-top: 100px;
        }

    </style>
</head>
<body>
    <div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Menu</a></li>
                <li><a href="#">About</a></li>
            </ul>

            <form class="username">
                Username:<br>
                <input type="input" name="username" placeholder="johnConor"><br>
                Password:<br>
                <input type="input" name="password" placeholder="******"><br>
                <input type="submit" name="submit" value="login">
            </form>
        </div>
        <div class="content">
              <h1> header/LOGO </h1>
              <h3>Try to scroll this area, and see how the sidenav sticks to the page</h3>
              <p>Notice that this div element has a left margin of 25%. This is because the side navigation is set to 25% width. If you remove the margin, the sidenav will overlay/sit on top of this div.</p>
              <p>Also notice that we have set overflow:auto to sidenav. This will add a scrollbar when the sidenav is too long (for example if it has over 50 links inside of it).</p>
              <p>Some text..</p>
              <p>Some text..</p>
              <p>Some text..</p>
              <p>Some text..</p>
              <p>Some text..</p>
              <p>Some text..</p>
              <p>Some text..</p>

        </div>
        <div class="footer"><p>&copy; 2019</p></div>
    </div>
</body>
</html>

mohon bantuan, saya mencoba membuat tampilan halaman html namun hasilnya masih belum rapih seperti yg di harapkan, bisakah saya mendapat masukan tag,atribut,dan elemen apakah yg harus saya rubah dan atur agar halaman yg saya buat di atas bisa rapih? MOHON BANTUAN

Comment ..

Bisa discreenshot tampilan yang diharapkan seperti apa? sepertinya ini bukan materi dari Codepolitan

Dikomentari pada tanggal 10 June 2019 oleh Ahmad Oriza
Comment ..

pada codepolitan saya telah menyelesaikan materi html dan css maka dr itu saya mencoba membuat halaman dr html dan css, tampillan yg saya inginkan adalah menampilkan menu navigasi di sisi sebelah kiri dan conten berdampingan di sebelah kanan..

Dikomentari pada tanggal 11 June 2019 oleh Ilyas fardian
BUAT KOMENTAR