-->

Cara Membuat Tampilan Daftar Gmail dengan HTML CSS

Konten [Tampil]
Cara Membuat Tampilan Daftar Gmail dengan HTML CSS


Cara Membuat Tampilan Daftar Gmail dengan HTML CSS - Pada kesempatan yang baik ini, saya memberikan tutorial membuat halaman register gmail menggunakan html dan css. Untuk tampilannya bisa anda lihat digambar dibawah ini.

Cara Membuat Tampilan Daftar Gmail dengan HTML CSS


Yuk bagaimana cara saya membuatnya?, langsung simak tutorial dibawah ini.


Cara Membuat Halaman Daftar seperti Gmail

Berikut ini langkah-langkah membuat tampilan seperti daftar di gmail.

Langkah 1: Buat File Daftar-Gmail.html

Langkah pertama yang anda lakukan adalah membuat sebuah file dan beri nama "daftar-gmail.html" jika suda silahkan copy kode dibawah ini.

<!DOCTYPE html>
<html>
<title>Daftar E-MAIL - AnsoriWeb.com</title>
<link href="style.css" rel"stylesheet">

<body>

<div id="kontainer">

  <div class="logo-google">
      <font color="#0039e6">G</font>
      <font color="#ff0000">o</font>
      <font color="#ffcc00">o</font>
      <font color="#0039e6">g</font>
      <font color="#29a329">l</font>
      <font color="#ff0000">e</font>
  </div>

<div class="text1">
    <h1>Buat Akun Google</h1>
    <p>Lanjutkan ke Google Ads</p>
</div>

    <div>
      <form action="https://www.ansoriweb.com">

        <input type="text" id="namadepan" name="namadepan" placeholder="Nama Depan">

        <input type="text" id="namabelakang" name="namabelakang" placeholder="Nama Belakang">

        <input type="text" id="alamatemail" name="alamatemail" placeholder="Alamat E-mail">

        <p>Anda perlu mengkonfirmasi bahwa email ini milik Anda</p>

        <a href="#">Buat alamat Gmail baru</a>

        <input type="password" id="sandi" name="sandi" placeholder="Sandi">

        <input type="checkbox" onclick="myFunction()">Show Password

        <p>Gunakan minimal 8 karakter dengan campuran huruf, angka & simbol</p>

        <input type="password" id="sandi" name="sandi" placeholder="Konfirmasi Sandi">
      
        <input type="login" value="Login saja"><input type="submit" value="Berikutnya">

      </form>
    </div>

</div>

<script type="text/javascript">
  function myFunction() {
  var x = document.getElementById("sandi");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}
</script>

</body>
</html>

<!--       _
       .__(.)< (MEOW)
        \___)   
 ~~~~~~~~~~~~~~~~~~-->


Baca JugaContoh Website Statis Keren Beserta Tampilannya


Langkah 2: Buat File style.css

Langkah kedua yang anda lakukan adalah membuat sebuah file dan beri nama "style.css" jika suda silahkan copy kode dibawah ini.

* {
  font-family: arial;
  font-weight: lighter;
}

#kontainer {
  border-radius: 5px;
  padding: 50px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

input[type=text], input[type=password],  select {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 15px;
  box-sizing: border-box;
}


input[type=submit] {
  width: 45%;
  background-color: blue;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=login] {
  width: 45%;
  color: blue;
  padding: 14px 20px;}


Baca JugaContoh Web HTML yang Sudah Jadi beserta Tampilannya


Penutup

Itulah tadi artikel  Cara Membuat Tampilan Daftar Gmail dengan HTML CSS, semoga bermanfaat.

Apabila ada kritik dan saran, maupun pembahasan yang kurang jelas, anda bisa berkomentar dibawah ini.

Selamat membaca dan belajar...

0 Response to " Cara Membuat Tampilan Daftar Gmail dengan HTML CSS"

Post a comment

Bebas berkomentar asalkan sopan.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel