these are my codes:
CSS:
body {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body ::-webkit-input-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
body :-moz-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body ::-moz-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
opacity: 1;
font-weight: 300;
}
body :-ms-input-placeholder {
font-family: 'Source Sans Pro', sans-serif;
color: white;
font-weight: 300;
}
.wrapper {
background: dimgrey;
position: absolute;
top: 25%;
left: 0;
width: 100%;
height: 1000px;
margin-top: -200px;
}
.wrapper.form-success .container h1 {
-webkit-transform: translateY(85px);
transform: translateY(85px);
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 80px 0;
height: 400px;
text-align: center;
}
.container h1 {
font-size: 40px;
font-weight: 200;
}
form {
padding: 20px 0;
position: relative;
z-index: 2;
}
form input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
border: 1px solid rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.2);
width: 250px;
border-radius: 3px;
padding: 10px 15px;
margin: 0 auto 10px auto;
display: block;
font-size: 18px;
color: white;
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
font-weight: 300;
}
form input:hover {
background-color: rgba(255, 255, 255, 0.4);
}
form input:focus {
background-color: white;
width: 300px;
color: #807e80;
}
form button {
outline: 0;
background-color: white;
border: 0;
padding: 10px 15px;
color: #3a3c3d;
border-radius: 4px;
width: 250px;
cursor: pointer;
font-size: 22px;
}
form button:hover {
background-color: #f5f7f9;
}
@-webkit-keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
@keyframes square {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
-webkit-transform: translateY(-700px) rotate(600deg);
transform: translateY(-700px) rotate(600deg);
}
}
HTML:
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="body register.css"/>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1>Welcome</h1>
<form class="form">
<input type="text" placeholder="name">
<input type="contact" placeholder="contact number">
<input type="add" placeholder="Country">
<input type="Bday" placeholder="Birthday">
<input type="Age" placeholder="Age">
<input type="pin" placeholder="Pin number">
<button type="submit" id="sign">Sign-up</button>
</form>
</div>
</div>
while this the result of it:
as you can see there are 6 input boxes. i just wanna know how can i divide it into 2 groups. 3 to left and 3 to right. please help me thank you so much :)
Aucun commentaire:
Enregistrer un commentaire