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.
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 Juga: Contoh 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 Juga: Contoh 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...