Attractive Login Form 2020 | login form with slider | professional login form

In in tutorial, you will learn to create a slider login form in HTML, CSS, and Bootstrap.

Attractive Login Form 2020 | login form with slider | How to create professional login form

Description

In in tutorial, you will learn to create a slider login form in HTML, CSS, and Bootstrap. In this video, I will create a responsive login form using Bootstrap 3. This is a responsive web design tutorial using bootstrap 3 where we will create a web page as login form for your website so that you can create beautiful website.

HTML

                            
                                <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div id="main">
    <div class="row">
      <div id="side">
        <div id="demo" class="carousel slide" data-ride="carousel">
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img
                src="https://images.unsplash.com/photo-1543857778-c4a1a3e0b2eb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXJ0aXN0aWN8ZW58MHx8MHx8&w=1000&q=80"
                height="500px" width="100%">
            </div>
            <div class="carousel-item">
              <img src="https://www.fitoor.com.pk/wp-content/uploads/2020/10/IMG_20200929_003608.jpg" height="500px"
                width="100%">
            </div>
            <div class="carousel-item">
              <img
                src="https://images.pexels.com/photos/2983141/pexels-photo-2983141.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
                height="500px" width="100%">
            </div>
          </div>
          <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
          </a>
          <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
          </a>
        </div>
      </div>


      <div id="form-div">
        <h1>Artistic</h1>
        <form>
          <div class="form-group">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
          </div>
          <div class="form-group">
            <label for="pwd">Password</label>
            <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
          </div>
          <div class="form-group form-check">
            <label class="form-check-label">
              <input class="form-check-input" type="checkbox" name="remember"> Remember me
            </label>
          </div>
          <center>
            <button type="submit" class="btn btn-primary" id="btn">Submit</button>
          </center>
        </form>
      </div>
    </div>
  </div>

</body>
</html>

CSS

                            
                                #side {
    width: 344px;
    height: 500px;
  }

  body {
    display: flex;
    justify-content: center;
    margin-top: 100px;
    background-image: linear-gradient(-90deg, #1e596b, #54c283);
  }

  #form-div {
    padding: 50px;
    background-color: #fff;
    height: 500px;
    width: 342px;

  }

  h1 {
    text-align: center;
    font-family: Freestyle Script;
    color: #555;
    letter-spacing: 1px;
    font-size: 100px;
  }

  #btn {
    width: 230px;
    color: #fff;
  }

  #main {
    height: 500px;
    width: 50%;
  }

Conclusion

Download Code Files