Create a Pop-up Login Form With This Codes

Ticker

10/recent/ticker-posts

Create a Pop-up Login Form With This Codes

AK Creative 5/14/2021 07:21:00 PM

Pop-up Login Form Create By Maa Blogger

 

HTML CODE

<!DOCTYPE html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <title>Popup Login Form</title>

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

</head>

<body>

    <input type="checkbox" id="show">

    <label for="show" class="show-btn">Click Here<br><center>Get<br></center>Login Form</label>


    <div class="container">

        <label for="show" class="close-btn" title="close">×</label>

        <h1>Test Form</h1>

        <form action="#">

            <label>Email or Username</label>

            <input type="text">

            <label>Password</label>

            <input type="password"><br>

            <a href="#">Forgot Password ?</a>

            <button>Submit</button>

            <div class="link">Not Registered ? <a href="#"> Sigup here</a></div>

            

        </form>

    </div>

</body>

</html>


CSS CODE

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');

body{

  font-family: 'century';

  background: url("https://www.teahub.io/photos/full/101-1013203_background-full-hd-1080p-background-images-full-hd.jpg");

}

.show-btn{

    padding: 10px 20px;

    font-size: 50px;

    font-weight: 500;

    color: red;

    cursor: pointer;

    background: none;

text-decoration: checked;

}

.show-btn{

    position: absolute;

    top: 45%;

    left: 30%;

    transform: translate(-50%, -50%);

}

input[type="checkbox"]{

    display: none;

}

#show:checked ~ .container{

    display: block;

}

.container{

    display: none;

    width: 375px;

    padding: 20px;

    border-radius: 35px;

    background: none;

    border: 15px solid rgba(205, 100, 155, 0.25);


}

.container{

    position: absolute;

    top: 50%;

    left: 60%;

    transform: translate(-50%, -50%)

}

.container .close-btn{

    position: absolute;

    right: 20px;

    top: 15px;

    font-size: 35px;

    cursor: pointer;

}

.close-btn:hover{

    color: red;

}

h1{

    text-align: center;

    color: red;

    text-transform: proper;

text-decoration: underline;

}

form{

    margin: 40px;

}

label{

    display: block;

    color: black;

    font-size: 18px;

    margin-top: 10px;

}

input{

    display: block;

    width: 90%;

    background: transparent;

    border: none;

    outline: none;

    border-bottom: 1px solid white;

    padding: 10px;

    color: white;

}

button{

    display: block;

    width: 95%;

    padding: 8px;

    border: 1px solid red;

    outline: 5px;

    background: sky;

    color: blue;

    font-size: 25px;

    cursor: pointer;

    margin-top: 20px;


}

a{

    text-decoration: none;

    color: #20002c;


}


.link{

    margin-top: 30px;

    text-align: center;

    color:blue;

}


a:hover{

    text-decoration: underline;

}




OUTPUT SCREENS






Tags:

Post a Comment

15 Comments