Register & Login Form Design By This Code

Ticker

10/recent/ticker-posts

Register & Login Form Design By This Code

AK Creative 4/29/2021 10:12:00 PM

 Login Form Design By Maa Blogger 


HTML Source Code


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Maa Blogger</title>

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

    <link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">

</head>

<body>

    <div class="full-page">

        <div class="sub-page">

            <div class="navigation-bar">

                <div class="logo">

                    <a href='https://programming387.blogspot.com/'>Maa Blogger</a>

                </div>

                <nav>

                    <ul id='MenuItems'>

                        <li><a href='#'>Home</a></li>

                        <li><a href='#'>Photos</a></li>

                        <li><a href='#'>Services</a></li>

                        <li><a href='#'>Contact</a></li>

                    </ul>

                </nav>

            </div>

            <div class="row">

                <div class="col-1">

                    <div class="form-box">

                        <div class="form">

                            <form class="login-form">

                                <center><h1 class="main-heading">Login Form</h1></center>

                <input type="text"placeholder="Username"/>

                <input type="password"placeholder="Password"/>

                <button>LOGIN</button>

                <p class="message">Not Registered? <a href="#">Register</a></p>

            </form>

                            <form class="register-form">

                                <center><h1 class="main-heading">Register Form</h1></center>

                <input type="text" placeholder="Username"/>

                <input type="text" placeholder="Email-id"/>

                <input type="password" placeholder="Password"/>

                <button>REGISTER</button>

                <p class="message">Already Registered?<a href="#">Login</a>

                </p>

            </form>

             </div>

                </div>

                </div>

                <div class="col-1">

                    <p class='defination'>World Intellectual Property Day 2021 shines a light on the critical role of small and medium-sized enterprises (SMEs) in the economy and how they can use intellectual property (IP) rights to build stronger, more competitive and resilient businesses.</p>

                </div>

            </div>

        </div>

    </div>

    <script src='https://code.jquery.com/jquery-3.2.1.min.js'>

    </script>

    <script>

        $('.message a').click(function(){$('form').animate({height: "toggle",opacity: "toggle"},"slow");});

    </script>

</body>

</html>


CSS Source Code


*


{


    margin: 0;


    padding: 0;


    box-sizing: border-box;


}


.full-page


{


    height: 100vh;


    width: 100%;


    background: url(https://justquikr.com/wp-content/uploads/2019/04/World-Intellectual-Property-Day.jpg);


    position: absolute;


}


.sub-page


{


    width: 1266px;


    height: 559px;


    position: absolute;


    background: url(bg1.jpg);


    background-size: cover;


    background-position: center;


    left: 50px;


    top: 50px;


}


.navigation-bar


{


    display: flex;


    align-items: center;


    padding: 20px;


    padding-left: 80px;


    padding-right: 30px;


    padding-top: 50px;


}


.logo


{


    position: fixed;


    margin-top: 10px;


}


.logo a


{


    text-decoration: none;


    color: white;


    font-size: 30px;


}


nav


{


    flex: 1;


    position: fixed;


    right: 0;


}


nav ul 


{


    display: inline-block;


    list-style: none;


}


nav ul li


{


    display: inline-block;


    margin-right: 90px;


    margin-top: 17px;


}


nav ul li a


{


    text-decoration: none;


    font-size: 30px;


    color: aqua;


    font-family: sans-serif;


}


nav ul li a:hover


{


    color: saddlebrown;


}


.row


{


    display: flex;


    align-items: center;


    flex-wrap: wrap;


    justify-content: space-around;


}


.col-1


{


    flex-basis: 50%;


    min-width: 300px;


}


.form-box


{


    width: 300px;


height: 420px;


position: relative;


    top: 50px;


    left: 120px;


background: rgba(0,0,0,0.1);


}


.main-heading


{


    color: red;


    padding-bottom: 30px;


}


.form


{


position: relative;


margin: 0 auto 100px;


padding: 45px;


    text-align: center;


}


.form input


{


font-family: high tower;


outline: none;


    border: none;


    border-bottom: 1px solid black;


width: 100%;


margin: 0 0 15px;


padding: 15px;


font-size: 18px;


}


.form button


{


font-family: calibri;


width: 100%;


    color: metal;


font-size: 14px;


cursor: pointer;


padding: 15px;


    border: none;


    background: green;


}


.form .message


{


    font-size: 18px;


margin: 15px 0 0;


    color: green;


}


.form .message a


{


color: orange;


text-decoration: none;


}


.form .register-form{


display: none;


}


.defination


{


    text-align: left;


    font-size: 30px;


    color: red;


    font-family: 'century';


    padding-left: 60px;


}



OUTPUT Screen


Registration Form


Login Form





Tags:

Post a Comment

13 Comments