Wednesday, October 16

Form

SignUp Form with HTML and CSS

SignUp Form with HTML and CSS

Form, Web Development
HTML <!DOCTYPE html> <html> <head> <title> SignUp Form with HTML and CSS</title> <link rel ="stylesheet" href ="style.css"> </head> <body> <div id="login-box"> <div class="left"> <h1>SignUp Now</h1> <input type="text" name="username" placeholder="Username" /> <input type="text" name="email" placeholder="E-mail" /> <input type="password" name="password" placeholder="Password" /> <input type="password" name="password2" placeholder="Retype password" /> <input type="submit" name="signup_submit" value="SignUp" /> </div> </div> </body> </html> CSS *{ box-sizing:border-box; } body{ background:url('pic.jpg'); background-size:cover; } #login-box { top:50%; left:50%; position:absolute; transf...
Animated Login Form

Animated Login Form

Form, Web Development
Animated Login Form HTML <!DOCTYPE html> <html> <head> <title> Animated Login Form</title> <link rel="stylesheet" href ="style.css"> </head> <body> <figure class="logo"> <figcaption class="logo__text">Paradise<br>Travels</figcaption> </figure> <label for="css-toggle" class="button">Account Login</label> <!-- HIDDEN ELEMENTS--> <input type="checkbox" id="css-toggle" name="css-toggle"> <div class="form-wrapper"> <form action=""> <h3 style="animation-delay: 0.4s" class="form__header folding--effect" >Paradise Travels</h3> <ul class="bd"> <li style="animation-delay: 0.6s" class="form__item folding--effect"> <input type="text" id="username" placeholder="Username"> ...