Dezenho Pagina Web Login Uza HTML & CSS

By
Olllaaa... maluk sira, imi hotu diak ka lae.. espera katak imi hotu diak..
iha momento ne'e hau hakarak fahe ba kolega sira kona ba dezenho web login simples, liu husi HTML no CSS.


  •  Diak maluk sira, iha ne'e hau sei lori ita atu kria web login simples hanesan imagem karaik ne'e.


imagem 1


1. Ita kria file ida ho nara "login.php", iha ne'e hau uza nia extensi (.php) tamba hau uza xampp. karik kolega sira la uza xampp bele tau extensi (.html). 
NB: Bele copy nia kodin sira hodi tau ba ita bot sira nia Notpad++ ka sublim Text, hodi Run.

 <html>
<head>
<title>web iob</title>
<link href="stylelogin.css" rel="stylesheet" type="text/css">
</head>

<body>

 <center>
<table border="0">
<form action="prosesu_login.php" method="POST">
<tr>
<tr> <th colspan="10" bgcolor="purple">
   <b><font face="Arial Black">LOGIN ADMINISTRATOR</b></tr></th>
  
<td><font face="Bodoni MT"><input type="text"
placeholder="Enter Username" name="user"></td>

<td><input type="password" placeholder="Enter Password" 
name="password" ></td>

<td><input type="submit" name="submit" value="login"></td>
<td><input type="reset" name="reset" value="Cansela"></td>
 
</tr>
</form>
<h1><center><FONT COLOR="YELLOW"><marquee><font face="Agency FB">
[PLEASE ENTER YOUR USER NAME AND PASWORD]</marquee></center></h1>
</table></center>
</body>
</html>



2. ita kria file ida o naran "style.css", style katak Modelu, website da atu furak depende ba nia style ka css. CSS signifika (CASCADING STYLE SHEET).

body{
background-image:url('images/clasik.jpg');

font-family:arial;
background-color:#a2c4c9;
}


table{
width:350px;
height:250px;
margin:100px auto;
padding:50px 50px;
border:1px solid #eee;
background:rgba(255,255,255,0.77);
border-radius:10px;
box-shadow:0 0 10 px #fff;
}
input[type="text"],input[type"password"]{
border:1px solid rgba(51,51,51,.5);
border-radius:10px;
padding:5px;
font-size:25px;
line-height:30px;
width:100%;
text-align:center;


}

input[type="submit"],input[type"reset"]{

margin-top:15px;
font-size:18px;
border:1px solid #000;
border:1px solid rgba(51,51,51,.5);

border-radius:10px;
padding:5px 10px;

line-height:20px;
width:100%;
text-align:center;

box-shadow:2px 1px 1px #aaa;
cursor:pointer;
}
input[type="submit"]:hover;input[type"reset"]:hover{

background:#f4f4f4;
}
h2{
text-align:center;
}
table tr td{

margin:10px 5px;
padding:5px 0px;
line-height:30px;
}



Klik to download file pdf.
http://jobshelp.000webhostapp.com/gmail.com/index.php#identifier

No comments:

Post a Comment