-
Below, I've a web form which has all the text-fields stacked vertical upon each other, and I want the FirstName and LastName text-field inputs adjacent to each other.
-
Also, I can't get to animate the same hovering effects on these two fields, as that in the last two input text-fields.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="http://ift.tt/1iJFeCG">
<link rel="stylesheet" type="text/css" href="http://ift.tt/1v04N4O Two">
<link rel="stylesheet" type="text/css" href="http://ift.tt/1r5wBQo">
<link rel="stylesheet" type="text/css" href="http://ift.tt/1xg2FV4">
<title>FLUX - A Cloud Based Service</title>
</head>
<body>
<hgroup>
<h1>Flux</h1>
<i class="fa fa-cloud fa-4x"></i>
<h2>A Cloud Based Service</h2>
</hgroup>
<form action="index.html">
<div class="section-1">
<div>
<!-- <i class="fa fa-user fa-2x"></i> -->
<input type="text" class="text" value="First Name" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'First Name';}" id="active">
</div>
<div>
<input type="text" class="text" value="Last Name" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'Last Name';}" id="active">
</div>
<div class="clear"></div>
</div>
<div class="section-2">
<!-- <i class="fa fa-envelope fa-2x"></i> -->
<input type="text" class="text" value="user@email.com" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'user@email.com';}">
<!-- <i class="fa fa-key fa-2x"></i> -->
<input type="password" class="text" value="password" onfocus="this.value = '';" onblur="if(this.value=='') {this.value = 'password';}">
</div>
<h3>By creating an account, you agree to our <span class="term"><a href="#">Terms & Conditions</a></span></h3>
<div class="submit">
<input type="submit" value="Sign Up">
</div>
<h3 id="second-h3">Already a member? Click <a href="#">Here</a></h3>
</form>
<script type="text/javascript" src="/js/retina.min.js"></script>
</body>
</html>
CSS:
body {
background-image: url(../images/VBKHtidQKL.jpg);
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}
hgroup {
color: #fff;
text-align: center;
font-family: Lobster Two;
font-size: 36px;
font-stretch: extra-expanded;
}
form {
margin: auto;
height: 500px;
width: 300px;
padding: 10px;
align-content: center;
max-width: 1366px;
max-height: 768px;
}
h3 {
color: #fff;
font-family: Raleway;
}
#second-h3 {
text-align: right;
color: #ffffff;
font-family: Raleway;
}
.section-1 input[type="text"] {
padding: 15px;
font-size: 1.1em;
margin: 20px 0px;
color: #666666;
width: 87%;
cursor: pointer;
font-family: Raleway;
outline: none;
font-weight: 500;
background: #ffffff;
-webkit-transition: all 0.4s ease-out;
border-top: none;
border-bottom: none;
border-right: none;
border-left: 8px solid #fff;
}
.section-2 input[type="text"], input[type="password"] {
padding: 16px;
width: 92%;
font-size: 1em;
margin: 20px 0px;
color: #666666;
cursor: pointer;
outline: none;
font-weight: 700;
font-family: Raleway;
background: #ffffff;
-webkit-transition: all 0.4s ease-out;
border-top: none;
border-bottom: none;
border-right: none;
border-left: 8px solid #fff;
float: left;
}
.section-1 input[type="text"]:hover, .section-2 input[type="text"]:hover, input[type="password"]:hover, #active {
color: rgb(220, 220, 220);
border-left: 8px solid rgb(64, 164, 111);
}
.submit {
padding: 6px 4px;
text-align: center;
}
input[type="submit"] {
padding: 18px 30px;
color: #fff;
float: right;
font-family: Raleway;
background: rgb(64, 164, 111);
border: 1px solid rgb(64, 164, 111);
cursor: pointer;
font-size: 18px;
transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
outline: none;
width: 100%;
}
.submit[type="submit"]:hover {
background: rgb(7, 121, 61);
border: 1px solid rgb(7, 121, 61);
}
Aucun commentaire:
Enregistrer un commentaire