Animated Login Form Design using HTML and CSS

<html>

<head>
<title>Login Page</title>

<style type="text/css">
*{
box-sizing: border-box;
}
body{
margin: 0;
background-color: yellow;
}
input[type=text],input[type=password] {
padding: 20px 15px;
border-radius: 20px;
width: 100%;
border: 2px solid Indigo;
margin-left: 5%;
}
button {
padding: 20px 15px;
border-radius: 20px;
width: 40%;
border: 2px solid Indigo;
margin-left: 35%;
background-color: yellow;
}
.login {
padding: 35px 35px;
border-radius: 200px;
width: 30%;
background-color:  DeepPink;
box-shadow: 10px 10px 10px 10px LightGreen;
margin-top: 8%;
}
h2 {

text-align:  center;
color: yellow;
}
</style>

</head>

<body>
<form>
<table class ="login" align="center" cellspacing="8" cellpadding="8">
<tr>
<td>
<h2>Login</h2>
</td>
</tr>

<tr>
<td>
<input type="text" name="uname" placeholder="Username">
</td>
</tr>
<tr>
<td>
<input type="password" name="upass" placeholder="Password">
</td>
</tr>
<tr>
<td>
<button type="submit">Login</button>
</td>
</tr>
</table>
</form>
</body>

</html>

Comments

Post a Comment

Popular posts from this blog

WebPage Design Using HTML and CSS

<html> <head> <title>Java Basics</title> <style> *{ box-sizing: border-box; } body { margin: 0; } .header,.footer{ background-color: yellow; padding: 10px; text-align: center; } .menu { overflow: hidden; background-color: LightGreen; padding: 10px; } .menu a { float: right; display: block; color: red; padding: 10px 10px; } .menu a:hover { background-color: yellow; color: blue; } .column.left,.column.right{ text-align: left; float: left; width: 20%; padding: 70px; background-color: HotPink } .column.middle { text-align: center; float: left; width: 60%; padding: 70px; } .row:after { content: ""; display: table; clear: both; } </style> </head> <body> <div class ="header"> <h2>Header</h2> </div> <div class = "menu"> <a href="#">Home</a> <a href="#">AboutUs</a> <...
Read more

How to design webpage using HTML And CSS

<!DOCTYPE html> <head> <title>Java Basics</title> <style> * { box-sizing: border-box; } body { margin: 0; } .header,.footer { background-color: yellow; padding: 10px; text-align: center; } .topnav {   overflow: hidden;   background-color: LightGreen;   padding: 10px; } .topnav a { float: right; display: block; color: red; padding: 10px 10px; } .topnav a:hover { background-color: yellow; color: blue; } .column.left,.column.right { text-align: left; float: left; width: 20%; padding: 70px; background-color: HotPink; } .column.middle { text-align: center; float: left; width: 60%; padding: 70px; } .row:after { content: ""; display: table; clear: both; } </style> </head> <body> <div class="header">    <h2>Header</h2> </div> <div class="topnav">    <a href="#">Home</a>    <a href="#">Ab...
Read more

Convert XML In To Java Using Java

package com.java.basicprograms; import java.io.File; import javax.xml.bind.JAXBContext; import javax.xml.bind.JAXBException; import javax.xml.bind.Unmarshaller; public class ConvertXMLInToJava { public static void main(String[] args) { try { JAXBContext context  = JAXBContext.newInstance(Item.class); Unmarshaller unmarshaller = context.createUnmarshaller(); File file = new File("E:/item.xml"); Item item = (Item) unmarshaller.unmarshal(file); System.out.println(item); } catch (JAXBException e) { e.printStackTrace(); } } }
Read more