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

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

Xiaomi Mi 5c

HIGHLIGHTS Xiaomi Mi 5c is priced at CNY 1,499 It is powered by the company's in-house Surge S1 SoC The smartphone will be available in China on March 3 Xiaomi Mi 5c Specifications The new Xiaomi Mi 5c will be the first to be powered by the Surge S1 processor, which will be coupled with 3GB of RAM. It features a 5.15-inch full-HD (1080x1920 pixels) curved glass display with a pixel density of 428ppi, 64GB inbuilt storage, and supports dual-SIM (Nano + Nano) cards. Display 5.15-inch Processor 2.2GHz octa-core Front Camera 8-megapixel Resolution 1080x1920 pixels RAM 3GB OS Android Android 6.0 Storage 64GB Rear Camera 12-megapixel Battery Capacity 2860mAh
Post a Comment
Read more