Skip to main content

Aesthetic Login & Sign-up page | HTML, CSS, & Javascript

Take a tour of our final login and sign-up page.



HTML CODE:

We create three divs- the first one to select from the option of either login or sign-up containing two buttons, the second one with a form for sign-up, and the third one for login. To all the buttons on the page, we provide a single class and for both the forms, a single class is given.


CODE:

    <div id="options">
        <button class="but" style="margin-top: 20px;" onclick="appear();">Login</button>
        <button class="but" onclick="sinapp();">Sign-Up</button>
        <p>Use G-mail or Facebook account</p>
    </div>
    <div id="sign" class="formin">
        <form id="sin-cont">
            <input type="text" name="fn" placeholder="Enter Your First Name" required>
            <input type="text" name="ln" placeholder="Enter Your Last Name" required>
            <input type="text" name="un" placeholder="Enter Your Username"required>
            <input type="email" name="em" placeholder="Enter E-mail" required>
            <input type="password" name="ps" placeholder="Choose a password" required>
            <button class="but">Sign-Up</button>
        </form>
    </div>
    <div id="login" class="formin">
        <form id="log-cont">
            <input type="text" placeholder="Enter Username" required>
            <input type="password" placeholder="Enter Password" required>
            <button class="but">Enter</button>
        </form>
    </div>                 

                                        CSS CODE:

For the CSS part, we set up a background image in the body tag and style our buttons first. Then we place all the divs in the centre of our screen. The two forms are given display: none for they will be displayed only on click. We set the opacity of the forms and options div to 9 for better display. The input fields of the forms are given a gradient background to make them look more pretty. 
Options div

Login form
Sign-Up form

CODE:

    <style>
        body{
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            background-image: url(street_night_silhouettes_196749_3840x2160.jpg);
            background-repeat: no-repeat;
            background-size: cover;        

        }
        *{
            box-sizing: border-box;
        }
        .but{
            background-color:rgba(27, 27, 27, 0.945);
            color: white;
            padding: 15px 20px;
            border: none;
            cursor: pointer;
            width: 85%;
            margin: 15px 24px;
        }
        .but:hover{
            background-color: black;
        }
        #options{
            background-color: black;
            align-items: center;
            width: 300px;
            margin-left: 550px;
            margin-top: 175px;
            opacity: 0.9;
        }
        p{
            color: azure;
            padding-bottom: 30px;
            padding-left: 30px;
        }
        .formin{
            display: none;
            z-index: 9;
            background-color: black;
            align-items: center;
            width: 300px;
            margin-left: 550px;
            margin-top: 175px;
            opacity: 0.9;
            padding: 15px 15px;
        }
        .formin input{
            width: 100%;
            margin: 5px 0px 10px 0px;
            padding: 15px 15px;
            border: none;
            background-image: linear-gradient(to right,purple,blue);
            color: aliceblue;
        }
        #sign{
            margin-top: 125px;
        }

    </style>

                              JAVASCRIPT CODE:

The Javascript code contains two functions. The first one opens up the login form, and the second one opens up the Sign-Up form. In both the functions the option div display gets none and the forms get a block display. 

CODE:

<script>
    function appear(){
        document.getElementById("login").style.display="block";
        document.getElementById("options").style.display="none";
    }
    function sinapp(){
        document.getElementById("sign").style.display="block";
        document.getElementById("options").style.display="none";
    }
 
</script>


I hope you like this project, just use an image file of your convenience or mail: guyawsm@gmail.com for the image file.

                                                                                                   

Comments

Post a Comment

Popular posts from this blog

CAPTAIN FREAK 3: CHAPTER 1: THE PRISONER

  "Freak, what a joke! it's been 13 years now and he would be free in a few days. But glad at least his party lost all the elections all this while. Andy Hanson, that's what is his real name I guess?" said Dr. Gordon to his assistant manager Boris who was Party manager of the Green Party. "I guess they might elect someone else to represent the party on his behalf. He was sent to mental prison after his delusional condition was proved in court. He can't run for any position." said Boris, "A madman raised by the evils of his fate. Andy can't run for any positions but decisions would be his own with some different voice. The city celebrated when he was sent to jail. He lost everything, everything." said Gordon, "And that's why he is in a special kind of room in the prison. In his first year, he tried to kill some of the doctors. Since then he has been on the list. They call him the King of Prison." said Boris.  "But what sho...
Post a Comment
Read more

HOW TO BE LESS BORING AND BE MORE INTERESTING

We all are born amazing. Nobody in this world is ever boring. But sometimes, due to certain situations and lack of proper communication skills we are not able to convey ourselves, which makes us damn boring. So, here we'll be going over a few tips to be more interesting in participation. Now, it doesn't guarantee that those people who already find you boring would have a changed perspective on you. Because your first impression is the biggest game, and you had already played it on them. 1. BE A GOOD LISTENER:-  Now, trust it or not, people in this world, all of them will claim to be good listeners and tell that they get bored of people who talk much, but in reality, all of them love to talk. Everyone is interested in talking about themselves. Listening, lol, nobody likes that. Now if you let them talk about themselves and react to their things naturally they would find interest in you. Take examples in your life too. Suppose you are interested in telling your friend a long stor...
Post a Comment
Read more