Pages

Monday, February 15, 2021

How to create a login page with HTML and CSS

Video link : https://youtu.be/oyv-cFT6QdM
 

HTML Code:

<!doctype html>

<html lang="en">

  <head>

    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">


    <!-- Bootstrap CSS -->

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <link rel="stylesheet" href="style.css">

    <title>Hello, world!</title>

  </head>

  <body>

    <h1>Hello, world!</h1>

    <div class="container">

        <div class="row">

          <div class="partho col-sm">

            <h1>Ready To Use</h1>

            <hr>

            <p>Pointer Event</p>

          </div>

          <div class="pic col-sm">

            <img src="20200527_13223.jpg" height="200px" width="200px" alt="">

          </div>

          <div class="Three col-sm">

            <h1>Almost Done</h1>

            <hr>

            <p>Pointer Event</p>


          </div>

        </div>

      </div>

     

      </div>

    <!-- Optional JavaScript; choose one of the two! -->


    <!-- Option 1: Bootstrap Bundle with Popper -->

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>


    <!-- Option 2: Separate Popper and Bootstrap JS -->

    <!--

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

    -->

  </body>

</html>



CSS Code:


.row{
  color black;
  background-color: rgb(183, 183, 216);

}
.partho{
    padding: 10%;
    margin-right: 10px;
    background-color: rgb(61, 170, 99);
}
.pic{
    margin-right: 10px;
   background-color: chartreuse;
}
.Three{
    margin-right: 10px;
    padding: 10%;
    background-color: rgb(61, 170, 99);
}

No comments:

Post a Comment