Sorry for this noob question, I’m not as good with css and html.
But i just want a simple and nice loginpage for my website.
I try to make a login form in the middle of the screen, but it drifts when i resize the screen.
Can anyone please point me in the right direction with this one.
css
<code>body{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.body_bg{
background-color: whitesmoke;
}
.col-light{
background-color: #0055ff;
height: 100vh;
}
.login{
position: fixed;
top: 35%;
right: 27%;
width: 50em;
}
input.login{
margin-top: 50px;
}
</code>
<code>body{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.body_bg{
background-color: whitesmoke;
}
.col-light{
background-color: #0055ff;
height: 100vh;
}
.login{
position: fixed;
top: 35%;
right: 27%;
width: 50em;
}
input.login{
margin-top: 50px;
}
</code>
body{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.body_bg{
background-color: whitesmoke;
}
.col-light{
background-color: #0055ff;
height: 100vh;
}
.login{
position: fixed;
top: 35%;
right: 27%;
width: 50em;
}
input.login{
margin-top: 50px;
}
html
<code>
<body class="body_bg">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<div class="col">
<div class="row login ">
</div>
</div>
</div>
<div class="col-md-7 col-light">
<div class="center">
<div class="login ">
<div class="row mt-4">
<div class="col-md-3 text-end ">
<h1 class="display-6"><?= $lang['username'] ?></h1>
</div>
<div class="col-md-6 align-middle">
<input type="text" class="align-middle form-control">
</div>
</div>
<div class="row mt-4">
<div class="col-md-3 text-end">
<h1 class="display-6"><?= $lang['password'] ?></h1>
</div>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<button class="btn btn-success"><?= $lang['login'] ?></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</code>
<code>
<body class="body_bg">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<div class="col">
<div class="row login ">
</div>
</div>
</div>
<div class="col-md-7 col-light">
<div class="center">
<div class="login ">
<div class="row mt-4">
<div class="col-md-3 text-end ">
<h1 class="display-6"><?= $lang['username'] ?></h1>
</div>
<div class="col-md-6 align-middle">
<input type="text" class="align-middle form-control">
</div>
</div>
<div class="row mt-4">
<div class="col-md-3 text-end">
<h1 class="display-6"><?= $lang['password'] ?></h1>
</div>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<button class="btn btn-success"><?= $lang['login'] ?></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</code>
<body class="body_bg">
<div class="container-fluid">
<div class="row">
<div class="col-md-5">
<div class="col">
<div class="row login ">
</div>
</div>
</div>
<div class="col-md-7 col-light">
<div class="center">
<div class="login ">
<div class="row mt-4">
<div class="col-md-3 text-end ">
<h1 class="display-6"><?= $lang['username'] ?></h1>
</div>
<div class="col-md-6 align-middle">
<input type="text" class="align-middle form-control">
</div>
</div>
<div class="row mt-4">
<div class="col-md-3 text-end">
<h1 class="display-6"><?= $lang['password'] ?></h1>
</div>
<div class="col-md-6">
<input type="password" class="form-control">
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<button class="btn btn-success"><?= $lang['login'] ?></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>