Amazing Transparent Login Form In HTML and CSS |Bootstrap 5 | Make Sign In Form Design #html #css



https://i.ytimg.com/vi/B2j6-hF28i4/hqdefault.jpg



In this tutorial we will create responsive login form (sign in form)using Bootstrap 5. this is responsive web design tutorial using bootstrap 5 where we will create webpage as login form for your website so that you can create beautiful website.

Original source


One response to “Amazing Transparent Login Form In HTML and CSS |Bootstrap 5 | Make Sign In Form Design #html #css”

  1. Text Editor: Sublime
    Index.html
    ===============================================
    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Login Page</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="css/global.css">

    </head>

    <body>

    <section class="container-fluid bg">

    <section class="row justify-content-center">

    <section class="col-12 col-sm-6 col-md-3">

    <form class="formcontainer">

    <div class="mb-3">

    <label for="exampleInputEmail1" class="form-label">Email address</label>

    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">

    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>

    </div>

    <div class="mb-3">

    <label for="exampleInputPassword1" class="form-label">Password</label>

    <input type="password" class="form-control" id="exampleInputPassword1">

    </div>

    <div class="mb-3 form-check">

    <input type="checkbox" class="form-check-input" id="exampleCheck1">

    <label class="form-check-label" for="exampleCheck1">Check me out</label>

    </div>

    <button type="submit" class="btn btn-primary w-100">Submit</button>

    </form>

    </section>

    </section>

    </section>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

    </body>

    </html>
    =======================
    Global.css
    ===============

    .bg{

    background: url("../images/Img1.jpg")no-repeat;

    width: 100%;

    height: 100vh;

    background-size: 100%;

    }

    .formcontainer{

    position: absolute;

    top: 15vh;

    background: (0,0,0,.2);

    padding: 30px;

    border-radius: 10px;

    box-shadow: 0px 0px 10px #000;

    }

Leave a Reply