smig/odin-codespace
1
0
Fork 0
mirror of https://gitea.smigz.com/smiggiddy/odin-codeprojects.git synced 2025-05-10 04:05:22 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add more styling

Browse source
This commit is contained in:
Smigz 2023-11-03 17:00:22 -04:00
parent 261c0c7815
commit 0cea846e12
2 changed files with 44 additions and 28 deletions
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 {
justify-content: center;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}
.form {
width: 50vw;
}
.form-input {
margin-bottom: 40px;
display: flex;
@ -13,7 +17,9 @@
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;
border: 1px solid #D6D9DC;
border-radius: 3px;
@ -22,29 +28,38 @@
font-size: 14px;
}
.form-row label {
.form-input label {
margin-bottom: 15px;
}
@media only screen and (min-width: 700px) {
.container {
height: 95vh;
}
.sidebar {
width: 50vw;
}
.form {
width: 600px;
width: 50vw;
}
.form-row {
.form-input {
flex-direction: row;
align-items: flex-start; /* To avoid stretching */
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;
height: initial;
}
.form-row label {
.form-input label {
text-align: right;
width: 120px;
margin-top: 7px;
padding-right: 20px;
}
}
}