Recently, I've been facing some challenging issues.
I'm attempting to design a login page with a basic layout:
For screens wider than 800px:
- Two columns
- The left side will feature a logo, login form, text box, and button. No background image.
- The right side will display a div with a background image.
For screens equal to or less than 800px wide:
- A single column containing the logo, login form, text box, and button.
- The background image shown on the right side of larger screens should be the background image for this single column on smaller screens.
HTML file
<div class="flex-container">
<div class="col-lg-4 index-top">
<div class="row">
<div class="col log-in">
<div class="col no-padding">
<h1>
<img src="/img/AnonimowySygnalista.svg" alt="logo Anonimowy Sygnalista" class="logo-login" />
<span class="sr-only hidden">Anonimowy sygnalista</span>
</h1>
<form action="">
<label for="">UserName</label>
<input type="" id="" name="" placeholder="Enter username" class="input"></input>
<input type="submit" value="Log In" class="btn-primary"></input>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-8 col background-img">
</div>
CSS file
.container {
display: block;
padding: 0;
margin: 0;
}
.flex-container {
display: flex;
flex-direction: column;
}
input, textarea {
display: block;
}
.right {
float: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
label {
font-weight: 700;
margin-bottom: .75rem;
}
.btn-primary {
background-color: #1F7AAB;
border-radius: 4px;
border-color: #1F7AAB;
padding: .5rem 1.5rem;
width: 100%;
box-shadow: none;
color: #fff;
}
.background-img {
background-image: url('../img/pexels-vlada-karpovich-4050312.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin-top: -1.25rem;
}
.input {
margin-bottom: 1.5rem;
max-height: 5rem;
padding: .5rem .5rem .5rem .75rem;
border: 1px solid #767676;
box-sizing: border-box;
border-radius: 4px;
width: 100%;
}
.log-in h1 {
margin: 3rem 0;
}
.index-top {
z-index: 999;
}
@media (min-width: 801px) {
.container {
width: 100% !important;
}
.flex-container {
padding-right: 80px;
flex-direction: row;
}
.index-top {
margin: 0 80px;
}