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: add more styling

Browse source
This commit is contained in:
Mike 2023-11-03 17:00:22 -04:00
parent 261c0c7815
commit 0cea846e12
2 changed files with 44 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
signup_form/css/style.css
View file

@ -1,10 +1,14 @@
.container { .container {
justify-content: center; justify-content: center;
display: flex; display: flex;
flex-direction: column; align-items: center;
align-content: center; align-content: center;
} }
.form {
width: 50vw;
}
.form-input { .form-input {
margin-bottom: 40px; margin-bottom: 40px;
display: flex; display: flex;
@ -13,7 +17,9 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.form-row input[type='text'] { .form-input input[type='text'],
.form-input input[type='password'],
.form-input input[type='email'] {
background-color: #FFFFFF; background-color: #FFFFFF;
border: 1px solid #D6D9DC; border: 1px solid #D6D9DC;
border-radius: 3px; border-radius: 3px;
@ -22,29 +28,38 @@
font-size: 14px; font-size: 14px;
} }
.form-row label { .form-input label {
margin-bottom: 15px; margin-bottom: 15px;
} }
@media only screen and (min-width: 700px) { @media only screen and (min-width: 700px) {
.container {
height: 95vh;
}
.sidebar {
width: 50vw;
}
.form { .form {
width: 600px; width: 50vw;
} }
.form-row { .form-input {
flex-direction: row; flex-direction: row;
align-items: flex-start; /* To avoid stretching */ align-items: flex-start; /* To avoid stretching */
margin-bottom: 20px; margin-bottom: 20px;
} }
.form-row input[type='text'] { .form-input input[type='text'],
.form-input input[type='password'],
.form-input input[type='email'] {
width: 250px; width: 250px;
height: initial; height: initial;
} }
.form-row label { .form-input label {
text-align: right; text-align: right;
width: 120px; width: 120px;
margin-top: 7px; margin-top: 7px;
padding-right: 20px; padding-right: 20px;
} }
} }

41
signup_form/index.html
View file

@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Join our Awesome Mailing list!</title> <title>Join Our Awesome Mailing list!</title>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet">
@ -16,27 +16,28 @@
</div> </div>
<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">
<div class="form-input"> <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>
<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"> <input type="email" name="email" id="email" placeholder="you@example.com">
</div> </div>
<div class="form-input"> <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>
<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="" id="password_confirmation"> <input type="password" name="" id="password_confirmation">
</div> </div>
<button type="submit">Sign Up</button> <button type="submit">Sign Up</button>
</form> </form>
</div> </div>
</div> </div>
<script src="js/script.js"></script> <script src="js/script.js"></script>
</body> </body>
</html> </html>