odin-codespace/signup_form/css/style.css

114 lines
2 KiB
CSS
Raw Normal View History

2023-11-06 10:23:32 -05:00
:root {
--main-bg: #C4DFDF;
--light-bg: #F8F6F4;
}
2023-11-01 15:00:51 -04:00
.container {
justify-content: center;
display: flex;
2023-11-03 17:00:22 -04:00
align-items: center;
2023-11-01 15:00:51 -04:00
align-content: center;
2023-11-05 19:12:54 -05:00
height: 100vh;
margin: 0;
2023-11-06 10:23:32 -05:00
background-color: var(--light-bg);
2023-11-02 16:28:30 -04:00
}
2023-11-06 10:03:59 -05:00
/* .sidebar {
position: relative;
} */
2023-11-03 17:00:22 -04:00
.form {
2023-11-05 19:12:54 -05:00
width: 60vw;
2023-11-03 17:00:22 -04:00
}
2023-11-02 16:28:30 -04:00
.form-input {
margin-bottom: 40px;
display: flex;
justify-content: flex-start;
flex-direction: column;
}
2023-11-03 17:00:22 -04:00
.form-input input[type='text'],
.form-input input[type='password'],
.form-input input[type='email'] {
2023-11-02 16:28:30 -04:00
background-color: #FFFFFF;
border: 1px solid #D6D9DC;
border-radius: 3px;
width: 100%;
padding: 7px;
font-size: 14px;
}
2023-11-04 10:05:32 -04:00
.form-input label {
2023-11-05 15:26:13 -05:00
margin-bottom: 5px;
2023-11-04 10:05:32 -04:00
}
2023-11-03 17:00:22 -04:00
2023-11-04 10:05:32 -04:00
@media only screen and (min-width: 700px) {
2023-11-03 17:00:22 -04:00
.sidebar {
width: 50vw;
2023-11-05 19:12:54 -05:00
margin-right: 10px;
2023-11-03 17:00:22 -04:00
}
2023-11-02 16:28:30 -04:00
.form {
2023-11-05 19:12:54 -05:00
margin-left: 30px;
padding: 20px;
2023-11-02 16:28:30 -04:00
}
2023-11-05 15:26:13 -05:00
form {
display: flex;
flex-wrap: wrap;
2023-11-05 19:12:54 -05:00
width: 700px;
2023-11-05 15:26:13 -05:00
gap: 20px;
}
2023-11-02 16:28:30 -04:00
2023-11-03 17:00:22 -04:00
.form-input {
2023-11-02 16:28:30 -04:00
align-items: flex-start; /* To avoid stretching */
2023-11-05 15:26:13 -05:00
margin-bottom: 10px;
2023-11-02 16:28:30 -04:00
}
2023-11-03 17:00:22 -04:00
.form-input input[type='text'],
.form-input input[type='password'],
.form-input input[type='email'] {
2023-11-05 19:12:54 -05:00
width: 290px;
2023-11-02 16:28:30 -04:00
height: initial;
}
2023-11-03 17:00:22 -04:00
.form-input label {
2023-11-05 19:12:54 -05:00
width: 290px;
}
/* Left side of the screen */
.sidebar {
background-image: url(../static/background.jpg);
background-position: center;
background-size: auto;
background-repeat: no-repeat;
height: 100%;
2023-11-02 16:28:30 -04:00
}
2023-11-06 10:03:59 -05:00
.logo {
position: relative;
background-color: rgb(22, 72, 99, 0.7);
top: 35vh;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.logo img {
height: 14vh;
}
2023-11-06 10:23:54 -05:00
.logo h1 {
font-weight: 900;
font-size: 3rem;
}
2023-11-04 10:05:32 -04:00
}
2023-11-05 19:12:54 -05:00
body {
margin: 0;
padding: 0;
2023-11-06 10:03:59 -05:00
font-family: 'Montserrat', sans-serif;
2023-11-06 10:23:54 -05:00
font-size: 16px;
2023-11-05 19:12:54 -05:00
}