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

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya