I'm creating a homepage for my website and want a logo (avatar) to appear on the left hand side of the page and a login form to appear on the right hand side. My current code displays a centered login box and avatar. The avatar is directly above the login box (and slightly offscreen).
Ideally I'm looking to replicate facebooks homepage theme (facebook.com)
Any ideas?
html
{% load static %}
{#<link rel="stylesheet" type="text/css" href="{% static 'homepage/style.css' %}">#}
<html lang="">
<head>
<title>Login Form</title>
<link rel="stylesheet" type="text/css" href="{% static "homepage/style.css" %}">
<body>
<div class="rows">
<div class="logo">
<img src="{% static "homepage/images/my_logo.png" %}"
class="avatar"
alt=""
width=""
height="">
</div>
<div class="login-box">
<h1>Login</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
Forgot password?<br>
Sign-up<br>
</form>
</div>
</div>
</body>
</html>
css
body {
margin: 0;
padding: 0;
background-size: cover;
background: black center;
font-family: sans-serif;
}
.avatar {
float: left;
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: -75px;
left: calc(50% - 100px);
}
.login-box{
float: right;
width: 320px;
height: 420px;
background: #000;
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
box-sizing: border-box;
padding: 70px 30px;
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #ffc107;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: lightgray;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 12px;
line-height: 20px;
color: darkgrey;
}
.login-box a:hover {
color: #ffc107;
}
Here is a basic example of placing two items side by side across the screen. The first uses display grid, and outlines 2 columns, the second is using flex.
img{
height: 50vh;
}
.grid-container{
display: grid;
height: 50vh;
grid-template-columns: auto 1fr;
}
.flex-container{
display: flex;
height: 50vh;
}
.login {
display: flex;
flex-direction: column;
}
<div class="grid-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
<div class="flex-container">
<img src="https://picsum.photos/seed/picsum/200/200" alt="">
<div class="login">
<h1>Login</h1>
<form>
<div>
<label for="email">Email</label>
<input type="text" name="email">
</div>
<div>
<label for="paswd">Password</label>
<input type="password" name="passwd">
</div>
</form>
</div>
</div>
When translating a form/input on the Z-axis, the area that accepts the cursor isn't brought forward in Z space with the apparent place of the element, and trying to click on the input box doesn't work unless you click where the element would be if it hadn't been translated. Is there any way to fix this?
HTML
<html>
<body>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../../css/client-questionaire.css" type="text/css">
<div id="impress" data-transition-duration="3000">
<div id="yourself" class="step page" data-x="0">
<div class="innerDiv">
<p class="mainWord">
<span class="textLength">
<span class="black">YOUR</span><span class="white">SELF</span>
</span>
</p>
<div class="wrap">
<div class="formBox">
<form id="yourselfForm" class="form">
<label for="firstName">
What's your <u>first name</u>?
</label><br>
<input name="firstName" type="text" ><br>
<label for="lastName">
What's your <u>last name</u>?
</label><br>
<input name="lastName" type="text" ><br>
<label for="currentJob">
What's your <u>current job title</u>?
</label><br>
<input name="currentJob" type="text" ><br>
</form>
</div>
</div>
</div>
</div>
<div id="intro" class="step page" data-x="2000">
<div class="outerDiv">
<div class="innerDiv">
<p class="mainWord"><span class="black first">CREÆTIVE</span> <span class="white last">BRIEF</span></p>
<div class="formBox">
</div>
</div>
</div>
</div>
<div id="lookFeel" class="step page" data-x="4000">
<div class="outerDiv">
<div class="innerDiv">
<p class="mainWord"><span class="black firstSpan">LOOK</span> <span class="white secondSpan">&</span><span class="black"> FEEL</span></p>
<div class="formBox">
</div>
</div>
</div>
</div>
<script src="/js/impress.js"></script>
<script>
impress().init();
</script>
CSS
body {
background: #cc9933;
}
.page {
height: 830px;
width: 1480px;
margin: 0px;
}
.formBox {
position:absolute;
border: 1px solid black;
height: 450px;
width: 270px;
top: -150px;
left: 867px;
z-index: 21;
background: #cc9933;
transform: translateZ(300px);
}
.innerDiv {
position:absolute;
z-index: 9;
width: 1000%;
border-top: 1px solid black;
border-bottom: 1px solid black;
top:40%;
height: 108px;
}
.frontFiller {
transform: translateX(-2000px);
width: 1000%;
}
.mainWord {
margin: 0px 50px;
font-size: 90px;
height: 100%;
}
.black {
color: black;
}
.white {
color: white;
}
Not sure what you're trying to achieve, your example moves the input outside of the viewport and the translation isn't working at all.
So, I'll take a guess: Have you tried setting the CSS property perspective on the parent of .formBox?
Here's an example that shows how it would work:
.wrapper {
perspective: 50px;
transform-style:preserve-3d;
}
.formBox {
position:absolute;
border: 1px solid black;
height: 450px;
width: 270px;
left: 200px;
z-index: 21;
background: #cc9933;
-webkit-transform: translateZ(30px);
transform: translateZ(30px);
}
<div class="wrapper">
<div class="formBox">
<form id="yourselfForm" class="form">
<label for="firstName">
What's your <u>first name</u>?
</label><br>
<input name="firstName" type="text" >
</form>
</div>
</div>
This is a browser bug, and specifically a Chrome bug. I can reproduce the effect from the HTML and CSS that you provided on Google Chrome. On Firefox (Quantum) it works as expected.
On Chrome, it only happens when you use both translateZ() AND z-index. If you can create your form without using z-index on the text fields, it should be fine.
Consider reporting this to Google Chrome but tracker.
I'm trying to center the submit button at the bottom.
Here is the code:
* {
margin: 0px;
padding: 0px;
}
body {
font-size: 120%;
background: #F8F8FF;
}
.header {
width: 30%;
margin:50px auto 0px;
color: white;
background: #5F9EA0;
text-align:center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 576px;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: white;
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 20px;
width: 60%;
padding: 5px 10px;
font-size: 1em;
border-radius: 1px;
border: 1px solid gray;
margin-left: 3px;
}
.btn {
padding: 8px;
font-size: 1em;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
margin:0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Register-Art and chill</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div class="header">
<h2> Register </h2>
</div>
<form method="post" action="register.php">
<div class="input-group">
<label> Username </label>
<input type="text" name="username">
</div>
<div class="input-group">
<label> Email </label>
<input type="email" name="email">
</div>
<div class="input-group">
<label> Password </label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label> ConfirmPassword </label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn"> Register </button>
</div>
</form>
</body>
</html>
Replace your .btn CSS class with this:
.btn {
padding: 8px;
font-size: 1em;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
margin:0 auto;
display:block;
}
The problem is the default display:inline-block
You can put text-align: center; on the container that the button is in, i.e. .input-group. Of course if you put it in .input-group, all the other elements whose parent is an .input-group will be centered as well, so you might have to make a class just for the button or put an inline style on the button's .input-group parent.
CSS
.input-group-btn {
text-align:center;
}
HTML
<div class="input-group input-group-btn">
<button type="submit" class="btn"> Register </button>
</div>
Add display: block; to .btn class
To make it more neat and clean, replace your html with the following code:-
<form method="post" action="register.php">
<div class="form-inner">
<div class="input-group">
<label> Username </label>
<input type="text" name="username">
</div>
<div class="input-group">
<label> Email </label>
<input type="email" name="email">
</div>
<div class="input-group">
<label> Password </label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label> ConfirmPassword </label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn"> Register </button>
</div>
</div>
</form>
And add this to your CSS:-
.form-inner {
width: 60%;
}
Live example here:- https://jsfiddle.net/sq6zow6v/
I would like to move my form box to the right, but I tried to adjust on everything, but the result is that the box is jumping around. I tried to adjust the bootstrap col-md also.
Can anybody see how I can move the form box to the right?
[![Form box][1]][1]
<!-- Baggrundsbillede --> .fullscreen {
width: 100%;
min-height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-position: 50% 50%\9 !important;
background-image: url(../../../img/landingpages/dummypictures/fullsize_bg.jpg);
}
.overlay {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
width: 100%;
height: 100%;
display: block;
}
.signup-header {
margin: 150px 0 100px;
background: rgba(255, 255, 255, 0.2);
border-radius: 4px;
padding-left: 20px;
padding-right: 20px;
height: 420px;
}
.signup-header h3 {
padding: 20px 0 10px;
color: white;
font-weight: 300;
}
.form-header input {
position: relative;
padding: 5px 15px;
}
.form-header .form-control {
border-radius: 0;
border: solid 1px #dadada;
background-color: #fff;
color: #333;
height: 55px;
}
.form-header .btn {
border-radius: 0;
height: 55px;
width: 100%;
background-color: #3eb0f7;
color: white;
font-size: 17px !important;
padding: 0 33px;
border: none;
margin: 0;
-webkit-transition: all .8s ease;
transition: all .8s ease;
}
.form-header .btn:hover {
background-color: #1f96e0;
-webkit-transition: all .8s ease;
transition: all .8s ease;
}
.signup-header p {
color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="fullscreen landing parallax">
<div class="overlay">
<div class="container">
<div class="row">
<div class="col-md-7">
<!-- /.logo -->
<div class="logo">
<a href="https://site.dk/">
<img src="~/img/site-logo-white-small.png" alt="logo">
</a>
</div>
<!-- Hovedoverskrift -->
<h1>
Fremtidens B2B salgsorganisation
</h1>
<!-- Underoverskrift -->
<div>
<p>Ny teknologi har for altid ændret den måde indkøbet sker på B2B markedet. Dette stiller helt store krav til den salgsansvarlige i forhold til den måde der skal sælges på. Dette inspirationssemenar giver dig indblik i hvordan fremtidens effektive
salgsorgisation ser ud</p>
</div>
</div>
<!-- Form -->
<div class="col-md-5">
<div class="signup-header">
<h3 class="form-title text-center">TILMELD GRATIS SEMINAR</h3>
<div class="sign-up">
<form id="seminarform">
<div class="form-group">
<label class="sr-only" for="name">Fornavn</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Fornavn" required />
</div>
<div class="form-group">
<label class="sr-only" for="email">E-mail</label>
<input type="email" class="form-control" id="email" name="email" placeholder="E-mail" required />
</div>
<div class="form-group">
<label class="sr-only" for="phone">Telefon</label>
<input type="text" class="form-control" id="phone" name="phone" placeholder="Mobil" required />
</div>
<div class="form-group">
<label class="sr-only" for="company">Virksomheden her</label>
<input type="text" class="form-control" id="company" name="company" placeholder="Virksomhed" required />
</div>
<div class="form-group">
<label class="sr-only" for="challenges">Din største udfordring</label>
<select id="challenges" name="challenges" class="form-control" required>
<option>Arbejdsområde</option>
<option>Salg</option>
<option>Marketing</option>
<option>Ledelse</option>
<option>Konsulent</option>
<option>Andet</option>
</select>
</div>
<input type="text" id="Channel" name="Channel" style="display: none;" />
<input type="text" id="Campaign" name="Campaign" style="display: none;" />
<input type="submit" class="btn btn-default active btn-block btn-lg" value="Tilmeld">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Option 1:
Make a look-a-like, by giving a width to the text in the left column like so:
p { width: 90%; }
Option 2
Which is better,
adjust the columns, change col-md-7 into col-md-6 and change col-md-5 (the form) into col-md-4 col-md-push-1 this will push the form 1 column to the right.
i have this code for display one modal with form for register when click the "log in" button (for phpBB3). Everything is awesome, but in IE the modal appear on page loading withoud my click.. how to resolve this?
/***************
Login Box Dialog
***************/
.loginDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.loginDialog:target {
opacity:1;
pointer-events: auto;
}
.loginDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.closeDialog {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.closeDialog:hover { background: #00d9ff; }
.popupWrapper{background:url('ir_red/trans60.png') repeat;background:rgba(0,0,0,0.6);padding:8px;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
}.popupInner{width:500px;overflow:auto;-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.4);-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.4);box-shadow:0px 0px 3px rgba(0,0,0,0.4);overflow-x:hidden}.popupInner.black_mode{background:#000;color:#eee;border:3px
solid #626262}.popupInner.warning_mode{border:3px
solid #7D1B1B}.popupInner
h3{border-bottom:1px solid #2a2a2a;text-shadow:rgba(0,0,0,0.8) 0px -1px 0px;background:#282828 url('ir_red/highlight_reallyfaint.png') repeat-x 0 0;padding:8px
10px 9px;font-size:16px;font-weight:300}.popupInner h3
a{color:#fff}.popupInner.black_mode
h3{background-color:#595959;color:#ddd}.popupInner.warning_mode
h3{background-color:#7D1B1B;padding-top:6px;padding-bottom:6px;color:#fff}
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" class="" action="{S_LOGIN_ACTION}">
<div id="login" class="loginDialog">
<div class="popupWrapper" style="z-index: 10001; top: 76.75px; left: 375px; position: fixed;">
<div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 645px;">
<div id="inline_login_form">
<h3>Sign In</h3>
<br />
<div class="ipsForm ipsForm_horizontal">
<fieldset>
<ul>
<li class="ipsField">
<div class="ipsField_content">
Need an account? Register now!
</div>
</li>
<li class="ipsField ipsField_primary">
<span class="ipsField_title">Username</span>
<div class="ipsField_content">
<input id="username" class="input_text" name="username" type="text" size="30" tabindex="1" style="font-size: 18px;">
</div>
</li>
<li class="ipsField ipsField_primary">
<span class="ipsField_title">Password</span>
<div class="ipsField_content">
<input id="password" class="input_text" name="password" type="password" size="30" tabindex="2" style="font-size: 18px;"><br />
I've forgotten my password
Resend activation e-mail
</div>
</li>
<!-- IF S_AUTOLOGIN_ENABLED -->
<li class="ipsField ipsField_checkbox">
<input type="checkbox" checked="checked" class="radio" name="autologin" tabindex="3" />
<div class="ipsField_content">
<span class="inline_remember">
<strong>Remember me</strong><br>
<span class="desc lighter">This is not recommended for shared computers</span>
</span>
</div>
</li>
<!-- ENDIF -->
<li class="ipsField ipsField_checkbox">
<input type="checkbox" class="radio" name="viewonline" tabindex="4" />
<div class="ipsField_content">
<span class="inline_invisible">
<strong>Hide my online status this session</strong><br />
<span class="desc lighter">Don't add me to the active users list</span>
</span>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="ipsForm_submit ipsForm_center" style="text-align: center;">
<input type="submit" name="login" class="ipsButton" value="{L_S_SIGN_IN}" style="outline: 0; border: 1px solid #252525;" />
</div>
</div>
</div>
<div id="sign_in_popup_close" class="popupClose clickable"><img src="{T_THEME_PATH}/ir_red/close_popup.png" alt="x"></div></div>
<div id="document_modal" class="modal" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; filter: alpha(opacity=40);"></div>
</div>
{S_LOGIN_REDIRECT}
{S_FORM_TOKEN}
</form>
<!-- ENDIF -->
So.. this show correctly but in ie when page is loading (index), the modal appear directly without my click on login.
In IE opacity:0 shows inner child elements,so add the visibility property in your loginDialog class and also in loginDialog:target like this:
.loginDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
visibility:hidden; // add this line
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.loginDialog:target {
opacity:1;
visibility:visible; // add this line
pointer-events: auto;
}
Addition
You should have following meta tag declared :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
/***************
Login Box Dialog
***************/
.loginDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
display:none; // add this line
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.loginDialog:target {
opacity:1;
pointer-events: auto;
display:block; // add this line
}
.loginDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.closeDialog {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.closeDialog:hover { background: #00d9ff; }
.popupWrapper{background:rgba(0,0,0,0.6);padding:8px;-webkit-box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;-moz-box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;box-shadow:rgba(0,0,0,0.5) 0px 10px 20px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
}.popupInner{width:500px;overflow:auto;-webkit-box-shadow:0px 0px 3px rgba(0,0,0,0.4);-moz-box-shadow:0px 0px 3px rgba(0,0,0,0.4);box-shadow:0px 0px 3px rgba(0,0,0,0.4);overflow-x:hidden}.popupInner.black_mode{background:#000;color:#eee;border:3px
solid #626262}.popupInner.warning_mode{border:3px
solid #7D1B1B}.popupInner
h3{border-bottom:1px solid #2a2a2a;text-shadow:rgba(0,0,0,0.8) 0px -1px 0px;padding:8px
10px 9px;font-size:16px;font-weight:300}.popupInner h3
a{color:#fff}.popupInner.black_mode
h3{background-color:#595959;color:#ddd}.popupInner.warning_mode
h3{background-color:#7D1B1B;padding-top:6px;padding-bottom:6px;color:#fff}
<!-- IF not S_USER_LOGGED_IN and not S_IS_BOT -->
<form method="post" class="" action="{S_LOGIN_ACTION}">
<div id="login" class="loginDialog">
<div class="popupWrapper" style="z-index: 10001; top: 76.75px; left: 375px; position: fixed;">
<div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 645px;">
<div id="inline_login_form">
<h3>Sign In</h3>
<br />
<div class="ipsForm ipsForm_horizontal">
<fieldset>
<ul>
<li class="ipsField">
<div class="ipsField_content">
Need an account? Register now!
</div>
</li>
<li class="ipsField ipsField_primary">
<span class="ipsField_title">Username</span>
<div class="ipsField_content">
<input id="username" class="input_text" name="username" type="text" size="30" tabindex="1" style="font-size: 18px;">
</div>
</li>
<li class="ipsField ipsField_primary">
<span class="ipsField_title">Password</span>
<div class="ipsField_content">
<input id="password" class="input_text" name="password" type="password" size="30" tabindex="2" style="font-size: 18px;"><br />
I've forgotten my password
Resend activation e-mail
</div>
</li>
<!-- IF S_AUTOLOGIN_ENABLED -->
<li class="ipsField ipsField_checkbox">
<input type="checkbox" checked="checked" class="radio" name="autologin" tabindex="3" />
<div class="ipsField_content">
<span class="inline_remember">
<strong>Remember me</strong><br>
<span class="desc lighter">This is not recommended for shared computers</span>
</span>
</div>
</li>
<!-- ENDIF -->
<li class="ipsField ipsField_checkbox">
<input type="checkbox" class="radio" name="viewonline" tabindex="4" />
<div class="ipsField_content">
<span class="inline_invisible">
<strong>Hide my online status this session</strong><br />
<span class="desc lighter">Don't add me to the active users list</span>
</span>
</div>
</li>
</ul>
</fieldset>
</div>
<div class="ipsForm_submit ipsForm_center" style="text-align: center;">
<input type="submit" name="login" class="ipsButton" value="{L_S_SIGN_IN}" style="outline: 0; border: 1px solid #252525;" />
</div>
</div>
</div>
<div id="sign_in_popup_close" class="popupClose clickable"><img alt="x"></div></div>
<div id="document_modal" class="modal" style="width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000; opacity: 0.4; filter: alpha(opacity=40);"></div>
</div>
</form>
<!-- ENDIF -->
<a href='#login'>show modal</a>