Here, we will use a few tags of HTML and some properties of CSS which are-
HTML tags
- margin
- padding
- text-align
- color
- background-color etc
Let's start coding...
HTML code
- <!DOCTYPE html>
- <html>
-
- <head>
- <title>login</title>
- <link rel="stylesheet" type="text/css" href="logincss.css">
- </head>
-
- <body>
- <div class="main">
- <div class="in">
- <h1>Login</h1>
- <img src="log.png">
- <form class="fm">
- <label>User Id:</label><input type="text" value="Username"><br>
- <label>Password:</label><input type="password" value="123">
- </form>
- </div>
- <div class="bcon">
- <button class="btn">Submit</button><br>
- </div>
- </div>
-
- </body>
-
- </html>
- body {
- margin: 0;
- }
- .main {
- background - color: #f7f7f7;
- max - width: 25 % ;
- text - align: center;
- font - family: "Bauhaus 93";
- color: #06a7e2;
- margin-top: 2%;
- margin-left: 35%;
- }
- .in img{
- max-width: 60%;
- max-width:60%;
- }
- .fm{
- display: block;
- color: # bdbdbd;
- font - family: "Castellar";
- margin - left: 2 % ;
- margin - top: 2 % ;
- padding: 2 % ;
- width: 80 % ;
- }
- .fm input {
- padding: 2 % ;
- margin: 2 % ;
- color: #06a7e2;
- width: 100%;
- }
- .btn{
- background-color: #06a7e2;
- color: white;
- text - decoration: none;
- padding: 15 px 32 px;
- border: none;
- font - size: 100 % ;
- }
- .btn: hover {
- opacity: 0.9;
- }
- .bcon {
- width: 100 % ;
- height: 100 % ;
- }
- label {
- float: left;
- }
![]()