html - CSS form with effect -
these 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 result of it: 
as can see there 6 input boxes. wanna know how can divide 2 groups. 3 left , 3 right. please me thank :)
how this? simple solution.
<form class="form" method='post'> <div style="width:50%;float:left;"> <input type="text" name='name' placeholder="name"> <input type="tel" name='contact' placeholder="contact number"> <input type="text" name='country' placeholder="country"> </div> <div style="width:50%;float:left;"> <input type="date" name='bday' placeholder="birthday"> <input type="number" name='age' placeholder="age"> <input type="number" name='pin' placeholder="pin number"> </div> <button type="submit" id="sign">sign-up</button> </form> i've changed input types valid types. gave pin, bday etc not valid. can go through link more information this.
Comments
Post a Comment