Open Menu dzosoft
Close Menu dzosoft

   ALL ABOUT COMPUTER SCIENCE AND TECHNOLOGY


                             




Dazzle with your smile!

Publish perfectly-optimized content in 1-click









 
 
 

How to create sign up form with HTML and CSS

 
As you can see the markup is quite simple, image ,some texts, input boxes and button

 

Step 1

 

HTML

 
I downloaded the image for free, from the website Darkmoon_Art of Pixabay
 
How to create sign up form with HTML and CSS
 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link rel="stylesheet" href="how-to-create-sign-up-html-css.css">
</head>
<body>
	<section>
	<div class="container">
	<div class="user">
		<div class="loginPicture"><img src="how-to-create-sign-up-html-css.jpg" width="450px" height="500px" alt=""></div>
			<div class="loginForm">
				<form action="#">
					<h2>Sign In</h2>
					<input type="text" name="username" placeholder="Username">
					<input type="password" name="password" placeholder="Password">
					<input type="Submit" name="" value="Login">
					<p class="logIn">Don't have an account ? <a href="#" onclick="toggleForm();"> Sign Up</a></p>
				</form> 
			</div>
	</div>
	</div>
	</section>
</body>
</html>

 

Step 2


 

Cascading Style Sheets (CSS)

 

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

section { position: relative; min-height: 100vh; background: #E0DEDB; justify-content: center; align-items: center; padding: 20px; }
section .container { position: relative; width: 800px; height: 500px; background: #fff; box-shadow: 0 15px 50px rgb(0 0 0 / 10%); overflow: hidden; left: 200px; top: 80px;
}

section .container .user { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; }
section .container .user .loginPicture { position: relative; width: 50%; height: 100%; background: #fff; transition: 0.5s ; }
section .container .user .loginPicture img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
section .container .user .loginForm { position: relative; width: 50%; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; padding: 40px; transform: 0.5s; }
section .container .user .loginForm form h2 { font-size: 18px; font-weight: 600; letter-spacing: 2px; text-align: center; width: 100%; margin-bottom: 10px; color: #555; }
section .container .user .loginForm form input { position: relative; width: 100%; padding: 10px; background: #D7D9DA; color: #000; border: none; outline: none; box-shadow: none; margin: 8px 0; font-size: 14px; letter-spacing: 1px; font-weight: 300; }
section .container .user .loginForm form input[type="submit"] { max-width: 100px; background: #63A284; color: #fff; cursor: pointer; font-size: 14px; font-weight: 500; letter-spacing: 1px; transition: 0.5s;
}
section .container .user .loginForm form .logIn { position: relative; margin-top: 20px; font-size: 12px; letter-spacing: 1px; font-weight: 300; }
section .container .user .loginForm form .logIn a { font-weight: 600; text-decoration: none; color: #63A284; cursor: pointer;
}
section .container .loginbox { pointer-events: none; }
input { color: #fff; }

Now let's see the result

Download the example


Happy Coding! 😇

It might also interest you


How can we do animations with only CSS

How to create horizontal menu in CSS

How to create menu with css and javascript

How do you make a border radius round in CSS?

How To make a responsive website

How to create GLITCH effect with CSS

How to change the style of the scrollbars

How to create a Focus effect on hover using CSS

How to create a footer using Bootstrap: tutorial and example


Leave comment
          

Save nickname and email in this browser for the next time.



Loading...     
close publicity
BUILD THE MASS IN A FEW MONTHS THAT OTHERS BUILD IN YEARS!