3D LOG IN FORM

on

 LOG IN FORM

Languages what have been used here are HTML AND CSS. For source code check out below


SOURCE CODE

<!DOCTYPE html>

<html>

<head>

<title></title>

<style type="text/css">


body{margin: 0;padding:0;box-sizing: border-box;background: #e9ebee;}


.container{box-shadow:2px 2px 5px 4px gray;

       background:#2604;

       width: 300px;

       height: 400px;

       border-radius:5%;

       margin-left:30%;

       margin-top: 5%;}


.container img{width: 90px;

           height: 90px;

           border-radius: 50%;

           margin-top: 15px;

           margin-left: 100px;}


h3{font-weight: bold;

   letter-spacing: 0.5px;

   font-family: sans-serif;

   font-size: 25px;

   text-align: center;

   margin-top: -0.1px;}


input{border:none;

  border-bottom: solid 1px black;

  font-size: 15px;

  padding-bottom: 15px;

  margin-top: 5px;

  margin-left: 50px;

  outline: none;

  background:transparent;}



h5{font-family: sans-serif;font-weight: bolder;font-size: 12px;padding-left: 140px;}


h5 a{text-decoration: none;color:black;}


button{color:white;

   background:blue;

   border:none;

   padding:7px;

   letter-spacing: 0.7px;

   width: 200px;

   font-family: sans-serif;

   font-weight: bold;

   border-radius: 15px;

   margin-left: 50px;

   outline: none;

   cursor: pointer;

   opacity: 0.8;}

button:hover{opacity: 1;}

button:active{box-shadow: inset 1px 2px 6px 2px black;}

</style>

</head>

<body>

<div class="container">

<img src="image7.png">

<h3>WELCOME</h3>

<form>

<input type="text" placeholder="Username"required>

<input type="password" placeholder="password"required>

<h5><a href="#">Forgot password?</a></h5>

<button>LOGIN</button>

</form>

</div>



</body>

</html>


Comments

Post a Comment