Langsung ke konten utama

CSS dasar cara membuat layout page login website sederhana

 



layout page login ini adalah suatu yang juga bisa disebut penting lah, karena login page juga di butuh kan dalam yang namanya website bahkan dalam jaringan pun

ada yang juga membutuhkan page login ini. dan kali ini kita akan mencoba page login yang sederhana, tapi seperti biasa sebelumnya diri ini mohon izin untuk mengucapkan


Salam sobat semua

Alhamdulillahi robbil 'alamiin atas segala nikmat yang telah di berikan oleh Allah kepada diri ini dengan secara gratis sehingganya diri ini bisa menulis dan berbagi

dalam tulisan ini dengan kalian, dan tak lupa Sholawat serta salamku akan tetap tercurahkan dan akan tetap terpanjatkan kepada junjugan baginda Sayyidina Muhammad ibni

abdillah S.A.W. beserta kepada keluarga dan shabatnya.

marilah kita baca basmalah sebelum memulainya. Bismillahir rohmanir rohiim, untuk kali ini kita akan mencoba membuat layout page login website dengan css dan html

sederhana ala saya alias dopunk alias mazdopunk alias dopunk oon. untuk kali ini kita buka texteditor kesayangan kita masing masing. kalao saya sih sangat lebih suka

pada notepad++ dan kalian bisa download notepad++ dan cara install nya disini

sekarang buat file baru html dan css nya dulu, biar serasi kita sepakati dan kita beri nama file css kita dengan nama login.css dan html nya kita beri nama 

filelogin.html.


kita buat dulu nih design body dan main atau wadah atau tempat untuk form login. dan kalian bisa ketik seperti atau copy paste kode css nya seperti berikut

body{

margin:0;

padding:0;

background:#00acf4;

}

#main{

min-width:350px;

width:93%;

background:#00acf4;

margin:0px;

font-size:14px;

font-family:arial;

padding:15px;

}

dan kemudian kita copy paste kode html berikut ini

<html>

<head>

<title>Login Websiteku</title>

<link href="style/login.css" rel="stylesheet" type="text/css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div id="main">

</div>

</body>

</html>

dan hasil outputnya seperti dibawah ini


kemudian kita tambahkan selektor id main_login untuk kotak form login nya yang nanti kita buat berada di tengah-tengah tampilan dan juga tulisan heading login nya 

yang kalau diterapkan dalam kode css akan menjadi seperti berikut

#main_login{
width:35%;
min-width:350px;
border:1px solid #00acf4;
background:#fff;
margin-left:auto;
margin-right:auto;
padding:7px;
}
#main_login h1,h2,h3,h4,h5{
border-bottom:3px solid #00acf4;
}

sehingga untuk kode lengkapnya seperti berikut

body{

margin:0;

padding:0;

background:#00acf4;

}

#main{

min-width:350px;

width:93%;

background:#00acf4;

margin:0px;

font-size:14px;

font-family:arial;

padding:15px;

}

#main_login{

width:35%;

min-width:350px;

border:1px solid #00acf4;

background:#fff;

margin-left:auto;

margin-right:auto;

padding:7px;

}

#main_login h1,h2,h3,h4,h5{

border-bottom:3px solid #00acf4;

}

dan untuk htmlnya kita tambahin kode sperti berikut

<div id="main_login">

<h2>Login panel</h2>

</div>

sehingga untuk kode lengkapnya akan seperti berikut

<html>

<head>

<title>Login Websiteku</title>

<link href="style/login.css" rel="stylesheet" type="text/css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div id="main">

<div id="main_login">

<h2>Login panel</h2>

</div>

</div>

</body>

</html>

dan dari kode diatas akan menghasilkan output seperti berikut ini


sekarang kita tambahin form loginnya seperti kode berikut ini

<form method="POST" action="#" name="formlogin">
<p>Username</p>
<p><input type="text" name="username"></p>
<p>Password</p>
<p><input type="password" name="password"></p>
<input type="button" name="logintombol" value="Login">
<p><input type="checkbox" name="ingatsaya" value="1">Ingat saya</p>
</form>
<p><a href="#lupapassword">Lupa Password</a></p>

sehingga untuk kode lengkapnya seperti ini

<html>

<head>

<title>Login Websiteku</title>

<link href="style/login.css" rel="stylesheet" type="text/css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div id="main">

<div id="main_login">

<h2>Login panel</h2>

<form method="POST" action="#" name="formlogin">

<p>Username</p>

<p><input type="text" name="username"></p>

<p>Password</p>

<p><input type="password" name="password"></p>

<input type="button" name="logintombol" value="Login">

<p><input type="checkbox" name="ingatsaya" value="1">Ingat saya</p>

</form>

<p><a href="#lupapassword">Lupa Password</a></p>

</div>

</div>

</body>

</html>

dan hasil outputnya akan seperti dibawah ini


dari hasil diatas tampilannya kurang manis kawan maka kita coba permak dan permanis lagi tampilan formnya dengan kode css seperti berikut.

#main_login .inputan{
width:100%;
border:none;
border-bottom:1px solid #00acf4;
}
#main_login .tombol{
width:100%;
border:none;
background:#00acf4;
color:#fff;
padding:11px;
font-size:21px;
font-weight:bold;
}
#main_login .tombol:hover{
background:#046dd6;
}

kemudian pada htmlnya kita tambahkan selektor class tombol dan inputan. untuk yang class tombol kita pakai pada tombol dan class inputan kita pakai di input teks

username dan password seperti berikut

<form method="POST" action="#" name="formlogin">

<p>Username</p>

<p><input type="text" name="username" class="inputan"></p>

<p>Password</p>

<p><input type="password" name="password" class="inputan"></p>

<input type="button" name="logintombol" value="Login" class="tombol">

<p><input type="checkbox" name="ingatsaya" value="1">Ingat saya</p>

</form>

<p><a href="#lupapassword">Lupa Password</a></p>

sehingga untuk kode lengkapnya sperti berikut

<html>

<head>

<title>Login Websiteku</title>

<link href="style/login.css" rel="stylesheet" type="text/css">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body>

<div id="main">

<div id="main_login">

<h2>Login panel</h2>

<form method="POST" action="#" name="formlogin">

<p>Username</p>

<p><input type="text" name="username" class="inputan"></p>

<p>Password</p>

<p><input type="password" name="password" class="inputan"></p>

<input type="button" name="logintombol" value="Login" class="tombol">

<p><input type="checkbox" name="ingatsaya" value="1">Ingat saya</p>

</form>

<p><a href="#lupapassword">Lupa Password</a></p>

</div>

</div>

</body>

</html>

dan dari hasil kode diatas akan menghasilkan output seperti berikut 


dilihat dari atas tampilannya sudah manis dan sekarang kita lihat pada browser berukuran kecil, sehingga akan sperti berikut

nah selesai lah kita membuat layout page login sederhananya, mungkin kalian bisa menambah dan memaniskan lagi page layout ini, dan saya rasa cukup sekian dulu untuk
tulisan layout page login website sederhana ini, kita lanjut di next tulisan, mudah-mudahan tulisan ini bisa menjadi dan membawa manfaat bagi kita semua, Aamiiin.
Salam sobat semua.

#css #hmtl #free #share #web #websites #website #loginpage #layout #responsive

 

 

 

 

 

 

 

 

 

 

 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Install Perl

  Salam Sobat Semua ALhamdulillah Sholawat serta salam tetap tercurah kepada sang panutan sayyidina Muhammad S.A.W. untuk kesempatan kali ini saya ingin berbagi tentang Applikasi perl dan Instalasi nya. mungkin kebanyakan orang applikasi perl ini tidak begitu penting apalagi di kalangan designer. tapi lain kata dengan kalangan yang suka melakukan aktifitas hacking,cracking,carding dan programming. mereka akan sangat membutuhkan applikasi ini karena memang ada beberapa tool atau alat yang terbuat dari bahasa perl. dan Insya Allah nanti saya akan berbagi juga dasar dasar perl oke :D heheheh. ok langsung saja.  - Download applikasi instalasi perl di https://adsafelink.com/4vKs7DHTY7 - ekstrak dari winrar nya 1. klik dua kali applikasi instalasi perl yang sudah di download dan setalah muncul jendela seperti di gambar maka klik next 2. Pilih option i accept dan kemudian klik next seperti tampak pada gambar 3. di bagian jendela ini untuk settingannya kita pakai yang standard saja ti...
Posting Komentar
Baca selengkapnya

Belajar HTML bersama part 2(mengenai Tag Heading)

  Alhamdulillah segala puji bagi Rabb semesta alam yang masih di beri kesempatan bisa bertemu lagi di tulisan atau video ini. pada kesempatan kemaren kita sudah mencoba membuat file html. dan sekarang ayo kita mencoba yang lebih dalam mengenai HTML. di dalam file kemaren atau bacaan atau video kemaren ada beberapa isi body yang kita tahu. yaitu <h1> dan <p>. untuk kesempatan kali ini saya mencoba memberitahukan arti h1 itu dulu, dan next bacaan atau video kita lanjutkan yang lain. untuk h1 kalau dalam teori disebut heading yang fungsinya membuat tulisan di dalam body itu berukuran menurut ukuran sesuai sistem. h1 ini terdiri sampai h6. jadi kita nanti kita akan coba h1 sampai h6. sekarang kita coba buka notepad lagi dan tulis atau copy paste tulisan berikut <html> <head> <title>Website Pertama</title> </head> <body> </body> </html> kemudian diantara tag body kita tulis atau copy paste tag h1 kemudian di sav...
Posting Komentar
Baca selengkapnya