| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>login</title> |
| <style> |
| * { |
| position: absolute; |
| } |
|
|
| html, |
| body { |
| width: 100%; |
| height: 100%; |
| /* background-color: rgb(0, 0, 0); */ |
| background-color: whitesmoke; |
| margin: 0px; |
| padding: 0px; |
| } |
|
|
| .backside { |
|
|
| margin: 0px; |
| width: 400px; |
| height: 700px; |
| transform: translate(-50%, -50%); |
| left: 50%; |
| top: 50%; |
| background-color: rgb(255, 255, 255); |
| box-shadow: 1px 1px 25px 15px indianred; |
| border-radius: 80px; |
| transition: 0.6s; |
| animation: changecolor 2s linear infinite; |
| transition: 0.4s; |
| } |
|
|
| @keyframes changecolor { |
| 0% { |
| filter: hue-rotate(0deg); |
| } |
|
|
| 100% { |
| filter: hue-rotate(360deg); |
| } |
| } |
|
|
| #image { |
| position: relative; |
| width: 300px; |
| height: 300px; |
| border-radius: 80px; |
| transform: translate(-50%, -50%); |
| left: 67%; |
| top: 170px; |
| box-shadow: inset 1px 1px 25px 5px indianred; |
| animation: changecolor 3s linear infinite; |
| } |
|
|
| .input { |
| text-transform: uppercase; |
| text-align: center; |
| white-space: pre; |
| font-family: monospace; |
| font-size: 30px; |
| font-weight: 900; |
| color: rgb(28, 14, 14); |
| text-shadow: 1px 1px 3px rgb(252, 0, 0), -1px -1px 3px green; |
| } |
|
|
| .position1 { |
| top: 300px; |
| left: 150px; |
| } |
|
|
| .position2 { |
| letter-spacing: 3px; |
| top: 350px; |
| left: 130px; |
| } |
|
|
| .position3 { |
| letter-spacing: 3px; |
| top: 430px; |
| left: 130px; |
| } |
|
|
| .position4 { |
| letter-spacing: 3px; |
| top: 620px; |
| left: 60px; |
| } |
|
|
| .inputfield { |
| width: 350px; |
| height: 35px; |
| border-radius: 25px; |
| outline: none; |
| text-align: center; |
| font-size: 25px; |
| /* animation: changecolor 1s linear infinite; |
| box-shadow: 1px 1px 25px 2px indianred; */ |
| box-shadow: inset 1px 1px 25px 2px indianred; |
| border: none; |
| border-color: whitesmoke; |
| } |
|
|
| .inputfieldposition1 { |
| top: 420px; |
| left: 20px; |
| } |
|
|
| .inputfield2 { |
| width: 350px; |
| height: 35px; |
| border-radius: 25px; |
| outline: none; |
| text-align: center; |
| font-size: 25px; |
| /* animation: changecolor 1s linear infinite;*/ |
| box-shadow: inset 1px 1px 25px 2px indianred; |
| /* border-color: whitesmoke; */ |
| border-color: whitesmoke; |
| border: none; |
| } |
|
|
| .inputfieldposition2 { |
| top: 500px; |
| left: 20px; |
| } |
|
|
| .button { |
| width: 150px; |
| height: 50px; |
| border-radius: 25px; |
| outline: none; |
| top: 580px; |
| left: 125px; |
| /* animation: changecolor 1s linear infinite; |
| box-shadow: 1px 1px 25px 2px indianred; */ |
| border: whitesmoke; |
| animation: changecolor 1s linear infinite; |
| box-shadow: 1px 1px 25px 2px indianred; |
| font-weight: 900; |
| font-size: 25px; |
| font-family: monospace; |
| color: whitesmoke; |
| text-shadow: 1px 1px 3px rgb(252, 0, 0), -1px -1px 3px green; |
| transition:0.2s; |
| } |
| .button:hover { |
| transition:0.2s; |
| width: 150px; |
| height: 50px; |
| border-radius: 25px; |
| outline: none; |
| top: 580px; |
| left: 125px; |
| /* animation: changecolor 1s linear infinite; |
| box-shadow: 1px 1px 25px 2px indianred; */ |
| border: whitesmoke; |
| animation: changecolor 1s linear infinite; |
| box-shadow: 1px 1px 25px 2px indianred; |
| font-weight: 900; |
| font-size: 35px; |
| font-family: monospace; |
| color: whitesmoke; |
| text-shadow: 1px 1px 3px rgb(252, 0, 0), -1px -1px 3px green; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <div class="backside"> |
| <div class="img"> |
| <img src="b.jpg" alt="" id="image"> |
| </div> |
| <div> |
| <p class="input position1">log in</p> |
| </div> |
| <div> |
| <p class="input position2">Username</p> |
| <input type="username" class="inputfield inputfieldposition1"> |
| </div> |
| <div class="psswd"> |
| <p class="input position3">Password</p> |
| <input type="password" class="inputfield2 inputfieldposition2"> |
| </div> |
| <div> |
| <p class="input position4">forget password</p> |
| </div> |
| <div> |
| <input type="button" onclick="" class="button" value="ENTER"> |
| </div> |
|
|
| </div> |
| </body> |
|
|
| </html> |
Comments