how to make login transparent (no javascript and php)
<html>
<head>
<title>ulangan4</title>
<style type="text/css">
body
{
margin: 0;
background:url(Desert.jpg);
background-size: cover;
}
#login
{
width: 450px;
height: 400px;
background: rgba(0,0,0,0.5);
padding: 10px 20px;
margin: 200px auto;
color: #fff;
border-radius: 15px;
}
h1
{
font-family: sans-serif;
text-align: center;
background-color: lightgrey;
color: rgb(0,0,0);
border-radius: 10px;
}
#login input[type="text"],[type="password"]
{
width: 93%;
padding: 7px 15px;
border:none;
background: transparent;
border-bottom: 1px solid #fff;
color: #fff;
font-family: 20px;
}
#login input[type="submit"]
{
width: 100%;
height: 35px;
text-align: center;
color: rgb(0,0,0);
font-weight: bold;
font-size: 18px;
background-color: rgb(0, 133, 114);
border:none;
border-radius: 15px;
}
#login input[type="submit"]:hover
{
background-color: rgb(0, 211, 114);
color: rgb(0,0,0);
cursor: pointer;
}
#login a
{
color: #fff;
font-family: sans-serif;
font-size: 15px;
}
#login a:hover
{
color: rgb(0, 211, 114);
cursor: pointer;
}
</style>
</head>
<body>
<div id="login">
<p><h1>Login</h1></p>
  Username<br>
<input type="text" name="nama" placeholder="masukkan username" maxlength="40"><p></p>
  Password<br>
<input type="Password" name="pass" placeholder="masukkan password" maxlength="50"><p></p>
<input type="submit" name="btnlgn" value="Login"><p></p>
<a href="Forgot">Forgot Password</a>   <a href="Daftar">Daftar</a>
</div>
</body>
</html>
Komentar
Posting Komentar