Soft Form


<!DOCTYPE html>
<html>
<head>
<title>Soft Form Dark</title>
</head>
<body>
<div class="form">
<h2>Login</h2>
<form action="#" method="post">
<div class="input">
<div class="inputBox">
<label>User</label>
<input type="text" name="" placeholder="example@xyz.com">
</div>
<div class="inputBox">
<label>Password</label>
<input type="text" name="" placeholder="......">
</div>
<div class="inputBox">
<label>Password</label>
<input type="Submit" name="" value="Sing in">
</div>
<p class="forget">Forget Password ? <a href="#">Click Here</a></p>
</div>
</form>
</div>
</body>
</html>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: arial;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #131419;
}
.form{position: relative; width: 350px; padding: 40px 40px 60px; background-color: #131419; border-radius: 10px; text-align: center; box-shadow: -5px -5px 10px rgba(255,255,255,0.05),
5px 5px 15px rgba(0,0,0,0.05);}
.form h2{color: #c7c7c7; font-weight: 500; text-transform: uppercase; letter-spacing: 4px;}
.form .input{text-align: left; margin-top: 40px;}
.form .input .inputBox{margin-top: 20px;}
.form .input .inputBox label{display: block; color: #868686; margin-bottom: 5px; font-size: 18px;}
.form .input .inputBox input{width: 100%; height: 50px; background-color: #131419; border: none; outline: none; border-radius: 40px; padding: 5px 15px; color: #fff; font-size: 18px; color: #03a9f4; box-shadow: inset -2px -2px 6px rgba(255,255,255,0.1),
inset 2px 2px 6px rgba(0,0,0,0.8);}
.form .input .inputBox input[type="Submit"]{
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255,255,255,0.1),
2px 2px 6px rgba(0,0,0,0.8);}
}
.form .input .inputBox input[type="Submit"]:active{
color: #006c9c;
margin-top: 20px;
box-shadow: -2px -2px 6px rgba(255,255,255,0.1),
2px 2px 6px rgba(0,0,0,0.8);
}
.form .input .inputBox input::placeholder{
color: #555;
font-size: 18px;
}
.forget{
margin-top: 30px;
color: #555;
}
.forget a{
color: #ff0047;
}
</style>

Comments

Post a Comment

Popular posts from this blog

Call Desktop

 <div class="phone_lefts-side glow" data-target="html">     <a title="Contact Us" href="tel:+91 "><i class="fa fa-phone"></i></a> </div> /*Call Me*/ .phone_lefts-side{position:relative;} .phone_lefts-side a{ position: fixed;    bottom: 50px;    color:white;    background-color:#03a84e;   animation: topBottom 4s infinite;    z-index: 11111;    left: 20px;    background-color: #0000ff;    color: white;    padding: 11px 16px;    border-radius: 50%;    font-size: 20px;    animation: bounce 4s infinite alternate;} .glow {  font-size: 80px;  color: #fff;  text-align: center;  -webkit-animation: glow 1s ease-in-out infinite alternate;  -moz-animation: glow 1s ease-in-out infinite alternate;  animation: glow 1s ease-in-out infinite alternate;} @-webkit-keyframes glow { from {text-shadow: 0 0 10px ...
Read more

Right click disable

 <body class="tg-home" onLoad="disableClick()" oncontextmenu="return false"> //hide code// document.onkeydown = function(e) {     if(e.keyCode == 123) {      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){      return false;     }     if(e.ctrlKey && e.shiftKey && e.keyCode == 'C'.charCodeAt(0)){      return false;     }        }  ///F12//  //------------------------------ function unloadJS(scriptName) {   var head = document.getElementsByTagName('head').item(0);   var js = document.getElementById(sc...
Read more

soft button

Image
<!DOCTYPE html> <html> <head> <title>Soft Button</title> </head> <body> <a href="#"><span>Button</span></a> </body> </html> <style type="text/css"> *{ margin: 0px; padding: 0px; font-family: arial; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #f2f3f7; } a{ position: relative; display: inline-block; padding: 10px 30px; text-decoration: none; text-transform: uppercase; font-weight: 500; letter-spacing: 2px; color: #5a84a2; font-size: 18px; border-radius: 40px; box-shadow: -2px -2px 8px rgba(255,255,255,1), -2px -2px 12px rgba(255,255,255,0.5), inset 2px 2px 4px rgba(255, 255, 255, 0.1), 2px 2px 8px rgba(0,0,0,0.15); } a:hover{ box-shadow: inset -2px -2px 8px rgba(255,255,255,1), inset -2px -2px 12px rgba(255,255,255,0.5), inset 2...
Read more