Answer to Question #270555 in HTML/JavaScript Web Application for prime

Question

Answer to Question #270555 in HTML/JavaScript Web Application for prime

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #270555

Html,Css and Javascript program

Please refer to the below gif image carefully

https://assets.ccbp.in/frontend/content/dynamic-webapps/bookmark-maker-output.gif

bookmark-maker

I want same exact output as in the gif image and please don't given me other programs they're not working properly. Try to understand.

Bookmark Maker

https://drive.google.com/file/d/15Otxto_PGfKJuXkbfpH5B8HkUJALOxRn/view?usp=sharing

Read each and every line carefully

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
            height: 100%;
            }
            body {
            margin:0;
            padding:0;
            font-family: sans-serif;
            background: linear-gradient(#83abf3, #0e2c4e);
            }


            .lg_box {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            padding: 40px;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,.5);
            box-sizing: border-box;
            box-shadow: 0 15px 25px rgba(78, 57, 57, 0.6);
            border-radius: 10px;
            }


            .lg_box h2 {
            margin: 0 0 30px;
            padding: 0;
            color: #fff;
            text-align: center;
            }


            .lg_box .user-box {
            position: relative;
            }


            .lg_box .user-box input {
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
            }
            .lg_box .user-box label {
            position: absolute;
            top:0;
            left: 0;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: .5s;
            }


            .lg_box .user-box input:focus ~ label,
            .lg_box .user-box input:valid ~ label {
            top: -20px;
            left: 0;
            color: #03e9f4;
            font-size: 12px;
            }


            .lg_box form a {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: #03e9f4;
            font-size: 16px;
            text-decoration: none;
            text-transform: uppercase;
            overflow: hidden;
            transition: .5s;
            margin-top: 40px;
            letter-spacing: 4px
            }


            .lg_box a:hover {
            background: #03e9f4;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #03e9f4,
                        0 0 25px #03e9f4,
                        0 0 50px #03e9f4,
                        0 0 100px #03e9f4;
            }


            .lg_box a span {
            position: absolute;
            display: block;
            }


            .lg_box a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);


            }



            .lg_box a span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            
            }



            .lg_box a span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);


            }




            .lg_box a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);


        }




    </style>
</head>
<body>
    <div class="lg_box">
        <h2>Login</h2>
        <form>
          <div class="user-box">
            <input type="text" name="" required="">
            <label>Username</label>
          </div>
          <div class="user-box">
            <input type="password" name="" required="">
            <label>Password</label>
          </div>
          <a href="#">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            Submit
          </a>
        </form>
      </div>
</body>
</html>