پیشنمایش زنده
کد HTML
<form class="form">
<span class="heading">Sign In</span>
<span class="Mail">E-Mail</span>
<input placeholder="Enter E-Mail" type="text" class="input" />
<span class="Password">Password</span>
<input placeholder="Enter Password" type="text" class="input" />
<span class="forgot"><a href="">forgot password?</a></span>
<button>Submit</button>
</form>
کد CSS
.form {
display: flex;
flex-direction: column;
gap: 10px;
background-color: rgb(241, 241, 130);
padding: 60px;
padding-inline: 28px;
border-radius: 20px;
box-shadow: 4px 4px rgb(0, 2, 65);
font-family: cursive;
}
.heading {
font-size: 25px;
text-align: center;
font-weight: 600;
font-family: cursive;
}
.form button {
/* align-self: flex-end; */
padding: 10px;
border-radius: 10px;
margin-top: 20px;
background-color: rgb(241, 241, 130);
box-shadow: 2px 3px rgb(0, 2, 65);
color: rgb(0, 0, 0);
font-size: medium;
font-weight: 600;
transition: 400ms;
font-family: cursive;
}
.form button:hover {
background-color: rgb(235, 255, 59);
transition: 400ms;
cursor: pointer;
}
.input {
padding: 10px;
width: 280px;
border-radius: 10px;
border-style: double;
border-color: black;
font-size: 15px;
box-shadow: 2px 3px rgb(0, 2, 65);
font-family: cursive;
}
.forgot,
a {
padding-top: 10px;
/* font-weight: 600; */
color: rgba(0, 0, 0, 0.994);
font-family: cursive;
text-decoration: none;
transition: 400ms;
}
.forgot,
a:hover {
color: rgba(0, 0, 0, 0.703);
transition: 400ms;
}
.Mail,
.Password {
font-size: 16px;
/* font-weight: 600; */
font-family: cursive;
}