Skip to main content

Transparent Login form with HTML & CSS


HTML Code

<html> <head> <title></title> <link href="style.css" rel="stylesheet" type="text/css"></link> </head> <body> <div class="log-box"> <img class="usrimg" src="usr.png" /> <h2> Login to your Account</h2> <form> Email<br /> <input name="" placeholder="Enter Email" required="" type="text" /> Password<br /> <input name="" placeholder="Enter Password" required="" type="Password" /> <input name="" type="submit" value="Sign In" /> <a href="http://www.mudasirh.blogspot.in">Forget Password</a> </form> </div> </body> </html>

CSS Code

body { margin: 0; padding: 0; font-family: sans-serif; background: url(background.jpg); background-size: cover; } .log-box{ background: rgba(0,0,0,.5); color: #fff; width: 320px; height: 420px; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; position: absolute; padding: 70px 30px; } .usrimg { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; position: absolute; top: calc(-100px/2); left: calc(50% - 50px); } h2{ margin: 0; padding: 0 0 20px; text-align: center; } .log-box p{ margin: 0; padding: 0; font-weight: bold; color: #fff; } .log-box input{ width: 100%; margin-bottom: 20px; } .log-box input[type="text"], .log-box input[type="password"] { border: none; border-bottom: 1px solid #fff; background: transparent; outline: none; height: 40px; color: #fff; font-size: 16px; } ::placeholder { color: rgba(255,255,255,.5); } .log-box input[type="submit"]{ border: none; outline: none; height: 40px; font-size: 18px; cursor: pointer; border-radius: 20px; } a{ text-decoration: none; color: #fff; }
Labels:

Comments

Post a Comment

Popular posts from this blog

iPhone 7 and iPhone 7 Plus Review

iPhone 7 and iPhone 7 Plus  launch this September  represented a departure from tradition for Apple - and in many ways, a risk. Instead of the usual tick-tock cycle where each ’S’ release is followed by a brand-new design, the new iPhone models look pretty similar to their counterparts from the previous two years, and sport nearly identical dimensions. iPhone 7 Review: Rs.  55,999 iPhone 7 Plus Review:                                                                                                                                         Rs.  69,580
Post a Comment
Read more

Gulmarg 2017 snowfall skiing

Post a Comment
Read more

Kashmiri language translator | English to Kashmiri | Language Translator | Kashmir | Learn Kashmiri

  About Kashmiri Language:                   Kashmir or Koshur   ( كٲشُر ) is an Indo-Aryan Language of the Kashmir region. It is primarily spoken in the Kashmir Valley of the state of Jammu and Kashmir in India. According to the   2011 census  figures  are 6,554,36 for Kashmiri as a "mother tongue"  and 6,797,587 for Kashmiri as a "language", Today Kashmir language  is spoken by around 8 million Kashmiris and Kashmiri language became an official language of Jammu and Kashmir in 2020 for the first time.         Vowels:                                                                         ...
Post a Comment
Read more