<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Montserrat:400,700'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div id="look">
<br>
<br>
<br>
<div class="form">
<p> Sign in to continue to Connectify</p>
<div class="profile"></div>
<div class="login-form">
<section id="content">
<form action="">
<input type="text" placeholder="Username" required="" id="username" />
<input type="password" placeholder="Password" required="" id="password" />
<button>Login</button>
</form>
<a href="#" class="pull-left">Need help?</a>
</section>
</div>
</div>
</div>
/* Form */
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 300px;
margin: 0 auto 100px;
padding: 50px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
text-align: center;
}
.profile{
margin-top:30px;
margin-left:70px;
margin-bottom:30px;
width:150px;
height:150px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: url('https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS-HjE-hnULb-LwfGrqkPHkRiL5vXsOv36t30wcbGh_22nMi83i1Q') no-repeat;
background-position:100% 20%;
background-size:125%;
-webkit-transition-duration: 0.6s; -moz-transition-duration: 0.6s; -o-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; transition-property: transform; overflow:hidden;
}
.profile:hover { -webkit-transform:rotate(360deg); -moz-transform:rotate(360deg); -o-transform:rotate(360deg); }
#content form { margin: 0 20px 0 0px ; position: relative }
#content form input[type="text"],
#content form input[type="password"] {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
-o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0,0,0,0.08) inset;
background: #eae7e7 url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) no-repeat;
border: 1px solid #c8c8c8;
color: #777;
font: 13px ;
margin: 0 0 10px;
padding: 15px 10px 15px 40px;
width: 89%;
}
#content form input[type="text"]:focus,
#content form input[type="password"]:focus {
background-color: #fff;
border: 1px solid black;
outline: none;
}
#username { background-position: 10px 10px !important }
#password { background-position: 10px -53px !important }
.form button {
outline: 0;
background:#4d79ff;
width: 100%;
border: 0;
padding: 15px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover{
background: #99b3ff;
color:white;
}
.form a {
margin:15px 0 0;
color: #1a1aff;
text-decoration: underline;
font-size: 12px;
}
#look {
background: #ffe6ff;
height:100%;
width:100%;
}
