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: click see result

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

Popular posts from this blog

SVG stroke-linecap doesn't work for circles in Firefox? -

-
i've got problem svg stroke-linecap attribute. i've got circular progress bar in angularjs , set outer circle (blue one) have rounded "ends". @ fiddle . <svg ... height="130" width="130"> <!-- ngif: background --> <circle ... ng-if="background" fill="#fff" class="ng-scope" stroke-width="13" stroke="#cc3399" r="57.5" cy="65" cx="65" stroke-linecap="round" /> <!-- end ngif: background --> <circle ... fill="none" stroke-dashoffset="36.12831551628261" stroke-dasharray="361.28315516282623" stroke-width="13" stroke="#432db3" stroke-linecap="round" r="57.5" cy="65" cx="65" transform="rotate(-89.9, 65, 65)" /> </svg> how can that? ...
Read more

routes - Laravel 4 Wildcard Routing to Different Controllers -

-
realizing i'm going take beating this, have several questions "best practices" when constructing laravel route. do laravel routes run "first come first serve" top bottom? if route found, pass control controller (or perform action) , terminate? i have part of application acts url shortner. so, route looks this: route::get('/{id}', array('as' => 'home.text', 'uses' => 'homecontroller@text'), function($id){ //make sure id exists before pushing controller. if (storage::where('shortcode','=', $id)->count() > 0) { // route found } }); how can improved? one, i'm not sure how pass processing on controller conditionally.. sort of controller::make() ..? 3) there better way in laravel check if record exists versus doing mode::where('column','=','value')->count() 4) have legacy urls http://url.com/?...
Read more

cross browser - XSLT namespace-alias Not Working in Firefox or Chrome -

-
i transforming xhtml xhtml, need xslt stylesheet part of resulting document (the stylesheet contained in <script type"text/template"> element. using the xsl:namespace-alias instruction, works fine in ie, fails in both chrome , firefox. here relevant code: <xsl:output doctype-system="about:legacy-compat" omit-xml-declaration="yes" indent="yes" method="html" media-type="application/xhml" encoding="utf-8"/> <xsl:namespace-alias stylesheet-prefix="wxsl" result-prefix="xsl" /> <xsl:template match="head"> <!-- code omitted clarity --> <script type="text/template"> <wxsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns="http://www.w3.org/1999/xhtml" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:eli="local"> ...
Read more