smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2024-12-26 06:20:42 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: fixed form field alignment

Browse source
This commit is contained in:
Mike 2023-11-05 15:26:13 -05:00
parent 4f8b5e5cdc
commit 07ce4de979
2 changed files with 16 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
signup_form/css/style.css
View file

@ -14,7 +14,6 @@
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: wrap;
}
.form-input input[type='text'],
@ -29,7 +28,7 @@
}
.form-input label {
margin-bottom: 15px;
margin-bottom: 5px;
}
@media only screen and (min-width: 700px) {
@ -42,11 +41,16 @@
.form {
width: 50vw;
}
form {
display: flex;
flex-wrap: wrap;
width: 600px;
gap: 20px;
}
.form-input {
flex-direction: row;
align-items: flex-start; /* To avoid stretching */
margin-bottom: 20px;
margin-bottom: 10px;
}
.form-input input[type='text'],
.form-input input[type='password'],
@ -55,10 +59,7 @@
height: initial;
}
.form-input label {
text-align: right;
width: 120px;
margin-top: 7px;
padding-right: 20px;
width: 250px;
}
}

10
signup_form/index.html
View file

@ -18,23 +18,25 @@
<h1 class="call-to-action">Join our mailing list!</h1>
<form action="" method="post">
<div class="form-input">
<label for="name">Name</label>
<label for="name">NAME</label>
<input type="text" name="name" id="name" placeholder="Enter your name." required>
</div>
<div class="form-input">
<label for="email">Email</label>
<label for="email">EMAIL</label>
<input type="email" name="email" id="email" placeholder="you@example.com" required>
</div>
<div class="form-input">
<label for="password">Password</label>
<label for="password">PASSWORD</label>
<input type="password" name="password" id="password" required minlength="8">
</div>
<div class="form-input">
<label for="password_confirmation">Confirm Password</label>
<label for="password_confirmation">CONFIRM PASSWORD</label>
<input type="password" name="password_confirmation" id="password_confirmation" required
minlength="8">
</div>
<div class="form-input">
<button type="submit">Sign Up</button>
</div>
</form>
</div>
</div>