Skip to content

Coding Handwritten Notes Browse Here

CodewithCurious
  • Home
  • Projects
  • Ebooks
  • Blogs
  • Interview QnA
  • Home
  • Projects
  • Ebooks
  • Blogs
  • Interview QnA
Browse Handwritten Notes

Kodekolud coupon code
  • Python Handwritten Notes
  • Java Handwritten Notes
  • DSA Handwritten Notes
  • React Js Handwritten Notes
  • Browser All Handwritten Notes
Free Ebooks
  • Python Ebook
  • Java Ebook
  • Python Games Ebook
  • Interview QnA Ebook
  • Browse All Ebooks
Free Projects
  • Python Projects
  • Java Projects
  • C++ Projects
  • HTML CSS JS Projects
Free Ebooks
  • Python Ebook
  • Java Ebook
  • Python Games Ebook
  • Interview QnA Ebook
  • Browse All Ebooks

/ projects, Web Development Projects / By Goutam Prajapat

Responsive Sign In & Sign Up Form Using HTML , CSS And JS With Source Code

Responsive Sign In & Sign Up Form Using HTML , CSS And JS

Introduction

Hello developers, all of you are welcome to this blog post. Today we have created a sign in and sign up form. It is user friendly as well as fully responsive. To create this form, we have used HTML CSS and JavaScript.

We have divided this form into two parts, one is sign in form and the other is sign up form. If you go to sign form and you have to do sign up, then you can go from sign in to sign up form in one click. We have added this because when the user comes to our website, he will not have any problem in signing in or signing up, due to which the user will have a good experience towards our website.

Steps to Create a Sign In & Sign Up Form:-

To use the code of this form, you have to keep some things in mind like how to create a folder and how to link other important files in the HTML file. It is important to keep these things in mind, so let us know. is step b step.

  1. To use Sign In Form and Sign Up Form, create a folder in your computer or laptop, which you can name as per your choice.
  2. If you have created a folder in your computer, now open it in whatever code editor you use.
  3. If you have opened the folder in your code editor, then now you will have to create important files which are index.html, style.css and script.js.
  4. Now you will have to link these three files to each other. Use this tag to link css to the HTML file.<link rel=”stylesheet” href=”style.css”> Use this tag to link JavaScript  <script src=”script.js”></script> Now all your files are linked.

HTML (index.html)

Get Discount on Top Educational Courses

Brand NameDiscount InformationCoupon Codes Link
Educative.io20% discount on Educative courses and plans
W3Schools20% discount on W3Schools courses
KodeKloud10% discount on KodeKloud courses and plans
GeeksforGeeks30% discount on GeeksforGeeks courses
Target Test Prep20% discount on Target Test Prep
Coding Ninjas₹5000 discount on Coding Ninjas courses
Skillshare40% discount on Skillshare
DataCamp50% discount on DataCamp
365 Data Science57% discount on 365 Data Science Plans
Get SmarterFlat 20% discount on Get Smarter courses
SmartKeedaFlat 40% discount on SmartKeeda courses
StackSocial20% discount on StackSocial courses
				
					



	
	
	
	
	<title>Sign in &amp; Sign up Form</title>



	<div class="container">
		<div class="forms-container">
			<div class="signin-signup">
				
					<h2 class="title">Sign in</h2>
					<div class="input-field">
						<i class="fas fa-user"></i>
						
					</div>
					<div class="input-field">
						<i class="fas fa-lock"></i>
						
					</div>
					
					<p class="social-text">Or Sign in with social platforms</p>
					<div class="social-media">
						<a href="#" class="social-icon">
							<i class="fab fa-facebook-f"></i>
						</a>
						<a href="#" class="social-icon">
							<i class="fab fa-twitter"></i>
						</a>
						<a href="#" class="social-icon">
							<i class="fab fa-google"></i>
						</a>
						<a href="#" class="social-icon">
							<i class="fab fa-linkedin-in"></i>
						</a>
					</div>
				
				
					<h2 class="title">Sign up</h2>
					<div class="input-field">
						<i class="fas fa-user"></i>
						
					</div>
					<div class="input-field">
						<i class="fas fa-envelope"></i>
						
					</div>
					<div class="input-field">
						<i class="fas fa-lock"></i>
						
					</div>
					
					<p class="social-text">Or Sign up with social platforms</p>
					<div class="social-media">
						<a href="#" class="social-icon">
							<i class="fab fa-facebook-f"></i>
						</a>
						<a href="#" class="social-icon">
							<i class="fab fa-twitter"></i>
						</a>
						<a href="#" class="social-icon">
							<i class="fab fa-google"></i>
						</a>
						<a href="#" class="social-icon">
							<i class="fab fa-linkedin-in"></i>
						</a>
					</div>
				
			</div>
		</div>

		<div class="panels-container">
			<div class="panel left-panel">
				<div class="content">
					<h3>Lorem ipsum dolor sit amet.</h3>
					<p>
						Discover a world of possibilities! Join us and explore a vibrant
          community where ideas flourish and connections thrive.
					</p>
					<button class="btn transparent" id="sign-up-btn">
						Sign up
					</button>
				</div>
				<img decoding="async" src="https://i.ibb.co/6HXL6q1/Privacy-policy-rafiki.png" class="image" alt="" />
			</div>
			<div class="panel right-panel">
				<div class="content">
					<h3>Lorem ipsum dolor sit amet.</h3>
					<p>
						Thank you for being part of our community. Your presence enriches our
          shared experiences. Let's continue this journey together!
					</p>
					<button class="btn transparent" id="sign-in-btn">
						Sign in
					</button>
				</div>
				<img decoding="async" src="https://i.ibb.co/nP8H853/Mobile-login-rafiki.png" class="image" alt="" />
			</div>
		</div>
	</div>

	



				
			

CSS (Style.css)

				
					@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&amp;display=swap');


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
	font-family: 'Montserrat', sans-serif;
}

body,
input {
  font-family: 'Montserrat', sans-serif;
}

.container {
  position: relative;
  width: 100%;
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
}

.forms-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.signin-signup {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: 75%;
  width: 50%;
  transition: 1s 0.7s ease-in-out;
  display: grid;
  grid-template-columns: 1fr;
  z-index: 5;
}

form {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

form.sign-up-form {
  opacity: 0;
  z-index: 1;
}

form.sign-in-form {
  z-index: 2;
}

.title {
  font-size: 2.2rem;
  color: black;
  margin-bottom: 10px;
}

.input-field {
  max-width: 380px;
  width: 100%;
  background-color: #f0f0f0;
  margin: 10px 0;
  height: 55px;
  border-radius: 5px;
  display: grid;
  grid-template-columns: 15% 85%;
  padding: 0 0.4rem;
  position: relative;
}

.input-field i {
  text-align: center;
  line-height: 55px;
  color: #acacac;
  transition: 0.5s;
  font-size: 1.1rem;
}

.input-field input {
  background: none;
  outline: none;
  border: none;
  line-height: 1;
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
}

.input-field input::placeholder {
  color: #aaa;
  font-weight: 500;
}

.social-text {
  padding: 0.7rem 0;
  font-size: 1rem;
}

.social-media {
  display: flex;
  justify-content: center;
}

.social-icon {
  height: 46px;
  width: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.45rem;
  color: #333;
  border-radius: 50%;
  border: 1px solid #333;
  text-decoration: none;
  font-size: 1.1rem;
  transition: 0.3s;
}

.social-icon:hover {
  color: orangered;
  border-color: orangered;
}

.btn {
  width: 150px;
  background-color: black;
  border: none;
  outline: none;
  height: 49px;
  border-radius: 4px;
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 10px 0;
  cursor: pointer;
  transition: 0.5s;
}

.btn:hover {
  background-color: #000000;
  color: white;
}
.panels-container {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.container:before {
  content: "";
  position: absolute;
  height: 2000px;
  width: 2000px;
  top: -10%;
  right: 48%;
  transform: translateY(-50%);
  background-image: linear-gradient(-45deg, black 0%, rgb(0, 255, 170) 100%);
  transition: 1.8s ease-in-out;
  border-radius: 50%;
  z-index: 6;
}

.image {
  width: 100%;
  transition: transform 1.1s ease-in-out;
  transition-delay: 0.4s;
}

.panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  text-align: center;
  z-index: 6;
}

.left-panel {
  pointer-events: all;
  padding: 3rem 17% 2rem 12%;
}

.right-panel {
  pointer-events: none;
  padding: 3rem 12% 2rem 17%;
}

.panel .content {
  color: #fff;
  transition: transform 0.9s ease-in-out;
  transition-delay: 0.6s;
}

.panel h3 {
  font-weight: 600;
  line-height: 1;
  font-size: 1.5rem;
}

.panel p {
  font-size: 0.95rem;
  padding: 0.7rem 0;
}

.btn.transparent {
  margin: 0;
  background: none;
  border: 2px solid #fff;
  width: 130px;
  height: 41px;
  font-weight: 600;
  font-size: 0.8rem;
}

.right-panel .image,
.right-panel .content {
  transform: translateX(800px);
}

/* ANIMATION */

.container.sign-up-mode:before {
  transform: translate(100%, -50%);
  right: 52%;
}

.container.sign-up-mode .left-panel .image,
.container.sign-up-mode .left-panel .content {
  transform: translateX(-800px);
}

.container.sign-up-mode .signin-signup {
  left: 25%;
}

.container.sign-up-mode form.sign-up-form {
  opacity: 1;
  z-index: 2;
}

.container.sign-up-mode form.sign-in-form {
  opacity: 0;
  z-index: 1;
}

.container.sign-up-mode .right-panel .image,
.container.sign-up-mode .right-panel .content {
  transform: translateX(0%);
}

.container.sign-up-mode .left-panel {
  pointer-events: none;
}

.container.sign-up-mode .right-panel {
  pointer-events: all;
}

@media (max-width: 870px) {
  .container {
    min-height: 800px;
    height: 100vh;
  }
  .signin-signup {
    width: 100%;
    top: 95%;
    transform: translate(-50%, -100%);
    transition: 1s 0.8s ease-in-out;
  }

  .signin-signup,
  .container.sign-up-mode .signin-signup {
    left: 50%;
  }

  .panels-container {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr;
  }

  .panel {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 2.5rem 8%;
    grid-column: 1 / 2;
  }

  .right-panel {
    grid-row: 3 / 4;
  }

  .left-panel {
    grid-row: 1 / 2;
  }

  .image {
    width: 200px;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.6s;
  }

  .panel .content {
    padding-right: 15%;
    transition: transform 0.9s ease-in-out;
    transition-delay: 0.8s;
  }

  .panel h3 {
    font-size: 1.2rem;
  }

  .panel p {
    font-size: 0.7rem;
    padding: 0.5rem 0;
  }

  .btn.transparent {
    width: 110px;
    height: 35px;
    font-size: 0.7rem;
  }

  .container:before {
    width: 1500px;
    height: 1500px;
    transform: translateX(-50%);
    left: 30%;
    bottom: 68%;
    right: initial;
    top: initial;
    transition: 2s ease-in-out;
  }

  .container.sign-up-mode:before {
    transform: translate(-50%, 100%);
    bottom: 32%;
    right: initial;
  }

  .container.sign-up-mode .left-panel .image,
  .container.sign-up-mode .left-panel .content {
    transform: translateY(-300px);
  }

  .container.sign-up-mode .right-panel .image,
  .container.sign-up-mode .right-panel .content {
    transform: translateY(0px);
  }

  .right-panel .image,
  .right-panel .content {
    transform: translateY(300px);
  }

  .container.sign-up-mode .signin-signup {
    top: 5%;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 570px) {
  form {
    padding: 0 1.5rem;
  }

  .image {
    display: none;
  }
  .panel .content {
    padding: 0.5rem 1rem;
  }
  .container {
    padding: 1.5rem;
  }

  .container:before {
    bottom: 72%;
    left: 50%;
  }

  .container.sign-up-mode:before {
    bottom: 28%;
    left: 50%;
  }
}
				
			

Javascript (Script.js)

				
					const sign_in_btn = document.querySelector("#sign-in-btn");
const sign_up_btn = document.querySelector("#sign-up-btn");
const container = document.querySelector(".container");

sign_up_btn.addEventListener("click", () =&gt; {
  container.classList.add("sign-up-mode");
});

sign_in_btn.addEventListener("click", () =&gt; {
  container.classList.remove("sign-up-mode");
});
				
			

ludo game in python using gui

Shivakshi Chouhan
•
July 6, 2025
•
projects, Python Games, Python Projects
•
No Comments

ludo game in python using gui and thinkter introduction The “ludo game in python“ project is a simplified digital version of the …

hotel management system in python

Shivakshi Chouhan
•
July 6, 2025
•
projects, Python Projects
•
No Comments

hotel management system in python introduction The Hotel Management System is a simple, interactive GUI-based desktop application developed using Python’s Tkinter library. …

Cryptography App in python using gui

Shivakshi Chouhan
•
July 6, 2025
•
projects, Python Projects
•
No Comments

cryptography app in python using gui introduction In the digital age, data security and privacy are more important than ever. From messaging …

portfolio generator tool in python using GUI

Shivakshi Chouhan
•
July 4, 2025
•
projects, Python Projects
•
No Comments

portfolio generator tool in python using GUI introduction In today’s digital-first world, having a personal portfolio is essential for students, job seekers, …

Get Huge Discounts
pecial Halloween Sale: Flat 30% Discount on GMAT, GRE, SAT, and EA Plans!
educative coupon code
More Python Projects

ludo game in python using gui

hotel management system in python

Cryptography App in python using gui

portfolio generator tool in python using GUI

Interactive story game in python using gUI

maze generator using Python PyGame gUI

payroll management system using Python with Graphical user interface using Tkinter

MathGenius Pro – AI-Powered Math Solver Using Python

Warp Perspective Using Open CV Python

Custom AI Story Generator With Emotion Control Using Python

AI Powered PDF Summarizer Using Python

AI Based Career Path Recommender Using Python

AI Virtual Painter Using Python Using OpenCV And Python Graphics

TUI Expense Tracker Using Textual in Python

A Django-Based Gym Management System

Windows 12 Notepad Using Python

Typing Speed Test Game using Python

Inventory Management System Using Python

Drawing Chhatrapati Shivaji Maharaj Using Python using turtle Module

Bank Management System Using Python Django

Pharmacy Management System Using Python Django

Complain Management using Python With a Graphical User Interface (GUI)

COVID 19 Hospital Management Using Python | Covid 19 Hospital management using Django Graphical User Interface covid 19 hospital management django

Drawing Ganesha Using Python Turtle Graphics [Drawing Ganpati Using Python]

Contact Management System In PYTHON with complete source code

KBC Game Using Python With Source Code

Scraping Data From Google Maps Python With Source Code

Building A WhatsApp Bot Using Python With Source Code

Create a Screen Recorder Using Python

Create a Telegram Bot Using Python With Source Code

File Sharing App Using Python With Source Code

21 Number Game Using Python With Source Code

Automated Instagram Message Sending Using Python With Source Code

Joining Multiple Images To Display Using Open CV Python With Source Code

QR Code & Bar Code Detection Using Open CV Python With Source Code

Object Tracking Using Open CV Python With Source Code

Resume Analyzer using Python With Source Code

EMI Calculator Using Python With Source Code

Typing Game Using Python With Source Code

Tiles– A Sliding Puzzle Game in Python With Source Code

Spaceship Game Using Python With Source Code

Simon Says– Classic Memory Puzzle Game Using Python With Source Code

Memory Game Using Python: A Card Matching Game With Source Code

Optical Illusion Game with Python With Source Code

Creating a Connect Four Game Using Python With Source Code

Cannon Game Using Python With Source Code

Build Your Own Paint App with Python With Source Code

Pacman Game with Python With Source

Blackjack Game Using Python With Source Code

Aeroblasters: 2D Vertical Plane Shooter Game Using Python and Pygame With Source Code

A Simple Maze Drawing Game in Python With Source Code

OMR MCǪ Automated Grading Using Open CV Python With Source Code

Shape Detection Using Open CV Python With Source Code

Text Detection Using Open CV Python With Source Code

Object Measurement Using Open CV Python With Source Code

Realtime Colour Detection Using Open CV Python With Source Code

Volume & Brightness Control Using Open CV Python

Vehicle Speed Estimation Using Open CV Python With Source Code

CAPTCHA Generator Using Python With Source Code

Google Search Clone using Python With Source Code

Hostel Management System Using Python with source code Python Graphical Interface Tkinter With Source Code

Contra Game Using Python Pygame With Source Code

Restaurant Billing System Using Python with Tkinter Module With GUI With Source Code

Jungle Dash Game Using Python With source code using Pygame

Tetris Game using Python pygame with source code

Super Mario Game using Python with source code

Library Management System Using Python with Source Code using Python GUI Tkinter (Graphical User Interface)

Space Shooter Game Using Python With Source Code

Hotel Management System Using Python with source code using Graphical User interface GUI

Student Management System using Python with Source Code

Billing Software Using Python With Source Code

Hospital Management Using Python with source code

2048 Game Using Python Tkitner With Source Code

Valentine Day Project using Python Turtle With Source Code

Drawing Rose Using Python Turtle with Python Turtle Graphics With Source Code

Binary to Decimal & Decimal to Binary Converter Using Python With Source Code

Game Building Using Python – Rock, Paper and Scissor

Weather App using Django With Source Code

Make an Indian Flag using Turtle Python With Source COde

Notepad Using Python Tkinter With Source Code

Get Info of Phone Number using Python With Source Code

Car Racing Game Using Python With Source Code

Convert Image to PDF Using Python GUI With Source Code

Library Management using Python GUI With Source Code

Creating GUI Piano Using Python With Source Code

Get Instagram Account Details using Python With Source Code

Drawing Pikachu Using Python With Source Code

Building Our Own ChatGPT using Python With Source Code

Detect Plagiarism in files using Python With Source Code

Language Detection of a Sentence using Python With Source Code

Black and White to Colour Images using Python With Source Code

Photo Collage Maker using Python With Source Code

Word Cloud Using Python Language

Birthday Wishes Using Python With Source Code

OTP Verification using Python With Source Code

Quiz Application Using Python With Source Code

BMI Calculator using python With source Code

Scientific calculator using Python With Source Code

Draw Doraemon Using Python With Source Code

Convert Text to speech using python With source Code

GUI alarm Clock Using Python With Source Code

Flappy Bird Game Using Python With Source Code

Hangman Game using python With Source Code

Sudoku Game Using Python With Source Code

GUI Based Internet Speed Test Using Python With Source Code

Ping pong game using python With Source Code

Snake Game Using Python With Source Code

Creating A WaterMark on Image using OpenCV with Source Code

Radha Krishna Drawing using Python with Source Code

GUI Digital Clock Using Python with Source Code

GUI Stopwatch using Python with Source Code

Turtle Patterns in Python with Source Code

Rock Paper Scissor Game using Python with Source Code

Drawing Patterns Using Python Turtle with Source Code

Convert Image Into Sketch Using Python

Send WhatsApp Messages Using Python with Source Code

Find Wi-fi Passwords using Python with Source Code

skillshare coupon code
Get Discount on Top EdTech Compnies
  • 45% Discount on SkillShare
  • 10% Discount on KodeKoloud
  • 30% Discount on AlmaBetter
  • 10% Discount on Coding Ninjas
  • Upto 80% Discount on GeeksforGeeks
← Previous Post
Next Post →
CodeWithCurious Let's Learn Together !

CodeWithCurious is a Best Place to Learn & grow your Career in IT sector. Best Content on the latest technology in including C, C++, Java, Python, Sql, Web development & Interview Preparation Material free of cost.

Info

  • Home
  • Projects
  • E books
  • Blogs
  • About Us

Support

  • Contact us
  • Privacy Policy
  • Terms & Conditions
  • Affiliate Discloser

Follow us for more!

© 2025 All Rights Reserved CodeWithCurious