Breaking News: Grepper is joining You.com. Read the official announcement!

fix the first name input field and last name input field so that there is a gap in between them where one does not overlap the other

Lusaduma Mata answered on October 5, 2023 Popularity 1/10 Helpfulness 1/10

answer fix the first name input field and last name input field so that there is a gap in between them where one does not overlap the other

fix the first name input field and last name input field so that there is a gap in between them where one does not overlap the other

Comment

<!DOCTYPE html>
<html>
	<head>
		<title>Page Title</title>
		<style>
			.form {
			  display: flex;
			  flex-direction: column;
			  gap: 10px;
			  max-width: 350px;
			  background-color: #fff;
			  padding: 20px;
			  border-radius: 20px;
			  position: relative;
			}

			.title {
			  font-size: 28px;
			  color: royalblue;
			  font-weight: 600;
			  letter-spacing: -1px;
			  position: relative;
			  display: flex;
			  align-items: center;
			  padding-left: 30px;
			}

			.title::before, .title::after {
			  position: absolute;
			  content: "";
			  height: 16px;
			  width: 16px;
			  border-radius: 50%;
			  left: 0px;
			  background-color: royalblue;
			}

			.title::before {
			  width: 18px;
			  height: 18px;
			  background-color: royalblue;
			}

			.title::after {
			  width: 18px;
			  height: 18px;
			  animation: pulse 1s linear infinite;
			}

			.message, .signin {
			  color: rgba(88, 87, 87, 0.822);
			  font-size: 14px;
			}

			.signin {
			  text-align: center;
			}

			.signin a {
			  color: royalblue;
			}

			.signin a:hover {
			  text-decoration: underline royalblue;
			}

			.flex {
			  display: flex;
			  flex-direction: column; /* Change to column */
			  width: 100%;
			  gap: 10px; /* Increase the gap */
			}

			.form label {
			  position: relative;
			}

			.form label .input {
			  width: 100%;
			  padding: 10px 10px 20px 10px;
			  outline: 0;
			  border: 1px solid rgba(105, 105, 105, 0.397);
			  border-radius: 10px;
			}

			.form label .input + span {
			  position: absolute;
			  left: 10px;
			  top: 15px;
			  color: grey;
			  font-size: 0.9em;
			  cursor: text;
			  transition: 0.3s ease;
			}

			.form label .input:placeholder-shown + span {
			  top: 15px;
			  font-size: 0.9em;
			}

			.form label .input:focus + span, .form label .input:valid + span {
			  top: 30px;
			  font-size: 0.7em;
			  font-weight: 600;
			}

			.form label .input:valid + span {
			  color: green;
			}

			.submit {
			  border: none;
			  outline: none;
			  background-color: royalblue;
			  padding: 10px;
			  border-radius: 10px;
			  color: #fff;
			  font-size: 16px;
			  transform: .3s ease;
			}

			.submit:hover {
			  background-color: rgb(56, 90, 194);
			}

			@keyframes pulse {
			  from {
			    transform: scale(0.9);
			    opacity: 1;
			  }

			  to {
			    transform: scale(1.8);
			    opacity: 0;
			  }
			}
		</style>
	</head>
	<body>
		<form class="form">
			<p class="title">Register </p>
			<p class="message">Signup now and get full access to our app. </p>
			<div class="flex">
				<label>
					<input required="" placeholder="" type="text" class="input">
					<span>Firstname</span>
				</label>
				<label>
					<input required="" placeholder="" type="text" class="input">
					<span>Lastname</span>
				</label>
			</div>
			<label>
				<input required="" placeholder="" type="email" class="input">
				<span>Email</span>
			</label>
			<label>
				<input required="" placeholder="" type="password" class="input">
				<span>Password</span>
			</label>
			<label>
				<input required="" placeholder="" type="password" class="input">
				<span>Confirm password</span>
			</label>
			<button class="submit">Submit</button>
			<p class="signin">Already have an account? <a href="#">Sign in</a></p>
		</form>
	</body>
</html>

Popularity 1/10 Helpfulness 1/10 Language html

Source: chat.openai.com

Tags: between html input-field overlap where

Link to this answer
Share Copy Link

Contributed on Oct 05 2023

Lusaduma Mata

0 Answers Avg Quality 2/10

fix the first name input field and last name input field so that there is a gap in between them where one does not overlap the other

Contents

More Related Answers

fix the first name input field and last name input field so that there is a gap in between them where one does not overlap the other

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.