<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Reset | Forever Young</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles(1).css">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<div class="container">
<h1>Forgot Password</h1>
<br>
<p>Please provide your email address. We will send you an email with a link and directions for how to change your password.</p>
<div>
<input type="text" name="Email address" placeholder="Email address" required style=" text-align: center">
<span class="forgot"><a href="index.html">Return to Login</a></span>
<input type="submit" value="Send Email">
</div>
</div>
</body>
</html>
body {
font-family: Arial, Helvetica, sans-serif;
}
* {
box-sizing: border-box;
}
p{
color: white;
margin-top: 0;
margin-left: 25px;
margin-right: 25px;
}
h1{
color: white;
margin-bottom: 0;
}
.container {
position: absolute;
text-align: center;
border-radius: 5px;
background-color: #000000;
padding: 10px 0 30px 0;
width: 40%;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input,
.btn {
width: 75%;
padding: 12px;
border: none;
border-radius: 4px;
margin: 5px 0;
opacity: 0.75;
display: inline-block;
font-size: 17px;
line-height: 20px;
text-decoration: none;
}
input:hover,
.btn:hover {
opacity: 1;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
input[type=submit]:hover {
background-color: #45a049;
}
input[type=checkbox]{
color: white;
position: relative;
padding-left: 15px;
text-indent: -15px;
width: 13px;
height: 18px;
padding: 0;
margin:0;
vertical-align: bottom;
position: relative;
top: -1px;
*overflow: hidden;
}
span{
display: block;
}
span>a{
text-decoration: none;
color: #4f0080;
}
span>a:hover{
color: white;
}
/* hide some text on medium and large screens */
.hide-md-lg {
display: none;
}
/* Responsive layout - when the screen is less than 500px wide */
@media screen and (max-width: 500px) {
.col {
width: 100%;
margin-top: 0;
}
/* hide the vertical line */
.vl {
display: none;
}
/* show the hidden text on small screens */
.hide-md-lg {
display: block;
text-align: center;
}
}
</style>
not able to change the opacity (for example). i need help on this .