HTML5 Add cool responsive Form Landscaping Template plugin Tutorial

First, the HTML structure
<form class= "Cbp-mc-form" >
<div class= "Cbp-mc-column" >
<label for= "first_name" >first name</label>
<input type= "text" id= "first_name" name= "first_name" placeholder= "Jonathan" >
<label for= "last_name" >last name</label>
<input type= "text" id= "last_name" name= "last_name" placeholder= "Doe" >
<label for= "Email" >email address</label>
<input type= "text" id= "email" name= "email" placeholder= "[email protected]" >
<label for= "Country" >Country</label>
<select id= "Country" name= "Country" >
<option>choose a country</option>
<option>France</option>
<option>Italy</option>
<option>Portugal</option>
</select>
<label for= "Bio" >Biography</label>
<text area id= "bio" name= "bio" ></textarea>
</div>
<div class= "Cbp-mc-column" >
<label for= "Phone" >phone number</label>
<input type= "text" id= "phone" name= "Phone" placeholder= "+351 999 999" >
<label for= "Affiliations" >Affiliations</label>
<textarea id= "Affiliations" name= "affiliations" ></textarea>
<label>Occupation</label>
<select id= "occupation" name= "occupation" >
<option>choose an occupation</option>
<option>web designer</option>
<option>web developer</option>
<option>Hybrid</option>
</select>
<label for= "Cat_name" >cat ' s name</label>
<input type= "text" id= "Cat_name" name= "Cat_name" placeholder= "Kitty" >
<label for= "Gagdet" >favorite gadget</label>
<input type= "text" id= "Gagdet" name= "Gagdet" placeholder= "Annoy-a-tron" >
</div>
<div class= "Cbp-mc-column" >
<label>type of Talent</label>
<select id= "talent" name= "talent" >
<option>choose a talent</option>
<option>ninja silence</option>
<option>sumo power</option>
<option>samurai precision</option>
</select>
<label for= "Drink" >favorite drink</label>
<input type= "text" id= "Drink" name= "Drink" placeholder= "Green Tea" >
<label for= "Power" >special power</label>
<input type= "text" id= "Power" name= "Power" placeholder= "anti-gravity" >
<label for= "Weapon" >weapon of choice</label>
<input type= "Weapon" id= "weapon" name= "weapon" placeholder= "lightsaber" >
<label for= "Comments" >Comments</label>
<textarea id= "Comments" name= "comments" ></textarea>
</div>
<div class= "Cbp-mc-submit-wrap" ><input class= "Cbp-mc-submit" type= "Submit" value= "Send Your Data"/></ Div>
</form>


Second, CSS
. cbp-mc-form {
position:relative;
}

/* clearfix hack */
. Cbp-mc-form:before,
. cbp-mc-form:after {
Content: ""; display:table;
}

. cbp-mc-form:after {
Clear:both;
}

. cbp-mc-column {
width:33%;
padding:10px 30px;
Float:left;
}

. Cbp-mc-form Label {
Display:block;
padding:40px 5px 5px 2px;
Font-size:1.1em;
Text-transform:uppercase;
letter-spacing:1px;
Cursor:pointer;
}

. Cbp-mc-form input,
. Cbp-mc-form TextArea,
. cbp-mc-form Select {
font-family: ' Lato ', Calibri, Arial, Sans-serif;
line-height:1.5;
Font-size:1.4em;
padding:5px 10px;
Color: #fff;
Display:block;
width:100%;
Background:transparent;
}

. Cbp-mc-form input,
. cbp-mc-form TextArea {
BORDER:3PX solid #fff;
}

. cbp-mc-form TextArea {
min-height:200px;
}

. Cbp-mc-form Input:focus,
. Cbp-mc-form Textarea:focus,
. cbp-mc-form label:active + input,
. Cbp-mc-form Label:active + TextArea {
Outline:none;
BORDER:3PX solid #10689a;
}

. cbp-mc-form Select:focus {
Outline:none;
}

-webkit-input-placeholder {
Color: #10689a;
Font-style:italic;
}

-moz-placeholder {
Color: #10689a;
Font-style:italic;
}

-moz-placeholder {
Color: #10689a;
Font-style:italic;
}

-ms-input-placeholder {
Color: #10689a;
Font-style:italic;
}

Cbp-mc-submit-wrap {
Text-align:center;
padding-top:40px;
Clear:both;
}

Cbp-mc-form Input.cbp-mc-submit {
Background: #10689a;
Border:none;
Color: #fff;
Width:auto;
Cursor:pointer;
Text-transform:uppercase;
Display:inline-block;
padding:15px 30px;
Font-size:1.1em;
border-radius:2px;
letter-spacing:1px;
}

Cbp-mc-form Input.cbp-mc-submit:hover {
Background: #1478b1;
}

@media screen and (max-width:70em) {
Cbp-mc-column {
width:50%;
}
Cbp-mc-column:nth-child (3) {
width:100%;
}
}

@media screen and (Max-width:48em) {
Cbp-mc-column {
width:100%;
padding:10px;
}
}

Keymob Mobile advertising Platform, the most professional mobile phone advertising optimization management platform. Platform with high-quality resources, stable SDK, accurate data analysis, for the application of developers to bring higher revenue, committed to creating a high quality, efficient advertising technology Service platform.

HTML5 Add cool responsive Form Landscaping Template plugin Tutorial