Html and css file - i am not able to edit the container style(for example-opacity)

<!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 .

I tried your code and the opacity work, it’s probably a spelling error with your “btn” class in your input. Can you share your html too?

HTML file :

Login | Forever Young

Login


  <div class="vl">
    <span class="vl-innertext">or</span>
  </div>

  <div class="col">
    <a href="https://www.facebook.com/" target="_blank" class="fb btn">
      <i class="fa fa-facebook fa-fw"></i>Facebook
     </a>
     <a href="https://accounts.google.com" target="_blank" class="google btn">
       <i class="fa fa-google fa-fw"></i>Google
    </a>
  </div>

  <div class="col">
    <div class="hide-md-lg">
    </div>

    <input type="text" name="username" placeholder="Username" required
    style=" text-align: center">
    <input type="password" name="password" placeholder="Password" required
    style=" text-align: center">
    <div>
      <input type="checkbox" checked="checked"><font color="white">&nbspRemember Me
      </div>
    <input type="submit" value="Login">
    <span class="forgot"><a href="forgot.html">Forgot Password?</a></span>
  </div>

</div>

Everything work on my side…
Are you sure you correctly linked to css in html?
What exactly are you trying to change?

Actually i wanted to style the container(opacity) so that i can add a background image . As the background is white (to make it interesting wanted to add a pic).
Basically i m trying to create a fitness website. i’ve started with this.

That’s a bit tricky since the opacity affect all of the children.
Try that:

.container {
position: absolute;
text-align: center;
border-radius: 5px;
/* background-color: #000000;  <- Remove this line*/
padding: 10px 0 30px 0;
width: 40%;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* ADD AL OF THIS */
.container::before {
content: "";
background-image: url('https://img.rawpixel.com/s3fs-private/rawpixel_images/website_content/v748-toon-121_1_1.jpg?w=800&dpr=1&fit=default&crop=default&q=65&vib=3&con=3&usm=15&bg=F4F4F3&ixlib=js-2.2.1&s=825cf342f2aeaef0e4a016031ad3ab6b'); /* Edit this to your image */
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.75;
 }

Then, you’ll be able to adjust the rest that broke.

Like repairing your h1 by adding this:

h1 {
        position: relative;
        color: black;  
        font-size: 30px;
      }

ok thank you
i will come back trying this.

i know right. i tried that and the elements inside the container were also affected from the opacity .