ketemu lagii sama admin Bhandell, yoloo #Nuenomaru ^_^ , lanjut Blog Walking lagi Gengs ;3
xixixhi, baru pulang gawe, maap yo admin2 yg ngolah Blog dan FP lg pada sibuk kerja, jdi maklumin aja yak, tpi OA Line dan sosmed yg lain akan kami pastikan, akan Update setiap harinya kok ^_^
Btw Kali ini Nue akan Share Cara Membuat Form Login Sederhana Dengan HTML dan CSS.
Hehehe tutorial utk artikel kali ini ringan dlu deh >.<" *yg dh master bisa minggir dlu bebz ;*
Lanjut intip tutornya gengs ;*
Pertama kali tentunya kita buat HTMLnya terlebih dahulu, kita buat file index.html yang isinya seperti berikut:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login form TKJ Cyber Art</title>
<!-- Untuk CSS ditaruh pada file style.css, sehingga perlu dipanggil code ini -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="login">
<h3>Login</h3>
<fieldset>
<form action="">
<input type="text" name="username" placeholder="Username">
<input type="email" name="Email" placeholder="Email">
<input type="submit" name="submit" value="Login">
<div class="border-p"></div>
<p>OR</p>
<button>Login With Facebook</button>
</form>
</fieldset>
</div>
</body>
</html>
Setelah membuat htmlnya maka kita lanjut membuat CSSnya, buat file baru dengan nama style.css dan isi dengan kode:
body{
margin: 0;
padding: 0;
}
#login{
max-width: 340px;
margin:100px auto;
background: #f9f9f9;
box-shadow: 0 0 10px #aaa;
}
#login h3{
text-align: center;
padding: 25px 10px;
background-color: #2b2f3e;
color: #b0b0bc;
}
fieldset{
margin: 0;
border: none;
}
form{
padding: 0;
margin: 0;
padding: 15px;
}
input[type='text'],
input[type="email"]{
width: 100%;
padding: 1em;
margin-top: 1.2em;
color: #888;
}
input[type="submit"]{
width: 100%;
padding: 1.4em;
margin: 1.5em 0;
color: #888;
background-color:#00cdb1 ;
border:none;
color:#eee;
border-bottom: 4px solid transparent;
}
input[type="submit"]:hover{
opacity: 0.8;
border-color: #00adb1;
}
form p{
text-align: center;
color: #888;
width: 30px;
margin: 10px auto 0;
background: #f9f9f9;
position: relative;
bottom: 20px;
}
.border-p{
border-top: 1px solid #888;
margin: 10px 10px;
}
button{
background-color: #3b5998;
width: 100%;
padding: 1.4em;
margin-bottom: 1em;
color: #888; ;
border:none;
color:#eee;
border-bottom: 4px solid transparent;
}
button:hover{
opacity: 0.9;
border-color: #3b3998;
}
Setelah jadi semua, save hasil kerja Lu gengs, dan cek hasilnya di browser.
Maka hasilnya akan seperti dibawah ini:
Lu pada bisa menempatkan CSS dan HTML di tempat yang terpisah ataupun dalam satu file. Jika digabung menjadi satu, maka code CSS diatas ditempatkan dalam tag
<head> ... </head>
Tapi kalau penempatanya dipisah, maka halaman CSS perlu dipanggil dengan kode seperti ini
<link rel="stylesheet" href="assets/css/style.css">
Untuk contoh yang lain, cara membuat Form Login bisa cek ke mbah google aja / tanya2 di Forum, makin banyak Refrensi, tentunya Lu jdi makin Jozz Kreasikan Codingan Lu :3
Selanjutnya Silahkan Kreasikan Codingan Lu , oprek2 aja sendiri >.<"
Mudahkan x_O ?
Stay Cool and Keep ./Crotz , gaes <(")
bila ada kesalahan mohon di maafkan dan dibenarkan di kolom komentar kak.
bila ada kritik, dan pertanyaan langsung aja kak ke wall fanspage kami: TKJ CYBER ART
Nue cuma niat untuk Share Tutorial, yg bertujuan utk membantu para pemula kek Nue :')
Happy ngoding bro~
Sekian dan semoga bermanfaat .. terimakasih
Source and Thanks to: PONDOK PROGRAMMER
./Nuenomaru
 |
| Kami ada dan Berkarya bukan utk Di Sanjungi #keepcrootzgaes |
Visit and follow :
FP : TKJ Cyber Art
G+ : TKJ Cyber Art
youtube : TKJ Cyber Art
BBM : C0018D1A2
Line : http://line.me/ti/p/%40hjl8740i
0 komentar:
Posting Komentar