mirror of
https://gitea.smigz.com/smiggiddy/odin-codeprojects.git
synced 2024-12-26 06:20:42 -05:00
feat: added div for forms
This commit is contained in:
parent
d0ca652845
commit
261c0c7815
2 changed files with 53 additions and 4 deletions
|
@ -3,4 +3,48 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-input {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row input[type='text'] {
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
border: 1px solid #D6D9DC;
|
||||||
|
border-radius: 3px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 7px;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row label {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media only screen and (min-width: 700px) {
|
||||||
|
.form {
|
||||||
|
width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-row {
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start; /* To avoid stretching */
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
.form-row input[type='text'] {
|
||||||
|
width: 250px;
|
||||||
|
height: initial;
|
||||||
|
}
|
||||||
|
.form-row label {
|
||||||
|
text-align: right;
|
||||||
|
width: 120px;
|
||||||
|
margin-top: 7px;
|
||||||
|
padding-right: 20px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -17,17 +17,22 @@
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<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">
|
||||||
<fieldset>
|
<div class="form-input">
|
||||||
|
|
||||||
<label for="name">Name</label>
|
<label for="name">Name</label>
|
||||||
<input type="text" name="" id="name" placeholder="Enter your name.">
|
<input type="text" name="" id="name" placeholder="Enter your name.">
|
||||||
|
</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">
|
<input type="email" name="email" id="email" placeholder="you@example.com">
|
||||||
|
</div>
|
||||||
|
<div class="form-input">
|
||||||
<label for="password">Password</label>
|
<label for="password">Password</label>
|
||||||
<input type="password" name="" id="password">
|
<input type="password" name="" id="password">
|
||||||
|
</div>
|
||||||
|
<div class="form-input">
|
||||||
<label for="password_confirmation">Confirm Password</label>
|
<label for="password_confirmation">Confirm Password</label>
|
||||||
<input type="password" name="" id="password_confirmation">
|
<input type="password" name="" id="password_confirmation">
|
||||||
</fieldset>
|
</div>
|
||||||
<button type="submit">Sign Up</button>
|
<button type="submit">Sign Up</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue