Beautiful Sign In & Sign Up Form
close
Beautiful Sign In & Sign Up Form

Beautiful Sign In & Sign Up Form

Beautiful Sign In & Sign Up Form

Today we are going to build beautiful sign in and sign up form as you have seen in the above thumbnail it similar to this but about thumbnail is in vector form.

How do you do friends today we are going to design Beautiful Sign In & Sign Up Form

As you know the HTML markup is required for that so we should have some HTML markup first . Below is the code provided and you have to save it with the filename as provided.

HTML markup is not too much the main thing that works here is CSS. CSS makes it easy to customise your web pages and have some look for them so after html we will have CSS code because i like sequence.

The HTML code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Beautiful Sign In & Sign Up Form/index.html :

<!DOCTYPE html>
<html lang="en" ><head><meta charset="UTF-8"><title>Beautiful Sign in & Sign up Form</title><link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'><link rel="stylesheet" href="css/style.css"></head><body><h2>Beautiful Sign in & Sign up Form</h2>
<div class="container" id="container"><div class="form-container sign-up-container"><form action="#"><h1>Create Account</h1><div class="social-container"><a href="#" class="social"><i class="fab fa-facebook-f"></i></a><a href="#" class="social"><i class="fab fa-google-plus-g"></i></a><a href="#" class="social"><i class="fab fa-linkedin-in"></i></a></div><span>or use your email for registration</span><input type="text" placeholder="Name" /><input type="email" placeholder="Email" /><input type="password" placeholder="Password" /><button>Sign Up</button></form></div><div class="form-container sign-in-container"><form action="#"><h1>Sign in</h1><div class="social-container"><a href="#" class="social"><i class="fab fa-facebook-f"></i></a><a href="#" class="social"><i class="fab fa-google-plus-g"></i></a><a href="#" class="social"><i class="fab fa-linkedin-in"></i></a></div><span>or use your account</span><input type="email" placeholder="Email" /><input type="password" placeholder="Password" /><a href="#">Forgot your password?</a><button>Sign In</button></form></div><div class="overlay-container"><div class="overlay"><div class="overlay-panel overlay-left"><h1>Welcome Back!</h1><p>To keep connected with us please login with your personal info</p><button class="ghost" id="signIn">Sign In</button></div><div class="overlay-panel overlay-right"><h1>Hello, Friend!</h1><p>Enter your personal details and start journey with us</p><button class="ghost" id="signUp">Sign Up</button></div></div></div>
</div><footer><p>Created with <i class="fa fa-heart"></i> by<a target="_blank" href="https://www.facebook.com/softwebtuts">M.Muzammil</a>- Do You Like it ? If Yes Then Keep Visiting this site for more click<a target="_blank" href="https://www.softwebtuts.com">here</a> to visit site.</p>
</footer><script src="js/index.js"></script></body></html>

In the above code i have included fontawesome css library which is must because we have added some icons it this form.

As you can see that CSS code is a little bit lengthy but it's not too much lengthy that it will affect your page load time.

Without CSS our this script (Beautiful Sign In & Sign Up Form) will never look graceful. So here we are, our HTML markup is ready now we have to customize our HTML and it can be done using CSS.

So below is the CSS code for our HTML markup and you have to save it with the filename as provided. Make a new directory called css and put this file to that directory.

The CSS code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Beautiful Sign In & Sign Up Form/css/style.css :


@import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');*{box-sizing:border-box}body{background:#f6f5f7;display:flex;justify-content:center;align-items:center;flex-direction:column;font-family:'Montserrat', sans-serif;height:100vh;margin:-20px 0 50px}h1{font-weight:bold;margin:0}h2{text-align:center}p{font-size:14px;font-weight:100;line-height:20px;letter-spacing:0.5px;margin:20px 0 30px}span{font-size:12px}a{color:#333;font-size:14px;text-decoration:none;margin:15px 0}button{border-radius:20px;border:1px solid #FF4B2B;background-color:#FF4B2B;color:#FFFFFF;font-size:12px;font-weight:bold;padding:12px 45px;letter-spacing:1px;text-transform:uppercase;transition:transform 80ms ease-in}button:active{transform:scale(0.95)}button:focus{outline:none}button.ghost{background-color:transparent;border-color:#FFFFFF}form{background-color:#FFFFFF;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 50px;height:100%;text-align:center}input{background-color:#eee;border:none;padding:12px 15px;margin:8px 0;width:100%}.container{background-color:#fff;border-radius:10px;box-shadow:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);position:relative;overflow:hidden;width:768px;max-width:100%;min-height:480px}.form-container{position:absolute;top:0;height:100%;transition:all 0.6s ease-in-out}.sign-in-container{left:0;width:50%;z-index:2}.container.right-panel-active .sign-in-container{transform:translateX(100%)}.sign-up-container{left:0;width:50%;opacity:0;z-index:1}.container.right-panel-active .sign-up-container{transform:translateX(100%);opacity:1;z-index:5;animation:show 0.6s}@keyframes show{0%, 49.99%{opacity:0;z-index:1}50%, 100%{opacity:1;z-index:5}}.overlay-container{position:absolute;top:0;left:50%;width:50%;height:100%;overflow:hidden;transition:transform 0.6s ease-in-out;z-index:100}.container.right-panel-active .overlay-container{transform:translateX(-100%)}.overlay{background:#FF416C;background:-webkit-linear-gradient(to right, #FF4B2B, #FF416C);background:linear-gradient(to right, #FF4B2B, #FF416C);background-repeat:no-repeat;background-size:cover;background-position:0 0;color:#FFFFFF;position:relative;left:-100%;height:100%;width:200%;transform:translateX(0);transition:transform 0.6s ease-in-out}.container.right-panel-active .overlay{transform:translateX(50%)}.overlay-panel{position:absolute;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:0 40px;text-align:center;top:0;height:100%;width:50%;transform:translateX(0);transition:transform 0.6s ease-in-out}.overlay-left{transform:translateX(-20%)}.container.right-panel-active .overlay-left{transform:translateX(0)}.overlay-right{right:0;transform:translateX(0)}.container.right-panel-active .overlay-right{transform:translateX(20%)}.social-container{margin:20px 0}.social-container a{border:1px solid #DDDDDD;border-radius:50%;display:inline-flex;justify-content:center;align-items:center;margin:0 5px;height:40px;width:40px}footer{background-color:#222;color:#fff;font-size:14px;bottom:0;position:fixed;left:0;right:0;text-align:center;z-index:999}footer p{margin:10px 0}footer i{color:red}footer a{color:#3c97bf;text-decoration:none}
That's all we have created a form but to add some functionality in it we are going to use JavaScript.

This JavaScript code will be used to make sign up or sign in form visible and the user Clicks on any button then that form will be shown.

If the user wants to sign up then he has to click sign up button and the signup form will be shown and vice versa.
So we have written HTML markup and customised it and now we will add some functionality in this project (Beautiful Sign In & Sign Up Form).

To make this project (Beautiful Sign In & Sign Up Form) work properly for that we will use JavaScript.

So here is a JavaScript for our project (Beautiful Sign In & Sign Up Form) and also save it with the filename as provided. Make a new directory called js and put this file to that directory.

The JavaScript code provided below can have some errors because the source code is automatically encoded so I recommend you to download the project files from the download link provided below.

Save It As Beautiful Sign In & Sign Up Form/js/index.js :

const signUpButton = document.getElementById("signUp");
const signInButton = document.getElementById("signIn");
const container = document.getElementById("container");
signUpButton.addEventListener("click", () => {
container.classList.add("right-panel-active");
});
signInButton.addEventListener("click", () => {
container.classList.remove("right-panel-active");
});
So this was a beautiful sign in and sign up for today I think you might like it.

At The End :

So here we are, We have done and our project Beautiful Sign In & Sign Up Form is ready now you can save all the files as provided.
Like CSS files in css directory and JavaScript files in a JS directory name. Below is directory tree of the files and folders of this project.


  • Beautiful Sign In & Sign Up Form
    • css
      • style.css
    • js
      • index.js
    • index.html

Download Project (Beautiful Sign In & Sign Up Form) File :

Beautiful Sign In & Sign Up Form.zip
File Size 3.76 KB
Click the download button above and your download will be started in few ( 10 ) seconds. If your download does not start automatically then click Download Started Button Above to download it manually.

I hope that this post help you a lot and I think you will appreciate it so don't take that appreciation with you if you like my post appreciate me in the comment form below.

Now go and implement this beautiful sign in and sign up on your website.
Thank you and Good Luck!
Disqus Codes

No comments

Notifications

Disqus Logo