Responsive Web Design - Full Landing Page - Responsive Login Form with html and css Posted by Yahya Benlachheb on September 30, 2017 Get link Facebook Twitter Pinterest Email Other Apps HTML CODE <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Reponsive Login Form</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width , initial-scale=1.0"> </head> <body> <div class="d1"> </div> <div class="login"> <form class="" action="index.html" method="post"> <h2> Login Form</h2> <label for="">Email :</label> <input class="txtb" type="text" name="" value=""> <label for="">Password :</label> <input class="txtb" type="password" name="" value=""> <div class="check"> <input type="checkbox" name="" value=""> <span>Remamber Me</span> </div> <input class="btn" type="button" name="" value="Login"> </form> </div> </body> </html> CSS CODE body,html{ margin: 0; padding: 0; height: 100%; font-family: sans-serif; } .d1{ width: 70%; height: 100%; overflow: hidden; float: left; background: url(bg.jpg) center; } .login{ position: fixed; overflow: hidden; width: 100%; max-width: 500px; right: 0; margin: 0; background: #fff; height: 100%; z-index: 1; } .login form{ margin: 160px 30px; } .login h2{ font-size: 30px; color: #f44336; } .login label{ display: block; font-size: 18px; font-weight: 700; margin: 8px 0 } .txtb{ width: 100%; padding: 8px 0; font-size: 18px; } .check{ margin: 8px 0; } .btn{ display: block; float: right; background: #f44336; font-size: 18px; padding: 8px 50px; color: white; border: none; } Comments Edip BaranOctober 28, 2018 at 8:33 PMThank You :DDReplyDeleteRepliesReplybestdesigninfotechApril 9, 2021 at 10:24 AMThanks for sharing. Keep updating more and more web development company in hyderabadweb designers in hyderabadReplyDeleteRepliesReplyAdd commentLoad more... Post a Comment
Thank You :DD
ReplyDeleteThanks for sharing. Keep updating more and more web development company in hyderabad
ReplyDeleteweb designers in hyderabad