Login area of a page

body {
	background:url("14.jpg");
    background-attachment: fixed;	
}

.pen-title {
  text-align: left;
  letter-spacing: 2px;
}
.pen-title h1 {
  margin-top: 20px;
  font-size: 40px;
  font-weight: 300;
}
.inner .input{ 
background: transparent;
float: right;
margin-top:20 px;
padding-left: 5 px;
}
.container{
	background: url("ja.jpg");
    position:fixed;
	width:100%	
}
.btn-primary{
	float: right;
padding-top:0 px;
margin-bottom:10px;
margin-left:5px;
}

</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="pen-title" style= "	padding-top: 25px;">
  <img src="logo-small.png" alt="user">
</div>
<div class="inner">
<button type="button" class="btn btn-primary">Action</button>
<input type="password" name="password" class= "input" id="password" placeholder="Password" required>
<input type="text" name="username" id="username" class= "input" placeholder="Username" value="" required>

</div>
</div>
</div>

Open in new window


I have this code above I want the outcome to be:

LOGO                                                  Username      Password         loginbutton
                                                                       Forgot password?

Open in new window


I tried to do that and my logo is fine but my username and password, and button just wont align together and the herf isnt going under them. Could anyone help?
LVL 1
Jazzy 1012Asked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
What href?
Are you using Bootstrap? If so why not use the col- classes to position your logo and buttons something like this
<div class="container">
  <div class="row" style="margin-top: 25px">
    <div class="col-md-3 pen-title">
      <img src="images/logo.png" alt="user" />
    </div>
    <div class="col-md-9 text-right inner">
      <button type="button" class="btn btn-primary">Action</button>
      <input type="password" name="password" class= "input" id="password" placeholder="Password" required>
      <input type="text" name="username" id="username" class= "input" placeholder="Username" value="" required>
    </div>
  </div>
</div>

Open in new window

0
 
Jazzy 1012Author Commented:
This is what I mean by herf
    <a href="forgot.php">Forgot your Password? </a>
I want it to go under the username and pass
0
 
Jazzy 1012Author Commented:
I fixed the forgot thing, thank youu
0
 
Julian HansenCommented:
You are welcome.
0
All Courses

From novice to tech pro — start learning today.