Solved

Login area of a page

Posted on 2016-11-23
4
36 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 57

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41899143
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
ID: 41899152
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
ID: 41899155
I fixed the forgot thing, thank youu
0
 
LVL 57

Expert Comment

by:Julian Hansen
ID: 41899156
You are welcome.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

695 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