Q:

I want my forms on right side and transparent on second form

Please take a look to my code I am getting double transparent which looks very awkward behind my
signup form and also I want both forms on the extreme right
thank you here is my code. I hope my question has been understood.
I will be glad if anyone can help me.
<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>login Page</title>

        <!-- Stylesheet -->
        <link href="css/styles.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
      <div class="font-welcome">
      <h1> Welcome to Site.</h1>
      <p>Connect with the MarketPlace and other fascinating people.
      </p>
      <div class="loginform cf">
      <form class="form signin" method="post">
        <div class="field"><label for="email">Email</label></div>
          <input type="email" required="" placeholder="yourname@email.com" name="usermail">
          <div class="field"><label for="password">Password</label></div>
            <input type="password" required="" placeholder="Password" name="password">
            <button class="loginbtn" type="submit">
                Log in
              </button>
              <div class="remember-forgot">
          <label class="t1-label remember">
            <input type="checkbox" checked="checked" name="remember_me" value="1">
            <span>Remember me</span>
          </label>
          <span class="separator">·</span>
          <a href="/account/begin_password_reset" class="forgot">Forgot password?</a>
        </div>
    </form>
    </div>
      <div class="signup cf">
      <form class="signup" method="post">
        <div class="field"><label for="email">Email</label></div>
          <input type="email" required="" placeholder="name@email.com" name="email">
          <div class="field"><label for="password">Password</label></div>
            <input type="password" required="" placeholder="Password" name="password">
            <select class="selector" required>
    <option value="">Please select</option>
    <option value="Individual">Individual</option>
    <option value="Business">Business</option>
    </select>
            <button class="loginbtn" type="submit">
                sign up
              </button>
        </div>
    </form>
    </body>
    </html>

here is my css stylesheet.
@import url("http://fonts.googleapis.com/css?family=Oswald:400,700");

html {
     background: rgba(0, 0, 0, 0) url("../images/bg.jpg") repeat scroll center top / 100% auto;
     font-size: 10pt;
}

h1 {
     color: white;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     padding: 20px;
     text-align: left;
}

label {
     color: #999999;
     display: block;
     font-family: "Oswald",sans-serif;
     font-size: 25px;
}

.loginform {
     background-color: rgba(250, 250, 250, 0.5);
     border-radius: 5px;
     border: 1px solid rgba(0, 0, 0, 0.3);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
     margin: 50px auto;
     padding: 25px;
     width: 410px;
}

h2 {
     color: #066a75;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     text-align: center;
}

.signup { background-color: rgba(250, 250, 250, 0.5);
     border-radius: 5px;
     border: 1px solid rgba(0, 0, 0, 0.3);
     box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
     margin-left: 230px;
     width: 410px;
}

p {
     color: white;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     padding: 20px;
     text-align: left;
}

.loginbtn {
     color: black;
     display: block;
     font-family: "Oswald",sans-serif;
     margin: 5px;
     text-decoration: none;
}

A:

HEre is your complete css and html. I have modified according to you.
JsFiddle Fiddle

@import url("http://fonts.googleapis.com/css?family=Oswald:400,700");

html {
     background: rgba(0, 0, 0, 0) url("../images/bg.jpg") repeat scroll center top / 100% auto;
     font-size: 10pt;
}

h1 {
     color: black;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     padding: 20px;
     text-align: left;
}

label {
     color: #999999;
     display: block;
     font-family: "Oswald",sans-serif;
     font-size: 25px;
}

.loginform {
       background-color: rgba(250, 250, 250, 0.5);
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
  margin: 50px auto;
  padding: 25px;
  width: 410px;
  float: right;
  clear: right;
}

h2 {
     color: #066a75;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     text-align: center;
}

.signup { background-color: rgba(250, 250, 250, 0.5);
  border-radius: 5px;
  /* border: 1px solid rgba(0, 0, 0, 0.3); */
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2), 0px 1px 0px 0px rgba(250, 250, 250, 0.5) inset;
  /* margin-left: 230px; */
  width: 410px;
  float: right;
  clear: right;
  padding: 25px;
}

p {
     color: black;
     font-family: "Oswald",sans-serif;
     font-size: 30px;
     padding: 20px;
     text-align: left;
}

.loginbtn {
     color: black;
     display: block;
     font-family: "Oswald",sans-serif;
     margin: 5px;
     text-decoration: none;
}
<html lang="en"><head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>login Page</title>

        <!-- Stylesheet -->
        <link href="style.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
      </head>
      <body>
      <div class="font-welcome">
      <h1> Welcome to Site.</h1>
      <p>Connect with the MarketPlace and other fascinating people.
      </p>
      <div class="loginform cf">
      <form class="form signin" method="post">
        <div class="field"><label for="email">Email</label></div>
          <input type="email" required="" placeholder="yourname@email.com" name="usermail">
          <div class="field"><label for="password">Password</label></div>
            <input type="password" required="" placeholder="Password" name="password">
            <button class="loginbtn" type="submit">
                Log in
              </button>
              <div class="remember-forgot">
          <label class="t1-label remember">
            <input type="checkbox" checked="checked" name="remember_me" value="1">
            <span>Remember me</span>
          </label>
          <span class="separator">�</span>
          <a href="/account/begin_password_reset" class="forgot">Forgot password?</a>
        </div>
    </form>
    </div>
      <div class="signup cf">
      <form class="" method="post">
        <div class="field"><label for="email">Email</label></div>
          <input type="email" required="" placeholder="name@email.com" name="email">
          <div class="field"><label for="password">Password</label></div>
            <input type="password" required="" placeholder="Password" name="password">
            <select class="selector" required="">
    <option value="">Please select</option>
    <option value="Individual">Individual</option>
    <option value="Business">Business</option>
    </select>
            <button class="loginbtn" type="submit">
                sign up
              </button>
        </form></div>
    
    
    </div></body></html>

