Contact us...Newsletter
dzosoft.com - How to do it ?
dzosoft- order by asc dzosoft- order by desc

 
 
 

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>

How to do it ? download and install software

 

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;
	}

Luxury Rental Cars

Now let's see the result

Download the example

Happy Coding! 😇
dzosoft
dzosoft
Auto Europe vous offre des promotions sur les autos, les vols, et les hôtels.
Reviews of dzosoft.com   Copyright © 2022  -  dzosoft.com  All rights reserved.  
dzosoft- How to do it ?
What they are cookies
Like most websites, we use data file small
dimensions that are saved on your computer, tablet, mobile phone or other device
Mobile (collectively referred to as 'device') to record certain data whenever
login or interact with our sites, services, apps, messaging systems
and strumenti.I names and specific types of cookies used can change over time.
To help you better understand the rules and \ 'use of such technology, the following are
some terms and their definitions:
Cookies: small text files (usually formed by letters and numbers) that are saved
in memory of the browser or the device when you visit a website or display a message.
Cookies enable a website to recognize a particular device or browser. There
different types of cookies:
Session cookies expire at the end of the browser session and allow us to
connect your actions during that specific session.
Persistent cookies are instead stored in your device even after the end
the browser session and let you remember your preferences or actions at multiple sites.
First-party cookies are set by the site you're visiting.
The third-party cookies are set by a third party site than the site you are visiting.
Cookies can be disabled or removed using the tools available in most
browsers. The cookie preferences must be set separately
for each browser used, because each offers features and specific options.
dzosoft.com - How to do it ?
Licenza Creative Commons
How to do it ?    - download & install software     is licensed under license Creative Commons Attribution - Non-commercial - Share alike 4.0 International.