css + form example similar to outlook.com's layout [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

Can anyone help by providing some samples, or examples to generate a css class to re-produce the effect similar to outlook.com's login page?

Where the page is centralized, splitted into 2 halves, the left side containing an image, and the right side with the login fields

Answer 1

not a downvoter, had a look at the Outlook site; nearly threw up when I had a look at the source code Outlook.com:

and their css is well... see for yourself.

What I'd do is build a page with two colums of predefined width (can use absolute values in this case). So a class of column width in pixels, and have this assigned to two sections - one featuring the image, and the other featuring the login/ everything else. If the page is resized to be smaller one should appear below the other - which is nice degrading.

You possibly could have an image and a login box without using CSS and somehow configure the login box to be middle aligned with the image - but it's a bad solution and certainly using deprecated code.