complete sign up form using css &html

Today i'll learn you how to make - design register - Sign up form using only CSS + HTML
I hope you will like it
thank you for your support

So now, First you hve to follow the steps given below..

The Steps Are

CREATE HTML FILE WITH NAME REGISTER. HTML
PASTE BELOW HTML CODE IN TO REGISTER.HTML FILE

This is how your HTML File Look Like

<!DOCTYPE HTML> <html> <head> <title>SIGN UP : AIO-TUTORIALS.BLOGSPOT.IN</title> <link href="style.css" rel="stylesheet" type="text/css" media="all"/> <style> </style> </head> <body> <div id="header-wrapper"> <div id="header" class="container"> <div id="logo"> <h1> <a href="#">Site Logo</a></h1> </div> <div id="menu"> <nav> <ul class="menu"> <a href="http://aio-tutorials.blogspot.in"> <li>Home</li> </a> <a href="#"> <li>Gallery</li> </a> <a href="#"> <li>Login</li> </a> <a href="#"> <li>About</li> </a> </ul> </nav> </div> </div> <div class="main"> <div class="register"> <div class="register-bottom"> <form method="post"> <h1> Sign Up</h1> <input type="text" name="fname" placeholder="Sarjil" required/> <input type="text" name="lname" placeholder="Shaikh" required/><br/> <input type="email" name="email" placeholder="Me@myplace.com" required/><br/> <input type="text" name="mobile" placeholder="+91 97121****" required style="width:14em;"/><br/> <input type="password" name="password" class="password" placeholder="Password" required style="width:14em;"/><br/><br/> <input type="submit" name="submit" value="Sign Up"/> </form> </div> </div> </div> </div> <div class="footer"> <p> © 2016 HTML Basic Tamplate All rights reserved | Design by <a href="http://www.facebook.com/sarjil.96">Sarjil Shaikh</a> - <a href="http://aio-tutorials.blogspot.in">AIO-TUTORIALS</a></p> </div> </body> </html>

NOW CREATE CSS FILE NAMED style.css THEN COPY AND PASTE FOLLOWING CSS CODE INTO style.css FILE

body { margin: 0px; padding: 0px; background:black url(images/head-bg.jpg) no-repeat center fixed; font-family: 'Didact Gothic', sans-serif; font-size: 12pt; font-weight: 200; color: #FFF; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .container { overflow: hidden; margin: 0em auto; width: 1200px; } #wrapper { position: relative; padding: 5em 0em 10em 0em; background:rgba(0,0,0,0); margin:0px auto; width:90%; border:2px dashed white; } #header-wrapper { position: relative; padding: 0em 0em 7em 0em; } #header { position: relative; padding: 5em 0em; } #logo { position: absolute; top: 3.6em; left: 0; } #logo h1 { font-size: 2.6em; color: #79C255; } #logo a { text-decoration: none; color: rgba(255,255,255,1); } #menu { position: absolute; top: 4.5em; right: 0; } nav li { border-style: solid; border-top-width: 2px; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; text-align:center; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } nav ul li:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,0,.3); -webkit-transform: scaleY(0); transform: scaleY(0); -webkit-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transition-property: transform; transition-property: transform; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; } nav ul li :hover, nav ul li:focus, nav ul li:active { color: white; } nav ul li:hover:before, nav ul li:focus:before, nav ul li:active:before { -webkit-transform: scaleY(1); transform: scaleY(1); -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } nav ul a { padding-left:3px; padding-right:3px; border-radius:5px; margin-right:2px; margin-left:2px; } nav ul a li { line-height:45px; text-decoration:none; color:white; display:inline-block; padding:0px 10px 2px 10px; margin-right:10px; margin-left:10px; } .main { margin:1em 0 0em; } .register { margin:0px auto; width: 19%; background:grey url(images/regbg.jpg) no-repeat center fixed; border:2px solid #127DA7; padding: 3em; position: relative; border:2px solid white; } .register h1 { font-size: 2em; margin: 1em 0; margin-top:0px; text-align:center; color: #fff; font-family: 'PT Sans Narrow', sans-serif; } .register-bottom input[type="text"] { font-size: 1em; width:6em; padding: .3em .4em; margin:0.3em; border-radius:3px; outline: none; background:rgba(0,0,0,0); border-left:2px solid white; color:white; text-align: center; font-family: 'PT Sans Narrow', sans-serif } .register-bottom input[type="email"] { font-size: 1em; width:14em; padding: .3em .4em; margin:0.3em; border-radius:3px; outline: none; background:rgba(0,0,0,0); border-left:2px solid white; color:white; text-align: center; font-family: 'PT Sans Narrow', sans-serif } .register-bottom input[type="password"] { font-size: 1em; width:6em; padding: .3em .4em; margin:0.3em; border-radius:3px; outline: none; background:rgba(0,0,0,0); border-left:2px solid white; color:white; text-align: center; font-family: 'PT Sans Narrow', sans-serif; } .register-bottom input[type="submit"]{ font-size: 1.5em; padding: .3em .3em; width: 5em; border: none; text-transform: capitalize; outline: none; border-top:2px solid white; border-bottom:2px solid white; border-left:none; border-right:none; background:rgba(0,0,0,0); color: #fff; cursor: pointer; font-family: 'PT Sans Narrow', sans-serif; margin: 0 auto; display: block; vertical-align: middle; -webkit-transform: translateZ(0); transform: translateZ(0); box-shadow: 0 0 1px rgba(0, 0, 0, 0); -webkit-backface-visibility: hidden; backface-visibility: hidden; -moz-osx-font-smoothing: grayscale; -webkit-transition-duration: 0.5s; transition-duration: 0.5s; } .register-bottom input[type="submit"]:hover, .register-bottom input[type="submit"]:focus, .register-bottom input[type="submit"]:active { -webkit-transform: scale(1.2); transform: scale(1.2); -webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36); } .password { margin: 1.5em 0; } .register-bottom p { font-size: 1em; text-align: center; margin-top: 2em; margin-bottom:0em; color: #555; } .register-bottom a { text-decoration:none; } .register-bottom a p:hover { color: #127DA7; } .footer { text-align: center; padding: 3em 0; } .footer p { font-size: .9em; color: #fff; margin: 0px; } .footer p a:hover { color: #fff; } .footer p a { color: #fff; }

"SureToCode - Your Ultimate Guide to Programming and Technology"

Search This Blog

complete sign up form using css &html

The Steps Are

I HOPE I WILL LIKE THIS TUTORIAL

PLEAS DO NOT FORGET TO SHARE

SUBCRIBE TO GET NEWS ABOUT MY LATEST POSTS

TAGS :

Comments

Post a Comment