NIA KODIGU MAK HANESNA TUIR MAI NE'E :
File Name : index.html
|
<!DOCTYPE
html> <html> <head> <title>trasparent</title> <link
rel="stylesheet" type="text/css"
href="style.css"> </head> <body
background="images/42.jpg"> <!--div
1--><div class="blur"> </div><!--div
taka 1--> <div
class="formConten blur"><!--div 2--> <img src="RDTLL.png"
class="avatarImg"><!--class husi imagen 1--> <h2>Form
Login</h2> <form> <label>Email</label> <input type="Email"
name="Email" placeholder="tau email" required> <label>Password</label> <input
type="Password" name="Password" placeholder="tau
Password" required> <input type="submit"
name="submit" value="Login"> <div
class="remenber"><!--div 3--> <div class="login"><!--div
4-->
<!--div 5--><div
class="Oroption">Or</div><!--div taka 5--> </div><!--div taka
3--> <!--div
6--><div class="link"> <!--div
7--><div class="facebook"><img
src="images/fb.png" alt="fb"> </div><!--div
taka 7-->
<!--div
8--><div class="google"><img
src="images/google.png" alt="google"> </div><!--div taka
8-->
</div> <div
class="signup">laiha Acout ?<a href="#">Rejist
Now</a></div> </div><!--div taka
4--> </form> </div><!--div
taka 2--> </body> </html> |
CSS / FILE NAME : style.css
|
@font-face{ font-family:
'muli Regular'; font-style:
normal; font-weight:
normal; src:local('muli
Regular'), url('muli Regular.woff') format('woff'); } body{ margin: 0; padding: 0; font-family:
"muli Regular"; } body:befor{ content: ''; position: fixed; width:
100vw;/*vw nia funsaun sigla katak viewpost width*/ height:
100vh;/*vh nia funsaun sigla katak viewpost height*/ background:
url(images/42.jpg); background-position:
center center; background-repeat:
no-repeat;/*laiha repete */ background-attachment:
fixed; background-size:
cover; font-family:
"muli Regular"; } .blur{ background:
rgb(0 0 0/20%); backdrop-filter:blur(6px); height:
100vh;/*vh nia funsaun sigla katak viewpost height*/ width: 100%; } .formConten{ position:
absolute; top: 50%; left: 50%; transform:
translate(-50%, -50%); width: 400px; height: 550px; padding: 80px
40px; box-sizing:
border-box; background:
rgb(255 255 225/11%); box-shadow: -1px
4px 28px 0px rgba(0,0,0,0.75); border-radius: 10px; } .avatarImg{ position:
absolute; width: 80px; height: 80px; border-radius:
50%; overflow:
hidden; top:
calc(-80px/2); left: calc(50% -
40px); } .formConten h2{ margin: 0; padding: 0; color: #fff; text-align:
center; text-transform:
uppercase; font-family:
sans-serif; } .formConten label{ margin: 0; padding: 0; font-weight:
bold; color: #fff; } .formConten input{ width: 100%; margin-bottom:
20px; } .formConten input[type="text"], .formConten
input[type="password"], .formConten input[type="email"]{ border:none; border-bottom:
1px solid #fff; background:
transparent; outline: none; height: 40px; color: red; font-size: 16px; } .formConten input[type="submit"]{ color: #000; font-size: 16px; background:
#e8e8e8; cursor: pointer; border-radius:
5px; padding: 10px
10px 10px 10px; } .formConten input[type="submit"]:hover{ color: yellow; background: red; } .formConten a{ color: #fff; font-size: 14px; font-weight:
bold; text-decoration:
none; } input[type="checkbok"]{ width: 6px; } .remenber span{ color: #fff; font-family:
sans-serif; } .remenber span a{ color: #fff; font-family:
sans-serif; } .Oroption:before{ content:
""; display: block; width: 115px; height: 1px; background:
#e8e8e8; left:0; position:
absolute; left: 15%; margin-top:
10px; } .Oroption:after{ content:
""; display: block; width: 115px; height: 1px; background:
#e8e8e8; right: 58px; position:
absolute; margin-top:
-10px; } .link{ display: flex; cursor: pointer; color: white; margin: 0 0 20px
0; } .facebook{ width: 80%; height: 31px; line-height:
45px; border:1px solid
#1f89d4; border-radius:
5px; } .google{ width: 80%; height: 31px; line-height:
45px; border:1px solid
#1f89d4; border-radius:
5px; } .facebook img, .google img{ width: 100%; } .link i{ font-size: 17px; } .signup{ font-size: 15px; color: white; font-family:
sans-serif; text-align:
center; } .signup a { color: #387aff; text-decoration:
none; } .login{ color: white; text-align:
center; margin: 20px 0; } |
