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

Chapter 10- The Flaw In Their Plan

Edward slowly stepped out from behind the tree, revealing himself to Peter. He had Professor Flamel pinned by the throat, his wand pressed inches from the old man’s face. “Peter… you don’t understand,” Edward said, advancing. “This is necessary. I have to do this.” Peter backed away, wand raised, heart hammering. “I trusted you,” he choked out. “I thought so highly of you, Professor. How did you even get back into Hogwarts? Who helped you? Tell me!” Edward’s grip on Flamel tightened. “I will tell you everything, Peter. I promise. But let me finish this. I must kill him. Fifteen years I’ve waited—fifteen years for this moment!” “Expelliarmus!” Peter shouted, sending a jet of red light through the air—but Edward snapped his wand and blocked it with ease. “Sectumsempra!” Edward roared. The curse flew at Peter like a black blade. His reflexes kicked in; he dove sideways, but not fast enough. His right cheek tore open, his arm split with a deep gash, and he crashed onto the ground, screamin...
Post a Comment
Read more

Chapter 5- Bronze Snitch

Fictus Nativitas Peter found the spell in the diary. He murmured the description and usage of the spell slowly, making sure no one in the library could hear him. “Think of the object you wish to mimic—think closely—and then repeat clearly and precisely: Fictus Nativitas.” Peter knew exactly what he needed to mimic, what he needed to create. He practiced the spell under his breath all the way back to the dormitory. Later, sitting upright on his bed after his roommates had fallen asleep, Peter took out the diary once more. He reread the instructions, closed his eyes, and envisioned the wonderful moment he longed for: tomorrow’s match, the Golden Snitch clutched in his hand, his face glowing with triumph as the crowd roared. Peter could almost feel the victory. Slowly, he opened his eyes and raised his wand.  “Fictus Nativitas,” he whispered.                                ...
Post a Comment
Read more