Scribd
Upload
10 views2 pages

JavaTpoint Login Form Design

Uploaded by

Adwaith Sivakumar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
10 views2 pages

JavaTpoint Login Form Design

Uploaded by

Adwaith Sivakumar
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html>

<head>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>

* {
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
height: 100%;
}

h1 {
text-align:center;
-webkit-text-stroke: 1px black;
color:red;
}

.background-img {
min-height: 400px;
background-size: cover;
background-image: url(
"[Link]
}
.container {
max-width: 300px;
padding: 17px;
position: absolute;
left: 28px;
top: 50px;
margin: 20px;
}

b {
-webkit-text-stroke: 1px black;
color: red;
font-size:26px;
}
input[type=text],
input[type=password] {
margin: 17px 0px;
border: 2px solid red;
width: 100%;
padding: 17px;
}
.button:hover {
transform: scale(1.2);
transition: transform 0.2s;
}

.button {
border: none;
cursor: pointer;
width: 100%;
background-color: #F58840;
color: #EAF6F6;
padding: 17px 17px;
}
</style>
</head>

<body>
<div class="background-img">
<h1>javaTpoint</h1>

<form class="container">
<b>Username</b>
<input type="text" placeholder="Put your Username"
name="username" required>

<b>Password</b>
<input type="password" placeholder="Enter your Password"
name="password" required>

<button type="submit" class="button">Login</button>


</form>
</div>
</body>

</html>

You might also like