Hey there, I'm currently working on a login page for my website. However, I've run into an issue where changing the background also changes the color of my div container. How can I resolve this problem so that only the background changes?
Below is the Bootstrap 4.6 code I have written:
<section class="vh-100 gradient">
<div class="container">
<div class="row">
<div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
<div class="card-border-0 shadow rounded-2 my-5 mx-3">
<div class="card-header p-1 p-sm-3">
<h3>Client Management Portal</h3>
</div>
<div class="card-body p-4 p-sm-5">
{%include "components/alerts.html"%}
<form action="" method="post">
{%csrf_token%}
<div class="form-floating mb-3">
<label for="password">Username</label>
{{form.username}}
</div>
<div class="form-floating mb-3">
<label for="password">Password</label>
<div class="input-group form-floating mb-3">
{{form.password}}
<div class="input-group-append bg-white" id="">
<span class="input-group-text" id="passwd">
<i class="fas fa-eye-slash"></i>
</span>
</div>
</div>
</div>
<div class="d-grid">
<button class="btn btn-success">Login</button>
</div>
</form>
</div>
<div class="card-footer p-2">
<a class="text-muted" href="#">No account? register here</a>
</div>
</div>
</div>
</div>
</div>
</section>
<style>
.gradient-custom {
/* fallback for old browsers */
background: #6a11cb;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to right, #36D1DC, #5B86E5);
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to right, #36D1DC, #5B86E5)
}
</style>
https://i.sstatic.net/48eu5.png
Appreciate your help in advance! (edit : please dont mind the double curly braces, django template only thanks again)