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

12
signup_form/index.html
View file

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