(Source Code) Sign Up & Sign In With Google & Facebook Login Page

Hello! Frontend Web Developers In this blog post we will make the UI of the Sign Up & Sign In With Google & Facebook Login Page

In this mini project users can switch the signup – login form & we will make this possible with the help of HTML, CSS & JQuery.

Also Read: Ribbon Animated Login Page With HTML & CSS

We will also see the key concepts that we need to understand to make such projects on our own. At the end, I will provide the whole HTML, CSS & JQuery code that you can copy to run this project on your local device.

Key Concepts Used In Sign Up & Sign In With Google & Facebook Login Page:

• HTML Form Elements Like Form, input & Button
• CSS Box Model & Flexbox
• Font Awesome Icons
• CSS Animation & Media Query
• Jquery Event handling, Variables & Animate method

HTML For Sign Up & Sign In With Google & Facebook Login Page

1. Load jQuery

• The code includes jQuery from a CDN for using jQuery functionalities.

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

2. User Card Container

• We start with a div element that has a class of user-card. This div contains the login and signup forms.

   <div class="user-card round5">

3. Login Box

• Inside the user-card, there is a div with a class of login-box. This div contains the login form.

   <div class="login-box">

4. Login Form

• Inside the login-box, there is a form with a class of login-form. It contains input fields for username and password, and a submit button.

   <form class="login-form" name="login" action="">
     <input type="username" name="username" class="username" placeholder="username" />
     <input type="password" name="password" class="password" placeholder="password" />
     <input type="submit" name="login" value="Login" class="login" />
   </form>

5. Social Login Links

• Below the form, there are links for logging in with Facebook and Google.

   <a href="#" class="login-with-fb">
     <span class="icon fa fa-facebook"></span>
     Login with facebook
   </a>
   <a href="#" class="login-with-google">
     <span class="icon fa fa-google-plus"></span>
     Login with google
   </a>

6. Signup Box

• Next to the login-box, there is a div with a class of signup-box. This div contains the signup form.

   <div class="signup-box">

7. Signup Form

• Inside the signup-box, there is a form with a class of signup-form. It contains input fields for username, email, password, and confirm password, and a submit button.

 <form class="signup-form" name="signup" action="">
     <input type="username" name="username" class="username" placeholder="username" />
     <input type="email" name="email" class="email" placeholder="email" />
     <input type="password" name="password" class="password" placeholder="password" />
     <input type="password" name="confirm-password" class="confirm-password" placeholder="confirm-password" />
     <input type="submit" name="signup" value="Signup" class="signup" />
   </form>

8. Card Footer

• At the bottom of the user-card, there is a footer with a link to toggle between login and signup.

   <div class="footer">
     <span>or </span><a class="toggle-link" href="#">Sign Up</a>
   </div>

CSS For Sign Up & Sign In With Google & Facebook Login Page

1. Global Styles

• We set box-sizing for all elements. The body has no margin, or padding, and has a background color. It centers the content.

   * {
     box-sizing: border-box;
   }

   body {
     margin: 0;
     padding: 0;
     background: #fe8a93;
     font-family: arial, sans-serif;
     min-height: 100vh;
     display: flex;
     justify-content: center;
     align-items: center;
   }

2. Header Styles

• A header with a dark background, centered text, and some spacing.

   header {
     width: 100%;
     height: 80px;
     background: #222;
     text-align: center;
   }

3. User Card Styles

• The user-card class sets the size, position, background color, and box shadow for the card. It also adds rounded corners.

   .user-card {
     width: 350px;
     height: 350px;
     margin: 50px auto;
     position: relative;
     background: #fff;
     overflow: hidden;
     box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
     border-radius: 5px;
   }

4. Input Styles

• The input fields are styled with full width, height, border, padding, and margin. They also change the border color on focus.

   input {
     width: 100%;
     height: 40px;
     border-radius: 3px;
     border: 1px solid #dee3e4;
     padding: 3px 12px;
     margin: 6px 0;
   }

   input:focus {
     outline: none;
     border: 1px solid #03b3b5;
     transition: all .5s ease-in-out;
   }

5. Box Styles

• login-box and signup-box classes position the boxes, set the background color, and add padding.

   .login-box, .signup-box {
     position: absolute;
     top: 0;
     right: 0;
     width: 100%;
     height: calc(100% - 25px);
     background: #fff;
     border-radius: 5px;
   }

   .login-box {
     padding: 20px 40px;
     right: 0px;
   }

   .signup-box {
     padding: 40px;
     right: -350px;
   }

6. Button Styles

• Login and signup buttons are styled with center text, white color, background color, line height, and hover effects.

   .login, .signup {
     text-align: center;
     color: #fff;
     background: #03b3b5;
     line-height: 30px;
     opacity: 0.95;
     cursor: pointer;
   }

   .login:hover {
     opacity: 1;
   }

7. Social Login Styles

• Social login links are styled with full width, height, background color, text color, and hover effects.

   .login-with-fb {
     background: #527EBF;
   }

   .login-with-google {
     background: #DB4A37;
   }

8. Footer Styles

• The footer is positioned at the bottom, centered, with a small font size.

   .user-card .footer {
     position: absolute;
     bottom: 0;
     right: 0;
     width: 100%;
     height: 25px;
     text-align: center;
     color: #666;
     font-size: 13px;
     font-family: sans-serif;
   }

   .footer a {
     color: #03b3b5;
   }

Jquery For Sign Up & Sign In With Google & Facebook Login Page

1. Document Ready

• The jQuery script runs when the document is fully loaded.

   $(document).ready(function(){

2. Toggle Variable

• A variable cardToggle is used to track the state of the card (log in or signup).

   var cardToggle = 0;

3. Toggle Link Click Event

• When the toggle link is clicked, the function runs. It prevents the default action and toggles between login and signup.

   $('.toggle-link').on('click', function(event){
     event.preventDefault();
     if(cardToggle == 0){
       $(this).text('Login');
       $('.login-box').animate({ right: '350px' });
       $('.signup-box').animate({ right: '0' });
       cardToggle = 1;
     } else {
       $(this).text('Signup');
       $('.login-box').animate({ right: '0' });
       $('.signup-box').animate({ right: '-350px' });
       cardToggle = 0;
     }
   });

The Above JQUERY code creates a user card with login and signup forms. The forms switch with a sliding animation when the toggle link is clicked. The CSS styles make it look nice, and jQuery handles the interaction.

Source Code Of This Sign Up & Sign In With Google And Facebook Login Page

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="user-card round5">
	<div class="login-box">
		<form class="login-form" name="login" action="">
			<input type="username" name="username" class="username" placeholder="username" />
			<input type="password" name="password" class="password" placeholder="password" />
			<input type="submit" name="login" value="Login" class="login" />
		</form>

		<div class="or"></div>

		<a href="#" class="login-with-fb">
			<span class="icon fa fa-facebook"></span>
			Login with facebook
		</a>
		<a href="#" class="login-with-google">
			<span class="icon fa fa-google-plus"></span>
			Login with google
		</a>
	</div>
	<div class="signup-box">
		<form class="signup-form" name="signup" action="">
			<input type="username" name="username" class="username" placeholder="username" />
			<input type="email" name="email" class="email" placeholder="email" />
			<input type="password" name="password" class="password" placeholder="password" />
			<input type="password" name="confirm-password" class="confirm-password" placeholder="confirm-password" />
			<input type="submit" name="signup" value="Signup" class="signup" />
		</form>
	</div>

	<!-- Card Footer -->

	<div class="footer">
		<span>or </span><a class="toggle-link" href="#">Sign Up</a>
	</div>
</div>

Also Read: Sliding Login & Sign Up Form With HTML & CSS

CSS:

<style>
	*
{
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
}

body
{
  margin: 0;
  padding: 0;
  background: #fe8a93;
  font-family: arial, sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

a
{
  text-decoration: none
}

header{
  width: 100%;
  height: 80px;
  background: #222;
  text-align: center
}

h1
{
  color: #ddd;
  padding: 20px 20px;
  font: 10px 40px;
  margin: 0;
  display: inline-block
}

.by
{
  color: #a7a7a7;
  font-size: 16px;
  margin: 33px 0px;
  display: inline-block
}

.heart
{
  color: brown;
  display: inline-block;
  font-size: 20px;
  animation: heart 0.7s ease-in-out infinite;
}

header a
{
  color: #03b3b5;
  font-size: 22px;
  margin: 28px 10px;
  display: inline-block
}

header a:hover
{
  text-decoration: underline
}

.user-card
{
	width: 350px;
	height: 350px;
	margin: 50px auto;
  position: relative;
	background: #fff;
	overflow: hidden;
	box-shadow:         0 1px 3px 0 rgba(0,0,0,0.08);
	-moz-box-shadow:    0 1px 3px 0 rgba(0,0,0,0.08);
	-webkit-box-shadow: 0 1px 3px 0 rgba(0,0,0,0.08);
  border-radius:         5px;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;
}

input
{
	width: 100%;
	height: 40px;
	border-radius:         3px;
	-moz-border-radius:    3px;
	-webkit-border-radius: 3px;
	border: 1px solid #dee3e4;
	padding: 3px 12px;
	margin: 6px 0;
}

input:focus
{
	outline: none;
	border: 1px solid #03b3b5;
	transition:         all .5s ease-in-out;
	-o-transition:      all .5s ease-in-out;
	-moz-transition:    all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
}

.login-box,
.signup-box
{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: calc(100% - 25px);
	background: #fff;
  border-radius:         5px;
  -moz-border-radius:    5px;
  -webkit-border-radius: 5px;
}

.login-box{
	padding: 20px 40px;
	right: 0px;
}

.signup-box{
	padding: 40px;
	right: -350px;
}

.login, .signup
{
	text-align: center;
	color: #fff;
	background: #03b3b5;
	line-height: 30px;
	opacity: 0.95;
  cursor: pointer
}

.login:hover{opacity: 1}

.or
{
	display: block;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #dee3e4;
	position: relative;
	margin: 20px 0;
}

.or:before
{
	content: 'or';
	width: 40px;
	height: 18px;
	position: absolute;
	top: -5px;
	right: calc(50% - 20px);
	background-color: #fff;
	text-align: center;
	line-height: 10px;
	color: #555
}

.login-with-fb,
.login-with-google
{
	width: 100%;
	height: 40px;
	display: block;
	margin: 15px 0;
	color: #fff;
	text-align: center;
	line-height: 40px;
	font-size: 14px;
	opacity: .95;
  border-radius:         3px;
  -moz-border-radius:    3px;
  -webkit-border-radius: 3px;
}

.login-with-fb:hover,
.login-with-google:hover
{
	opacity: 1;
}

.login-with-fb
{
	background: #527EBF
}

.login-with-google
{
	background: #DB4A37;
}

.login-with-fb .icon,
.login-with-google .icon
{
	float: left;
	font-size: 21px;
	width: 50px;
	height: 26px;
	margin: 7px;
	padding: 2px;
	text-align: center;
	border-right: 1px solid #fff;
}


/**** footer *****/

.user-card .footer
{
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 25px;
	text-align: center;
	color: #666;
	font-size: 13px;
	font-family: sans-serif;
}

.footer a
{
	color: #03b3b5;
}

@keyframes heart{
  0%{
    transform:         scale(1, 1);
    -ms-transform:     scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
  50%{
    transform:         scale(1.5, 1.5);
    -ms-transform:     scale(1.5, 1.5);
    -webkit-transform: scale(1.5, 1.5);
  }
  100%{
    transform:         scale(1, 1);
    -ms-transform:     scale(1, 1);
    -webkit-transform: scale(1, 1);
  }
}
</style>

JQUERY:

Also Read: Glassmorphism Login Page With HTML & CSS

<script>
	$(document).ready(function(){

/* Login & Signup Toggle */

var cardToggle = 0;



$('.toggle-link').on('click', function(event){
   event.preventDefault();
	if(cardToggle == 0 ){
		$(this).text('Login');
		$('.login-box').animate({
			right: '350px'
		});
		$('.signup-box').animate({
			right: '0'
		});	

		cardToggle = 1;

	}else{
		$(this).text('Signup');
		$('.login-box').animate({
			right: '0'
		});
		$('.signup-box').animate({
			right: '-350px'
		});

		cardToggle = 0;
	}
})
})
</script>

About Author