Promo Lebaran, Kelas Online CODEPOLITAN Cukup Bayar Setengah Harga KLAIM PROMO

halaman awal html

Ditanyakan pada tanggal 10 June 2019 oleh Ilyas fardian Edit  Hapus  Tandai Selesai  Tandai 
<!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

BUAT KOMENTAR

1 JAWABAN / 0 KOMENTAR

User avatar
Muchamad syariful umam menjawab pada tanggal 28 October 2019 Jadikan Jawaban Terbaik  Edit  Hapus  Ubah ke Komentar 

silakan dicoba

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    body {
      font-family: "Lato", sans-serif;
    }

    .sidenav {
      height: 100%;
      width: 15%;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #f2f2f2;
      overflow-x: hidden;
      padding-top: 20px;
    }

    .sidenav a {
      text-align: center;
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 25px;
      color: black;
      display: block;
    }

    .sidenav form{
      margin-top: 40px;
      margin-left: 20px;
    }

    .sidenav a:hover {
      background-color: #e6e6e6;
    }

    .active{
      background-color: #33ff33;
    }

    .main {
      margin-left: 240px; 
      font-size: 28px; 
      padding: 0px 10px;
    }

    footer{
      text-align: center;
      padding: 10px;
      background-color: green;
    }

    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
  </style>
</head>
<body>

  <div class="sidenav">
    <a href="#" class="active">Home</a>
    <a href="#">Menu</a>
    <a href="#">About</a>

    <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="main">
    <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>

  <footer>copy right 2019</footer>

</body>
</html> 
BUAT KOMENTAR