New Animated Login or signup page made by HTML, CSS and JavaScript.

By Aatifa Mugheer

 <!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Login And Registration Form</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
</head>
<body>
    <div class="wrapper">
        <div class="form-wrapper sign-in">
            <form action="">
                <h2>Login</h2>
                <div class="input-group">
                    <input type="text" required>
                    <label for="">Username</label>
                    <i class='bx bxs-user'></i>
                </div>

                <div class="input-group">
                    <input type="password" required>
                    <label for="">Password</label>
                    <i class='bx bxs-lock-alt'></i>
                </div>
                <div class="remember">
                    <label><input type="checkbox">Remember me</label>
                </div>
                <button type="submit">Login</button>
                <div class="SignUp-link">
                    <p>Don't have an account? <a href="#" class="SignUpBtn-link">Sign Up</a></p>
                </div>

            </form>
        </div>

        <div class="form-wrapper sign-Up">
            <form action="">
                <h2>Sign Up</h2>
                <div class="input-group">
                    <input type="text" required>
                    <label for="">Username</label>
                    <i class='bx bxs-user'></i>
                </div>
                <div class="input-group">
                    <input type="email" required>
                    <label for="">Email</label>
                    <i class='bx bxs-envelope'></i>
                    <i class='bx bxs-user'></i>
                </div>

                <div class="input-group">
                    <input type="password" required>
                    <label for="">Password</label>
                    <i class='bx bxs-lock-alt'></i>
                </div>
                <div class="remember">
                    <label><input type="checkbox"> I agree to the terms & conditions</label>
                </div>
                <button type="submit">Sign Up</button>
                <div class="SignUp-link">
                    <p>Already have an account? <a href="#" class="SignInBtn-link">Sign In</a></p>
                </div>

            </form>
        </div>
    </div>
    <script src="script.js"></script>
   
</body>
</html>

style.css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}

.wrapper{
    position: relative;
    width: 400px;
    height: 500px;
    background: #000;
    box-shadow: 0 0 50px #0ef;
    border-radius: 20px;
    padding: 40px;
    overflow: hidden;
}

.wrapper:hover {
    animation: animate 1s linear infinite;
}

@keyframes animate {
    100% {
        filter: hue-rotate(360deg);
    }
}

.form-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: 1s ease-in-out;
}

.wrapper.active .form-wrapper.sign-in {
    transform: translateY(-450px);
}

.wrapper .form-wrapper.sign-Up {
    position: absolute;
    top: 450px;
    left: 0;
}

.wrapper.active .form-wrapper.sign-Up {
    transform: translateY(-450px);
}

h2 {
    font-size: 30px;
    color: #fff;
    text-align: center;
}

.input-group {
    position: relative;
    margin: 30px 0;
    border-bottom: 2px solid #fff;
}

.input-group label {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #fff;
    pointer-events: none;
    transition: .5s;
}

.input-group input {
    width: 320px;
    height: 40px;
    font-size: 16px;
    color: #fff;
    padding: 0 5px;
    background: transparent;
    border: none;
    outline: none;
}

.input-group input:focus~label,
.input-group input:valid~label {
    top: -5px;
}

.input-group i{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 18px;
    color: #fff;
    transition: .5s;
}

.input-group input:focus~i,
.input-group input:valid~i {
    color: #0ef;
}

.remember {
    margin: -5px 0 15px 5px;
}

.remember label {
    color: #fff;
    font-size: 14px;
}

.remember label input {
    accent-color: #0ef;
}

button {
    position: relative;
    width: 100%;
    height: 40px;
    background: #0ef;
    box-shadow: 0 0 10px #0ef;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    cursor: pointer;
    border-radius: 30px;
    border: none;
    outline: none;
}

.SignUp-link {
    font-size: 14px;

    text-align: center;
    margin: 15px 0;
}

.SignUp-link p {
    color: #fff;

}

.SignUp-link p a {
    color: #0ef;
    text-decoration: none;
    font-weight: 500;
}

script.js

const signInBtnLink = document.querySelector('.SignInBtn-link');
const signUpBtnLink = document.querySelector('.SignUpBtn-link');
const wrapper = document.querySelector('.wrapper');

signUpBtnLink.addEventListener('click', () =>{
    wrapper.classList.toggle('active');
});

signInBtnLink.addEventListener('click', () =>{
    wrapper.classList.toggle('active');
});

Comments

Post a Comment

Popular posts from this blog

C Program using continue statement

By Aatifa Mugheer
  #include <stdio.h> int main () {     int i , age ;     for ( i = 0 ; i < 10 ; i ++){     printf ( " %d \n Enter you age \n " , i );     scanf ( " %d " ,& age );     // if (age>10)     // {     // break;     // }     if ( age > 10 )     {         continue ;     }         printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "we have not come across any continue statement" );     printf ( "Aatifa is a good girl" );     }     return 0 ; } OUTPUT: 0 Enter you a...
Read more

C program of WHILE Loop

By Aatifa Mugheer
  #include <stdio.h> int main () {     int i = 0 ;     while ( i < 54 )     {         printf ( " %d \n " , i );         i = i + 1 ;     }         return 0 ; } OUTPUT 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53
Read more

NULL Pointer in C.

By Aatifa Mugheer
  #include <stdio.h> #include <conio.h> int main () {     int b = 34 ;     int * pt = & b ;     printf ( "The address of b is %d \n " , pt );         int a = 34 ;     int * ptr = NULL ;     if ( ptr != NULL )     printf ( "The address of a is %d \n " , * ptr );     else {         printf ( "The pointer is a null pointer and can not be defrenced" );     }     return 0 ; } OUTPUT: The address of b is 6422288 The pointer is a null pointer and can not be defrenced
Read more

C Program using DO WHILE loop

By Aatifa Mugheer
  #include <stdio.h> int main () {     int num , index = 0 ;     printf ( "Enter a number \n " );     scanf ( " %d " , & num );     do     {         printf ( " %d \n " , index + 1 );         index = index + 1 ;     } while ( index < num );     return 0 ; } OUTPUT: Enter a number 5 1 2 3 4 5
Read more

C Program using SWITCH statement

By Aatifa Mugheer
  #include <stdio.h> int main () {     int i = 9 ;     switch ( i ) {           case 5 :         printf ( "value is 7" );         break ;         case 8 :         printf ( "value is 8" );         break ;         case 9 :         printf ( "value is 9" );         break ;             default :         printf ( "value is not present" );         break ;     }     return 0 ; } OUTPUT value is 9
Read more

C Program to print multiplication table of any number.

By Aatifa Mugheer
  #include <stdio.h> int main () {     int num ;     printf ( "Enter the number you want multiplication table of: \n " );     scanf ( " %d " , & num );     printf ( "Multiplication table of %d is as follows: \n " , num );     for ( int i = 1 ; i < 11 ; i ++)     {         printf ( " %d x %d = %d \n " , num , i , num * i );     }         return 0 ; } Enter the number you want multiplication table of: 4 Multiplication table of 4 is as follows: 4 x 1 = 4 4 x 2 = 8 4 x 3 = 12 4 x 4 = 16 4 x 5 = 20 4 x 6 = 24 4 x 7 = 28 4 x 8 = 32 4 x 9 = 36 4 x 10 = 40 Enter the number you want multiplication table of: 67 Multiplication table of 67 is as follows: 67 x 1 = 67 67 x 2 = 134 67 x 3 = 201 67 x 4 = 268 67 x 5 = 335 67 x 6 = 402 67 x 7 = 469 67 x 8 = 536 67 x 9 = 603 67 x 10 = 670 Enter the number you want multiplication table of: 436 Multiplication table of 436...
Read more

C Language Travel Agency Manager Exercise.

By Aatifa Mugheer
  #include <stdio.h> struct driver {     char name [ 45 ];     char dlNo [ 50 ];     char route [ 47 ];     int kms ; }; int main () {     struct driver d1 , d2 , d3 ;     printf ( "Enter the details of drivers no.1 \n " );     printf ( "Enter the name of first drivers \n " );     scanf ( " %s " , & d1 . name );     printf ( "Enter the dlNo of first drivers \n " );     scanf ( " %s " , & d1 . dlNo );     printf ( "Enter the route of first drivers \n " );     scanf ( " %s " , & d1 . route );     printf ( "Enter the number of kms of first drivers \n " );     scanf ( " %d " , & d1 . kms );     printf ( "Enter the details of drivers no.2 \n " );     printf ( "Enter the name of second drivers \n " );     scanf ( " %s " , & d2 . name );     printf ( "Enter the dlNo of second d...
Read more

STRUCTURE IN C PROGRAMMING.

By Aatifa Mugheer
  #include <stdio.h> #include <string.h> struct student {     int id ;     int marks ;     char fav_char ;     char name [ 34 ]; }; int main () {     struct student aatifa , xyz , abc ;     aatifa . id = 1 ;     xyz . id = 2 ;     abc . id = 3 ;     aatifa . marks = 445 ;     xyz . marks = 450 ;     abc . marks = 451 ;     aatifa . fav_char = 'p' ;     xyz . fav_char = 'p' ;     abc . fav_char = 'p' ;     strcpy ( aatifa . name , "aatifa is a programmer" );     printf ( "aatifa got %d marks \n " , aatifa . marks );       printf ( "aatifa's name is: %s \n " , aatifa . name );     return 0 ; } OUTPUT: aatifa got 445 marks aatifa's name is: aatifa is a programmer
Read more