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

Chapter 1- The Flaw In The Plan

"I've had enough trouble for a lifetime" - Harry Potter. (Not touching that) 30 YEARS LATER Jacob’s stationery shop was not built to hold this many people. The space was narrow, almost claustrophobic, with shelves pressed tightly against each wall and books stacked far beyond what seemed structurally safe. Old parchment, fresh ink, and dust hung in the air, forming a scent that clung to everything. Towers of second-hand books leaned dangerously, as though the entire place might collapse if someone reached too carelessly. No one seemed concerned. Students crowded every inch—arguing over titles, stretching across one another, competing with a quiet desperation that came from knowing there wouldn’t be enough for everyone. It wasn’t chaos exactly. It was controlled scarcity. And at the center of it all was Jacob. He moved through the shop with practiced ease, slipping between bodies without touching them, pulling books from impossible stacks, catching falling piles before the...
Post a Comment
Read more