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>

Click here to run this Code




I hope you enjoyed this content please consider supporting the development of Free Code Examples


Thank you and have a Blessed Day










Try these Fun Games by Bobbie:


Ocean Treasures Game


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News









Comments

Popular posts from this blog