Awesome Login
Awesome Login Gif Template
Add this awesome login which is easily customizable with your favorite gifs or images to your websites or apps.
Source Code
HTML with CSS
<html>
<head>
<style>
body
{
}
#form
{
position:absolute;
top:50px;
left:10%;
height:360px;
width:300px;
border-radius:15px;
box-shadow: 0px 0px 10px 10px #00aaaa;
background-image:url(https://thumbs.gfycat.com/DarlingTornAsiaticmouflon.webp);
background-repeat:repeat;
}
#a
{
position:fixed;
top:10px;
left:135px;
border:#0099cc solid 2px;
border-radius:50%;
}
#title
{
position:fixed;
text-align:center;
top:100px;
left:40px;
font-size:32px;
}
#name
{
position:fixed;
top:190px;
left:70px;
}
.fields-class
{
position:relative;
top:0px;
left:40px;
height:30px;
width:54%;
padding-left:15px;
font-size:18px;
}
#submit
{
position:fixed;
top:280px;
left:30px;
}
.submit-class
{
position:relative;
top:0px;
left:40px;
height:30px;
width:233px;
font-size:18px;
color:#000000;
background:#00bbbb;
}
.submit-class:hover
{
cursor:pointer;
background:#333333;
color:#FFFFFF;
}
#fp
{
position:fixed;
top:360px;
left:30px;
}
#fp-id
{
position:relative;
top:0px;
left:40px;
height:30px;
width:233px;
font-size:18px;
color:#008888;
border:#0099CC solid 2px;
border-radius:20px;
opacity:20%;
}
#fp-id:hover
{cursor:pointer;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Inspired by a design from Holy Muyanja Alyx-->
<title>Awesome Login</title>
</head>
<body>
<div id="form">
<img id="a" src="https://i.pinimg.com/originals/92/c5/b2/92c5b20f647f2b2d546ee54131f18148.gif" height="100" width="100" />
<div id="title">
<font color="#00eeee">Free Code Examples <br />Login</font>
</div>
<div id="name">
<form>
<input type="text" size="100" placeholder="UserName" class="fields-class" /><br /><br />
<input type="password" size="100" placeholder="Password" class="fields-class" />
</form>
</div>
<div id="submit">
<form>
<input type="submit" value="Login" class="submit-class" /><br><input type="submit" value="Sign Up" class="submit-class" />
</form>
</div>
<div id="fp">
<form>
<input type="submit" value="Forgot Password ??" id="fp-id" />
</form>
</div>
</div>
</body>
</html>
<head>
<style>
body
{
}
#form
{
position:absolute;
top:50px;
left:10%;
height:360px;
width:300px;
border-radius:15px;
box-shadow: 0px 0px 10px 10px #00aaaa;
background-image:url(https://thumbs.gfycat.com/DarlingTornAsiaticmouflon.webp);
background-repeat:repeat;
}
#a
{
position:fixed;
top:10px;
left:135px;
border:#0099cc solid 2px;
border-radius:50%;
}
#title
{
position:fixed;
text-align:center;
top:100px;
left:40px;
font-size:32px;
}
#name
{
position:fixed;
top:190px;
left:70px;
}
.fields-class
{
position:relative;
top:0px;
left:40px;
height:30px;
width:54%;
padding-left:15px;
font-size:18px;
}
#submit
{
position:fixed;
top:280px;
left:30px;
}
.submit-class
{
position:relative;
top:0px;
left:40px;
height:30px;
width:233px;
font-size:18px;
color:#000000;
background:#00bbbb;
}
.submit-class:hover
{
cursor:pointer;
background:#333333;
color:#FFFFFF;
}
#fp
{
position:fixed;
top:360px;
left:30px;
}
#fp-id
{
position:relative;
top:0px;
left:40px;
height:30px;
width:233px;
font-size:18px;
color:#008888;
border:#0099CC solid 2px;
border-radius:20px;
opacity:20%;
}
#fp-id:hover
{cursor:pointer;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Inspired by a design from Holy Muyanja Alyx-->
<title>Awesome Login</title>
</head>
<body>
<div id="form">
<img id="a" src="https://i.pinimg.com/originals/92/c5/b2/92c5b20f647f2b2d546ee54131f18148.gif" height="100" width="100" />
<div id="title">
<font color="#00eeee">Free Code Examples <br />Login</font>
</div>
<div id="name">
<form>
<input type="text" size="100" placeholder="UserName" class="fields-class" /><br /><br />
<input type="password" size="100" placeholder="Password" class="fields-class" />
</form>
</div>
<div id="submit">
<form>
<input type="submit" value="Login" class="submit-class" /><br><input type="submit" value="Sign Up" class="submit-class" />
</form>
</div>
<div id="fp">
<form>
<input type="submit" value="Forgot Password ??" id="fp-id" />
</form>
</div>
</div>
</body>
</html>
Click here to run this Code
I hope you enjoyed this content please consider supporting the development of Free Code Examples
Comments
Post a Comment