Solved

Login area of a page

Posted on 2016-11-23
4
18 Views
Last Modified: 2016-11-23
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?
0
Comment
Question by:Jasmine Ikhreishi
  • 2
  • 2
4 Comments
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
Comment Utility
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
 
LVL 1

Author Closing Comment

by:Jasmine Ikhreishi
Comment Utility
I fixed the forgot thing, thank youu
0
 
LVL 51

Expert Comment

by:Julian Hansen
Comment Utility
You are welcome.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Suggested Solutions

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now