Creating a login screen with 2 columns has been my recent project.
For large screens: The left column contains the login controls while the right column displays an image.
On small screens: The top column shows the image, and the bottom column houses the login controls.
The functionality works as expected. You can see screenshots below:
https://i.sstatic.net/9zdq7.png
https://i.sstatic.net/3s2Xh.png
All is good so far. However, I aspire to have the "Sign in" and "Welcome" text within the image on smaller screens.
To better understand my goal, take a look at this Website's login page where they've accomplished it:
This is how my code looks currently:
<div class="container-fluid fullheight">
<div class="row fullheight">
<div class="col-sm-12 col-md-6 col-lg-8 order-md-2 order-lg-2" style="background-color: grey;">
this is my image panel
</div>
<div class="col-sm-12 col-md-6 col-lg-4 order-md-1 order-lg-1">
<div class="loginarea">
<h2>Sign in</h2>
<p class="text-muted">Welcome to MySite. Please sign in with your email id and password to access your
profile, reports and orders.</p>
<form style="margin-top: 30px; margin-bottom: 20px;">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Remember Me</label>
</div>
<button type="submit" class="btn btn-primary float-right">Sign in</button>
</form>
<a href="#">Forgot password</a>
</div>
</div>
</div>
This represents my basic CSS styling:
<style>
.fullheight {
height: 100%;
min-height: 100%;
}
html,
body {
height: 100%;
}
.loginarea {
margin-top: 100px;
padding-right: 20px;
padding-left: 20px;
}
</style>
I am seeking advice on integrating the text lines into the image and ensuring that only the login boxes are displayed in the white area. How can I achieve this?