كود عمل صفخة تسجيل الدخول html + css ~ مواضيع مختلفة

                               كود html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyWebsite</title>
<link rel="stylesheet" href="b.css">
</head>
<body>
<div class="loginbox">
<img src="21.jpg" class="login">
<h2>Log In Here</h2>
<form>
<p>Email</p>
<input type="text" name="" placeholder="Enter Email">
<p>Password</p>
<input type="password" name="" placeholder="*******">
<input type="submit" name="" value="Sign In">
<a href="#">Forget Password</a>
</form>
</div>
</body>
</html>

      كود css

  body
{
margin: 0;
padding: 0;
background: url(cover.jpg);
background-size: cover;
font-family: sans-serif;
background-color:;
}
.loginbox
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 350px;
height: 420px;
padding: 80px 40px;
box-sizing: border-box;
background: rgba(0,0,0,.5);

}
.login
{
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;
color: #efed40;
text-align: center;
}
.loginbox p
{
margin: 0;
padding: 0;
font-weight: bold;
color: #fff;
}
.loginbox input
{
width: 100%;
margin-bottom: 20px;

}
.loginbox input[type="text"],
.loginbox 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);
}.loginbox input[type="submit"]
{
border: none;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
background: green;
cursor: pointer;
border-radius: 20px;
}
.loginbox input[type="submit"]:hover
{
background: #efed40;
color: #262626;
}
.loginbox a
{
color: #fff;
font-size: 14px;
font-weight: bold;
text-decoration: none;

}
النتيجة

تصنيف : اكواد برمجة

مواضيع مختلفة

تعديل