D4mations.com

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

[ad_1]
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

d4mer

,
, , ,

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