Html Web Pages: Registation Form with Social Link Using Html and Css

Index.html:
= = = == = =
<html>
<head>
<title>RegistationForm</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="login-box">
<div class="left-box">
<h1> RegistationForm</h1>
<input id="if" type="text" name="fname" placeholder="Firstname"/>
<input id="if" type="text" name="lname" placeholder="Lastname"/>
<input id="if" type="text" name="uname" placeholder="Username"/>
<input id="if" type="password" name="pword" placeholder="Password"/>
<input id="s" type="submit" name="reg" value="Registar"/>
</div>
<div class="right-box">
<span class="signinwith">sig in with<br/>Social Network</span>
<button class="social facebook">log in with Facebook</button>
<button class="social twitter">log in with twitter</button>
<button class="social google">log in with Google+</button>
</div>
<div class="or">OR</div>
</div>

</body>
</html>

Style.css :
= = = = = =

body
{
margin:0;
padding:0;
background:#efefef;
font-size:16px;
color:#777;
font-family:sans-serif;
font-weight:300;

}
#login-box
{
position:relative;
margin:5% auto;
height:400px;
width:600px;
background:#fff;
box-shadow: 0 2px 4px rgba(0,0,0,0,6);

}
.left-box
{
position:absolute;
top: 0;
left: 0;
box-sizing:border-box;
padding:40px;
width:300px;
height:400px;
}
h1
{
margin:0 0 20px 0;
font-weight:300;
font-size:28px;
}

#if
{
display:block;
box-sizing:border-box;
margin-bottom:20px;
padding:4px;
width:220px;
height:32px;
border:none;
outline:none;
border-bottom:1px solid #aaa;
font-family:sans-serif;
font-weight:400;
font-size:15px;
transition:0.2s ease;

}
#s
{
margin-bottom:28px;
width:120px;
height:32px;
background:#f44336;
border:none;
border-radius:2px;
color:#fff;
font-family:sans-serif;
font-weight:500;
text-transform:uppercase;
transition:0.2s ease;
cursor:pointer;

}
#s:hover,
#s:focus
{
background:#ff5722;
transition:0.2s ease;
}

.right-box
{
position:absolute;
top: 0;
right: 0;
box-sizing:border-box;
padding:40px;
width:300px;
height:400px;
background-image:url
background-size:cover;
background-position:center;
}
.or
{
position:absolute;
top:180px;
left:265px;
width:40px;
height:40px;
background:#efefef;
border-radius:50%;
box-shadow:0 2px 4px rgba(0,0,0,0,6);
line-height:40px;
text-align:center;

}
.right-box .signinwith
{
display:block;
margin-bottom:48px;
font-size:28px;
color:#efff;
text-align:center;
text-shadow:0 2px 4px rgba(0,0,0,0,6);

}
button.social
{
margin-bottom:28px;
width:220px;
height:36px;
border:none;
border-radius:2px;
color:#fff;
font-family:sans-serif;
font-weight:500;
transition:0.2s ease;
cursor:pointer;

}
.facebook
{
background:#32508e;
}

.twitter
{
background:#55acee;
}
.google
{
background:#dd4b39;
}

Html Web Pages

Wednesday, 24 April 2019

Registation Form with Social Link Using Html and Css

1 comment:

Blogroll

About